@extends('layouts.partner_layout')

@section('content')
<!-- [ Page Header ] start -->
<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<!-- [ Page Header ] end -->

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

        <!-- Tabs Navigation -->
        <ul class="nav nav-tabs mb-3" id="applicationTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="affiliated-tab" data-bs-toggle="tab" data-bs-target="#affiliated"
                    type="button" role="tab" aria-controls="affiliated" aria-selected="true">
                    Approved
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pending-tab" data-bs-toggle="tab" data-bs-target="#pending"
                    type="button" role="tab" aria-controls="pending" aria-selected="false">
                    Pending
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="rejected-tab" data-bs-toggle="tab" data-bs-target="#rejected"
                    type="button" role="tab" aria-controls="rejected" aria-selected="false">
                    Rejected
                </button>
            </li>
        </ul>

        <!-- Tabs Content -->
        <div class="tab-content" id="applicationTabsContent">

            {{-- Approved Tab --}}
            <div class="tab-pane fade show active" id="affiliated" role="tabpanel" aria-labelledby="affiliated-tab">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="affiliated-table" class="table table-striped table-bordered nowrap"
                                style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Sl. No.</th>
                                        <th>Centre Name</th>
                                        <th>Email</th>
                                        <th>Application No.</th>
                                        <th>Submitted On</th>
                                        <th>Status</th>
                                        <th style="width: 100px;">Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Pending Tab --}}
            <div class="tab-pane fade" id="pending" role="tabpanel" aria-labelledby="pending-tab">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="pending-table" class="table table-striped table-bordered nowrap"
                                style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Sl. No.</th>
                                        <th>Centre Name</th>
                                        <th>Email</th>
                                        <th>Application No.</th>
                                        <th>Submitted On</th>
                                        <th>Status</th>
                                        <th style="width: 100px;">Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Rejected Tab --}}
            <div class="tab-pane fade" id="rejected" role="tabpanel" aria-labelledby="rejected-tab">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="rejected-table" class="table table-striped table-bordered nowrap"
                                style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Sl. No.</th>
                                        <th>Centre Name</th>
                                        <th>Email</th>
                                        <th>Application No.</th>
                                        <th>Submitted On</th>
                                        <th>Status</th>
                                        <th style="width: 100px;">Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
$(document).ready(function () {

    // Store references to initialized DataTables
    var tables = {};
    var initializedTabs = {};

    /**
     * Initialize DataTable dynamically by status
     */
    function initDataTable(tableId, status) {
        return $('#' + tableId).DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('centre.list.table') }}",
                data: { status: status }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'basic_name', name: 'basic_name' },
                { data: 'basic_email', name: 'basic_email' },
                { data: 'application_number', name: 'application_number' },
                { data: 'submitted_on', name: 'created_at' },
                { data: 'status', name: 'application_status' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false }
            ],
            order: [[4, 'desc']],
            responsive: true,
            autoWidth: false,
            language: {
                emptyTable: "No applications found for this status."
            }
        });
    }

    // Initialize Approved DataTable by default
    tables['affiliated'] = initDataTable('affiliated-table', 'affiliated');
    initializedTabs['affiliated'] = true;

    /**
     * Load DataTable when user switches tabs
     */
    $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).data('bs-target').substring(1); // get tab ID without '#'

        if (!initializedTabs[target]) {
            tables[target] = initDataTable(target + '-table', target);
            initializedTabs[target] = true;
        } else {
            tables[target].ajax.reload();
        }
    });

    /**
     * Programmatically switch to the "Approved" tab (e.g., when a LOR is generated)
     * You can call this from your AJAX success callback or after application submission.
     */
    window.showApprovedTab = function () {
        var approvedTabTrigger = document.getElementById('affiliated-tab');
        var tab = new bootstrap.Tab(approvedTabTrigger);
        tab.show();

        // Reload approved DataTable to reflect new data
        if (tables['affiliated']) {
            tables['affiliated'].ajax.reload();
        }
    };

});
</script>
@endsection