@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" for="organization_type">
                            Organization Type 
                        </label>
                        <select name="organization_type" id="organization_type" class="form-select" required>
                            <option value="">Select Type</option>
                            @foreach ($organization as $org)
                                <option value="{{ $org->type_code }}">{{ $org->type_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label" for="org_sub_type">Organization Sub Type</label>
                        <select name="org_sub_type" id="org_sub_type" class="form-select">
                            <option value="">Select Sub Type</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Filter by Partner State</label>
                        <select id="state" name="state" class="form-control form-input" required>
                            <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 Partner District</label>
                        <input type="hidden" id="hidden_district" value="">
                            <select id="district" name="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="partner-datatable" class="table table-bordered w-100">
                    <thead>
                        <tr>
                            <th>S. No.</th>
                            <th>State</th>
                            <th>District</th>
                            <th>Partner Name</th>
                            <th>Organization Type</th>
                            <th>Organization Sub Type</th>
                            <th>Centre Name</th>
                            <th>Enrolled Students</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, #state, #district, #organization_type, #org_sub_type').on('change', function () {
            loadBatchTable($('#year').val(), $('#month').val(), $('#partner').val(), $('#state').val(), $('#district').val(), $('#organization_type').val(), $('#org_sub_type').val());
        });

    });

    // Toggle Excel/PDF buttons based on row count
    function toggleExportButtons() {
        const table = $('#partner-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 = '', state = '', district = '', organization_type='', org_sub_type='') {

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

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

            columns: [
                {
                    data: null,
                    render: (d, t, r, m) => m.row + 1
                },
                { data: 'state' },
                { data: 'district' },
                { data: 'partner_name' },
                { data: 'org_type' },
                { data: 'org_sub_type' },
                { data: 'centre_name' },
                { data: 'enrolled_students' },
            ],
            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 state    = $('#state').val();
        const district = $('#district').val();
        const organization_type = $('#organization_type').val();
        const org_sub_type = $('#org_sub_type').val();

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

        const params = new URLSearchParams({
            year,
            month,
            partner,
            state,
            district,
            organization_type,
            org_sub_type
        });

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

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

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

        $('#organization_type').change(function() {
            toggleFieldsBasedOnType($(this).val());
        });
    });

    $(document).on('change', '#state', function() {
        getDistrictsByState($(this).val(), '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 = $('#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.');
            }
        });
    }

    function toggleFieldsBasedOnType(type) {

        resetOrgFields();

        let subtypeOptions = [];

        // -----------------------
        // NGO — Subtypes + mandatory docs
        // -----------------------
        if (type === "NGO") {
            subtypeOptions = ["Trust", "Society"];

            $('#darpan_field').show().find("#darpan_id").prop('required', true);
            $('#registration_field').show().find("#registration_no").prop('required', true);
            $('#registration_certificate_field').show();
        }

        // -----------------------
        // Company — Subtypes + GST
        // -----------------------
        else if (type === "PRIVATE") {
            subtypeOptions = ["Pvt. Ltd.", "LLP", "Proprietorship"];

            $('#gst_field').show().find("#gst_no").prop('required', true);
            $('#gst_certificate_field').show();
        }

        // -----------------------
        // Government — Subtypes + TAN
        // -----------------------
        else if (type === "GOVT") {
            subtypeOptions = ["Govt.", "Semi Govt.", "PSU", "Autonomous Body"];

            $('#tan_field').show().find("#tan_no").prop('required', true);
            $('#tan_document_field').show();
        }

        // -----------------------
        // Other — no extra fields
        // -----------------------
        else if (type === "OTHER") {
            return; // nothing else to show
        }

        // -----------------------
        // Populate subtype dropdown if needed
        // -----------------------
        if (subtypeOptions.length > 0) {
            $("#org_subtype_field").show();
            $("#org_sub_type").prop("required", true);

            // Add a default placeholder
            $("#org_sub_type").append(`<option value="">-- Select Sub Type --</option>`);

            // Add subtypes dynamically
            subtypeOptions.forEach(opt => {
                $("#org_sub_type").append(`<option value="${opt}">${opt}</option>`);
            });

            // Optional: select first subtype by default
            // $("#org_sub_type option:eq(1)").prop("selected", true);
        }
    }

    function resetOrgFields() 
    {

        $('#org_subtype_field').hide();
        $('#org_sub_type').empty();
    }

</script>


@endsection