@extends('layouts.training_centre_layout')

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

<!-- [ Page Header ] end -->
<div class="row">
    <div class="col-12">
        <!-- Navigation Tabs -->
        <ul class="nav nav-pills mb-3 gap-1" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-pending-tab" data-bs-toggle="pill" data-bs-target="#pills-pending" type="button" role="tab" aria-controls="pills-pending" aria-selected="true">
                    <i class="fa fa-clock me-2"></i>Pending Applications
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-discrepancy-found-tab" data-bs-toggle="pill" data-bs-target="#pills-discrepancy-found" type="button" role="tab" aria-controls="pills-discrepancy-found" aria-selected="false">
                    <i class="fa fa-exclamation-triangle me-2"></i>Discrepancy Found Applications
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-discrepancy-removed-tab" data-bs-toggle="pill" data-bs-target="#pills-discrepancy-removed" type="button" role="tab" aria-controls="pills-discrepancy-removed" aria-selected="false">
                    <i class="fa fa-exclamation-triangle me-2"></i>Discrepancy Removed Applications
                </button>
            </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content" id="pills-tabContent">
            
            <!-- Pending Applications Tab -->
            <div class="tab-pane fade show active" id="pills-pending" role="tabpanel" aria-labelledby="pills-pending-tab" tabindex="0">
                <div class="card">
                    <div class="card-body">
                        <div class="dt-responsive">
                            <table id="pending-datatable" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Sl. No.</th>
                                        <th>Application No.</th>
                                        <th>Name</th>
                                        <th>Email ID</th>
                                        <th>Phone Numbers</th>
                                        <th>Submitted On</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Discrepancy Found Applications Tab -->
            <div class="tab-pane fade" id="pills-discrepancy-found" role="tabpanel" aria-labelledby="pills-discrepancy-found-tab" tabindex="0">
                <div class="card">
                    <div class="card-body">
                        <div class="dt-responsive">
                            <table id="discrepancy-found-datatable" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Sl. No.</th>
                                        <th>Application No.</th>
                                        <th>Name</th>
                                        <th>Email ID</th>
                                        <th>Phone Numbers</th>
                                        <th>Submitted On</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Discrepancy Removed Applications Tab -->
            <div class="tab-pane fade" id="pills-discrepancy-removed" role="tabpanel" aria-labelledby="pills-discrepancy-removed-tab" tabindex="0">
                <div class="card">
                    <div class="card-body">
                        <div class="dt-responsive">
                            <table id="discrepancy-removed-datatable" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Sl. No.</th>
                                        <th>Application No.</th>
                                        <th>Name</th>
                                        <th>Email ID</th>
                                        <th>Phone Numbers</th>
                                        <th>Submitted On</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

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

@endsection

@section('pages-scripts')
<script>
    $(document).ready(function() {
        // Initialize DataTables for each table
        $('#pending-datatable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            scrollX: false,
            pageLength: 10,
            ajax: {
                url: "{{ route('training-center.students.new-application-fetch-for-datatable-for-pending') }}",
                type: "POST",
                data: function (d) {
                    d._token = $('meta[name="csrf-token"]').attr('content');
                }
            },
            columns: [{
                data: null,
                name: 'id',
                render: function (data,type,row,meta) {
                    return meta.row + 1;
                }
            },
            {
                data: 'application_number',
                name: 'application_number'
            },
            {
                data: 'name',
                data: 'name'
            },
            {
                data: 'email',
                data: 'email'
            },
            {
                data: 'phone',
                data: 'phone'
            },
            {
                data: 'created_at',
                data: 'created_at'
            },
            {
                data: 'application_status',
                data: 'application_status'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false,
                width: '12%',
            }

        ]
        });

        $('#discrepancy-found-datatable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            scrollX: false,
            pageLength: 10,
            ajax: {
                url: "{{ route('training-center.students.new-application-fetch-for-datatable-for-discrepancy-found') }}",
                type: "POST",
                data: function (d) {
                    d._token = $('meta[name="csrf-token"]').attr('content');
                }

            },
            columns: [{
                data: null,
                name: 'id',
                render: function (data,type,row,meta) {
                    return meta.row + 1;
                }
            },
            {
                data: 'application_number',
                name: 'application_number'
            },
            {
                data: 'name',
                data: 'name'
            },
            {
                data: 'email',
                data: 'email'
            },
            {
                data: 'phone',
                data: 'phone'
            },
            {
                data: 'created_at',
                data: 'created_at'
            },
            {
                data: 'application_status',
                data: 'application_status'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false,
                width: '12%',
            }

        ]
        });

        $('#discrepancy-removed-datatable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            scrollX: false,
            pageLength: 10,
            ajax: {
                url: "{{ route('training-center.students.new-application-fetch-for-datatable-for-discrepancy-removed') }}",
                type: "POST",
                data: function (d) {
                    d._token = $('meta[name="csrf-token"]').attr('content');
                }

            },
            columns: [{
                data: null,
                name: 'id',
                render: function (data,type,row,meta) {
                    return meta.row + 1;
                }
                },
                {
                    data: 'application_number',
                    name: 'application_number'
                },
                {
                    data: 'name',
                    data: 'name'
                },
                {
                    data: 'email',
                    data: 'email'
                },
                {
                    data: 'phone',
                    data: 'phone'
                },
                {
                    data: 'created_at',
                    data: 'created_at'
                },
                {
                    data: 'application_status',
                    data: 'application_status'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    width: '12%',
                }
            ]
        });

        $(document).on('click', '.btn-view-details', function() {
            // Show the offcanvas
            const offcanvasElement = new bootstrap.Offcanvas(document.getElementById('applicationDetailsOffcanvas'));
            offcanvasElement.show();
        })
    });
</script>
@endsection