@extends('layouts.app')

@section('title', __('Monthly Report'))

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
@include('partials.collapsible-filter-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>
    #monthlyReportCard .table-responsive { overflow-x: auto; }
    #monthlyReportCard .card-header .card-title { min-width: 0; }
    #monthlyReportCard table.pms-index-datatable thead th,
    #monthlyReportCard .dataTables_scrollHead th,
    #tblMonthlyReport thead th {
        background: #4ea9cc;
        color: #000;
        font-weight: 700;
        text-align: center !important;
        font-size: 14px;
        vertical-align: middle;
        white-space: normal;
        line-height: 16px;
    }
    #monthlyReportCard table.pms-index-datatable tbody td,
    #monthlyReportCard .dataTables_scrollBody td,
    #tblMonthlyReport tbody td {
        font-size: 13px;
        vertical-align: middle;
        text-align: center !important;
    }
    #tblMonthlyReport tbody td.coordinate {
        background: #ffff00;
        font-variant-numeric: tabular-nums;
    }
    #tblMonthlyReport tbody td.name-cell {
        line-height: 15px;
        overflow-wrap: anywhere;
    }
    #tblMonthlyReport tbody tr:hover td { background-color: #f3f8fb; }
    #tblMonthlyReport tbody tr:hover td.coordinate { background-color: #ffff00; }
    .dt-buttons { display: none !important; }

    .monthly-filter-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
    }
    .monthly-filter-card .card-body { padding: 1rem 1.25rem; }
    .monthly-filter-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .monthly-filter-field label {
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #212529;
        margin-bottom: 0.35rem;
    }
    .monthly-filter-field .form-control,
    .monthly-filter-field .select2-container {
        border-radius: 6px;
        min-height: 34px;
    }
    .monthly-filter-field .select2-container--bootstrap4 .select2-selection--single {
        min-height: 34px;
        height: auto !important;
        border-radius: 6px;
        display: flex;
        align-items: center;
    }
    .monthly-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;
    }
    .monthly-filter-field input.form-control { min-width: 100px; }
    .monthly-filter-field--multiselect .select2-container {
        width: 100% !important;
        min-width: 10rem;
    }
    .monthly-filter-field--multiselect .select2-container--bootstrap4 .select2-selection--multiple {
        min-height: 34px;
        height: auto !important;
        border-radius: 6px;
    }
    .monthly-filter-multiselect:not(.select2-hidden-accessible) {
        min-height: 34px;
        max-height: 34px;
        overflow: hidden;
    }
    .monthly-filter-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    .monthly-filter-actions .btn-filter {
        border-radius: 6px;
        padding: 0.4rem 1rem;
        font-weight: 600;
    }
    .monthly-filter-actions .btn-reset {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 6px;
        background: #fff;
        border: 1px solid #dee2e6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #212529;
    }
    .monthly-filter-actions .btn-reset:hover {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

    .monthly-report-tabs .nav-link {
        font-weight: 600;
        border-radius: 6px 6px 0 0;
    }
</style>
@if (($activeTab ?? 'detail') === 'summary')
    <link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet" />
    @include('reports.partials.monthly-report-summary-styles')
@endif
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        @php
            $selectedPlanTypes = is_array($filters['plan_type'] ?? null) ? $filters['plan_type'] : [];
            $selectedRegionIds = is_array($filters['region_id'] ?? null)
                ? array_map(static fn (int $id) => (string) $id, $filters['region_id'])
                : [];
            $monthlyFiltersOpen = \App\Support\MonthlyReportFilters::filtersHaveActiveValues($filters ?? []);
            $activeTab = in_array($activeTab ?? 'detail', ['detail', 'summary'], true) ? $activeTab : 'detail';
            $monthlyTabQuery = is_array($tabQueryParams ?? null) ? $tabQueryParams : request()->except(['page', 'sort_col', 'sort_dir', 'tab']);
            $detailTabUrl = route('reports.monthly-report.index', array_merge($monthlyTabQuery, ['tab' => 'detail']));
            $summaryTabUrl = route('reports.monthly-report.index', array_merge($monthlyTabQuery, ['tab' => 'summary']));
            $listingBaseQuery = array_merge($monthlyTabQuery, ['tab' => 'detail']);
        @endphp
        <x-collapsible-filter-card
            :title="__('FILTERS')"
            collapse-id="monthlyReportFiltersCollapse"
            form-id="monthlyReportFilterForm"
            :reset-url="route('reports.monthly-report.index')"
            :open="$monthlyFiltersOpen"
        >
        <form action="{{ route('reports.monthly-report.index') }}" method="GET" id="monthlyReportFilterForm">
            <input type="hidden" name="per_page" value="{{ (int) ($perPage ?? 25) }}">
            <input type="hidden" name="tab" id="monthlyReportActiveTab" value="{{ $activeTab }}">
            <div class="card-body">
                    <div class="row" style="gap: 0.5rem 1rem;">
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_adp_number">ADP #</label>
                            <select name="adp_number" id="filter_adp_number" class="form-control form-control-sm pms-select2-lookup"
                                data-lookup-url="{{ route('reports.monthly-report.filter-lookup') }}"
                                data-lookup-type="adp"
                                data-selected-value="{{ $filters['adp_number'] ?? '' }}"
                                data-placeholder="Search ADP..."
                                data-allow-clear="true">
                                <option value="">Search ADP...</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_latitude">Lat</label>
                            <input type="text" name="latitude" id="filter_latitude" class="form-control form-control-sm"
                                   value="{{ $filters['latitude'] ?? '' }}" placeholder="Search Lat">
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_longitude">Long</label>
                            <input type="text" name="longitude" id="filter_longitude" class="form-control form-control-sm"
                                   value="{{ $filters['longitude'] ?? '' }}" placeholder="Search Long">
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_assessment_status">Status</label>
                            <select name="assessment_status" id="filter_assessment_status" class="form-control form-control-sm">
                                <option value="">All</option>
                                @foreach ($filterOptions['statuses'] as $status)
                                    <option value="{{ $status }}" {{ ($filters['assessment_status'] ?? '') === $status ? 'selected' : '' }}>{{ $status }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_published_status">Published</label>
                            <select name="published_status" id="filter_published_status" class="form-control form-control-sm">
                                <option value="">All</option>
                                @foreach ($filterOptions['published_statuses'] as $ps)
                                    <option value="{{ $ps }}" {{ ($filters['published_status'] ?? '') === $ps ? 'selected' : '' }}>{{ $ps }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_cost">Cost</label>
                            <input type="text" name="cost" id="filter_cost" class="form-control form-control-sm"
                                   value="{{ $filters['cost'] ?? '' }}" placeholder="Search Cost">
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_department_id">Department</label>
                            <select name="department_id" id="filter_department_id" class="form-control form-control-sm">
                                <option value="">All</option>
                                @foreach ($filterOptions['departments'] as $deptId => $deptName)
                                    <option value="{{ $deptId }}" {{ (string) ($filters['department_id'] ?? '') === (string) $deptId ? 'selected' : '' }}>{{ $deptName }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_location">Location</label>
                            <select name="location" id="filter_location" class="form-control form-control-sm pms-select2-lookup"
                                data-lookup-url="{{ route('reports.monthly-report.filter-lookup') }}"
                                data-lookup-type="location"
                                data-selected-value="{{ $filters['location'] ?? '' }}"
                                data-placeholder="Search Location..."
                                data-allow-clear="true">
                                <option value="">Search Location...</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field monthly-filter-field--multiselect">
                            <label for="filter_region_id">{{ __('Region') }}</label>
                            <select name="region_id[]" id="filter_region_id" class="form-control form-control-sm monthly-filter-multiselect" multiple
                                    data-placeholder="{{ __('All Regions') }}">
                                @foreach ($filterOptions['regions'] as $regionId => $regionName)
                                    <option value="{{ $regionId }}" @selected(in_array((string) $regionId, $selectedRegionIds, true))>{{ $regionName }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_sector_id">Sector</label>
                            <select name="sector_id" id="filter_sector_id" class="form-control form-control-sm pms-select2-lookup"
                                data-lookup-url="{{ route('reports.monthly-report.filter-lookup') }}"
                                data-lookup-type="sector"
                                data-selected-value="{{ $filters['sector_id'] ?? '' }}"
                                data-placeholder="Search Sector..."
                                data-allow-clear="true">
                                <option value="">Search Sector...</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_sub_sector_id">Sub-Sector</label>
                            <select name="sub_sector_id" id="filter_sub_sector_id" class="form-control form-control-sm pms-select2-lookup"
                                data-lookup-url="{{ route('reports.monthly-report.filter-lookup') }}"
                                data-lookup-type="sub_sector"
                                data-selected-value="{{ $filters['sub_sector_id'] ?? '' }}"
                                data-placeholder="Search Sub-Sector..."
                                data-allow-clear="true">
                                <option value="">Search Sub-Sector...</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_scheme_type">Type</label>
                            <select name="scheme_type" id="filter_scheme_type" class="form-control form-control-sm">
                                <option value="">All</option>
                                @foreach ($filterOptions['scheme_types'] as $st)
                                    <option value="{{ $st }}" {{ ($filters['scheme_type'] ?? '') === $st ? 'selected' : '' }}>{{ $st }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_scheme_name">Name of Scheme</label>
                            <select name="scheme_name" id="filter_scheme_name" class="form-control form-control-sm pms-select2-lookup"
                                data-lookup-url="{{ route('reports.monthly-report.filter-lookup') }}"
                                data-lookup-type="scheme_name"
                                data-selected-value="{{ $filters['scheme_name'] ?? '' }}"
                                data-placeholder="Search Scheme..."
                                data-allow-clear="true">
                                <option value="">Search Scheme...</option>
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field monthly-filter-field--multiselect">
                            <label for="filter_plan_type">{{ __('Type of Plan') }}</label>
                            <select name="plan_type[]" id="filter_plan_type" class="form-control form-control-sm monthly-filter-multiselect" multiple
                                    data-placeholder="{{ __('All Types') }}">
                                @foreach ($filterOptions['plan_types'] as $pt)
                                    <option value="{{ $pt }}" @selected(in_array($pt, $selectedPlanTypes, true))>{{ $pt }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_date_field">{{ __('Date') }}</label>
                            <select name="date_field" id="filter_date_field" class="form-control form-control-sm">
                                @foreach (\App\Support\MecReportDateFieldFilter::options() as $dateFieldOption)
                                    <option value="{{ $dateFieldOption['value'] }}" {{ ($filters['date_field'] ?? \App\Support\MecReportDateFieldFilter::VISIT_DATE) === $dateFieldOption['value'] ? 'selected' : '' }}>{{ $dateFieldOption['label'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_date_from">{{ __('From date') }}</label>
                            <input type="date" name="date_from" id="filter_date_from" class="form-control form-control-sm"
                                   value="{{ $filters['date_from'] ?? '' }}">
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_date_to">{{ __('To date') }}</label>
                            <input type="date" name="date_to" id="filter_date_to" class="form-control form-control-sm"
                                   value="{{ $filters['date_to'] ?? '' }}">
                        </div>
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field">
                            <label for="filter_report_month">{{ __('Month') }}</label>
                            <select name="report_month" id="filter_report_month" class="form-control form-control-sm">
                                <option value="">All</option>
                                @foreach ($filterOptions['report_months'] as $rm)
                                    <option value="{{ $rm['value'] }}" {{ ($filters['report_month'] ?? '') === $rm['value'] ? 'selected' : '' }}>{{ $rm['label'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        @php
                            $includeCancelled = (bool) ($filters['include_cancelled'] ?? true);
                        @endphp
                        <div class="col-12 col-md-6 col-xl-2 monthly-filter-field monthly-filter-field--checkbox">
                            <label for="filter_include_cancelled">{{ __('Include cancellation') }}</label>
                            <div class="custom-control custom-checkbox mt-1">
                                <input type="hidden"
                                       name="include_cancelled"
                                       value="0"
                                       id="include_cancelled_off"
                                       @disabled($includeCancelled)>
                                <input type="checkbox"
                                       class="custom-control-input"
                                       name="include_cancelled"
                                       id="filter_include_cancelled"
                                       value="1"
                                       @checked($includeCancelled)
                                       onchange="document.getElementById('include_cancelled_off').disabled = this.checked;">
                                <label class="custom-control-label font-weight-normal text-muted" for="filter_include_cancelled">
                                    {{ __('Show approved scheme cancellations') }}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="monthly-filter-actions">
                        <button type="submit" class="btn btn-primary btn-sm btn-filter"><i class="fas fa-filter mr-1"></i> {{ __('Apply Filters') }}</button>
                        <a href="{{ route('reports.monthly-report.index') }}" class="btn-reset" title="{{ __('Reset filters') }}"><i class="fas fa-sync-alt"></i></a>
                    </div>
            </div>
        </form>
        </x-collapsible-filter-card>

        <div class="card pms-index-card" id="monthlyReportCard">
            <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">{{ __('Monthly Report') }}</h3>
                </div>
                <div class="d-flex align-items-center gap-2">
                    @if ($activeTab === 'summary')
                        <a href="{{ $summaryPrintUrl ?? route('reports.monthly-report.summary-print', ['tab' => 'summary']) }}"
                           class="btn btn-success btn-sm"
                           target="_blank"
                           rel="noopener noreferrer">
                            <i class="fas fa-print mr-1"></i> {{ __('Print preview') }}
                        </a>
                    @else
                        <form action="{{ route('reports.monthly-report.export') }}" method="GET" id="exportExcelForm" style="display:inline;">
                            @foreach ($filters as $key => $value)
                                @if (is_array($value))
                                    @foreach ($value as $item)
                                        @if ($key === 'plan_type')
                                            <input type="hidden" name="plan_type[]" value="{{ $item }}">
                                        @elseif ($key === 'region_id')
                                            <input type="hidden" name="region_id[]" value="{{ $item }}">
                                        @endif
                                    @endforeach
                                @elseif (is_bool($value))
                                    <input type="hidden" name="{{ $key }}" value="{{ $value ? '1' : '0' }}">
                                @elseif ($value !== '')
                                    <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                                @endif
                            @endforeach
                            <button type="submit" class="btn btn-success btn-sm">
                                <i class="fas fa-file-excel mr-1"></i> {{ __('Export Excel') }}
                            </button>
                        </form>
                    @endif
                </div>
            </div>
            <div class="card-body p-3">
                <ul class="nav nav-tabs monthly-report-tabs mb-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link {{ $activeTab === 'detail' ? 'active' : '' }}"
                           href="{{ $detailTabUrl }}"
                           role="tab"
                           aria-selected="{{ $activeTab === 'detail' ? 'true' : 'false' }}">
                            {{ __('Detail') }}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ $activeTab === 'summary' ? 'active' : '' }}"
                           href="{{ $summaryTabUrl }}"
                           role="tab"
                           aria-selected="{{ $activeTab === 'summary' ? 'true' : 'false' }}">
                            {{ __('Summary') }}
                        </a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade {{ $activeTab === 'detail' ? 'show active' : '' }}" id="monthlyReportDetailTab" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered mb-0 w-100 pms-index-datatable" id="tblMonthlyReport" style="width: 100%;">
                        <thead>
                            <tr>
                                <th data-sort-col="serial">S#</th>
                                <th data-sort-col="adp_number">ADP #</th>
                                <th data-sort-col="latitude">Lat</th>
                                <th data-sort-col="longitude">Long</th>
                                <th data-sort-col="assessment_status">Status</th>
                                <th data-sort-col="published_status">Published</th>
                                <th data-sort-col="cost_order">Cost</th>
                                <th data-sort-col="department">Department</th>
                                <th data-sort-col="location">Location</th>
                                <th data-sort-col="region">Region</th>
                                <th data-sort-col="sector">Sector</th>
                                <th data-sort-col="sub_sector">Sub-<br>Sector</th>
                                <th data-sort-col="scheme_type">Type</th>
                                <th data-sort-col="scheme_name">Name of Scheme</th>
                                <th data-sort-col="month_order">Month</th>
                                <th data-sort-col="plan_type">Type of Plan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $row)
                                <tr>
                                    <td class="center">{{ $row['serial'] }}</td>
                                    <td class="center">{{ $row['adp_number'] }}</td>
                                    <td class="coordinate">{{ $row['latitude'] }}</td>
                                    <td class="coordinate">{{ $row['longitude'] }}</td>
                                    <td class="status-cell">{{ $row['assessment_status'] }}</td>
                                    <td class="published-cell">{{ $row['published_status'] }}</td>
                                    <td class="num">{{ $row['cost'] }}</td>
                                    <td>{{ $row['department'] }}</td>
                                    <td>{{ $row['location'] }}</td>
                                    <td>{{ $row['region'] }}</td>
                                    <td>{{ $row['mec_sector'] }}</td>
                                    <td>{{ $row['sub_sector'] }}</td>
                                    <td>{{ $row['scheme_type'] }}</td>
                                    <td class="name-cell">{{ $row['scheme_name'] }}</td>
                                    <td class="center">{{ $row['month_label'] }}</td>
                                    <td class="center">
                                        @if ($row['plan_type'] !== '—')
                                            <span class="badge badge-{{ \App\Support\MecReportListingTable::planTypeBadgeVariant($row['plan_type']) }} plan-type-badge-static">{{ $row['plan_type'] }}</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="16" class="text-center text-muted py-4">{{ __('No data available.') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @include('partials.listing-pagination', [
                    'paginator' => $paginator ?? null,
                    'perPage' => $perPage ?? 25,
                    'baseUrl' => route('reports.monthly-report.index', $listingBaseQuery),
                ])
                    </div>

                    <div class="tab-pane fade mr-summary-tab-wrap {{ $activeTab === 'summary' ? 'show active' : '' }}" id="monthlyReportSummaryTab" role="tabpanel">
                        @include('reports.partials.monthly-report-summary-dashboard')
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
@include('partials.collapsible-filter-scripts')
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
@if (($activeTab ?? 'detail') === 'summary')
    @include('reports.partials.monthly-report-summary-map-scripts')
@endif
<script>
(function () {
    var tableSelector = '#tblMonthlyReport';
    var emptyMsg = @json(__('No data available.'));
    var filterLookupUrl = @json(route('reports.monthly-report.filter-lookup'));

    function initSelect2Lookups() {
        $('.pms-select2-lookup:not(.select2-hidden-accessible)').each(function () {
            var $el = $(this);
            var lookupUrl = $el.data('lookup-url') || filterLookupUrl;
            var lookupType = $el.data('lookup-type') || 'scheme_name';
            var selectedVal = $el.data('selected-value');
            var selectedTxt = $el.data('selected-text') || '';
            var placeholder = $el.data('placeholder') || 'Search...';
            var allowClear = $el.data('allow-clear') !== false;

            $el.select2({
                theme: 'bootstrap4',
                width: '100%',
                placeholder: placeholder,
                allowClear: allowClear,
                ajax: {
                    url: lookupUrl,
                    type: 'GET',
                    dataType: 'json',
                    delay: 280,
                    data: function (params) {
                        return {
                            lookup_type: lookupType,
                            search: params.term || '',
                            page: params.page || 1,
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.data || [],
                            pagination: { more: !!(data.pagination && data.pagination.more) }
                        };
                    },
                    cache: false,
                }
            });

            if (selectedVal !== undefined && selectedVal !== null && selectedVal !== '') {
                if (selectedTxt && selectedTxt !== '') {
                    var $opt = new Option(selectedTxt, selectedVal, true, true);
                    $el.append($opt).trigger('change');
                } else {
                    $.ajax({
                        url: lookupUrl,
                        type: 'GET',
                        data: { lookup_type: lookupType + '_single', id: selectedVal },
                        success: function (resp) {
                            var items = resp.data || [];
                            if (items.length > 0) {
                                var item = items[0];
                                var label = item.text || item.name || item.adp_number || String(selectedVal);
                                var $o = new Option(label, item.id, true, true);
                                $el.append($o).trigger('change');
                            }
                        }
                    });
                }
            }
        });
    }

    function monthBoundsFromValue(monthValue) {
        if (!monthValue || !/^\d{4}-\d{2}$/.test(monthValue)) {
            return { from: '', to: '' };
        }
        var parts = monthValue.split('-');
        var year = parseInt(parts[0], 10);
        var month = parseInt(parts[1], 10);
        var lastDay = new Date(year, month, 0).getDate();
        var pad = function (n) { return n < 10 ? '0' + n : String(n); };

        return {
            from: year + '-' + pad(month) + '-01',
            to: year + '-' + pad(month) + '-' + pad(lastDay),
        };
    }

    function syncMonthDateFields() {
        var monthEl = document.getElementById('filter_report_month');
        var fromEl = document.getElementById('filter_date_from');
        var toEl = document.getElementById('filter_date_to');
        if (!monthEl || !fromEl || !toEl) {
            return;
        }

        var bounds = monthBoundsFromValue(monthEl.value);
        if (bounds.from && bounds.to) {
            fromEl.value = bounds.from;
            toEl.value = bounds.to;
            return;
        }

        if (monthEl.value === '') {
            fromEl.value = '';
            toEl.value = '';
        }
    }

    function initMonthlyFilterMultiselects() {
        if (! $.fn.select2) {
            return;
        }
        var $collapse = $('#monthlyReportFiltersCollapse');
        $('.monthly-filter-multiselect').each(function () {
            var $sel = $(this);
            if ($sel.hasClass('select2-hidden-accessible')) {
                $sel.select2('destroy');
            }
            $sel.select2({
                theme: 'bootstrap4',
                width: '100%',
                placeholder: $.trim($sel.data('placeholder') || ''),
                allowClear: true,
                closeOnSelect: false,
                dropdownParent: $collapse.length ? $collapse : $(document.body),
            });
        });
    }

    $(function () {
        initSelect2Lookups();
        initMonthlyFilterMultiselects();
        $('#monthlyReportFiltersCollapse').on('shown.bs.collapse', initMonthlyFilterMultiselects);

        var $reportMonth = $('#filter_report_month');
        var $dateFrom = $('#filter_date_from');
        var $dateTo = $('#filter_date_to');
        if ($reportMonth.length) {
            $reportMonth.on('change', syncMonthDateFields);
        }
        if ($dateFrom.length && $dateTo.length) {
            $dateFrom.add($dateTo).on('change', function () {
                $reportMonth.val('');
            });
        }

        var activeTab = @json($activeTab);
        if (activeTab === 'detail') {
            var $tbl = $(tableSelector);
            if ($tbl.length && typeof window.PmsIndexDataTable !== 'undefined') {
                if ($.fn.DataTable.isDataTable($tbl)) {
                    $tbl.DataTable().destroy();
                }
                $tbl.attr('data-pms-empty-message', emptyMsg);

                PmsIndexDataTable.initLaravelPaginated(tableSelector, {
                    scrollX: true,
                });

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

        $('#monthlyReportFilterForm').on('submit', function (e) {
            e.preventDefault();
            var form = this;
            var action = form.getAttribute('action') || window.location.pathname;
            var pairs = [];
            function add(name, value) {
                if (!name || value === null || value === undefined || value === '') return;
                pairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(String(value)));
            }
            Array.prototype.forEach.call(form.elements, function (el) {
                if (!el.name || el.disabled) return;
                var tag = el.tagName;
                var type = (el.type || '').toLowerCase();
                if (type === 'checkbox') { if (el.checked) add(el.name, el.value || '1'); return; }
                if (type === 'radio') { if (el.checked) add(el.name, el.value); return; }
                if (tag === 'SELECT') {
                    if (el.multiple) {
                        Array.prototype.forEach.call(el.selectedOptions, function (opt) {
                            if (opt.value !== '') {
                                add(el.name, opt.value);
                            }
                        });
                        return;
                    }
                    add(el.name, el.value);
                    return;
                }
                if (type !== 'submit' && type !== 'reset' && type !== 'button') { add(el.name, el.value); }
            });
            var qs = pairs.length > 0 ? '?' + pairs.join('&') : '';
            window.location.href = action + qs;
        });
    });
})();
</script>
@endpush