@extends('layouts.partner_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="assessments-status-tabs" role="tablist">
            <li class="nav-item active" role="presentation">
                <button class="nav-link active" data-status="PENDING" type="button">
                    <i class="fa fa-calendar text-info me-1"></i>For Approval
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-status="SEND_TO_NISD" type="button">
                    <i class="fa fa-hourglass-half text-warning me-1"></i>Under Review
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-status="APPROVED" type="button">
                    <i class="fa fa-check-circle text-success me-1"></i>Approved
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-status="REJECTED" type="button">
                    <i class="fa fa-times-circle text-danger me-1"></i>Rejected
                </button>
            </li>
        </ul>

    </div>
</div>

<!-- [ Page Header ] end -->

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

           
    <div class="col-md-3 col-12 mb-2">
        <label for="dateFromFilter" class="form-label">Date From</label>
        <input type="date" name="dateFromFilter" id="dateFromFilter" class="form-input form-control">
    </div>
    <div class="col-md-3 col-12 mb-2">
        <label for="dateToFilter" class="form-label">Date To</label>
        <input type="date" name="dateToFilter" id="dateToFilter" class="form-input form-control">
    </div>
</div>

                <div class="dt-responsive mt-3">
                    <table id="assessments-datatable" class="table table-striped table-bordered">
                        <thead>
                                <tr>
                                <th>Sl. No.</th>
                                <th>Assessment Name</th>
                                <th>Batch</th>
                                <th>Assessment Date</th>
                                <th>Start Time</th>
                                <th>End Time</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>
@endsection

@section('pages-scripts')
<script>
    $(document).ready(function() {
        let currentStatus = "PENDING";
        
        // 1. Initialize DataTable once
        let batchTable = $('#assessments-datatable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            scrollX: true,
            ajax: {
                url: "{{ route('training-center.assessments.fetch-for-datatable-for-partner') }}",
                type: "POST",
                data: function (d) {
                    d._token = $('meta[name="csrf-token"]').attr('content');
                    d.status = currentStatus;
                    // Sending all filter values to the controller
                    d.batch_id = $('#batchFilter').val();
                    d.date_from = $('#dateFromFilter').val();
                    d.date_to = $('#dateToFilter').val();
                }
            },
            columns: [
                { data: null, render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1 },
                { data: 'assessment_name', name: 'assessment_name' },
                { data: 'batch_name', name: 'batch_name' },
                { data: 'assessment_date', name: 'assessment_date' },
                { data: 'start_time', name: 'start_time' },
                { data: 'end_time', name: 'end_time' },
                { data: 'assessor_name', name: 'assessor_name' },
                { data: 'students', name: 'students' },
                { data: 'assessment_status', name: 'assessment_status' },
                { data: 'approval_status', name: 'approval_status' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });

        // 2. Handle Tab clicks
        $('#assessments-status-tabs .nav-link').on('click', function() {
            $('#assessments-status-tabs .nav-link').removeClass('active');
            $(this).addClass('active');
            currentStatus = $(this).data('status');
            batchTable.draw(); // Refresh table with new status
        });

        // 3. Handle Filter changes (Batch, Date From, Date To)
        $('#batchFilter, #dateFromFilter, #dateToFilter').on('change', function() {
            batchTable.draw(); // Refresh table with new filters
        });
    });
</script>
@endsection