@extends('layouts.app')

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

@push('stylesheets')
@include('reports.partials.mec-listing-table-styles')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
<style>
    #mecSimsReportsCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    @media (max-width: 768px) {
        #mecSimsReportsCard .table-responsive { overflow-x: auto; }
    }
    #mecSimsReportsCard tbody tr.report-mec-listing-row { cursor: pointer; }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <x-table-filter-card
            action="{{ route('mec-sims.reports.index') }}"
            id="mecSimsReportsFilterForm"
            :resetUrl="route('mec-sims.reports.index')"
            :title="__('FIND REPORTS')"
            :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 ?? []" />
        <div class="card pms-mec-reports-listing-card pms-index-card" id="mecSimsReportsCard">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between w-100 gap-2">
                <div class="d-flex flex-wrap align-items-center flex-fill min-width-0 gap-3">
                    @include('reports.partials.mec-listing-scheme-name-toggle')
                </div>
            </div>
            <div class="card-body p-3">
                <p class="text-primary small mb-3">{{ __('Published reports for schemes in your department scope. Click a row to open the full report preview (read-only).') }}</p>
                <div class="table-responsive">
                    @include('mec-sims.reports.partials.listing-table', [
                        'tableId' => 'tblMecSimsReports',
                        'reportRows' => $reportRows,
                    ])
                </div>
                <div class="pms-index-card__pagination">
                    <div class="pms-index-card__pagination-perpage">
                        {!! view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => route('mec-sims.reports.index')])->render() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
@include('reports.partials.mec-listing-scheme-name-toggle-scripts')
<script>
(function () {
    var tableSelector = '#tblMecSimsReports';
    var listingMode = 'mec-sims-reports';
    var loadingHtml = '<div class="text-center py-4 text-muted"><div class="spinner-border" role="status"></div><p class="mt-2 mb-0">{{ __("Loading") }}…</p></div>';

    function bindMecListingRowClicks() {
        var rowSelector = 'tr.report-mec-listing-row';

        $(tableSelector + ' tbody').off('click.mecListingRow').on('click.mecListingRow', rowSelector, function () {
            var wizardUrl = this.getAttribute('data-workflow-review-url');
            if (wizardUrl) {
                window.open(wizardUrl, '_blank', 'noopener');
                return;
            }
        });
    }

    $(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 published reports found.')));
        PmsIndexDataTable.initLaravelPaginated(tableSelector, {
            scrollX: true,
            ordering: false,
        });

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