@extends('admin.layout.main')

@section('content')
    @push('meta')
        <meta name="csrf-token" content="{{ csrf_token() }}">
    @endpush

    @push('styles')
        <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet" />
        <style>
            .select2-container--open .select2-dropdown {
                z-index: 99999;
                /* Set the desired z-index value */
            }

            .select2-selection__choice {
                background-color: #0080FF !important;
                /* Change the background color */
                color: #fff;
                /* Change the text color */
            }

            .card-body {
                padding: 0px !important;
            }
        </style>
    @endpush

    <div class="breadcrumbbar">
        <div class="row align-items-center">
            <div class="col-md-8 col-lg-8">
                <div class="breadcrumb-list">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('teachers_list') }}">Enrollment</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Enrollment List</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="widgetbar">
                    <button class="btn btn-primary-rgba" id="addEnrollment">Add Enrollment</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Student Enrollment Modal -->
    <div class="modal fade" id="createEnrollmentModal" tabindex="-1" role="dialog"
        aria-labelledby="createEnrollmentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createEnrollmentModalLabel">Add Enrollment</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createEnrollmentForm">
                    <div class="modal-body">
                        <div class="card m-b-30">
                            <div class="card-body">
                                <ul class="nav nav-pills nav-justified mb-3" id="pills-tab-justified" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab-justified" data-toggle="tab"
                                            href="#pills-home-justified" role="tab" aria-controls="pills-home"
                                            aria-selected="true">Student</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link disabled" id="pills-profile-tab-justified" data-toggle="tab"
                                            href="#pills-profile-justified" role="tab" aria-controls="pills-profile"
                                            aria-selected="false">Enrollment</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="pills-tab-justifiedContent">
                                    <div class="tab-pane fade show active" id="pills-home-justified" role="tabpanel"
                                        aria-labelledby="pills-home-tab-justified">
                                        <!-- Section 1: Basic Information -->
                                        <div class="form-group">
                                            <label for="lead_id">Leads</label>
                                            <select name="lead_id" id="lead_id" class="form-control" required>
                                                @foreach ($leads as $lead)
                                                    <option value="{{ $lead['id'] }}">{{ $lead['name'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="email">Email</label>
                                            <input type="email" class="form-control" id="email" name="email"
                                                required />
                                        </div>
                                        <div class="form-group">
                                            <label for="password">Password</label>
                                            <input type="password" class="form-control" id="password" name="password"
                                                autocomplete="current-password" required />
                                        </div>
                                        <div class="form-group">
                                            <label for="cnic">CNIC</label>
                                            <input type="text" class="form-control" id="cnic" name="cnic"
                                                required />
                                        </div>
                                        <div class="form-group">
                                            <label for="address">Address</label>
                                            <input type="text" class="form-control" name="address" id="address"
                                                placeholder="1234 Main St" />
                                        </div>
                                        <button type="button" class="btn btn-primary" id="nextBtn">Next</button>
                                    </div>
                                    <div class="tab-pane fade" id="pills-profile-justified" role="tabpanel"
                                        aria-labelledby="pills-profile-tab-justified">
                                        <!-- Section 2: Enrollment Details -->
                                        <div class="form-group">
                                            <label for="trial_teacher_id">Trial Teacher</label>
                                            <select name="teacher_id" id="trial_teacher_id" class="form-control">
                                                @foreach ($teachers as $teacher)
                                                    <option value="{{ $teacher['id'] }}">{{ $teacher['name'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="trial_course_id">Trial Course</label>
                                            <select name="course_id" id="trial_course_id" class="form-control"></select>
                                        </div>
                                        <div class="form-group">
                                            <label for="class_start_day">Start Day</label>
                                            <select id="class_start_day" class="form-control">
                                                <option value="Mon" selected>Monday</option>
                                                <option value="Tue">Tuesday</option>
                                                <option value="Wed">Wednesday</option>
                                                <option value="Thu">Thursday</option>
                                                <option value="Fri">Friday</option>
                                                <option value="Sat">Saturday</option>
                                                <option value="Sun">Sunday</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="class_end_day">End Day</label>
                                            <select id="class_end_day" class="form-control">
                                                <option value="Mon">Monday</option>
                                                <option value="Tue">Tuesday</option>
                                                <option value="Wed">Wednesday</option>
                                                <option value="Thu">Thursday</option>
                                                <option value="Fri" selected>Friday</option>
                                                <option value="Sat">Saturday</option>
                                                <option value="Sun">Sunday</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="class_start_time">Start Time</label>
                                            <input type="time" class="form-control" id="class_start_time"
                                                name="class_start_time" />
                                        </div>
                                        <div class="form-group">
                                            <label for="class_end_time">End Time</label>
                                            <input type="time" class="form-control" id="class_end_time"
                                                name="class_end_time" />
                                        </div>
                                        <table class="mt-3 table" id="enrollmentTable">
                                            <thead>
                                                <tr>
                                                    <th>Course</th>
                                                    <th>Teacher</th>
                                                    <th>Timings</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                        <div class="d-flex justify-content-between mt-3">
                                            <div>
                                                <button type="button" class="btn btn-secondary"
                                                    id="prevBtn">Previous</button>
                                                <button type="button" class="btn btn-primary ms-2"
                                                    id="addCourseBtn">Add</button>
                                            </div>
                                            <button type="button" class="btn btn-success float-right"
                                                id="confirmEnrollmentBtn">Add Enrollment</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>





    <!-- Start Contentbar -->
    <div class="contentbar">
        <div class="row">
            <div class="col-lg-12">
                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title">Enrollment Table</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="overflow-x: scroll">
                            <table id="enroll_table" class="table-bordered category-table display table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Student</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Cnic</th>
                                        <th>Address</th>
                                        <th style="width: 150px">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enrollment Modal -->
    <div class="modal fade" id="enrollmentModal" tabindex="-1" role="dialog" aria-labelledby="enrollmentModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="enrollmentModalLabel">Enrollment Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table" id="enrollmentTable">
                        <thead>
                            <tr>
                                <th>Course Name</th>
                                <th>Teacher Name</th>
                                <th>Class Timing</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Data will be inserted here via JavaScript -->
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Update Student Enrollment Modal -->
    <div class="modal fade" id="updateEnrollmentModal" tabindex="-1" role="dialog"
        aria-labelledby="updateEnrollmentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateEnrollmentModalLabel">Update Enrollment</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateEnrollmentForm">
                    <input type="hidden" id="enrollment_id_update" name="enrollment_id">
                    <div class="modal-body">
                        <div class="card m-b-30">
                            <div class="card-body">
                                <ul class="nav nav-pills nav-justified mb-3" id="pills-tab-justified-update"
                                    role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab-update" data-toggle="pill"
                                            href="#pills-home-update" role="tab" aria-controls="pills-home-update"
                                            aria-selected="true">Student</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-profile-tab-update" data-toggle="pill"
                                            href="#pills-profile-update" role="tab"
                                            aria-controls="pills-profile-update" aria-selected="false">Enrollment</a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="pills-tab-content-update">
                                    <div class="tab-pane fade show active" id="pills-home-update" role="tabpanel"
                                        aria-labelledby="pills-home-tab-update">
                                        <!-- Student Form Fields -->
                                        <input type="hidden" name="lead_id" id="lead_id_update">
                                        <input type="hidden" name="name" id="name_update">

                                        <div class="form-group">
                                            <label for="email_update">Email</label>
                                            <input type="email" class="form-control" id="email_update" name="email"
                                                required>
                                        </div>
                                        <div class="form-group">
                                            <label for="password_update">Password</label>
                                            <input type="password" class="form-control" id="password_update"
                                                name="password" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="cnic_update">CNIC</label>
                                            <input type="text" class="form-control" id="cnic_update" name="cnic"
                                                required>
                                        </div>
                                        <div class="form-group">
                                            <label for="address_update">Address</label>
                                            <input type="text" class="form-control" name="address"
                                                id="address_update" placeholder="1234 Main St">
                                        </div>
                                        <button type="button" class="btn btn-primary" id="nextBtnUpdate">Next</button>
                                    </div>
                                    <div class="tab-pane fade" id="pills-profile-update" role="tabpanel"
                                        aria-labelledby="pills-profile-tab-update">
                                        <div class="form-group">
                                            <label for="trial_teacher_id_update">Trial Teacher</label>
                                            <select name="teacher_id" id="trial_teacher_id_update" class="form-control">
                                                @foreach ($teachers as $teacher)
                                                    <option value="{{ $teacher['id'] }}">{{ $teacher['name'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="trial_course_id_update">Trial Course</label>
                                            <select name="course_id" id="trial_course_id_update"
                                                class="form-control"></select>
                                        </div>
                                        <div class="form-group">
                                            <label for="class_start_day_update">Start Day</label>
                                            <select id="class_start_day_update" class="form-control">
                                                <option value="Mon">Monday</option>
                                                <option value="Tue">Tuesday</option>
                                                <option value="Wed">Wednesday</option>
                                                <option value="Thu">Thursday</option>
                                                <option value="Fri">Friday</option>
                                                <option value="Sat">Saturday</option>
                                                <option value="Sun">Sunday</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="class_end_day_update">End Day</label>
                                            <select id="class_end_day_update" class="form-control">
                                                <option value="Mon">Monday</option>
                                                <option value="Tue">Tuesday</option>
                                                <option value="Wed">Wednesday</option>
                                                <option value="Thu">Thursday</option>
                                                <option value="Fri">Friday</option>
                                                <option value="Sat">Saturday</option>
                                                <option value="Sun">Sunday</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="class_start_time_update">Start Time</label>
                                            <input type="time" class="form-control" id="class_start_time_update"
                                                name="class_start_time">
                                        </div>
                                        <div class="form-group">
                                            <label for="class_end_time_update">End Time</label>
                                            <input type="time" class="form-control" id="class_end_time_update"
                                                name="class_end_time">
                                        </div>

                                        <table class="mt-3 table" id="enrollmentTableUpdate">
                                            <thead>
                                                <tr>
                                                    <th>Course</th>
                                                    <th>Teacher</th>
                                                    <th>Timings</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>

                                        <div class="d-flex justify-content-between mt-3">
                                            <div>
                                                <button type="button" class="btn btn-secondary"
                                                    id="prevBtnUpdate">Previous</button>
                                                <button type="button" class="btn btn-primary ms-2"
                                                    id="addCourseBtnUpdate">Add</button>
                                            </div>
                                            <button type="button" class="btn btn-success" id="confirmUpdateBtn">Update
                                                Enrollment</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>





    @push('scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
        <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(document).ready(function() {
                // Disable tab clicking
                $('#pills-tab-justified-update .nav-link').on('click', function(e) {
                    e.preventDefault();
                    return false;
                });

                $(document).on('click', '#editEnrollment', function() {
                    var enrollmentId = $(this).data('id');

                    $.ajax({
                        url: "{{ route('get_enrollment', ['id' => ':id']) }}".replace(':id',
                            enrollmentId),
                        method: 'GET',
                        success: function(response) {
                            $('#updateEnrollmentModal').modal('show');
                            $('#enrollment_id_update').val(response.data.id);
                            $('#lead_id_update').val(response.data.lead_id);
                            $('#email_update').val(response.data.email);
                            $('#name_update').val(response.data.name);
                            $('#cnic_update').val(response.data.cnic);
                            $('#address_update').val(response.data.address);

                            // Ensure the first tab is active when opening the modal
                            $('#pills-home-tab-update').tab('show');
                        },
                        error: function(xhr) {
                            Swal.fire('Error', 'Failed to fetch enrollment details.', 'error');
                        }
                    });
                });

                // Handle the Next button click
                $('#nextBtnUpdate').on('click', function() {
                    var isValid = $('#updateEnrollmentForm')[0].checkValidity();

                    if (isValid) {
                        var leadId = $('#lead_id_update').val();

                        if (leadId) {
                            var url = `{{ route('get_lead_courses', ['id' => ':id']) }}`.replace(':id',
                                leadId);

                            $.ajax({
                                url: url,
                                method: 'GET',
                                success: function(response) {
                                    if (response.courses && response.courses.length) {
                                        var courseSelect = $('#trial_course_id_update');
                                        courseSelect.empty();

                                        $.each(response.courses, function(index, course) {
                                            courseSelect.append(new Option(course
                                                .course_name, course.course_id));
                                        });

                                        // Switch to the 'Enrollment' tab
                                        $('#pills-profile-tab-update').tab('show');
                                    } else {
                                        Swal.fire('No courses found',
                                            'No courses available for the selected lead.',
                                            'warning');
                                    }
                                },
                                error: function(xhr) {
                                    console.error('Failed to fetch courses:', xhr);
                                    Swal.fire('Error', 'Failed to fetch courses.', 'error');
                                }
                            });
                        } else {
                            Swal.fire('Warning', 'Please select a lead.', 'warning');
                        }
                    } else {
                        $('#updateEnrollmentForm')[0].reportValidity();
                    }
                });

                // Handle the Previous button click
                $('#prevBtnUpdate').on('click', function() {
                    $('#pills-home-tab-update').tab('show');
                });

                // Handle Add Course button click
                $('#addCourseBtnUpdate').on('click', function() {
                    var courseId = $('#trial_course_id_update').val();
                    var courseName = $('#trial_course_id_update option:selected').text();
                    var teacherId = $('#trial_teacher_id_update').val();
                    var teacherName = $('#trial_teacher_id_update option:selected').text();
                    var startDay = $('#class_start_day_update').val();
                    var endDay = $('#class_end_day_update').val();
                    var startTime = $('#class_start_time_update').val();
                    var endTime = $('#class_end_time_update').val();

                    if (courseId && teacherId && startDay && endDay && startTime && endTime) {
                        var existingRows = $('#enrollmentTableUpdate tbody tr');
                        var duplicate = false;

                        existingRows.each(function() {
                            var rowCourseId = $(this).find('td[data-course-id]').data('course-id');
                            if (rowCourseId == courseId) {
                                duplicate = true;
                                return false;
                            }
                        });

                        if (duplicate) {
                            Swal.fire('Duplicate Entry', 'This course is already added.', 'warning');
                        } else {
                            $('#enrollmentTableUpdate tbody').append(`
                    <tr>
                        <td data-course-id="${courseId}">${courseName}</td>
                        <td data-teacher-id="${teacherId}">${teacherName}</td>
                        <td>${startDay} ${startTime} - ${endDay} ${endTime}</td>
                        <td><button type="button" class="btn btn-danger btn-sm remove-course-btn">Remove</button></td>
                    </tr>
                `);
                        }
                    } else {
                        Swal.fire('Incomplete Data', 'Please fill in all fields.', 'warning');
                    }
                });

                // Remove course from the table
                $('#enrollmentTableUpdate').on('click', '.remove-course-btn', function() {
                    $(this).closest('tr').remove();
                });
                $('#confirmUpdateBtn').on('click', function() {
                    var enrollments = [];


                    $('#enrollmentTableUpdate tbody tr').each(function() {
                        var courseId = $(this).find('td[data-course-id]').data('course-id');
                        var teacherId = $(this).find('td[data-teacher-id]').data('teacher-id');
                        var classTiming = $(this).find('td:nth-child(3)').text();

                        enrollments.push({
                            course_id: courseId,
                            teacher_id: teacherId,
                            class_timing: classTiming
                        });
                    });

                    var data = {
                        name: $('#name_update').val(),
                        email: $('#email_update').val(),
                        cnic: $('#cnic_update').val(),
                        password: $('#password_update').val(),
                        address: $('#address_update').val(),
                        enrollments: enrollments
                    };

                    $(this).prop('disabled', true);
                    $.ajax({
                        url: "{{ route('update_enrollment_form', ['id' => ':id']) }}".replace(':id', $(
                            '#enrollment_id_update').val()),
                        method: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        success: function(response) {
                            if (response.success) {
                                Swal.fire('Success', response.message ||
                                        'Enrollment updated successfully.', 'success')
                                    .then(() => {
                                        // Hide the modal
                                        $('#updateEnrollmentModal').modal('hide');

                                        // Reset the form
                                        $('#updateEnrollmentForm')[0].reset();
                                        $('#enroll_table').DataTable().ajax.reload();
                                        // Clear the enrollment table
                                        $('#enrollmentTableUpdate tbody').empty();

                                        // Ensure the first tab is active when reopening the modal
                                        $('#updateEnrollmentModal').on('hidden.bs.modal',
                                            function() {
                                                $('#pills-home-tab-update').tab('show');
                                            });
                                    });
                            } else {
                                Swal.fire('Error', response.message ||
                                    'Failed to update enrollment.', 'error');
                            }
                        },
                        error: function(xhr) {
                            // Display API errors
                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                var errors = xhr.responseJSON.errors;
                                var errorMessages = '';
                                $.each(errors, function(index, value) {
                                    errorMessages += value + '<br>';
                                });

                                Swal.fire('Error', errorMessages || xhr.responseJSON.message ||
                                    'An error occurred while upadating enrollment.', 'error');
                            } else {
                                Swal.fire('Error', xhr.responseJSON.message ||
                                    'An error occurred while upadating enrollment.', 'error');
                            }
                        },
                        complete: function() {
                            $('#confirmUpdateBtn').prop('disabled', false);
                        }
                    });
                });

            });
        </script>

        <script>
            $('#lead_id').chosen({
                width: '100%',
                placeholder_text_single: 'Select a lead',
                no_results_text: 'No results matched'
            });
        </script>
        <script>
            $(document).ready(function() {
                var table = $('#enroll_table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route('enrollments_list') }}',
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'name', // Assuming 'student_name' should be 'name' as per your API response
                            name: 'name'
                        },
                        {
                            data: 'email', // Assuming 'student_name' should be 'name' as per your API response
                            name: 'email'
                        },
                        {
                            data: 'phone', // Assuming 'student_name' should be 'name' as per your API response
                            name: 'phone'
                        },
                        {
                            data: 'cnic', // Assuming 'student_name' should be 'name' as per your API response
                            name: 'cnic'
                        },
                        {
                            data: 'address', // Assuming you want to display the address, replace as needed
                            name: 'address'
                        },



                        {
                            data: null,
                            name: 'action',
                            render: function(data, type, row) {
                                return `
                              
                              
                    <button type="button" class="btn btn-round btn-primary" data-id="${row.id}" id="editEnrollment"><i class="feather icon-edit"></i></button>
                    <button type="button" class="btn btn-round btn-primary" data-id="${row.id}" id="viewEnrollment"><i class="feather icon-eye"></i></button>
                    <button type="button" class="btn btn-round btn-danger" data-id="${row.id}" id="deleteEnrollment"><i class="feather icon-trash-2"></i></button>
                `;
                            }
                        }
                    ]
                });

                // view details 
                $(document).on('click', '#viewEnrollment', function() {
                    var enrollmentId = $(this).data('id');

                    $.ajax({

                        url: "{{ route('get_enrollment', ['id' => ':id']) }}".replace(
                            ':id',
                            enrollmentId),
                        method: 'GET',
                        success: function(response) {
                            $('#enrollmentModal').modal('show');
                            var enrollments = response.enrollments;
                            var tableBody = $('#enrollmentTable tbody');
                            tableBody.empty();

                            $.each(enrollments, function(index, data) {
                                tableBody.append(
                                    `<tr>
                        <td>${data.course_name}</td>
                        <td>${data.teacher_name}</td>
                        <td>${data.class_timing}</td>
                    </tr>`
                                );
                            });


                        },
                        error: function(xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: 'An error occurred while fetching enrollment details.',
                                confirmButtonText: 'OK'
                            });
                        }
                    });
                });

                $('body').on('click', '#deleteEnrollment', function() {
                    var id = $(this).data('id');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        // Use 'warning' for better visibility
                        showCancelButton: true,

                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'No, cancel!',

                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                type: "DELETE",
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                                        .attr('content')
                                },
                                url: "{{ route('delete_enrollment', ['id' => ':id']) }}"
                                    .replace(':id', id),
                                success: function(response) {
                                    table.ajax.reload();
                                    Swal.fire('Deleted!',
                                        'The Enrollment has been deleted.',
                                        'success');
                                },
                                error: function(xhr) {
                                    Swal.fire('Error!', 'An error occurred.',
                                        'error');
                                }
                            });
                        }
                    });
                });
            });
        </script>
        <script>
            $(document).ready(function() {
                // Prevent tab clicking
                $('#pills-tab-justified').on('click', function(e) {
                    e.preventDefault();
                });

                // Show the modal and reset tabs
                $('#addEnrollment').on('click', function() {
                    $('#createEnrollmentModal').modal('show');
                    $('#pills-home-tab-justified').tab('show'); // Switch to the first tab
                    $('#pills-profile-tab-justified').addClass('disabled'); // Disable the second tab initially
                });

                // Enable/disable Enrollment tab based on Student tab validity
                $('#createEnrollmentForm input, #createEnrollmentForm select').on('input change', function() {
                    var isValid = $('#createEnrollmentForm')[0].checkValidity();
                    $('#pills-profile-tab-justified').toggleClass('disabled', !isValid);
                });

                // Handle the Next button click
                $('#nextBtn').on('click', function() {
                    var isValid = $('#createEnrollmentForm')[0].checkValidity();
                    if (isValid) {
                        var leadId = $('#lead_id').val();
                        if (leadId) {
                            var url = `{{ route('get_lead_courses', ['id' => ':id']) }}`.replace(':id',
                            leadId);

                            $.ajax({
                                url: url,
                                method: 'GET',
                                success: function(response) {
                                    if (response.courses && response.courses.length > 0) {
                                        var courseSelect = $('#trial_course_id');
                                        courseSelect.empty();
                                        $.each(response.courses, function(index, course) {
                                            courseSelect.append(new Option(course
                                                .course_name, course.course_id));
                                        });

                                        $('#pills-profile-tab-justified').tab('show');
                                        $('#enrollmentTable tbody').empty(); // Clear the table
                                        courseIdSet.clear(); // Clear the Set
                                    } else {
                                        Swal.fire('No Courses',
                                            'No courses found for the selected lead.', 'info');
                                    }
                                },
                                error: function(xhr) {
                                    console.error('Failed to fetch courses:', xhr);
                                    Swal.fire('Error', 'Failed to fetch courses.', 'error');
                                }
                            });
                        } else {
                            Swal.fire('Validation Error', 'Please select a lead.', 'warning');
                        }
                    } else {
                        $('#createEnrollmentForm')[0].reportValidity();
                    }
                });

                // Handle the Previous button click
                $('#prevBtn').on('click', function() {
                    $('#pills-home-tab-justified').tab('show');
                });

                // Initialize a Set to keep track of course IDs in the table
                var courseIdSet = new Set();

                // Handle adding a course
                $('#addCourseBtn').on('click', function() {
                    var courseId = String($('#trial_course_id').val());
                    var courseName = $('#trial_course_id option:selected').text();
                    var teacherId = $('#trial_teacher_id').val();
                    var teacherName = $('#trial_teacher_id option:selected').text();
                    var startDay = $('#class_start_day').val();
                    var endDay = $('#class_end_day').val();
                    var startTime = $('#class_start_time').val();
                    var endTime = $('#class_end_time').val();

                    if (courseId && teacherId && startDay && endDay && startTime && endTime) {
                        if (courseIdSet.has(courseId)) {
                            Swal.fire('Duplicate Entry', 'This course is already added.', 'warning');
                        } else {
                            // Add courseId to the set
                            courseIdSet.add(courseId);

                            // Add course to the table
                            $('#enrollmentTable tbody').append(`
                    <tr id="row-${courseId}">
                        <td data-course-id="${courseId}">${courseName}</td>
                        <td data-teacher-id="${teacherId}">${teacherName}</td>
                        <td>${startDay} ${formatTime(startTime)} - ${endDay} ${formatTime(endTime)}</td>
                        <td><button type="button" class="btn btn-danger btn-sm removeBtnnn">Remove</button></td>
                    </tr>
                `);
                        }
                    } else {
                        Swal.fire('Incomplete Data', 'Please fill in all fields.', 'warning');
                    }
                });

                // Handle row removal
                $('#enrollmentTable').on('click', '.removeBtnnn', function() {
                    var courseId = String($(this).closest('tr').find('td[data-course-id]').data(
                    'course-id')); // Ensure courseId is a string
                    if (courseIdSet.has(courseId)) {
                        courseIdSet.delete(courseId);
                        $(this).closest('tr').remove();
                    }
                });

                // Handle the Confirm Enrollment button click
                $('#confirmEnrollmentBtn').on('click', function() {
                    var enrollments = [];

                    $('#enrollmentTable tbody tr').each(function() {
                        var courseId = $(this).find('td[data-course-id]').data('course-id');
                        var teacherId = $(this).find('td[data-teacher-id]').data('teacher-id');
                        var classTiming = $(this).find('td:nth-child(3)').text();

                        // Add unique enrollment objects
                        if (!enrollments.some(e => e.course_id === courseId)) {
                            enrollments.push({
                                course_id: courseId,
                                teacher_id: teacherId,
                                class_timing: classTiming
                            });
                        }
                    });

                    if (enrollments.length === 0) {
                        Swal.fire('No Courses',
                            'Please add at least one course to the enrollment table before confirming.',
                            'warning');
                        return;
                    }

                    var data = {
                        lead_id: $('#lead_id').val(),
                        email: $('#email').val(),
                        cnic: $('#cnic').val(),
                        password: $('#password').val(),
                        address: $('#address').val(),
                        enrollments: enrollments
                    };

                    $.ajax({
                        url: "{{ route('add_enrollment_form') }}",
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        success: function(response) {
                            if (response.success) {
                                Swal.fire('Added!', response.message, 'success').then(() => {
                                    $('#createEnrollmentModal').modal('hide');
                                    $('#enrollmentTable tbody').empty();
                                    $('#createEnrollmentForm')[0].reset();
                                    $('#pills-home-tab-justified').tab('show');
                                    $('#enroll_table').DataTable().ajax.reload();
                                });
                            } else {
                                Swal.fire('Error', response.message || 'Failed to add enrollment.',
                                    'error');
                            }
                        },
                        error: function(xhr) {
                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                var errors = xhr.responseJSON.errors;
                                var errorMessages = '';
                                $.each(errors, function(index, value) {
                                    errorMessages += value + '<br>';
                                });

                                Swal.fire('Error', errorMessages || 'Failed to add enrollment.',
                                    'error');
                            } else {
                                Swal.fire('Error', 'Failed to add enrollment.', 'error');
                            }
                        }
                    });
                });

                // Function to format time in 12-hour format
                function formatTime(time) {
                    var [hours, minutes] = time.split(':');
                    var period = 'AM';

                    hours = parseInt(hours, 10);
                    if (hours >= 12) {
                        period = 'PM';
                        if (hours > 12) {
                            hours -= 12;
                        }
                    } else if (hours === 0) {
                        hours = 12;
                    }

                    return `${hours}:${minutes} ${period}`;
                }
            });
        </script>
    @endpush
@endsection