@extends('layouts.training_centre_layout')

@section('content')

@php
$addRoute = route('training-centre.assessments.create');
$button = '<a href="'.$addRoute.'" class="btn btn-primary">
            <i class="fa fa-plus"></i> Add New Assessment
          </a>';
@endphp

<x-page-header title="{{ $pageTitle }}" button="{!! $button !!}" />

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

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

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

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

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

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

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

                {{-- Filters --}}
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label class="form-label">Filter by Batch</label>
                        <select id="batchFilter" class="form-control">
                            <option value="">All Batches</option>
                            @foreach($batches as $batch)
                                <option value="{{ $batch->id }}">{{ $batch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- DataTable --}}
                <div class="dt-responsive">
                    <table id="assessment-datatable" class="table table-striped table-bordered w-100">
                        <thead>
                            <tr>
                                <th>Sl. No.</th>
                                <th>Assessment Number</th>
                                <th>Assessment Name</th>
                                <th>Batch</th>
                                <th>Assessment Date</th>
                                <th>Assessor</th>
                                <th>Students</th>
                                <th>Assessment Status</th>
                                <th>Status</th>
                                <th width="12%">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>

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

{{-- Offcanvas --}}
<x-offcanvas.assessment.enroll-students :studentDetails="$studentDetails"/>
<x-offcanvas.assessment.assessment-view-and-status :batchStatuses="$batchDetails"/>
<x-offcanvas.assessment.approval-status/>
<x-offcanvas.assessment.update-student-marks/>

@endsection

@section('pages-scripts')

<script>
$(document).ready(function () {

    const assessmentStatus = "{{ $currentStatus }}";

    const table = $('#assessment-datatable').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        scrollX: true,

        ajax: {
            url: "{{ route('training-center.assessments.fetch-for-datatable') }}",
            type: "POST",
            data: function (d) {
                d._token   = $('meta[name="csrf-token"]').attr('content');
                d.status   = assessmentStatus;
                d.batch_id = $('#batchFilter').val();
            }
        },

        columns: [
            { data: null, render: (d,t,r,m) => m.row + 1 },
            { data: 'assessment_number' },
            { data: 'assessment_name' },
            { data: 'batch_name' },
            { data: 'assessment_date' },
            { data: 'assessor_name' },
            { data: 'students' },
            { data: 'assessment_status' },
            { data: 'approval_status' },
            { data: 'action', orderable:false, searchable:false }
        ],

        drawCallback: function () {
            $('.dropdown-toggle').dropdown({ boundary: 'window' });
        }
    });

    $('#batchFilter').on('change', function () {
        table.ajax.reload();
    });

});
</script>
@endsection