@extends('layouts.partner_layout')

@section('content')
<!-- [ Page Header ] start -->


<x-page-header title="{{ $pageTitle }}" button="{!! (isset($button))?$button:'' !!}" />

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

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

        <!-- Navigation Tabs -->
        <ul class="nav nav-pills mb-3 gap-1" id="batch-status-tabs" role="tablist">

            <li class="nav-item" role="presentation">
                <button class="nav-link active" data-status="PENDING" type="button">
                    <i class="fa fa-hourglass-half text-warning me-1"></i> For Review
                </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">
                <!-- Course Filter -->
                <div class="row mb-3">
                    <div class="col-md-4 col-12">
                        <label for="courseFilter" class="form-label">Filter by Course</label>
                        <select name="courseFilter" id="courseFilter" class="form-input form-control">
                            <option value="">All Courses</option>
                            @foreach ($trainingPrograms as $trainingProgram)
                                <option value="{{ $trainingProgram->id }}">{{ $trainingProgram->title }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 col-12">
                        <label for="trainingCenterFilter" class="form-label">Filter by Training Center</label>
                        <select name="trainingCenterFilter" id="trainingCenterFilter" class="form-input form-control">
                            <option value="">All Training Centers</option>
                            @foreach ($centersBasicDetails as $center)
                                <option value="{{ $center->id }}">{{ $center->centre_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Tab contents -->

                <!--  Reviews Tabs -->
                <div class="dt-responsive">
                    <table id="batches-datatable" class="table table-striped table-bordered w-100">
                        <thead>
                            <tr>
                                <th>Sl. No.</th>
                                <th>Centre Name</th>
                                <th>Course Name</th>
                                <th>Batch Name</th>
                                <th>Batch Size</th>
                                <th>Students</th>
                                <th>Batch Status</th>
                                <th>Approval Status</th>
                                <th width="10%">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>

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

@endsection

@section('pages-scripts')
<script>
    // $('#pages-datatable').DataTable({});

    let batchTable;
    let currentStatus = "PENDING";

    function loadBatchesDatatable(status, courseId = '') {
        if ($.fn.DataTable.isDataTable('#batches-datatable')) {
            $('#batches-datatable').DataTable().destroy();
        }

        batchTable = $('#batches-datatable').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        scrollX: true,
        drawCallback: function() {
            $('.dropdown-toggle').dropdown({
                boundary: 'window'
            });
        },
        ajax: {
            url: "{{ route('partner.batches.fetch-for-datatable-for-partner') }}",
            type: "POST",
            data: function (d) {
                d._token = $('meta[name="csrf-token"]').attr('content');
                d.status = status; // pass tab status
                d.course_id = courseId; // pass course filter
            }

        },
        columns: [{
                data: null,
                name: 'id',
                render: function (data,type,row,meta) {
                    return meta.row + 1;
                }
            },
            {
                data: 'centre_name',
                name: 'centre_name'
            },
            {
                data: 'course_name',
                data: 'course_name'
            },
            {
                data: 'batch_name',
                data: 'batch_name'
            },
            {
                data: 'batch_size',
                data: 'batch_size'
            },
            {
                data: 'students',
                data: 'students'
            },
            {
                data: 'batch_status',
                data: 'batch_status'
            },
            {
                data: 'approval_status',
                data: 'approval_status'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false,
                width: '12%',
            }
        ]
    });

    }

    $(document).ready(function() {
        // initial load
        loadBatchesDatatable(currentStatus);

        // on tab click
        $('#batch-status-tabs .nav-link').on('click', function() {
            $('#batch-status-tabs .nav-link').removeClass('active');
            $(this).addClass('active');

            currentStatus = $(this).data('status');
            let courseId = $('#courseFilter').val();

            // let courseId = $('#filter_by_course').val();
            loadBatchesDatatable(currentStatus);
        });

        $('#courseFilter').on('change', function() {
            let courseId = $(this).val();
            loadBatchesDatatable(currentStatus, courseId);
        });

    });
    
</script>
@endsection