@extends('layouts.app')

@section('title', __('MEC SIMS Visits'))

@push('stylesheets')
@include('reports.partials.mec-listing-table-styles')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
<style>
    #mecSimsVisitsCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    @media (max-width: 768px) {
        #mecSimsVisitsCard .table-responsive { overflow-x: auto; }
    }
    #mecSimsVisitsCard .scheme-name-link {
        cursor: pointer;
        text-decoration: none;
    }
    #mecSimsVisitsCard .scheme-name-link:hover,
    #mecSimsVisitsCard .scheme-name-link:focus {
        text-decoration: underline;
    }
</style>
@endpush

@section('contents')
@php
    $visitsToolbar = '<div class="d-flex flex-wrap align-items-center justify-content-between w-100 gap-2">'
        . '<div class="d-flex flex-wrap align-items-center">' . view('reports.partials.mec-listing-scheme-name-toggle')->render() . '</div>'
        . '<div class="d-flex flex-wrap align-items-center gap-2">'
            . '<p class="text-primary mb-0 small">' . e(__('Click a scheme name to view visit details.')) . '</p>'
        . '</div>'
        . '</div>';
@endphp
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12" id="mecSimsVisitsCard">
                <x-table-filter-card
                    action="{{ route('mec-sims.visits.index') }}"
                    id="mecSimsVisitsFilterForm"
                    :resetUrl="route('mec-sims.visits.index')"
                    :title="__('FIND VISITS')"
                    :open="trim((string) ($search ?? '')) !== ''"
                >
                    <div class="pms-filter-field">
                        <label for="filter-search">Search</label>
                        <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                               placeholder="Search by scheme, ADP #, UID…" value="{{ $search ?? '' }}">
                    </div>
                </x-table-filter-card>
                <x-active-filter-chips :chips="$activeChips ?? []" />
                <x-layouts.index-card
                    tableId="tblMecSimsVisits"
                    :showCreateButton="false"
                    tableHeading=""
                    :headerToolbar="$visitsToolbar"
                    :perPageSlot="view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => route('mec-sims.visits.index')])"
                    :headers="['ADP #', 'UID', 'Scheme Name', 'Visit Date', 'District']"
                    :sortColumns="['adp_order', 'scheme_uid', 'scheme_name', 'visit_date_order', 'district']"
                    :pagination="$paginator->links('vendor.pagination.bootstrap-4')">
                    @forelse ($rows as $row)
                        @php
                            $st = $row['plan_status'] ?? '';
                            $statusBadgeClass = $st === 'approved' ? 'success' : ($st === 'rejected' ? 'danger' : ($st === 'draft' ? 'secondary' : 'info'));
                            $modalUrl = route('mec-sims.visits.modal-body', ['planScheme' => $row['plan_scheme_id']]);
                        @endphp
                        <tr>
                            
                            <td data-order="{{ $row['adp_order'] }}" class="text-nowrap">{{ $row['adp_number'] }}</td>
                            <td data-order="{{ $row['scheme_uid'] }}" class="text-left text-nowrap pms-report-scheme-select-uid">{{ $row['scheme_uid'] }}</td>
                            <td class="text-left pms-report-scheme-select-name">
                                @php
                                    $schemeNameClass = trim((string) ($row['scheme_name_color_class'] ?? ''));
                                @endphp
                                @if (user_can_open_mec_sims_visit_modal())
                                <a
                                    href="#"
                                    class="scheme-name-link scheme-name-text font-weight-bold mec-sims-visit-modal-trigger {{ $schemeNameClass }}"
                                    data-modal-url="{{ $modalUrl }}"
                                    data-scheme-name="{{ e($row['scheme_name']) }}"
                                    data-full-name="{{ e($row['scheme_name']) }}"
                                    data-truncated="{{ e($row['scheme_name_truncated'] ?? $row['scheme_name']) }}"
                                    title="{{ __('View visit details') }}"
                                >{{ $row['scheme_name_truncated'] ?? $row['scheme_name'] }}</a>
                                @else
                                <span class="scheme-name-text font-weight-bold {{ $schemeNameClass }}">{{ $row['scheme_name_truncated'] ?? $row['scheme_name'] }}</span>
                                @endif
                            </td>
                            <td data-order="{{ $row['visit_date_order'] }}" class="text-nowrap">{{ $row['visit_date'] }}</td>
                            <td class="text-left pms-report-scheme-select-district">{{ $row['district'] }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5">
                                <x-table-empty-state
                                    :state="request()->anyFilled(['search']) ? 'no-results' : 'empty'"
                                    :resetUrl="route('mec-sims.visits.index')"
                                />
                            </td>
                        </tr>
                    @endforelse
                </x-layouts.index-card>
            </div>
        </div>
    </div>
</section>

@if (user_can_open_mec_sims_visit_modal())
<div class="modal fade" id="mecSimsVisitDetailsModal" tabindex="-1" role="dialog" aria-labelledby="mecSimsVisitDetailsModalLabel" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mecSimsVisitDetailsModalLabel">{{ __('Visit details') }} – <span id="mecSimsVisitDetailsModalTitle"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="mecSimsVisitDetailsModalBody">
                <div class="text-center py-5 text-muted">
                    <div class="spinner-border" role="status"></div>
                    <p class="mt-2 mb-0">{{ __('Loading…') }}</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('Close') }}</button>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script>
(function () {
    var tableSelector = '#tblMecSimsVisits';

    $(function () {
        var $tbl = $(tableSelector);
        if (!$tbl.length || typeof window.PmsIndexDataTable === 'undefined') {
            return;
        }

        if ($.fn.DataTable.isDataTable($tbl)) {
            $tbl.DataTable().destroy();
        }

        $tbl.attr('data-pms-empty-message', @json(__('No approved visits found for your department schemes.')));

        PmsIndexDataTable.init(tableSelector, {
            scrollX: true,
            lengthChange: false,
            paging: false,
            ordering: false
        });

        PmsIndexDataTable.attachServerSort(tableSelector, {
            baseUrl: '{{ request()->url() }}',
            currentQuery: @json(request()->except(['page'])),
            currentSortCol: '{{ request('sort_col', '') }}',
            currentSortDir: '{{ request('sort_dir', 'asc') }}'
        });
    });

    $(document).on('click', '.mec-sims-visit-modal-trigger', function (e) {
        e.preventDefault();
        var $t = $(this);
        var url = $t.data('modal-url');
        var name = $t.data('scheme-name') || @json(__('Scheme'));
        var $modal = $('#mecSimsVisitDetailsModal');
        var $body = $('#mecSimsVisitDetailsModalBody');
        $('#mecSimsVisitDetailsModalTitle').text(name);
        $body.html('<div class="text-center py-5 text-muted"><div class="spinner-border" role="status"></div><p class="mt-2 mb-0">' + @json(__('Loading…')) + '</p></div>');
        $modal.modal('show');
        $.get(url)
            .done(function (html) {
                $body.html(html);
            })
            .fail(function (xhr) {
                var msg = @json(__('Failed to load visit details.'));
                if (xhr.status === 403) {
                    msg = @json(__('You do not have permission to view this visit.'));
                } else if (xhr.status === 404) {
                    msg = @json(__('Visit not found.'));
                }
                $body.html('<div class="alert alert-danger mb-0">' + msg + '</div>');
            });
    });
})();
</script>
@include('reports.partials.mec-listing-scheme-name-toggle-scripts')
@endpush