@extends('layouts.dashboard')

@section('page-title', 'Documents')

@section('content')
    <div class="content-card">
        <div class="row">
            <!-- Contact Information -->
            <div class="col-12 mb-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">
                            <i class="fas fa-address-card me-2"></i> Municipality Detail
                        </h6>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="districtSelect" class="form-label fw-bold">District</label>
                                <select class="form-select @error('disctrict') is-invalid @enderror" id="districtSelect"
                                    name="disctrict" required>
                                    <option value="">Select District</option>
                                    @foreach ($location as $district)
                                        <option value="{{ $district['id'] }}">{{ $district['text'] }}</option>
                                    @endforeach
                                </select>
                                @error('disctrict')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="municipalitySelect" class="form-label fw-bold">Palika</label>
                                <select class="form-select @error('name') is-invalid @enderror" id="municipalitySelect"
                                    name="name" required>
                                    <option value="">Select District First</option>
                                </select>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="api_url" class="form-label fw-bold">Fiscal Year</label>
                                <select class="form-select" id="fiscalYearSelect" name="fiscal_year" required>
                                    <option value="">Select Palika First</option>
                                </select>
                                @error('fiscal_year')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- All Data -->
            <div class="col-12 mb-4">
                <div class="card d-none shadow-sm" id="documentsTableCard">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">
                            All Data
                        </h6>
                    </div>
                    <div class="card-body">
                        <button id="edit-selected" class="btn btn-primary mb-2" disabled>Edit Selected</button>
                        <div class="row">

                            <table class="table-bordered table-striped table" id="documentsTable" style="width:100%">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="select-all"></th>
                                        <th>Title</th>
                                        <th>Category</th>
                                        <th>Date</th>
                                        <th>Fiscal Year</th>
                                        {{-- <th>Action</th> --}}
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

<script>
    let documentsTable = null;
    document.addEventListener('DOMContentLoaded', function() {
        const locations = @json($location);

        document.getElementById('districtSelect').addEventListener('change', function() {
            const selectedDistrictId = parseInt(this.value);
            const district = locations.find(loc => loc.id === selectedDistrictId);
            const municipalitySelect = document.getElementById('municipalitySelect');
            municipalitySelect.innerHTML = '<option selected>Select Palika</option>';

            if (district && district.localLevel) {
                district.localLevel.forEach(muni => {
                    const option = document.createElement('option');
                    option.value = muni.id; // Use ID for backend lookup
                    option.textContent = muni.text;
                    municipalitySelect.appendChild(option);
                });
            }

            // Reset fiscal year dropdown
            document.getElementById('fiscalYearSelect').innerHTML =
                '<option value="">Select Palika First</option>';
        });

        document.getElementById('municipalitySelect').addEventListener('change', function() {
            const municipalityId = this.value;
            const fiscalYearSelect = document.getElementById('fiscalYearSelect');
            fiscalYearSelect.innerHTML = '<option value="">Loading...</option>';

            if (municipalityId) {
                fetch(`/admin/fiscal-years/${municipalityId}`)
                    .then(response => response.json())
                    .then(data => {
                        fiscalYearSelect.innerHTML = '<option value="">Select Fiscal Year</option>';
                        let hasNull = false;
                        data.forEach(fy => {
                            if (fy === null) {
                                hasNull = true;
                            } else {
                                const option = document.createElement('option');
                                option.value = fy;
                                option.textContent = fy;
                                fiscalYearSelect.appendChild(option);
                            }
                        });
                        if (hasNull) {
                            const option = document.createElement('option');
                            option.value = 'null';
                            option.textContent = 'No Fiscal Year';
                            fiscalYearSelect.appendChild(option);
                        }
                    });
            } else {
                fiscalYearSelect.innerHTML = '<option value="">Select Palika First</option>';
            }
        });

        $('#fiscalYearSelect').on('change', function() {
            const fiscalYear = this.value;
            if (fiscalYear === '__null__') {
                fiscalYear = null;
            }
            const municipalityId = $('#municipalitySelect').val();
            const tableCard = document.getElementById('documentsTableCard');

            if (documentsTable) {
                documentsTable.destroy();
                $('#documentsTable tbody').empty();
            }

            if ((fiscalYear !== "" && fiscalYear !== undefined) && municipalityId) {
                tableCard.classList.remove('d-none');
                documentsTable = $('#documentsTable').DataTable({
                    processing: true,
                    serverSide: true,
                    searching: false,
                    ajax: {
                        url: '/admin/datatables/documents',
                        data: {
                            municipality_id: municipalityId,
                            fiscal_year: fiscalYear
                        }
                    },
                    columns: [{
                            data: 'id',
                            name: 'id',
                            orderable: false,
                            searchable: false,
                            render: function(data, type, row) {
                                return `<input type="checkbox" class="row-checkbox" value="${data}">`;
                            }
                        },
                        {
                            data: 'title',
                            name: 'title'
                        },
                        {
                            data: 'category',
                            name: 'category'
                        },
                        {
                            data: 'date',
                            name: 'date'
                        },
                        {
                            data: 'fiscal_year',
                            name: 'fiscal_year'
                        }
                    ]
                });

                // Re-bind checkbox logic after every draw
                documentsTable.on('draw', function() {
                    $('#select-all').prop('checked', false);

                    $('#select-all').off('change').on('change', function() {
                        $('.row-checkbox').prop('checked', this.checked).trigger(
                            'change');
                    });

                    $('.row-checkbox').off('change').on('change', function() {
                        let checkedCount = $('.row-checkbox:checked').length;
                        $('#edit-selected').prop('disabled', checkedCount === 0);

                        if (!this.checked) {
                            $('#select-all').prop('checked', false);
                        } else if ($('.row-checkbox:checked').length === $(
                                '.row-checkbox').length) {
                            $('#select-all').prop('checked', true);
                        }
                    });
                });
            } else {
                tableCard.classList.add('d-none');
            }
        });
        $('#edit-selected').on('click', function() {
            let ids = $('.row-checkbox:checked').map(function() {
                return $(this).val();
            }).get();
            const municipalityId = $('#municipalitySelect').val();

            if (ids.length > 0 && municipalityId) {
                // Redirect to your edit route, e.g., /admin/documents/edit?ids=1,2,3
                window.location.href = '/admin/documents/edit?ids=' + ids.join(',') +
                    '&municipality_id=' + municipalityId;
            }
        });
    });
</script>