@extends('layouts-v2.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="{{ route('class.index') }}" class="hover:text-blue-600 cursor-pointer">Danh sách lớp học</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>{{ $class->name }}</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6">Thông tin lớp học - {{ $class->name }}</h1>

    <!-- Message Notification V2 -->
    <div class="message-class hidden fixed top-4 right-4 z-50 max-w-md w-full">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-4 flex items-start gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    @if(session('success-v2'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('success', '{{ session('success-v2') }}');
            });
        </script>
    @endif

    @if(session('error-v2'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                showNotificationV2('error', '{{ session('error-v2') }}');
            });
        </script>
    @endif

    <!-- Tabs -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200">
        <div class="border-b border-slate-200">
            <nav class="flex -mb-px overflow-x-auto" id="nav_tab_list" role="tablist">
                <a href="#tab_info" class="nav-tab-v2 active px-4 md:px-6 py-4 text-sm font-medium border-b-2 border-blue-600 text-blue-600 whitespace-nowrap" data-tab="info" data-toggle="tab" role="tab">
                    Thông tin chung
                </a>
                <a href="#tab_student" class="nav-tab-v2 px-4 md:px-6 py-4 text-sm font-medium border-b-2 border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap" data-tab="student" data-toggle="tab" role="tab">
                    Học sinh
                </a>
                <!-- <a href="#tab_schedule" class="nav-tab-v2 px-4 md:px-6 py-4 text-sm font-medium border-b-2 border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap" data-tab="schedule" data-toggle="tab" role="tab">
                    Lịch học
                </a> -->
                <a href="#tab_teacher" class="nav-tab-v2 px-4 md:px-6 py-4 text-sm font-medium border-b-2 border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap" data-tab="teacher" data-toggle="tab" role="tab">
                    Giáo viên
                </a>
            </nav>
        </div>

        <div class="p-4 md:p-6">
            <div class="tab-content">
                <div class="tab-pane active" id="tab_info" role="tabpanel" style="display: block;">
                    <form action="{{ route('class.update', ['id' => $class->id]) }}" id="form_tab_info" method="post">
                        @csrf
                        <input type="hidden" name="is_v2" value="1">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1">Tên lớp <span class="text-red-500">(*)</span></label>
                                <input type="text" name="class_name" value="{{ $class->name }}" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1">Trạng thái</label>
                                <select name="status" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                                    <option {{ ($class->status == 0 ? "selected":"") }} value="0">Đang vận hành</option>
                                    <option {{ ($class->status == 1 ? "selected":"") }} value="1">Đã kết thúc khóa học</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1">Năm học</label>
                                <select id="year" name="year" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                                    <option value="">Chọn năm học</option>
                                    <option {{ ($class->year == '2023' ? "selected":"") }} value="2023" selected="">2023-2024</option>
                                    <option {{ ($class->year == '2022' ? "selected":"") }} value="2022">2022-2023</option>
                                    <option {{ ($class->year == '2021' ? "selected":"") }} value="2021">2021-2022</option>
                                    <option {{ ($class->year == '2020' ? "selected":"") }} value="2020">2020-2021</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1">Khóa học <span class="text-red-500">(*)</span></label>
                                <select name="course_ids[]" id="course_ids" required multiple class="w-full">
                                    @foreach($courses as $course)
                                        <option value="{{ $course->id }}" 
                                            {{ in_array($course->id, $selectedCourseIds) ? 'selected' : '' }}>
                                            {{ $course->moodle_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="flex justify-end gap-3 pt-4">
                                <button type="submit" id="btn-save" class="px-6 py-2 bg-blue-600 text-white !rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm">
                                    Lưu
                                </button>
                                <a href="{{ route('class.index') }}" id="btn-cancel" class="px-6 py-2 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors">
                                    Huỷ
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane hidden" id="tab_student" role="tabpanel" style="display: none;">
                    @include('class.tab-content.student-v2')
                </div>
                <div class="tab-pane hidden" id="tab_schedule" role="tabpanel" style="display: none;">
                    {{-- @include('class.tab-content.schedule-v2') --}}
                </div>
                <div class="tab-pane hidden" id="tab_teacher" role="tabpanel" style="display: none;">
                    @include('class.tab-content.teacher-v2')
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden Inputs -->
<input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">
<meta name="tenant-connection" content="{{ session('tenant_connection') }}">

@endsection

@section('scripts')
<script src="{{ URL::asset('js/classes/classes-v2.js') }}"></script>
<script>
    // Notification V2 Functions (like product_detail-v2.js)
    function showNotificationV2(type, message) {
        const $notification = $('.message-class');
        const $content = $('#content_message');
        const $iconSuccess = $('.notification-icon-success');
        const $iconError = $('.notification-icon-error');
        const $notificationBox = $notification.find('.notification-v2');

        // Set message
        $content.text(message);

        // Set icon and border color based on type
        if (type === 'success') {
            $iconSuccess.removeClass('hidden');
            $iconError.addClass('hidden');
            $notificationBox.removeClass('border-red-500').addClass('border-green-500');
        } else {
            $iconError.removeClass('hidden');
            $iconSuccess.addClass('hidden');
            $notificationBox.removeClass('border-green-500').addClass('border-red-500');
        }

        // Show notification
        $notification.removeClass('hidden');

        // Re-init Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        // Auto hide after 5 seconds
        setTimeout(function() {
            hideNotificationV2();
        }, 5000);
    }

    function hideNotificationV2() {
        $('.message-class').addClass('hidden');
    }

    // Close notification on button click
    $(document).on('click', '.notification-close', function() {
        hideNotificationV2();
    });

    // Tab navigation with hash support
    function switchTab(targetHash) {
        var target = targetHash || '#tab_info';
        
        // Update active states
        $('.nav-tab-v2').removeClass('active border-blue-600 text-blue-600').addClass('border-transparent text-slate-500');
        $('.nav-tab-v2[href="' + target + '"]').removeClass('border-transparent text-slate-500').addClass('active border-blue-600 text-blue-600');
        
        // Hide all tab panes
        $('.tab-pane').removeClass('active').addClass('hidden').css('display', 'none');
        
        // Show target tab pane
        $(target).removeClass('hidden').addClass('active').css('display', 'block');
        
        // Update URL hash
        if (targetHash) {
            window.location.hash = target;
        }
    }

    // Tab click handler
    $('.nav-tab-v2').on('click', function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        switchTab(target);
    });

    // Check hash on page load
    $(document).ready(function() {
        if (window.location.hash) {
            var activeTab = window.location.hash;
            switchTab(activeTab);
        } else {
            switchTab('#tab_info');
        }
    });

    function showModalEditTeacher(button) {
        const teacherId = $(button).attr('data-teacher-id');
        const classId = $(button).attr('data-class-id');
        openModal('upsertTeacherModal');
        $.ajax({
            url: '/api/class/teacher/get_infor_teacher_class',
            type: 'GET',
            data: {
                'teacherId': teacherId,
                'classId': classId,
                'currentUserEmail': $('#currentUserEmail').val(),
                'tenant_connection': $('meta[name="tenant-connection"]').attr('content'),
            },
            success: function(response) {
                var userData = response.data;
                if (userData) {
                    var userMoodleId = userData.moodleData.id;
                    var userFirstname = userData.moodleData.firstname;
                    var userLastname = userData.moodleData.lastname;
                    var userEmail = userData.moodleData.email;
                    var userName = userData.moodleData.username;
                    var country = userData.moodleData.country;
                    var city = userData.moodleData.city ?? '';
                    var phone2 = userData.moodleData.phone2 ?? '';
                    var allCourses = userData.allCourses;
                    var selectedCourseIds = userData.selected_course_ids ?? [];

                    $('form#info_teacher input[name="firstname"]').val(userFirstname);
                    $('form#info_teacher input[name="lastname"]').val(userLastname);
                    $('form#info_teacher input[name="email"]').val(userEmail);
                    $('form#info_teacher input[name="phone2"]').val(phone2);
                    $('form#info_teacher input[name="city"]').val(city);
                    $('form#info_teacher input[name="username"]').val(userName);

                    $('.btn-save-teacher').attr('data-userMoodleId', userMoodleId);
                    $('.btn-save-teacher').attr('data-userTeacherId', userData.teacher.id);
                    $('.btn-save-teacher').attr('data-class-id', classId);

                    $('form#info_teacher select[name="country"]').val(country).trigger('change');

                    var courseSelect = $('#course_ids_teacher');
                    courseSelect.empty();
                    allCourses.forEach(function(course) {
                        var isSelected = selectedCourseIds.includes(course.id) ? 'selected' : '';
                        courseSelect.append(
                            `<option value="${course.id}" ${isSelected}>${course.moodle_name}</option>`
                        );
                    });
                    courseSelect.trigger('change');
                }
            },
            error: function(err) {
                console.log(err);
            }
        });
    }

    function showModalEditStudent(button) {
        const studentId = $(button).attr('data-student-id');
        const classId = $(button).attr('data-class-id');
        openModal('upsertStudentModal');
        $.ajax({
            url: '/api/class/student/get_infor_student_class',
            type: 'GET',
            data: {
                'studentId': studentId,
                'classId': classId,
                'currentUserEmail': $('#currentUserEmail').val(),
                'tenant_connection': $('meta[name="tenant-connection"]').attr('content'),
            },
            success: function(response) {
                var userData = response.data;
                if (userData) {
                    var userMoodleId = userData.moodleData.id;
                    var userFirstname = userData.moodleData.firstname;
                    var userLastname = userData.moodleData.lastname;
                    var userEmail = userData.moodleData.email;
                    var userName = userData.moodleData.username;
                    var country = userData.moodleData.country;
                    var city = userData.moodleData.city ?? '';
                    var phone2 = userData.phone ?? '';
                    var allCourses = userData.allCourses;
                    var selectedCourseIds = userData.selected_course_ids ?? [];

                    $('form#info_student input[name="firstname"]').val(userFirstname);
                    $('form#info_student input[name="lastname"]').val(userLastname);
                    $('form#info_student input[name="email"]').val(userEmail);
                    $('form#info_student input[name="phone2"]').val(phone2);
                    $('form#info_student input[name="city"]').val(city);
                    $('form#info_student input[name="username"]').val(userName);

                    $('.btn-save-student').attr('data-userMoodleId', userMoodleId);
                    $('.btn-save-student').attr('data-userStudentId', userData.student.id);
                    $('.btn-save-student').attr('data-class-id', classId);

                    $('form#info_student select[name="country"]').val(country).trigger('change');

                    var courseSelect = $('#course_ids_student');
                    courseSelect.empty();
                    allCourses.forEach(function(course) {
                        var isSelected = selectedCourseIds.includes(course.id) ? 'selected' : '';
                        courseSelect.append(
                            `<option value="${course.id}" ${isSelected}>${course.moodle_name}</option>`
                        );
                    });
                    courseSelect.trigger('change');
                }
            },
            error: function(err) {
                console.log(err);
            }
        });
    }

    $('.btn-save-teacher').on('click', function () {
        var userMoodleId = $(this).attr('data-userMoodleId');
        var userTeacherId = $(this).attr('data-userTeacherId');
        var class_id = $(this).attr('data-class-id');

        var userFirstname = $('form#info_teacher input[name="firstname"]').val().trim();
        var userLastname = $('form#info_teacher input[name="lastname"]').val().trim();
        var userEmail = $('form#info_teacher input[name="email"]').val().trim();
        var userName = $('form#info_teacher input[name="username"]').val().trim();
        var country = $('form#info_teacher select[name="country"]').val();
        var city = $('form#info_teacher input[name="city"]').val().trim();
        var phone2 = $('form#info_teacher input[name="phone2"]').val().trim();
        var courseIds = $('#course_ids_teacher').val();

        var errors = [];
        if (!userFirstname) errors.push('First name is required.');
        if (!userLastname) errors.push('Last name is required.');
        if (!userEmail) {
            errors.push('Email is required.');
        } else if (!validateEmail(userEmail)) {
            errors.push('Invalid email format.');
        }

        if (errors.length > 0) {
            showNotificationV2('error', errors.join(' '));
            return;
        }

        var formData = new FormData();
        formData.append('userMoodleId', userMoodleId);
        formData.append('userTeacherId', userTeacherId);
        formData.append('firstname', userFirstname);
        formData.append('lastname', userLastname);
        formData.append('email', userEmail);
        formData.append('username', userName);
        formData.append('country', country);
        formData.append('city', city);
        formData.append('phone2', phone2);
        formData.append('class_id', class_id);
        courseIds.forEach(function(courseId) {
            formData.append('course_ids_teacher[]', courseId);
        });
        formData.append('currentUserEmail', $('#currentUserEmail').val());
        formData.append('tenant_connection', $('meta[name="tenant-connection"]').attr('content'));

        $.ajax({
            url: '/api/class/teacher/update_infor_teacher_class',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                if(response.status){
                    showNotificationV2('success', response.message || 'Cập nhật giáo viên thành công');
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                } else {
                    showNotificationV2('error', response.message || 'Cập nhật giáo viên thất bại');
                }
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
            }
        });
    });

    $('.btn-save-student').on('click', function () {
        var userMoodleId = $(this).attr('data-userMoodleId');
        var userStudentId = $(this).attr('data-userStudentId');
        var class_id = $(this).attr('data-class-id');

        var userFirstname = $('form#info_student input[name="firstname"]').val().trim();
        var userLastname = $('form#info_student input[name="lastname"]').val().trim();
        var userEmail = $('form#info_student input[name="email"]').val().trim();
        var userName = $('form#info_student input[name="username"]').val().trim();
        var country = $('form#info_student select[name="country"]').val();
        var city = $('form#info_student input[name="city"]').val().trim();
        var phone2 = $('form#info_student input[name="phone2"]').val().trim();
        var courseIds = $('#course_ids_student').val();

        var errors = [];
        if (!userFirstname) errors.push('First name is required.');
        if (!userLastname) errors.push('Last name is required.');
        if (!userEmail) {
            errors.push('Email is required.');
        } else if (!validateEmail(userEmail)) {
            errors.push('Invalid email format.');
        }

        if (errors.length > 0) {
            showNotificationV2('error', errors.join(' '));
            return;
        }

        var formData = new FormData();
        formData.append('userMoodleId', userMoodleId);
        formData.append('userStudentId', userStudentId);
        formData.append('firstname', userFirstname);
        formData.append('lastname', userLastname);
        formData.append('email', userEmail);
        formData.append('username', userName);
        formData.append('country', country);
        formData.append('city', city);
        formData.append('phone2', phone2);
        formData.append('class_id', class_id);
        courseIds.forEach(function(courseId) {
            formData.append('course_ids_student[]', courseId);
        });
        formData.append('currentUserEmail', $('#currentUserEmail').val());
        formData.append('tenant_connection', $('meta[name="tenant-connection"]').attr('content'));

        $.ajax({
            url: '/api/class/student/update_infor_student_class',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                if(response.status){
                    showNotificationV2('success', response.message || 'Cập nhật học sinh thành công');
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                } else {
                    showNotificationV2('error', response.message || 'Cập nhật học sinh thất bại');
                }
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
            }
        });
    });

    function validateEmail(email) {
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

    function showModalDeleteTeacher(button) {
        const classId = $(button).attr('data-class-id');
        const className = $(button).attr('data-class-name');
        const teacherId = $(button).attr('data-teacher-id');
        const teacherName = $(button).attr('data-teacher-name');
        
        $('#removeTeacherModal #modal_teacher_name').text(teacherName);
        $('#removeTeacherModal .remove-teacher').attr('data-teacher-id', teacherId);
        $('#removeTeacherModal .remove-teacher').attr('data-class-id', classId);
        openModal('removeTeacherModal');
    }

    function showModalDeleteStudent(button) {
        const classId = $(button).attr('data-class-id');
        const className = $(button).attr('data-class-name');
        const studentId = $(button).attr('data-student-id');
        const studentName = $(button).attr('data-student-name');
        
        $('#removeStudentModal #modal_student_name').text(studentName);
        $('#removeStudentModal .remove-student').attr('data-student-id', studentId);
        $('#removeStudentModal .remove-student').attr('data-class-id', classId);
        openModal('removeStudentModal');
    }

    $('#removeTeacherModal .remove-teacher').on('click', function () {
        const classId = $(this).attr('data-class-id');
        const teacherId = $(this).attr('data-teacher-id');

        var formData = new FormData();
        formData.append('classId', classId);
        formData.append('teacherId', teacherId);
        formData.append('currentUserEmail', $('#currentUserEmail').val());
        formData.append('tenant_connection', $('meta[name="tenant-connection"]').attr('content'));

        $.ajax({
            url: '/api/class/teacher/unenrol',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                if(response.status){
                    showNotificationV2('success', response.message || 'Rút giáo viên khỏi lớp thành công');
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                } else {
                    showNotificationV2('error', response.message || 'Rút giáo viên khỏi lớp thất bại');
                }
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
                showNotificationV2('error', 'Có lỗi xảy ra khi rút giáo viên khỏi lớp');
            }
        });
    });

    $('#removeStudentModal .remove-student').on('click', function () {
        const classId = $(this).attr('data-class-id');
        const studentId = $(this).attr('data-student-id');

        var formData = new FormData();
        formData.append('classId', classId);
        formData.append('studentId', studentId);
        formData.append('currentUserEmail', $('#currentUserEmail').val());
        formData.append('tenant_connection', $('meta[name="tenant-connection"]').attr('content'));

        $.ajax({
            url: '/api/class/student/unenrol',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (response) {
                if(response.status){
                    showNotificationV2('success', response.message || 'Rút học sinh khỏi lớp thành công');
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                } else {
                    showNotificationV2('error', response.message || 'Rút học sinh khỏi lớp thất bại');
                }
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
                showNotificationV2('error', 'Có lỗi xảy ra khi rút học sinh khỏi lớp');
            }
        });
    });

    // Modal handlers for v2 modals - Use event delegation like product_detail-v2.js
    // Helper function to close modal (remove inline display style and add hidden class)
    function closeModal(modalId) {
        $('#' + modalId).css('display', 'none').addClass('hidden');
    }
    
    // Helper function to open modal (remove hidden class and remove inline display style)
    function openModal(modalId) {
        $('#' + modalId).removeClass('hidden').css('display', '');
    }

    // Choose Teacher Modal
    $(document).on('click', '[data-target="#chooseTeacherModal"]', function(e) {
        e.preventDefault();
        openModal('chooseTeacherModal');
    });
    $(document).on('click', '#choose-teacher-modal-close, #choose-teacher-modal-cancel', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeModal('chooseTeacherModal');
    });
    $(document).on('click', '#choose-teacher-modal-backdrop', function(e) {
        if (e.target === this) {
            closeModal('chooseTeacherModal');
        }
    });

    // Upsert Teacher Modal
    $(document).on('click', '#upsert-teacher-modal-close, #upsert-teacher-modal-cancel', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeModal('upsertTeacherModal');
    });
    $(document).on('click', '#upsert-teacher-modal-backdrop', function(e) {
        if (e.target === this) {
            closeModal('upsertTeacherModal');
        }
    });

    // Remove Teacher Modal
    $(document).on('click', '#remove-teacher-modal-close, #remove-teacher-modal-cancel', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeModal('removeTeacherModal');
    });
    $(document).on('click', '#remove-teacher-modal-backdrop', function(e) {
        if (e.target === this) {
            closeModal('removeTeacherModal');
        }
    });

    // Choose Student Modal
    $(document).on('click', '[data-target="#chooseClassStudentModal"]', function(e) {
        e.preventDefault();
        openModal('chooseClassStudentModal');
    });
    $(document).on('click', '#choose-student-modal-close, #choose-student-modal-cancel', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeModal('chooseClassStudentModal');
    });
    $(document).on('click', '#choose-student-modal-backdrop', function(e) {
        if (e.target === this) {
            closeModal('chooseClassStudentModal');
        }
    });

    // Upsert Student Modal
    $(document).on('click', '#upsert-student-modal-close, #upsert-student-modal-cancel', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeModal('upsertStudentModal');
    });
    $(document).on('click', '#upsert-student-modal-backdrop', function(e) {
        if (e.target === this) {
            closeModal('upsertStudentModal');
        }
    });

    // Remove Student Modal
    $(document).on('click', '#remove-student-modal-close, #remove-student-modal-cancel', function(e) {
        e.preventDefault();
        e.stopPropagation();
        closeModal('removeStudentModal');
    });
    $(document).on('click', '#remove-student-modal-backdrop', function(e) {
        if (e.target === this) {
            closeModal('removeStudentModal');
        }
    });

    // Close modals on Escape key
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape') {
            closeModal('chooseTeacherModal');
            closeModal('upsertTeacherModal');
            closeModal('removeTeacherModal');
            closeModal('chooseClassStudentModal');
            closeModal('upsertStudentModal');
            closeModal('removeStudentModal');
        }
    });

    // Initialize Select2 for filter dropdowns
    $(document).ready(function() {
        $('#filter-teacher-name').select2({
            placeholder: 'Nhập thông tin giáo viên',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#filter-teacher-name').parent()
        });
        
        $('#filter-student-name').select2({
            placeholder: 'Nhập thông tin học sinh',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#filter-student-name').parent()
        });

        $('#filter-schedule').select2({
            placeholder: 'Nhập thông tin lịch học',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#filter-schedule').parent()
        });

        $('#course_ids_student').select2({
            placeholder: 'Chọn khóa học',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#course_ids_student').parent()
        });

        $('#course_ids_teacher').select2({
            placeholder: 'Chọn khóa học',
            allowClear: true,
            width: '100%',
            dropdownParent: $('#course_ids_teacher').parent()
        });

        // Reinitialize Lucide icons after Select2 initialization
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
@endsection