$(document).ready(function () {

    /*
    |--------------------------------------------------------------------------
    | LOAD STUDENTS
    |--------------------------------------------------------------------------
    */

    $('#loadStudentsBtn').on('click', function () {

        const classId = $('#class_id').val();
        const examId  = $('#exam_type_id').val();

        if (classId === '') {

            toastr.error('Please select class!');

            return;
        }

        if (examId === '') {

            toastr.error('Please select exam type!');

            return;
        }

        $('#hidden_exam_id').val(examId);

        $('#studentsContainer').html(`

            <div class="text-center p-5">

                <div class="spinner-border text-primary"></div>

                <p class="mt-3 mb-0">

                    Loading students...

                </p>

            </div>

        `);

        $.ajax({

            url: 'ajax/exam_ajax.php',

            type: 'GET',

            dataType: 'json',

            data: {

                action: 'get_students_for_admit_card',
                class_id: classId

            },

            success: function (response) {

                if (!response.success) {

                    toastr.error(response.message);

                    return;
                }

                if (response.students.length === 0) {

                    $('#studentsContainer').html(`

                        <div class="text-center p-5 text-muted">

                            <i class="fas fa-users-slash fa-3x mb-3"></i>

                            <p class="mb-0">

                                No students found.

                            </p>

                        </div>

                    `);

                    return;
                }

                let html = `

                    <div class="table-responsive">

                        <table class="table table-bordered table-hover mb-0">

                            <thead class="thead-light">

                                <tr>

                                    <th width="70">

                                        <div class="custom-control custom-checkbox">

                                            <input
                                                type="checkbox"
                                                class="custom-control-input"
                                                id="selectAllStudents"
                                            >

                                            <label
                                                class="custom-control-label"
                                                for="selectAllStudents"
                                            ></label>

                                        </div>

                                    </th>

                                    <th width="120">

                                        Roll No

                                    </th>

                                    <th>

                                        Student Name

                                    </th>

                                </tr>

                            </thead>

                            <tbody>

                `;

                response.students.forEach(function (student) {

                    html += `

                        <tr>

                            <td class="text-center">

                                <div class="custom-control custom-checkbox">

                                    <input
                                        type="checkbox"
                                        class="custom-control-input student-checkbox"
                                        id="student_${student.id}"
                                        name="student_ids[]"
                                        value="${student.id}"
                                    >

                                    <label
                                        class="custom-control-label"
                                        for="student_${student.id}"
                                    ></label>

                                </div>

                            </td>

                            <td>

                                ${student.roll_no ?? '-'}

                            </td>

                            <td>

                                <strong>

                                    ${student.name}

                                </strong>

                            </td>

                        </tr>

                    `;
                });

                html += `

                            </tbody>

                        </table>

                    </div>

                `;

                $('#studentsContainer').html(html);

                $('#printBtn').prop('disabled', false);

                toastr.success('Students loaded successfully!');

            },

            error: function () {

                toastr.error('Failed to load students!');

            }

        });

    });

    /*
    |--------------------------------------------------------------------------
    | SELECT ALL STUDENTS
    |--------------------------------------------------------------------------
    */

    $(document).on('change', '#selectAllStudents', function () {

        $('.student-checkbox').prop(
            'checked',
            $(this).is(':checked')
        );

    });

    /*
    |--------------------------------------------------------------------------
    | SINGLE CHECKBOX UPDATE
    |--------------------------------------------------------------------------
    */

    $(document).on('change', '.student-checkbox', function () {

        const totalCheckboxes = $('.student-checkbox').length;

        const checkedCheckboxes = $('.student-checkbox:checked').length;

        $('#selectAllStudents').prop(
            'checked',
            totalCheckboxes === checkedCheckboxes
        );

    });

    /*
    |--------------------------------------------------------------------------
    | FORM VALIDATION
    |--------------------------------------------------------------------------
    */

    $('#admitCardForm').on('submit', function (e) {

        const selectedStudents = $('.student-checkbox:checked').length;

        if (selectedStudents === 0) {

            e.preventDefault();

            toastr.error('Please select at least one student!');

            return;
        }

        Swal.fire({

            icon: 'success',
            title: 'Generating Admit Cards...',
            text: 'Please wait',

            timer: 1500,

            showConfirmButton: false

        });

    });

});