@extends('layouts.app')

@section('title', __('FilMS Historical Data'))

@push('stylesheets')
@include('reports.partials.mec-listing-table-styles')
@include('partials.filter-card-styles')
@include('partials.collapsible-filter-styles')
@include('partials.index-datatable-styles')
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4-custom.css') }}">
<style>
    .report-filter-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 1.5rem;
    }
    .report-filter-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .report-filter-field label {
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #212529;
        margin-bottom: 0.35rem;
    }
    .report-filter-field .form-control {
        border-radius: 6px;
        min-height: 38px;
        background: #fff;
    }
    .report-filter-field select.form-control {
        min-width: 160px;
    }
    .report-filter-field .select2-container {
        min-width: 160px;
    }
    .report-filter-field .select2-container--bootstrap4 .select2-selection--single {
        min-height: 38px;
        height: auto !important;
        border-radius: 6px;
        display: flex;
        align-items: center;
    }
    .report-filter-field .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        line-height: 1.5;
        padding: 0.375rem 1.75rem 0.375rem 0.5rem;
        margin-top: 0;
    }
    .report-filter-field input.form-control {
        min-width: 140px;
    }
    .report-filter-field input[name="scheme_name"] {
        min-width: 180px;
    }
    #filmsHistoricalTableCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    @media (max-width: 768px) {
        #filmsHistoricalTableCard .table-responsive { overflow-x: auto; }
    }
    #filmsHistoricalTableCard tbody tr.films-historical-listing-row { cursor: pointer; }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        @php
            $filmsFiltersOpen = trim((string) request('search', '')) !== ''
                || trim((string) ($filters['uid'] ?? '')) !== ''
                || trim((string) ($filters['adp_number'] ?? '')) !== ''
                || trim((string) ($filters['adp_year'] ?? '')) !== ''
                || trim((string) ($filters['scheme_name'] ?? '')) !== ''
                || trim((string) ($filters['assessment_status'] ?? '')) !== '';
        @endphp
        <x-collapsible-filter-card
            :title="__('FIND RECORDS')"
            collapse-id="filmsHistoricalFiltersCollapse"
            form-id="filmsHistoricalFilterForm"
            :reset-url="route('films.historical.index')"
            :open="$filmsFiltersOpen"
        >
            <div class="card-body">
                <form method="get" class="report-filter-form" id="filmsHistoricalFilterForm" action="{{ route('films.historical.index') }}">
                    @if (! empty($perPage))
                        <input type="hidden" name="per_page" value="{{ (int) $perPage }}">
                    @endif
                    <div class="report-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, UID, ADP #…') }}" value="{{ request('search', '') }}">
                    </div>
                    <div class="report-filter-field">
                        <label for="filter_uid">{{ __('UID') }}</label>
                        <input type="text" name="uid" id="filter_uid" class="form-control form-control-sm"
                               placeholder="{{ __('Search UID') }}" value="{{ $filters['uid'] ?? '' }}">
                    </div>
                    <div class="report-filter-field">
                        <label for="filter_adp_number">{{ __('ADP') }}</label>
                        <input type="text" name="adp_number" id="filter_adp_number" class="form-control form-control-sm"
                               placeholder="{{ __('Search ADP') }}" value="{{ $filters['adp_number'] ?? '' }}">
                    </div>
                    <div class="report-filter-field">
                        <label for="filter_adp_year">{{ __('Fiscal Year') }}</label>
                        <select name="adp_year" id="filter_adp_year" class="form-control form-control-sm report-filter-select">
                            <option value="">{{ __('All Years') }}</option>
                            @foreach (($fiscalYearOptions ?? []) as $year)
                                <option value="{{ $year }}" @selected(($filters['adp_year'] ?? '') === $year)>{{ $year }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="report-filter-field">
                        <label for="filter_scheme_name">{{ __('Scheme Name') }}</label>
                        <input type="text" name="scheme_name" id="filter_scheme_name" class="form-control form-control-sm"
                               placeholder="{{ __('Search scheme') }}" value="{{ $filters['scheme_name'] ?? '' }}">
                    </div>
                    <div class="report-filter-field">
                        <label for="filter_assessment">{{ __('Report Status') }}</label>
                        <select name="assessment_status" id="filter_assessment" class="form-control form-control-sm report-filter-select">
                            <option value="">{{ __('All Report Statuses') }}</option>
                            @foreach (($assessmentOptions ?? []) as $value => $label)
                                <option value="{{ $value }}" @selected(($filters['assessment_status'] ?? '') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="report-filter-actions collapsible-filter-card__legacy-actions">
                        <button type="submit" class="btn btn-primary btn-sm pms-btn-gradient">{{ __('Filter') }}</button>
                    </div>
                </form>
            </div>
        </x-collapsible-filter-card>

        <x-active-filter-chips :chips="$activeChips ?? []" />

        <div class="card pms-mec-reports-listing-card pms-index-card" id="filmsHistoricalTableCard">
            <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">
                    <h3 class="card-title mb-0 text-truncate">{{ __('FilMS Historical Data') }}</h3>
                    @include('reports.partials.mec-listing-scheme-name-toggle')
                </div>
            </div>
            <div class="card-body p-3">
                <div class="table-responsive">
                    @include('films.historical.partials.listing-table', [
                        'tableId' => 'filmsHistoricalTable',
                        'listingRows' => $listingRows ?? [],
                    ])
                </div>
                @if ($records->hasPages())
                    <div class="pms-index-card__pagination">
                        <div class="pms-index-card__pagination-perpage">
                            {!! view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => route('films.historical.index')])->render() !!}
                        </div>
                        <div class="pms-index-card__pagination-links">
                            {!! $records->links('vendor.pagination.bootstrap-4') !!}
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="modal fade" id="films-historical-detail-modal" tabindex="-1" role="dialog" aria-labelledby="films-historical-detail-modal-title" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="films-historical-detail-modal-title">
                        <i class="fas fa-file-alt mr-2"></i>{{ __('FilMS Record') }}
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="films-historical-modal-body" style="min-height: 120px;"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
@include('partials.collapsible-filter-scripts')
@include('reports.partials.mec-listing-filter-form-scripts')
@include('reports.partials.mec-listing-scheme-name-toggle-scripts')
<script>
(function () {
    var tableSelector = '#filmsHistoricalTable';
    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>';
    var failMsg = @json(__('Failed to load FilMS record details.'));
    var modalBase = @json(rtrim(url('/films/historical/records'), '/'));

    function bindFilmsHistoricalRowClicks() {
        var modal = $('#films-historical-detail-modal');
        var bodyEl = document.getElementById('films-historical-modal-body');

        $(tableSelector + ' tbody').off('click.filmsHistoricalRow').on('click.filmsHistoricalRow', 'tr.films-historical-listing-row', function () {
            var recordId = this.getAttribute('data-record-id');
            if (!recordId || !bodyEl) {
                return;
            }
            bodyEl.innerHTML = loadingHtml;
            $.ajax({
                url: modalBase + '/' + encodeURIComponent(recordId) + '/modal-body',
                method: 'GET',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            }).done(function (html) {
                bodyEl.innerHTML = html;
            }).fail(function (xhr) {
                bodyEl.innerHTML = '<p class="text-muted text-center py-4 mb-0">' + failMsg + ' (HTTP ' + (xhr.status || '?') + ').</p>';
            });
            modal.modal('show');
        });
    }

    $(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 FilMS records yet.')));

        PmsIndexDataTable.initLaravelPaginated(tableSelector, {
            searching: true,
            scrollX: true,
            columnDefs: @json(\App\Support\Films\FilmsHistoricalListingTable::dataTableColumnDefs()),
            colvisPersistKey: @json('films-historical-listing-uid-' . (int) auth()->id()),
            initComplete: function () {
                bindFilmsHistoricalRowClicks();
            }
        });

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