@extends('layouts.app_layout')

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

<ul class="nav nav-tabs mb-4" id="applicationTabs" role="tablist">

    {{-- PENDING --}}
    <li class="nav-item me-2">
        <a class="nav-link active" data-status="pending" data-bs-toggle="tab"
           href="#pending-applications" role="tab">
            <i class="fa fa-clock me-2"></i> New
        </a>
    </li>

    {{-- DISCREPANCY FOUND --}}
    <li class="nav-item me-2">
        <a class="nav-link" data-status="discrepancy_found" data-bs-toggle="tab"
           href="#discrepancy_found-applications" role="tab">
            <i class="fa fa-exclamation-triangle me-2"></i> Discrepancy Found
        </a>
    </li>

    {{-- DISCREPANCY REMOVED --}}
    <li class="nav-item me-2">
        <a class="nav-link" data-status="discrepancy_removed" data-bs-toggle="tab"
           href="#discrepancy_removed-applications" role="tab">
            <i class="fa fa-check-circle me-2"></i> Discrepancy Removed
        </a>
    </li>

    {{-- PAYMENT PENDING --}}
    <li class="nav-item me-2">
        <a class="nav-link" data-status="payment_pending" data-bs-toggle="tab"
           href="#payment_pending-applications" role="tab">
            <i class="fa fa-hourglass-half me-2"></i> Payment Pending
        </a>
    </li>

    {{-- PAYMENT SUBMITTED --}}
    <li class="nav-item me-2">
        <a class="nav-link" data-status="payment_submitted" data-bs-toggle="tab"
           href="#payment_submitted-applications" role="tab">
            <i class="fa fa-certificate me-2"></i> Payment Submitted
        </a>
    </li>

     {{-- PAYMENT RECEIVED --}}
    <li class="nav-item me-2">
        <a class="nav-link" data-status="payment_received" data-bs-toggle="tab"
           href="#payment_received-applications" role="tab">
            <i class="fa fa-certificate me-2"></i> Payment Received
        </a>
    </li>

    <li class="nav-item me-2">
        <a class="nav-link" data-status="affiliated" data-bs-toggle="tab"
           href="#affiliated-applications" role="tab">
            <i class="fas fa-check-circle me-2"></i> Affliliated
        </a>
    </li>

    <li class="nav-item me-2">
        <a class="nav-link" data-status="rejected" data-bs-toggle="tab"
           href="#rejected-applications" role="tab">
            <i class="fas fa-times-circle me-2"></i> Rejected
        </a>
    </li>

</ul>

<div class="tab-content" id="applicationTabContent">

    @foreach(['pending','discrepancy_found','discrepancy_removed','payment_pending','payment_submitted','payment_received','affiliated','rejected'] as $status)
        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
             id="{{ $status }}-applications" role="tabpanel">

            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="centre-applications-table-{{ $status }}"
                               class="table table-bordered table-striped w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Application No</th>
                                    <th>Submitted On</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    @endforeach

</div>
@endsection


@section('pages-scripts')
<script>
    const dataTableRoute = "{{ route('centre.data.table') }}";

    // Load table
    function loadTable(status) {
        const tableId = `#centre-applications-table-${status}`;

        if ($.fn.DataTable.isDataTable(tableId)) {
            $(tableId).DataTable().clear().destroy();
        }

        $(tableId).DataTable({
            processing: true,
            serverSide: true,
            ajax: dataTableRoute + '?status=' + status,
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'basic_name' },
                { data: 'basic_email' },
                { data: 'application_number' },
                { data: 'submitted_on' },
                { data: 'status' },
                { data: 'actions', orderable: false, searchable: false }
            ]
        });
    }

    // On page load → load pending
    $(document).ready(function () {
        loadTable('pending');

        $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            const tabId = $(e.target).attr('href').substring(1);  // e.g. payment_submitted-applications
            const status = tabId.replace('-applications', '');     // => payment_submitted
            loadTable(status);
        });
    });
</script>
@endsection