@extends('layouts.app_layout')

@section('content')

<x-page-header title="{{ $pageTitle }}" />

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

                {{-- TOP ACTION BAR --}}
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <button class="btn btn-primary" id="toggleFilters">
                        Show / Hide Filters
                    </button>

                    <div class="d-flex gap-2">
                        <a href="#" id="exportExcel" class="btn btn-outline-success">
                            Export Excel
                        </a>
                        <a href="#" id="exportPdf" class="btn btn-outline-danger">
                            Export PDF
                        </a>
                    </div>
                </div>

                {{-- ================= FILTER SECTION (HIDDEN BY DEFAULT) ================= --}}
                <div id="filterSection" style="display:none;">

                    <div class="row mb-3">

                        {{-- Year --}}
                        <div class="col-md-3">
                            <label class="form-label">Year</label>
                            <select id="year" class="form-select">
                                <option value="">All</option>
                                @php $currentYear = date('Y'); @endphp
                                @for($y = $currentYear; $y >= $currentYear - 5; $y--)
                                    <option value="{{ $y }}">{{ $y }}</option>
                                @endfor
                            </select>
                        </div>

                        {{-- Month --}}
                        <div class="col-md-3">
                            <label class="form-label">Month</label>
                            <select id="month" class="form-select">
                                <option value="">All</option>
                                @foreach(range(1,12) as $m)
                                    <option value="{{ $m }}">
                                        {{ date('F', mktime(0,0,0,$m,1)) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Organization Type --}}
                        <div class="col-md-3">
                            <label class="form-label">Organization Type</label>
                            <select id="org_type_id" class="form-select">
                                <option value="">All</option>
                                @foreach ($organization as $org)
                                    <option value="{{ $org->type_code }}">
                                        {{ $org->type_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Sub Organization --}}
                        <div class="col-md-3">
                            <label class="form-label">Sub Organization</label>
                            <select id="organization_sub_type" class="form-select">
                                <option value="">All</option>
                            </select>
                        </div>

                    </div>

                    <div class="row mb-3">

                        {{-- Partner --}}
                        <div class="col-md-3">
                            <label class="form-label">Partner</label>
                            <select id="partner_id" class="form-select">
                                <option value="">All</option>
                            </select>
                        </div>

                        {{-- State --}}
                        <div class="col-md-3">
                            <label class="form-label">State</label>
                            <select id="state_id" class="form-select">
                                <option value="">All</option>
                                @foreach($states as $state)
                                    <option value="{{ $state->state_code }}">
                                        {{ $state->state_name_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- District --}}
                        <div class="col-md-3">
                            <label class="form-label">District</label>
                            <select id="district_id" class="form-select">
                                <option value="">All</option>
                            </select>
                        </div>

                    </div>

                    <div class="row mb-4">

                        {{-- From Date --}}
                        <div class="col-md-3">
                            <label class="form-label">From Date</label>
                            <input type="date" id="from_date" class="form-control">
                        </div>

                        {{-- To Date --}}
                        <div class="col-md-3">
                            <label class="form-label">To Date</label>
                            <input type="date" id="to_date" class="form-control">
                        </div>

                    </div>
                </div>

                {{-- ================= DATATABLE ================= --}}
                <div class="table-responsive">
                    <table class="table table-bordered w-100" id="reportTable">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Organization Type</th>
                                <th>Sub Organization</th>
                                <th>State</th>
                                <th>District</th>
                                <th>Partner</th>
                                <th>Total Centres</th>
                            </tr>
                        </thead>
                    </table>
                </div>

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

@endsection

@section('pages-scripts')
<script>
let reportTable;

$(document).ready(function () {
    initPartnerCentreReport();
    enableExports();

    $('#toggleFilters').on('click', function () {
        $('#filterSection').slideToggle();
    });
});

$('#year, #month').on('change', function () {
    $('#from_date, #to_date').val('');
    reloadTable();
    enableExports();
});

$('#from_date, #to_date').on('change', function () {
    $('#year, #month').val('');
    reloadTable();
    enableExports();
});

$('#org_type_id').on('change', function () {

    const type = this.value;
    const $sub = $('#organization_sub_type');
    const $partner = $('#partner_id');

    $sub.html('<option value="">All</option>');
    $partner.html('<option value="">All</option>');

    if (!type) {
        reloadTable();
        enableExports();
        return;
    }

    let options = [];
    if (type === 'NGO') options = ['Trust', 'Society'];
    else if (type === 'GOVT') options = ['Govt.', 'Semi Govt.', 'PSU', 'Autonomous Body'];
    else if (type === 'PRIVATE') options = ['Pvt. Ltd.', 'LLP', 'Proprietorship'];

    options.forEach(o => $sub.append(`<option value="${o}">${o}</option>`));

    reloadTable();
    enableExports();
});

$('#organization_sub_type').on('change', function () {

    $('#partner_id').html('<option value="">Loading...</option>');

    $.get("{{ route('ajax.partners') }}", {
        organization_type: $('#org_type_id').val(),
        organization_sub_type: this.value
    }, function (res) {

        $('#partner_id').html('<option value="">All</option>');
        res.forEach(p =>
            $('#partner_id').append(`<option value="${p.id}">${p.partner_name}</option>`)
        );

        reloadTable();
        enableExports();
    });
});

$('#state_id').on('change', function () {

    const $district = $('#district_id');
    $district.html('<option value="">Loading...</option>');

    if (!this.value) {
        $district.html('<option value="">All</option>');
        reloadTable();
        enableExports();
        return;
    }

    $.get("{{ route('get.districts') }}", { state_code: this.value }, function (res) {

        let options = '<option value="">All</option>';
        if (res.success) {
            res.districts.forEach(d =>
                options += `<option value="${d.district_code}">${d.district_name_en}</option>`
            );
        }
        $district.html(options);
        reloadTable();
        enableExports();
    });
});

$('#partner_id, #district_id').on('change', function () {
    reloadTable();
    enableExports();
});

function initPartnerCentreReport() {

    reportTable = $('#reportTable').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        searching: false,

        ajax: {
            url: "{{ route('reports.partner.centres') }}",
            data: function (d) {
                d.year = $('#year').val();
                d.month = $('#month').val();
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
                d.org_type_id = $('#org_type_id').val();
                d.organization_sub_type = $('#organization_sub_type').val();
                d.partner_id = $('#partner_id').val();
                d.state_id = $('#state_id').val();
                d.district_id = $('#district_id').val();
            }
        },

        columns: [
            { data: 'DT_RowIndex' },
            { data: 'organization_type' },
            { data: 'organization_sub_type' },
            { data: 'state_name' },
            { data: 'district_name' },
            { data: 'partner_name' },
            { data: 'total_centres', className: 'fw-bold text-center' }
        ]
    });
}

function reloadTable() {
    if (reportTable) {
        reportTable.ajax.reload(null, false);
    }
}

function enableExports() {

    const params = $.param({
        year: $('#year').val(),
        month: $('#month').val(),
        from_date: $('#from_date').val(),
        to_date: $('#to_date').val(),
        org_type_id: $('#org_type_id').val(),
        organization_sub_type: $('#organization_sub_type').val(),
        partner_id: $('#partner_id').val(),
        state_id: $('#state_id').val(),
        district_id: $('#district_id').val()
    });

    $('#exportExcel').attr(
        'href',
        "{{ route('reports.partner.centres.excel') }}?" + params
    );

    $('#exportPdf').attr(
        'href',
        "{{ route('reports.partner.centres.pdf') }}?" + params
    );
}
</script>
@endsection