@extends('layouts.training_centre_layout')

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

{{-- 
$statusParam = enrolled | rejected
$status      = APPROVED | REJECTED
--}}

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

        <!-- MENU-BASED SINGLE TAB -->
        <ul class="nav nav-pills mb-3 gap-1">

            @if($statusParam === 'enrolled')
                <li class="nav-item">
                    <span class="nav-link active">
                        <i class="fa fa-graduation-cap me-1"></i>
                        Enrolled Students
                    </span>
                </li>
            @endif

            @if($statusParam === 'rejected')
                <li class="nav-item">
                    <span class="nav-link active">
                        <i class="fa fa-times-circle me-1"></i>
                        Rejected Students
                    </span>
                </li>
            @endif

        </ul>

    </div>
</div>

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

                <!-- DataTable -->
                <div class="dt-responsive">
                    <table id="students-datatable" class="table table-striped table-bordered w-100">
                        <thead>
                            <tr>
                                <th>Sl. No.</th>
                                <th>Application No.</th>
                                <th>Name</th>
                                <th>Email ID</th>
                                <th>Phone Number</th>
                                <th>Submitted On</th>
                                <th>Status</th>
                                <th width="15%">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>

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


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

    // STATUS FROM CONTROLLER (MENU-BASED)
    const studentStatus = "{{ $status }}"; // APPROVED / REJECTED

    $(document).ready(function () {

        studentTable = $('#students-datatable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            ajax: {
                url: "{{ route('training-center.students.fetch-for-datatable-for-center') }}",
                type: "POST",
                data: function (d) {
                    d._token = $('meta[name="csrf-token"]').attr('content');
                    d.status = studentStatus;
                }
            },
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + 1;
                    },
                    width: '6%'
                },
                { data: 'application_number', name: 'application_number' },
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                { data: 'phone', name: 'phone' },
                { data: 'created_at', name: 'created_at' },
                { data: 'application_status', name: 'application_status' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            drawCallback: function () {
                $('.dropdown-toggle').dropdown({ boundary: 'window' });
            }
        });

    });
</script>
@endsection