@extends('layouts.partner_layout')

@section('content')
<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<style>
.nav-tabs .nav-link {
    padding: 0.5rem 1rem; 
    font-weight: 500;
    border-radius: 0.375rem; 
}

.nav-tabs .nav-link i {
    font-size: 0.9rem;
}

.nav-tabs .nav-item + .nav-item {
    margin-left: 0.5rem; 
}
</style>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <!-- Tabs -->
                <ul class="nav nav-tabs mb-3" id="statusTabs" role="tablist">
                    <li class="nav-item me-2">
                        <a class="nav-link active" data-bs-toggle="tab" href="#pending">
                            <i class="fa fa-hourglass-start me-1"></i> Pending
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link" data-bs-toggle="tab" href="#approved">
                            <i class="fa fa-check-circle me-1"></i> Approved
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link" data-bs-toggle="tab" href="#rejected">
                            <i class="fa fa-times-circle me-1"></i> Rejected
                        </a>
                    </li>
                </ul>

                <div class="tab-content mt-3">

                    @foreach(['pending','approved','rejected'] as $status)
                        <div class="tab-pane fade {{ $status=='pending' ? 'show active' : '' }}" id="{{ $status }}" role="tabpanel">
                            <div class="table-responsive">
                                <table id="{{ $status }}-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>Mobile Number</th>
                                            <th>Director Name</th>
                                            <th>Created On</th>
                                            <th>Application Status</th>
                                            <th style="width: 100px;">Action</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    @endforeach

                </div>

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

@section('pages-scripts')

<script>
function initTable(tableId, status) {
    $('#' + tableId).DataTable({
        processing: true,
        serverSide: true,
        destroy: true,
        autoWidth: false,
        ajax: "{{ route('centre.list.table') }}?status=" + status,
        columns: [
            { data: null, render: (data, type, row, meta) => meta.row + 1 },
            { data: 'basic_name', defaultContent: 'N/A' }, 
            { data: 'basic_email', defaultContent: 'N/A' }, 
            { data: 'primary_phone', defaultContent: '-' },
            { data: 'director_name', defaultContent: '-' },
            { data: 'submitted_on', defaultContent: '-' }, 
            { data: 'status', orderable: false, searchable: false }, 
            { data: 'actions', orderable: false, searchable: false } 
        ]
    });
}

$(document).ready(function() {
    initTable('pending-table', 'pending');

    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
        const status = $(e.target).attr('href').replace('#',''); 
        initTable(status + '-table', status);
    });
});
</script>


@endsection