@extends('layouts.app_layout')

@section('content')

<x-page-header title="{{ $pageTitle }}" button="{!! (isset($button))?$button:'' !!}" />

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                {{-- COURSE FILTER --}}
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label class="form-label">Filter by Year</label>
                        <select name="year" id="year" class="form-select rd-form-control">
                            @php $currentYear = date('Y'); @endphp
                            @for($i = $currentYear; $i >= $currentYear - 4; $i--)
                                <option value="{{ $i }}" {{ request('year') == $i ? 'selected' : '' }}>{{ $i }}</option>
                            @endfor
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Filter by Month</label>
                        <select name="month" id="month" class="form-select rd-form-control">
                            <option value="">All Months</option>
                            @foreach(range(1, 12) as $m)
                                <option value="{{ $m }}" {{ request('month') == $m ? 'selected' : '' }}>
                                    {{ date('F', mktime(0, 0, 0, $m, 1)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Filter by Partner</label>
                        <select name="partner" id="partner" class="form-select rd-form-control">
                            <option value="">Select Partner</option>
                            @foreach ($partners as $partner)
                                <option value="{{ $partner->id }}">{{ $partner->partner_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Filter by Centre State</label>
                        <select id="centre_state" name="centre_state" class="form-control form-input">
                            <option value="">Select State</option>
                            @foreach ($states as $state)
                            <option value="{{ $state->state_code }}">{{ $state->state_name_en }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Filter by Centre District</label>
                        <input type="hidden" id="hidden_district" value="">
                            <select id="centre_district" name="centre_district" class="form-control form-input" required>
                                <option value="">Select District</option>
                            </select>
                    </div>

                </div>

                <div class="row mb-3 justify-content-end">
                    <div class="col-md-3">
                        <button type="button" class="btn rd-btn-outline rd-excel" onclick="downloadReport('excel')">
                            <i class="fa fa-file-excel"></i> <span class="d-none d-xl-inline">Export Excel</span>
                        </button>
                        
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="btn rd-btn-outline rd-pdf" onclick="downloadReport('pdf')">
                            <i class="fa fa-file-pdf"></i> <span class="d-none d-xl-inline">Export PDF</span>
                        </button>
                    </div>
                </div>

                {{-- DATATABLE --}}
                <table id="centre-datatable" class="table table-bordered w-100">
                    <thead>
                        <tr>
                            <th>S. No.</th>
                            <th>Partner Name</th>
                            <th>Centre State</th>
                            <th>Centre District</th>
                            <th>Centre Name</th>      
                            <th>Total Approved Batches</th>
                        </tr>
                    </thead>
                </table>

            </div>
        </div>
    </div>
</div>

@endsection

@section('pages-scripts')

<script>
    $(document).ready(function () {

        // Initialize DataTable
        loadBatchTable();

        // Apply filter on year/month change
        $('#year, #month, #partner, #centre_state, #centre_district').on('change', function () {
            loadBatchTable($('#year').val(), $('#month').val(), $('#partner').val(), $('#centre_state').val(), $('#centre_district').val());
        });

    });

    // Toggle Excel/PDF buttons based on row count
    function toggleExportButtons() {
        const table = $('#centre-datatable').DataTable();
        const rowCount = table.data().count(); // Get number of rows in DataTable

        if (rowCount === 0) {
            $('.rd-excel, .rd-pdf').prop('disabled', true);
        } else {
            $('.rd-excel, .rd-pdf').prop('disabled', false);
        }
    }

    // Load DataTable with optional year/month filters
    function loadBatchTable(year = '', month = '', partner = '', centre_state = '', centre_district = '') {

        if ($.fn.DataTable.isDataTable('#centre-datatable')) {
            $('#centre-datatable').DataTable().destroy();
        }

        $('#centre-datatable').DataTable({
            serverSide: false,
            processing: true,
            ordering: false,
            ajax: {
                url: "{{ route('reports.fetch-for-datatable.centre-batch') }}",
                type: "POST",
                data: function (d) {
                    d._token = $('meta[name="csrf-token"]').attr('content');
                    d.year = year;
                    d.month = month;
                    d.partner = partner;
                    d.centre_state = centre_state;
                    d.centre_district = centre_district;
                }
            },

            columns: [
                {
                    data: null,
                    render: (d, t, r, m) => m.row + 1
                },
                { data: 'partner_name' },   
                { data: 'centre_state' },
                { data: 'centre_district' },
                { data: 'centre_name' },
                { data: 'approved_batches' },
            ],
            drawCallback: function () {
                $('.dropdown-toggle').dropdown({ boundary:'window' });

                // Check rows and toggle buttons
                toggleExportButtons();
            }
        });
    }

    // Download Excel or PDF report
    function downloadReport(type) 
    {
        const year     = $('#year').val();
        const month    = $('#month').val();
        const partner  = $('#partner').val();
        const centre_state    = $('#centre_state').val();
        const centre_district = $('#centre_district').val();

        let url = type === 'excel'
            ? "{{ route('reports.export.centre-batches.excel') }}"
            : "{{ route('reports.export.centre-batches.pdf') }}";

        const params = new URLSearchParams({
            year,
            month,
            partner,
            centre_state,
            centre_district
        });

        window.location.href = url + '?' + params.toString();
    }

    $(document).ready(function() {
        loadStates();

        if ($('#centre_state').val()) {
            getDistrictsByState(
                $('#state').val(),
                'centre_district',
                $('#hidden_district').val()
            );
        }
    });

    $(document).on('change', '#centre_state', function() {
        getDistrictsByState($(this).val(), 'centre_district', '');
    });

    function loadStates() {
        $.ajax({
            url: "{{ route('get.states') }}",
            method: 'GET',
            success: function(res) {
                if (res.success && Array.isArray(res.states)) {
                    const $state1 = $('#permanent_state');
                    const $state2 = $('#correspondence_state');
                    const $state3 = $('#centre_state');
                    $state1.empty().append(`<option value="">Select State</option>`);
                    $state2.empty().append(`<option value="">Select State</option>`);
                    $state3.empty().append(`<option value="">Select State</option>`);
                    res.states.forEach(function(st) {
                        $state1.append(`<option value="${st.state_code}">${st.state_name_en}</option>`);
                        $state2.append(`<option value="${st.state_code}">${st.state_name_en}</option>`);
                        $state3.append(`<option value="${st.state_code}">${st.state_name_en}</option>`);
                    });
                    let hiddenSt = $('#hidden_state').val();
                    if (hiddenSt) {
                        $state1.val(hiddenSt).trigger('change');
                    }
                    let hiddenCorreSt = $('#hidden_state').val();
                    if (hiddenCorreSt) {
                        $state2.val(hiddenCorreSt).trigger('change');
                    }
                    let hiddenAddrSt = $('#hidden_address_state').val();
                    if (hiddenAddrSt) {
                        $state3.val(hiddenAddrSt).trigger('change');
                    }
                } else {
                    showError('Failed to load states.');
                }
            },
            error: function() {
                showError('Error fetching states from server.');
            }
        });
    }

    function getDistrictsByState(stateCode, districtSelectId, selectedDistrict = '') {
        const $sel = $('#' + districtSelectId);
        $sel.empty().append('<option value="">Select District</option>');
        if (!stateCode) {
            return;
        }
        $.ajax({
            url: "{{ route('get.districts') }}",
            method: 'GET',
            data: {
                state_code: stateCode
            },
            success: function(res) {
                if (res.success && Array.isArray(res.districts)) {
                    res.districts.forEach(function(dist) {
                        const selectedAttr = (dist.district_code == selectedDistrict) ? 'selected' : '';
                        $sel.append(`<option value="${dist.district_code}" ${selectedAttr}>${dist.district_name_en}</option>`);
                    });
                } else {
                    showError('No districts found for this state.');
                }
            },
            error: function() {
                showError('Error fetching districts.');
            }
        });
    }

</script>


@endsection