@extends('layouts.training_centre_layout')

@section('content')

<x-page-header title="{{ $pageTitle }}" :backButton="true" />

{{-- ================= STATUS TABS (LIKE STUDENTS) ================= --}}
<div class="row mb-3">
    <div class="col-12">
        <ul class="nav nav-pills gap-1">

            {{-- UNDER CREATION --}}
            @if(!$statusParam || $statusParam === 'under-creation')
            <li class="nav-item">
                <a href="{{ route('training-centre.batches.index', ['status' => 'under-creation']) }}"
                   class="nav-link active">
                    <i class="fa fa-pencil-ruler me-1"></i> Under Creation
                </a>
            </li>
            @endif

            {{-- UNDER REVIEW --}}
            @if(!$statusParam || $statusParam === 'under-review')
            <li class="nav-item">
                <a href="{{ route('training-centre.batches.index', ['status' => 'under-review']) }}"
                   class="nav-link active">
                    <i class="fa fa-hourglass-half me-1"></i> Under Review
                </a>
            </li>
            @endif

            {{-- APPROVED --}}
            @if(!$statusParam || $statusParam === 'approved')
            <li class="nav-item">
                <a href="{{ route('training-centre.batches.index', ['status' => 'approved']) }}"
                   class="nav-link active">
                    <i class="fa fa-check-circle me-1"></i> Approved
                </a>
            </li>
            @endif

            {{-- REJECTED --}}
            @if(!$statusParam || $statusParam === 'rejected')
            <li class="nav-item">
                <a href="{{ route('training-centre.batches.index', ['status' => 'rejected']) }}"
                   class="nav-link active">
                    <i class="fa fa-times-circle me-1"></i> Rejected
                </a>
            </li>
            @endif

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

{{-- ================= TABLE CARD ================= --}}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                {{-- COURSE FILTER --}}
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label">Filter by Course</label>
                        <select id="filter_by_course" class="form-control">
                            <option value="">All Courses</option>
                            @foreach ($trainingPrograms as $program)
                                <option value="{{ $program->id }}">
                                    {{ $program->title }} ({{ $program->code }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- DATATABLE --}}
                <table id="batches-datatable" class="table table-bordered w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Batch Name</th>
                            <th>Batch Size</th>
                            <th>Students</th>
                            <th>Batch Status</th>
                            <th>Approval Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>

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

{{-- OFFCANVAS --}}
<x-offcanvas.batch.enroll-students :studentDetails="$studentDetails"/>
<x-offcanvas.batch.batch-view-and-status :batchStatuses="$batchStatuses"/>
<x-offcanvas.batch.approval-status/>

@endsection

@section('pages-scripts')

@yield('enrollstudents-batch-offcanvas-script')
@yield('approval-status-batch-offcanvas')
@yield('batch-view-and-status-batch-offcanvas')

<script>
    const batchStatus = "{{ $currentStatus }}";

    function loadBatchTable(courseId = '') {

        if ($.fn.DataTable.isDataTable('#batches-datatable')) {
            $('#batches-datatable').DataTable().destroy();
        }

        $('#batches-datatable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            scrollX: true,
            ajax: {
                url: "{{ route('training-centre.batches.fetch-for-datatable') }}",
                type: "POST",
                data: d => {
                    d._token   = $('meta[name="csrf-token"]').attr('content');
                    d.status   = batchStatus;
                    d.course_id = courseId;
                }
            },
            columns: [
                { data: null, render: (d,t,r,m) => m.row + 1 },
                { data: 'name' },
                { data: 'size' },
                { data: 'students' },
                { data: 'batch_status', render: d => `<span class="badge bg-info">${d}</span>` },
                {
                    data: 'current_approval_status',
                    render: d => {
                        let cls = d === 'APPROVED' ? 'bg-success' :
                                  d === 'REJECTED' ? 'bg-danger' : 'bg-warning';
                        return `<span class="badge ${cls}">${d}</span>`;
                    }
                },
                { data: 'action', orderable:false, searchable:false }
            ],
            drawCallback: () => $('.dropdown-toggle').dropdown({ boundary:'window' })
        });
    }

    $(document).ready(function () {
        loadBatchTable();

        $('#filter_by_course').on('change', function () {
            loadBatchTable($(this).val());
        });
    });
</script>
@endsection