@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('.js-example-basic-multiple').select2();

            // Store original options for filtering
            var $prabhagSelect = $('#prabhag_id');
            var $zoneSelect = $('#zone_id');
            var $bhubhagSelect = $('#bhubhag_id');

            var originalPrabhags = $prabhagSelect.find('option').clone();
            var originalZones = $zoneSelect.find('option').clone();
            var originalBhubhags = $bhubhagSelect.find('option').clone();

            // Handle Prabhag Change -> Filter Zones
            $prabhagSelect.on('change', function() {
                var selectedPrabhags = $(this).val() || [];

                // Clear current options
                $zoneSelect.empty();

                var showAll = selectedPrabhags.includes('all') || selectedPrabhags.length === 0;

                originalZones.each(function() {
                    var option = $(this);
                    // Skip 'Select All' in the loop if we handle it manually, but here we just re-append it
                    var prabhagId = option.data('prabhag-id');
                    var value = option.val();

                    if (value === 'all') {
                        $zoneSelect.append(option.clone());
                    } else if (showAll || selectedPrabhags.includes(String(prabhagId))) {
                        $zoneSelect.append(option.clone());
                    }
                });


                setTimeout(function() {
                    $zoneSelect.trigger('change');
                }, 0);
            });

            // Handle Zone Change -> Filter Bhubhags
            $zoneSelect.on('change', function() {
                var selectedZones = $(this).val() || [];

                $bhubhagSelect.empty();

                var showAll = selectedZones.includes('all') || selectedZones.length === 0;

                originalBhubhags.each(function() {
                    var option = $(this);
                    var zoneId = option.data('zone-id');
                    var value = option.val();

                    if (value === 'all') {
                        $bhubhagSelect.append(option.clone());
                    } else if (showAll || selectedZones.includes(String(zoneId))) {
                        $bhubhagSelect.append(option.clone());
                    }
                });


            });

            // Select All Logic
            $('.js-example-basic-multiple').on('select2:select', function(e) {
                var data = e.params.data;
                if (data.id === 'all') {
                    // Exclusive Select All: Clear others, keep only 'all'
                    $(this).val(['all']).trigger('change');
                } else {
                    // If regular option selected, remove 'all' if present
                    var val = $(this).val();
                    if (val && val.includes('all')) {
                        val = val.filter(v => v !== 'all');
                        $(this).val(val).trigger('change');
                    }
                }
            });

            // Date Auto-population logic
            const yearSelect = $('#yearSelect');
            const fromDate = $('#from_date');
            const toDate = $('#to_date');

            function updateDates() {
                const fy = yearSelect.val();
                if (fy) {
                    const parts = fy.split('-');
                    if (parts.length === 2) {
                        const startYear = parts[0];
                        const endYear = parts[1];
                        fromDate.val(`${startYear}-04-01`);
                        toDate.val(`${endYear}-03-31`);
                    }
                }
            }

            // Initialize with default if values not present
            if (!fromDate.val()) {
                updateDates();
            }

            yearSelect.on('change', updateDates);

            // Optimization for Select All on Submit to avoid max_input_vars limit
            $('form').on('submit', function() {
                var selects = ['#prabhag_id', '#zone_id', '#bhubhag_id'];
                selects.forEach(function(selector) {
                    var $el = $(selector);
                    var val = $el.val();
                    if (val && val.includes('all')) {
                        $el.val(['all']);
                    }
                });
            });
        });
    </script>
@endpush

<x-admin.layout>
    <x-slot name="title">Connection Closure Report</x-slot>
    <x-slot name="heading">Connection Closure Report</x-slot>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Connection Closure Report</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('reports.connection-closure-report.generate') }}" method="POST" target="_blank">
                        @csrf

                        <div class="row gy-4">
                            <!-- Year (Helper) -->
                            <div class="col-md-3">
                                <label class="form-label">Year / वर्ष</label>
                                @php
                                    $currentMonth = date('n');
                                    $currentYear = date('Y');
                                    $start = $currentMonth >= 4 ? $currentYear : $currentYear - 1;
                                    $end = $start + 1;
                                    $fyLabel = $start . '-' . $end;
                                @endphp
                                <select class="form-select js-example-basic-multiple" id="yearSelect" disabled>
                                    <option value="{{ $fyLabel }}" selected>{{ $fyLabel }}</option>
                                </select>
                            </div>

                            <!-- From Date -->
                            <div class="col-md-3">
                                <label class="form-label">From Date / दिनांक पासून <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('from_date') is-invalid @enderror" name="from_date" id="from_date" required>
                                @error('from_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- To Date -->
                            <div class="col-md-3">
                                <label class="form-label">To Date / दिनांक पर्यंत <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('to_date') is-invalid @enderror" name="to_date" id="to_date" required>
                                @error('to_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Ward -->
                            <div class="col-md-3">
                                <label class="form-label">Ward / Prabhag / प्रभाग</label>
                                <select class="form-select js-example-basic-multiple @error('prabhag_id') is-invalid @enderror" name="prabhag_id[]" id="prabhag_id" multiple>
                                    <option value="all">Select All</option>
                                    @foreach ($prabhags as $prabhag)
                                        <option value="{{ $prabhag->id }}">{{ $prabhag->name }}</option>
                                    @endforeach
                                </select>
                                @error('prabhag_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Zone -->
                            <div class="col-md-4">
                                <label class="form-label">Zone / Vibhag / विभाग</label>
                                <select class="form-select js-example-basic-multiple @error('zone_id') is-invalid @enderror" name="zone_id[]" id="zone_id" multiple>
                                    <option value="all">Select All</option>
                                    @foreach ($zones as $zone)
                                        <option value="{{ $zone->id }}" data-prabhag-id="{{ $zone->prabhag_id }}">{{ $zone->name }}</option>
                                    @endforeach
                                </select>
                                @error('zone_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Block -->
                            <div class="col-md-4">
                                <label class="form-label">Block / Bhubhag / गट</label>
                                <select class="form-select js-example-basic-multiple @error('bhubhag_id') is-invalid @enderror" name="bhubhag_id[]" id="bhubhag_id" multiple>
                                    <option value="all">Select All</option>
                                    @foreach ($bhubhags as $bhubhag)
                                        <option value="{{ $bhubhag->id }}" data-zone-id="{{ $bhubhag->zone_id }}">{{ $bhubhag->name }}</option>
                                    @endforeach
                                </select>
                                @error('bhubhag_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Report Type -->
                            <div class="col-md-4">
                                <label class="form-label d-block mb-3">Report Type <span
                                        class="text-danger">*</span></label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="report_type" id="type_summary"
                                        value="summary" checked>
                                    <label class="form-check-label" for="type_summary">Summary</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="report_type" id="type_detail"
                                        value="detail">
                                    <label class="form-check-label" for="type_detail">Detail</label>
                                </div>
                            </div>

                            <!-- Export Type -->
                            <div class="col-md-4">
                                <label class="form-label d-block mb-3">Export Type <span
                                        class="text-danger">*</span></label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="export_type" id="export_pdf"
                                        value="pdf" checked>
                                    <label class="form-check-label" for="export_pdf">PDF</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="export_type" id="export_excel"
                                        value="excel">
                                    <label class="form-check-label" for="export_excel">Excel</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-primary px-4">Generate Report</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-admin.layout>