@extends('layouts-v2.app')
@include('class.partials-v2.styles')

@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>
                                    @include('class.partials-v2.custom-select', [
                                        'id' => 'course',
                                        'name' => 'course_ids[]',
                                        'placeholder' => 'Chọn khóa học',
                                        'options' => $courses,
                                        'selectedValues' => $selectedCourseIds ?? [],
                                        'searchPlaceholder' => 'Tìm tên khóa học...'
                                    ])
                                </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>
        $(document).ready(function () {
            // Initialization for Custom Multi-Select logic (Simplified for Add/Edit)
            const id = 'course';
            const trigger = document.getElementById(`${id}-trigger`);
            const dropdown = document.getElementById(`${id}-dropdown`);
            const search = document.getElementById(`${id}-search`);
            const text = document.getElementById(`${id}-text`);
            const icon = document.getElementById(`${id}-icon`);
            const options = document.getElementById(`${id}-options`);
            const tagsEl = document.getElementById(`selected-${id}-tags`);
            const hiddenSelect = document.getElementById(`filter-${id}`);
            const selectAllCb = document.getElementById(`select-all-${id}`);

            if (!trigger || !dropdown) return;

            function updateSelectText() {
                if (!hiddenSelect) return;
                let selected = Array.from(hiddenSelect.options).filter(opt => opt.selected);
                if (selected.length === 0) {
                    text.textContent = 'Chọn khóa học';
                } else if (selected.length === 1) {
                    text.textContent = selected[0].text;
                } else {
                    text.textContent = selected.length + ' khóa học đã chọn';
                }
                renderTags();
            }

            function renderTags() {
                if (!tagsEl) return;
                tagsEl.innerHTML = '';
                let selected = Array.from(hiddenSelect.options).filter(opt => opt.selected);
                if (selected.length === 0) {
                    tagsEl.innerHTML = '<span class="text-xs text-slate-400 self-center">Chưa chọn</span>';
                    return;
                }
                selected.forEach(opt => {
                    const tag = document.createElement('span');
                    tag.className = 'course-tag';
                    tag.innerHTML = `<span>${opt.text}</span><span class="course-tag-remove" data-val="${opt.value}" title="Xóa">&#215;</span>`;
                    tagsEl.appendChild(tag);
                });
            }

            trigger.addEventListener('click', (e) => {
                e.stopPropagation();
                dropdown.classList.toggle('hidden');
                if (icon) icon.classList.toggle('rotate');
                if (!dropdown.classList.contains('hidden') && search) search.focus();
            });

            if (search) {
                search.addEventListener('input', (e) => {
                    const term = e.target.value.toLowerCase();
                    let hasResults = false;
                    $(`.${id}-option`).each(function () {
                        const name = $(this).data('name').toString().toLowerCase();
                        const isMatch = name.includes(term);
                        $(this).toggleClass('hidden', !isMatch);
                        if (isMatch) hasResults = true;
                    });
                    $(`#${id}-no-results`).toggleClass('hidden', hasResults);
                });
            }

            if (options) {
                options.addEventListener('change', (e) => {
                    if (e.target.classList.contains(`${id}-checkbox`)) {
                        const val = e.target.value;
                        const opt = Array.from(hiddenSelect.options).find(o => o.value == val);
                        if (opt) opt.selected = e.target.checked;
                        updateSelectText();
                    }
                });
            }

            if (selectAllCb) {
                selectAllCb.addEventListener('change', (e) => {
                    const isChecked = e.target.checked;
                    $(`.${id}-option:not(.hidden) .${id}-checkbox`).each(function () {
                        $(this).prop('checked', isChecked);
                        const opt = Array.from(hiddenSelect.options).find(o => o.value == this.value);
                        if (opt) opt.selected = isChecked;
                    });
                    updateSelectText();
                });
            }

            // Tag removal logic
            $(document).on('click', '.course-tag-remove', function (e) {
                e.stopPropagation();
                const val = $(this).data('val');
                const opt = Array.from(hiddenSelect.options).find(o => o.value == val);
                if (opt) {
                    opt.selected = false;
                    $(`.${id}-checkbox[value="${val}"]`).prop('checked', false);
                    updateSelectText();
                    if (selectAllCb) selectAllCb.checked = false;
                }
            });

            // Global click to close dropdowns
            document.addEventListener('click', (e) => {
                if (trigger && !trigger.contains(e.target) && dropdown && !dropdown.contains(e.target)) {
                    dropdown.classList.add('hidden');
                    if (icon) icon.classList.remove('rotate');
                }
            });

            // Initialize state
            updateSelectText();
        });

        // 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');
            }
        });


        $(document).ready(function () {
            // Reinitialize Lucide icons after Select2 initialization
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        });

    </script>
@endsection