@extends('layouts-v2.app')

@section('title', 'Cấp lượt thi mới')

@section('content')
<div class="flex-1 space-y-6 overflow-x-hidden max-w-full">
    <!-- 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>
        <span>Chấm bài thi</span>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Phân quyền thi</span>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Cấp lượt thi mới</span>
    </div>
    <h1 class="text-2xl md:text-3xl font-bold text-slate-900 mb-6">Cấp lượt thi mới</h1>

    <!-- Notification V2 -->
    <div class="message-class hidden fixed top-4 right-4 z-[150] 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>


    <!-- Filter Section -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 mb-6">
        <h3 class="text-lg font-bold text-slate-800 mb-4">Bộ lọc</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

            <!-- Filter: Chọn khóa học -->
            <div class="md:col-span-1">
                <label class="block text-sm font-medium text-slate-700 mb-2">Chọn khóa học</label>
                <div class="custom-select-wrapper relative" id="course-select-wrapper">
                    <div class="custom-select-input flex items-center justify-between px-4 py-2.5 bg-white border border-slate-300 rounded-lg cursor-pointer hover:border-blue-500 transition-colors"
                        id="course-select-trigger">
                        <span class="text-sm text-slate-600 truncate mr-2" id="course-select-text">Chọn khóa học</span>
                        <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 transition-transform shrink-0"
                            id="course-select-icon"></i>
                    </div>
                    <div id="selected-courses-tags"
                        class="flex flex-wrap gap-1.5 mt-2 p-2 bg-slate-50 rounded-lg border border-slate-200 min-h-[2.5rem]">
                        <span class="text-xs text-slate-400 self-center" id="courses-placeholder">Chưa chọn (hiển thị
                            tất cả)</span>
                    </div>
                    <div class="custom-select-dropdown hidden absolute z-50 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-hidden"
                        id="course-select-dropdown">
                        <div class="p-2 border-b border-slate-200">
                            <input type="text" id="course-select-search"
                                class="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                placeholder="Gõ để lọc danh sách...">
                        </div>
                        <div class="overflow-y-auto max-h-52" id="course-select-options">
                            <div id="course-no-results" class="px-4 py-3 text-sm text-slate-500 text-center hidden">
                                Không tìm thấy khóa học nào.
                            </div>
                            <div id="course-searching" class="px-4 py-3 text-sm text-slate-500 text-center hidden">
                                Đang tìm kiếm...
                            </div>
                            <div id="course-search-prompt" class="px-4 py-3 text-sm text-slate-500 text-center">
                                Gõ ít nhất 1 ký tự để tìm kiếm...
                            </div>
                            <!-- dynamic course results -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter: Tìm tên section -->
            <div class="md:col-span-1">
                <label class="block text-sm font-medium text-slate-700 mb-2">Tìm tên thư mục</label>
                <input id="section-search-input" type="text"
                    class="w-full px-4 py-2.5 bg-white border border-slate-300 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-slate-400 transition-colors"
                    placeholder="Nhập tên thư mục...">
            </div>

            <!-- Filter: Tìm lớp -->
            <div class="md:col-span-1">
                <label class="block text-sm font-medium text-slate-700 mb-2">Tìm tên / ID Lớp</label>
                <input id="class-search-input" type="text"
                    class="w-full px-4 py-2.5 bg-white border border-slate-300 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-slate-400 transition-colors"
                    placeholder="Nhập lớp...">
            </div>

            <!-- Filter: Cấu hình Deadline -->
            <div class="md:col-span-1">
                <label class="block text-sm font-medium text-slate-700 mb-2">Trạng thái Deadline</label>
                <select id="deadline-status-select"
                    class="w-full px-4 py-2.5 bg-white border border-slate-300 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors appearance-none">
                    <option value="">Tất cả</option>
                    <option value="active">Đang diễn ra (Còn hạn)</option>
                    <option value="upcoming">Sắp mở (Trong 7 ngày)</option>
                    <option value="not_open">Chưa mở (> 7 ngày)</option>
                    <option value="expired">Đã hết hạn</option>
                </select>
            </div>

        </div>

        <!-- Action buttons -->
        <div class="flex gap-3 mt-6 border-t border-slate-100 pt-5">
            <button type="button" id="btn-filter"
                class="px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm flex items-center gap-2">
                <i data-lucide="search" class="w-4 h-4"></i>
                Tìm Kiếm
            </button>
            <button type="button" id="btn-clear-filter"
                class="px-5 py-2.5 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200 transition-colors flex items-center gap-2">
                <i data-lucide="x" class="w-4 h-4"></i>
                Xóa Bộ Lọc
            </button>
        </div>
    </div>

    <!-- Sections List - luôn hiển thị -->
    <div id="sections-container" class="space-y-4">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
                <h3 class="text-base font-semibold text-slate-900 flex items-center gap-2">
                    <i data-lucide="list" class="w-5 h-5 text-blue-600"></i>
                    Danh sách Thư mục (Section) được phép cấp lượt mới
                </h3>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full min-w-[900px] table-fixed divide-y divide-slate-200 border-collapse">
                    <colgroup>
                        <col style="width: 18%">
                        <col style="width: 25%">
                        <col style="width: 42%">
                        <col style="width: 15%">
                    </colgroup>
                    <thead class="bg-slate-50">
                        <tr>
                            <th
                                class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Khóa học</th>
                            <th
                                class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Tên Thư mục</th>
                            <th
                                class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Lớp được gán</th>
                            <th
                                class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                Hành động</th>
                        </tr>
                    </thead>
                    <tbody id="sections-body" class="divide-y divide-slate-100">
                        <!-- skeleton rows -->
                        <tr class="skeleton-row animate-pulse">
                            <td class="px-3 py-3">
                                <div class="h-3 bg-slate-200 rounded w-4/5"></div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="h-3 bg-slate-200 rounded w-3/4"></div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="h-3 bg-slate-200 rounded w-2/3"></div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="h-6 bg-slate-200 rounded w-8 mx-auto"></div>
                            </td>
                        </tr>
                        <tr class="skeleton-row animate-pulse">
                            <td class="px-3 py-3">
                                <div class="h-3 bg-slate-100 rounded w-3/5"></div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="h-3 bg-slate-100 rounded w-4/5"></div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="h-3 bg-slate-100 rounded w-1/2"></div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="h-6 bg-slate-100 rounded w-8 mx-auto"></div>
                            </td>
                        </tr>
                        <tr class="skeleton-row animate-pulse">
                            <td class="px-3 py-3">
                                <div class="h-3 bg-slate-200 rounded w-2/3"></div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="h-3 bg-slate-200 rounded w-1/2"></div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="h-3 bg-slate-200 rounded w-3/4"></div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="h-6 bg-slate-200 rounded w-8 mx-auto"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- Pagination -->
            <div id="sections-pagination" class="border-t border-slate-200 bg-slate-50"></div>
        </div>
    </div>


    <!-- Empty State -->
    <div id="empty-state" class="hidden bg-white rounded-xl shadow-sm border border-slate-200 p-12 text-center">
        <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
            <i data-lucide="book-open" class="w-10 h-10 text-slate-300"></i>
        </div>
        <h3 class="text-lg font-semibold text-slate-800 mb-2">Không có dữ liệu</h3>
        <p class="text-slate-500 max-w-sm mx-auto">Không tìm thấy thư mục nào được cấu hình cấp lượt thi mới.</p>
    </div>




    <!-- Deadline Settings Modal -->
    <div id="modal-deadline" class="hidden fixed inset-0 z-[110] overflow-y-auto" aria-labelledby="modal-title"
        role="dialog" aria-modal="true">
        <div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm transition-opacity" id="modal-deadline-backdrop">
        </div>
        <div class="flex min-h-full items-center justify-center p-4">
            <div
                class="relative transform rounded-2xl bg-white shadow-4xl transition-all w-full max-w-4xl border border-slate-200">
                <!-- Modal Header -->
                <div
                    class="px-6 py-4 border-b rounded-2xl border-slate-100 flex items-center justify-between bg-white sticky top-0 z-10">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
                            <i data-lucide="settings-2" class="w-5 h-5 text-blue-600"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-slate-900" id="modal-title">Cấu hình Deadline theo Lớp
                            </h3>
                            <p class="text-xs text-slate-500 mt-0.5" id="modal-subtitle">Thư mục: <span
                                    id="target-section-name" class="font-medium text-blue-600"></span></p>
                        </div>
                    </div>
                    <!-- close btn -->
                    <button type="button"
                        class="btn-close-modal p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all"
                        aria-label="Close">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>

                <!-- Modal Body -->
                <div class="p-6 space-y-6">
                    <!-- Class Search -->
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-slate-700">Thêm lớp học</label>
                        <select id="class-select" multiple style="width: 100%;"></select>
                    </div>

                    <!-- Selected Classes Table -->
                    <div class="rounded-xl border border-slate-200 overflow-hidden">
                        <table class="min-w-full divide-y divide-slate-100 shadow-sm">
                            <thead class="bg-slate-50">
                                <tr>
                                    <th
                                        class="px-4 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest w-1/4">
                                        Tên Lớp</th>
                                    <th
                                        class="px-4 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest">
                                        Ngày mở</th>
                                    <th
                                        class="px-4 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest">
                                        Ngày đóng</th>
                                    <th
                                        class="px-4 py-3 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest w-16">
                                        #</th>
                                </tr>
                            </thead>
                            <tbody id="selected-classes-body" class="divide-y divide-slate-100">
                                <!-- Selected classes row -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="px-6 py-4 border-t rounded-2xl border-slate-100 bg-slate-50 flex justify-end gap-3">
                    <button type="button"
                        class="btn-close-modal px-6 py-2.5 text-sm font-bold text-slate-700 bg-white border border-slate-200 rounded-xl hover:bg-slate-100 transition-all shadow-sm">Hủy
                        bỏ</button>
                    <button type="button" id="btn-save-deadlines"
                        class="px-8 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded-xl shadow-md transition-all flex items-center gap-2 group transform hover:-translate-y-0.5">
                        <i data-lucide="save" class="w-4 h-4 transition-transform group-hover:scale-110"></i>
                        Xác nhận
                    </button>
                </div>
            </div>
        </div>
    </div>





    <!-- Class Assignment History Modal -->
    <div id="modal-class-history" class="hidden fixed inset-0 z-[120] overflow-y-auto" role="dialog" aria-modal="true">
        <div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm transition-opacity"
            id="modal-class-history-backdrop"></div>
        <div class="flex min-h-full items-center justify-center p-4">
            <div
                class="relative transform rounded-2xl bg-white shadow-2xl transition-all w-full max-w-lg border border-slate-200">
                <!-- Header -->
                <div
                    class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-white sticky top-0 z-10 rounded-t-2xl">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center">
                            <i data-lucide="history" class="w-5 h-5 text-indigo-600"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-bold text-slate-900">Lịch sử gán lớp</h3>
                            <p class="text-xs text-slate-500 mt-0.5">
                                Lớp: <span id="class-history-class-name" class="font-semibold text-indigo-600"></span>
                                <span class="mx-1 text-slate-300">·</span>
                                Section: <span id="class-history-section-name"
                                    class="font-medium text-slate-700"></span>
                            </p>
                        </div>
                    </div>
                    <button id="btn-close-class-history" type="button"
                        class="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                <!-- Body: Timeline injected by JS -->
                <div class="p-6 max-h-[65vh] overflow-y-auto" id="class-history-body">
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden Inputs -->
    <input type="hidden" id="tenant-connection" value="{{ $tenantConnection }}">
    <input type="hidden" id="selected-section-id" value="">
    <input type="hidden" id="selected-course-id" value="">
</div>
@endsection

@section('scripts')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
    $(document).ready(function () {
        const tenantConnection = $('#tenant-connection').val();
        let selectedCourseIds = [];


        // ==================== Helper ====================
        function formatDateTime(dateStr) {
            if (!dateStr) return '-';
            const d = new Date(dateStr);
            if (isNaN(d.getTime())) return dateStr;
            const pad = (n) => n.toString().padStart(2, '0');
            return pad(d.getDate()) + '/' + pad(d.getMonth() + 1) + '/' + d.getFullYear() + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
        }

        // ==================== Notification Helpers ====================
        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');

            $content.text(message);
            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');
            }

            $notification.removeClass('hidden');
            if (typeof lucide !== 'undefined') { lucide.createIcons(); }
            setTimeout(() => hideNotificationV2(), 5000);
        }

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

        $('.notification-close').on('click', () => hideNotificationV2());



        // ==================== Custom Dropdown: Course ====================
        let courseSearchTimeout = null;

        // Toggle dropdown
        $('#course-select-trigger').on('click', function (e) {
            e.stopPropagation();
            const $dropdown = $('#course-select-dropdown');
            const isOpen = !$dropdown.hasClass('hidden');
            // Close all other dropdowns
            $('.custom-select-dropdown').addClass('hidden');
            if (!isOpen) {
                $dropdown.removeClass('hidden');
                $('#course-select-search').focus();
                // Rotate icon
                $('#course-select-icon').css('transform', 'rotate(180deg)');
            } else {
                $('#course-select-icon').css('transform', '');
            }
        });

        // Close dropdown on outside click
        $(document).on('click.courseDropdown', function (e) {
            if (!$(e.target).closest('#course-select-wrapper').length) {
                $('#course-select-dropdown').addClass('hidden');
                $('#course-select-icon').css('transform', '');
            }
        });

        // Search input - AJAX search courses
        let $courseOptions = $('#course-select-options');

        $('#course-select-search').on('input', function () {
            const query = $(this).val().trim();
            clearTimeout(courseSearchTimeout);

            if (!query.length) {
                $courseOptions.find('.course-dynamic-option').remove();
                $('#course-search-prompt').removeClass('hidden');
                $('#course-no-results').addClass('hidden');
                $('#course-searching').addClass('hidden');
                return;
            }

            $('#course-search-prompt').addClass('hidden');
            $('#course-no-results').addClass('hidden');
            $('#course-searching').removeClass('hidden');
            $courseOptions.find('.course-dynamic-option').remove();

            courseSearchTimeout = setTimeout(function () {
                fetch(`{{ route("course.searchCourses") }}?q=${encodeURIComponent(query)}&tenant_connection=${tenantConnection}`)
                    .then(res => res.json())
                    .then(json => {
                        $('#course-searching').addClass('hidden');
                        const courses = json.data || [];
                        if (courses.length === 0) {
                            $('#course-no-results').removeClass('hidden');
                            return;
                        }
                        courses.forEach(course => {
                            const isChecked = selectedCourseIds.includes(String(course.id));
                            const label = $(`
                                <label class="course-dynamic-option flex items-center px-4 py-2 hover:bg-slate-50 cursor-pointer border-b border-slate-100"
                                    data-course-id="${course.id}" data-course-name="${course.name}">
                                    <input type="checkbox" class="course-checkbox mr-2 w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500" 
                                           value="${course.id}" ${isChecked ? 'checked' : ''}>
                                    <span class="text-sm text-slate-700">${course.name}</span>
                                </label>
                            `);
                            $courseOptions.append(label);
                        });
                    })
                    .catch(() => {
                        $('#course-searching').addClass('hidden');
                        $('#course-no-results').removeClass('hidden');
                    });
            }, 300);
        });

        // Handle checkbox change (event delegation)
        $(document).on('change', '.course-checkbox', function () {
            const val = String($(this).val());
            const name = $(this).closest('label').data('course-name') || $(this).closest('label').find('span').text().trim();
            if ($(this).is(':checked')) {
                if (!selectedCourseIds.includes(val)) {
                    selectedCourseIds.push(val);
                }
            } else {
                selectedCourseIds = selectedCourseIds.filter(id => id !== val);
            }
            renderCourseTags();
        });

        function renderCourseTags() {
            const $tagsContainer = $('#selected-courses-tags');
            $tagsContainer.empty();

            if (selectedCourseIds.length === 0) {
                $tagsContainer.append('<span class="text-xs text-slate-400 self-center" id="courses-placeholder">Chưa chọn (hiển thị tất cả)</span>');
                $('#course-select-text').text('Chọn khóa học');
                return;
            }

            $('#course-select-text').text(`Đã chọn ${selectedCourseIds.length} khóa học`);

            // Build tags from checked option labels
            $('.course-checkbox:checked').each(function () {
                const val = String($(this).val());
                const name = $(this).closest('label').find('span').text().trim() || 'Khóa học #' + val;
                const tag = $(`
                    <span class="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-md font-medium">
                        ${name}
                        <button type="button" class="btn-remove-course-tag ml-1 hover:text-red-600" data-val="${val}">×</button>
                    </span>
                `);
                $tagsContainer.append(tag);
            });
        }

        // Remove tag
        $(document).on('click', '.btn-remove-course-tag', function (e) {
            e.stopPropagation();
            const val = String($(this).data('val'));
            selectedCourseIds = selectedCourseIds.filter(id => id !== val);
            // Uncheck if visible
            $(`.course-checkbox[value="${val}"]`).prop('checked', false);
            renderCourseTags();
        });

        // Clear filter button
        $('#btn-clear-filter').on('click', function () {
            selectedCourseIds = [];
            $('.course-checkbox').prop('checked', false);
            renderCourseTags();
            $('#course-select-search').val('');
            $courseOptions.find('.course-dynamic-option').remove();
            $('#course-search-prompt').removeClass('hidden');
            $('#course-no-results').addClass('hidden');
            $('#section-search-input').val('');
            $('#class-search-input').val('');
            $('#deadline-status-select').val('');
            $('#btn-filter').trigger('click');
        });

        // ==================== TomSelect: Class in Modal ====================
        let classSearch;

        function initClassSearch() {
            if (classSearch) classSearch.destroy();
            classSearch = new TomSelect('#class-select', {
                valueField: 'id',
                labelField: 'name',
                searchField: ['name'],
                placeholder: 'Tìm và chọn lớp học...',
                dropdownParent: 'body',
                loadThrottle: 300,
                load: function (query, callback) {
                    if (!query.length) return callback();
                    const targetCourseId = $('#selected-course-id').val();

                    const url = `{{ route("exam-permission.search-classes-for-section") }}?search=${encodeURIComponent(query)}&course_id=${targetCourseId}&tenant_connection=${tenantConnection}`;

                    fetch(url)
                        .then(res => res.json())
                        .then(json => {
                            callback(json.classes || []);
                        })
                        .catch(err => {
                            callback();
                        });
                },
                render: {
                    option: function (data, escape) {
                        return `<div><span class="text-slate-700 font-medium">${escape(data.name)}</span></div>`;
                    },
                    item: function (data, escape) {
                        return `<div class="ts-item">${escape(data.name)}</div>`;
                    },
                    no_results: function () {
                        return `<div class="no-results px-3 py-2 text-slate-500 text-sm italic">Không tìm thấy lớp học.</div>`;
                    }
                },
                onItemAdd(value) {
                    const data = this.options[value];
                    if (data) {
                        addClassRow(data.id, data.name, null, null);
                        this.removeItem(value);
                        this.refreshOptions(false);
                    }
                },
                controlClass: 'ts-control custom-ts',
                dropdownClass: 'ts-dropdown custom-ts-dropdown',
            });
        }
        initClassSearch();

        function addClassRow(classId, className, openDate, closeDate) {
            if ($(`#class-row-${classId}`).length > 0) return;

            const row = `
            <tr id="class-row-${classId}" class="group">
                <td class="px-4 py-3 text-slate-700 font-medium text-sm">${className}</td>
                <td class="px-4 py-3">
                    <div class="relative flex items-center gap-1">
                        <input type="text" class="open-date-picker w-full text-xs border border-slate-200 rounded-lg px-3 py-1.5 focus:border-green-500 outline-none bg-green-50/40"
                               data-class-id="${classId}" value="${openDate || ''}" placeholder="Ngày mở...">
                        <button type="button" class="btn-clear-open hidden text-slate-400 hover:text-red-500 transition-colors flex-shrink-0">
                            <i data-lucide="x-circle" class="w-4 h-4"></i>
                        </button>
                    </div>
                </td>
                <td class="px-4 py-3">
                    <div class="relative flex items-center gap-1">
                        <input type="text" class="close-date-picker w-full text-xs border border-slate-200 rounded-lg px-3 py-1.5 focus:border-red-500 outline-none bg-red-50/40"
                               data-class-id="${classId}" value="${closeDate || ''}" placeholder="Ngày đóng...">
                        <button type="button" class="btn-clear-close hidden text-slate-400 hover:text-red-500 transition-colors flex-shrink-0">
                            <i data-lucide="x-circle" class="w-4 h-4"></i>
                        </button>
                    </div>
                </td>
                <td class="px-4 py-3 text-center">
                    <button type="button" onclick="$(this).closest('tr').remove()" class="w-8 h-8 flex items-center justify-center text-red-500 hover:bg-red-50 rounded-lg transition-all bg-slate-50 border border-slate-100 shadow-sm mx-auto">
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                    </button>
                </td>
                </tr>`;
            $('#selected-classes-body').append(row);

            // Open date picker
            const $openInput = $(`#class-row-${classId} .open-date-picker`);
            const $clearOpenBtn = $(`#class-row-${classId} .btn-clear-open`);

            const openPicker = flatpickr($openInput[0], {
                enableTime: true,
                dateFormat: "Y-m-d H:i",
                onChange: function (selectedDates, dateStr) {
                    dateStr ? $clearOpenBtn.removeClass('hidden') : $clearOpenBtn.addClass('hidden');
                }
            });

            if (openDate) $clearOpenBtn.removeClass('hidden');
            $clearOpenBtn.on('click', function () {
                openPicker.clear();
                $(this).addClass('hidden');
            });

            // Close date picker
            const $closeInput = $(`#class-row-${classId} .close-date-picker`);
            const $clearCloseBtn = $(`#class-row-${classId} .btn-clear-close`);

            const closePicker = flatpickr($closeInput[0], {
                enableTime: true,
                dateFormat: "Y-m-d H:i",
                onChange: function (selectedDates, dateStr) {
                    dateStr ? $clearCloseBtn.removeClass('hidden') : $clearCloseBtn.addClass('hidden');
                }
            });

            if (closeDate) $clearCloseBtn.removeClass('hidden');
            $clearCloseBtn.on('click', function () {
                closePicker.clear();
                $(this).addClass('hidden');
            });

            lucide.createIcons();
        }

        // ==================== Filter Sections ====================
        function showTableSkeleton() {
            const $body = $('#sections-body');
            $body.html(`
                <tr class="skeleton-row animate-pulse">
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-4/5"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-3/4"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-2/3"></div></td>
                    <td class="px-3 py-3"><div class="h-6 bg-slate-200 rounded w-8 mx-auto"></div></td>
                </tr>
                <tr class="skeleton-row animate-pulse">
                    <td class="px-3 py-3"><div class="h-3 bg-slate-100 rounded w-3/5"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-100 rounded w-4/5"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-100 rounded w-1/2"></div></td>
                    <td class="px-3 py-3"><div class="h-6 bg-slate-100 rounded w-8 mx-auto"></div></td>
                </tr>
                <tr class="skeleton-row animate-pulse">
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-2/3"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-1/2"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-3/4"></div></td>
                    <td class="px-3 py-3"><div class="h-6 bg-slate-200 rounded w-8 mx-auto"></div></td>
                </tr>
                <tr class="skeleton-row animate-pulse">
                    <td class="px-3 py-3"><div class="h-3 bg-slate-100 rounded w-3/4"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-100 rounded w-2/3"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-100 rounded w-4/5"></div></td>
                    <td class="px-3 py-3"><div class="h-6 bg-slate-100 rounded w-8 mx-auto"></div></td>
                </tr>
                <tr class="skeleton-row animate-pulse">
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-1/2"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-3/5"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-3/4"></div></td>
                    <td class="px-3 py-3"><div class="h-6 bg-slate-200 rounded w-8 mx-auto"></div></td>
                </tr>
            `);
            // Ẩn empty-state, hiển table
            $('#empty-state').addClass('hidden');
            $('#sections-container').removeClass('hidden');
        }

        function createPaginationHtml(res) {
            const data = res.data;
            if (!data || data.total === 0) return '';

            let html = `
                <div class="px-4 md:px-6 py-4">
                    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                        <div class="text-xs sm:text-sm text-slate-600 whitespace-nowrap">
                            Hiển thị ${data.from || 0} - ${data.to || 0} trong tổng số ${data.total} kết quả
                        </div>
                        <div class="flex items-center gap-1.5 sm:gap-2 overflow-x-auto w-full sm:w-auto">
            `;

            // Prev Button
            if (data.current_page > 1) {
                html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0" data-page="${data.current_page - 1}"><i data-lucide="chevron-left" class="w-4 h-4 inline-block"></i></button>`;
            } else {
                html += `<span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0"><i data-lucide="chevron-left" class="w-4 h-4 inline-block"></i></span>`;
            }

            // Window Pages
            const onEachSide = 2;
            const windowStart = Math.max(1, data.current_page - onEachSide);
            const windowEnd = Math.min(data.last_page, data.current_page + onEachSide);

            if (windowStart > 1) {
                html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center" data-page="1">1</button>`;
                if (windowStart > 2) html += `<span class="px-1 sm:px-2 text-xs sm:text-sm text-slate-400 flex-shrink-0">...</span>`;
            }

            for (let page = windowStart; page <= windowEnd; page++) {
                if (page === data.current_page) {
                    html += `<span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm font-medium text-white bg-blue-600 rounded-lg flex-shrink-0 min-w-[2rem] text-center">${page}</span>`;
                } else {
                    html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center" data-page="${page}">${page}</button>`;
                }
            }

            if (windowEnd < data.last_page) {
                if (windowEnd < data.last_page - 1) html += `<span class="px-1 sm:px-2 text-xs sm:text-sm text-slate-400 flex-shrink-0">...</span>`;
                html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0 min-w-[2rem] text-center" data-page="${data.last_page}">${data.last_page}</button>`;
            }

            // Next Button
            if (data.current_page < data.last_page) {
                html += `<button type="button" class="page-link-btn px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors flex-shrink-0" data-page="${data.current_page + 1}"><i data-lucide="chevron-right" class="w-4 h-4 inline-block"></i></button>`;
            } else {
                html += `<span class="px-2.5 sm:px-3 py-1.5 text-xs sm:text-sm text-slate-400 bg-slate-100 rounded-lg cursor-not-allowed flex-shrink-0"><i data-lucide="chevron-right" class="w-4 h-4 inline-block"></i></span>`;
            }

            html += `</div></div></div>`;
            return html;
        }

        let currentPage = 1;

        function loadSections(page = 1) {
            currentPage = page;
            const courseIds = selectedCourseIds;
            const search = $('#section-search-input').val().trim();
            const classSearch = $('#class-search-input').val().trim();
            const status = $('#deadline-status-select').val();

            showTableSkeleton();
            $('#sections-pagination').empty();

            $.ajax({
                url: '{{ route("exam-permission.sections") }}',
                data: {
                    course_ids: courseIds,
                    search: search,
                    class_search: classSearch,
                    status: status,
                    tenant_connection: tenantConnection,
                    page: page,
                    per_page: 10
                },
                success: function (response) {
                    if (response.success) {
                        renderSections(response.data.data); // data is paginator object, items are in data.data
                        $('#sections-pagination').html(createPaginationHtml(response));
                    } else {
                        Swal.fire('Lỗi', response.message, 'error');
                    }
                },
                complete: function () {
                    lucide.createIcons();
                }
            });
        }

        $('#btn-filter').click(function () {
            loadSections(1);
        });

        $(document).on('click', '.page-link-btn', function () {
            const page = $(this).data('page');
            loadSections(page);
        });

        // Auto-load sections on page load
        $('#btn-filter').trigger('click');

        function renderSections(sections) {
            const $container = $('#sections-container');
            const $empty = $('#empty-state');
            const $body = $('#sections-body');

            $body.empty();

            if (sections.length === 0) {
                $container.addClass('hidden');
                $empty.removeClass('hidden').find('h3').text('Không có thư mục nào');
                $empty.find('p').text('Không tìm thấy thư mục nào được cấp quyền "Cấp lượt thi mới".');
                return;
            }

            $empty.addClass('hidden');
            $container.removeClass('hidden');


            sections.forEach(section => {
                // Hiển thị danh sách lớp trực tiếp thay vì số đếm
                let classesHtml = '';
                if (section.deadlines && section.deadlines.length > 0) {
                    const badges = section.deadlines.map(d => {
                        const className = d.class ? d.class.name : ('Lớp #' + d.class_id);
                        const openStr = d.open_date ? formatDateTime(d.open_date) : null;
                        const closeStr = d.close_date ? formatDateTime(d.close_date) : (d.deadline ? formatDateTime(d.deadline) : null);

                        let tooltipParts = [];
                        if (openStr) tooltipParts.push('Mở: ' + openStr);
                        if (closeStr) tooltipParts.push('Đóng: ' + closeStr);
                        const tooltip = tooltipParts.length ? tooltipParts.join(' \u2022 ') : 'Chưa có deadline';

                        // Logic tính thời gian
                        const now = new Date();
                        let statusHtml = '';
                        let badgeClass = 'bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100 hover:border-blue-400';
                        let iconName = 'clock';

                        if (d.open_date || d.close_date || d.deadline) {
                            // PHP returns date string like "2023-10-10 10:00:00", js Date parses it correctly in most modern browsers if we convert " " to "T"
                            const safeParse = (dateStr) => {
                                if (!dateStr) return null;
                                return new Date(dateStr.replace(' ', 'T'));
                            };

                            const openTime = safeParse(d.open_date);
                            const closeTime = safeParse(d.close_date) || safeParse(d.deadline);

                            const getRelativeTimeText = (dateObj) => {
                                const diffMs = dateObj - now;
                                const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
                                const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                                if (diffDays > 0) return `${diffDays} ngày ${diffHours} giờ`;
                                if (diffHours > 0) return `${diffHours} giờ`;
                                const diffMins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
                                return `${diffMins} phút`;
                            };

                            if (openTime && now < openTime) {
                                // Chưa mở
                                statusHtml = `<span class="ml-1.5 text-[10px] bg-white/60 px-1.5 py-[1px] rounded text-blue-600 font-bold border border-blue-100 shadow-sm leading-none flex items-center">Mở sau ${getRelativeTimeText(openTime)}</span>`;
                                iconName = 'clock-8';
                            } else if (closeTime && now > closeTime) {
                                // Đã hết hạn
                                badgeClass = 'bg-red-50 text-red-700 border-red-200 hover:bg-red-100 hover:border-red-400 opacity-90';
                                statusHtml = `<span class="ml-1.5 text-[10px] bg-red-100 px-1.5 py-[1px] rounded text-red-700 font-bold border border-red-200 shadow-sm leading-none flex items-center">Hết hạn</span>`;
                                iconName = 'x-circle';
                            } else if (closeTime && now <= closeTime) {
                                // Đang mở, sắp hết hạn
                                badgeClass = 'bg-green-50 text-green-700 border-green-200 hover:bg-green-100 hover:border-green-400';
                                statusHtml = `<span class="ml-1.5 text-[10px] bg-white/60 px-1.5 py-[1px] rounded text-green-700 font-bold border border-green-200 shadow-sm leading-none flex items-center">Còn ${getRelativeTimeText(closeTime)}</span>`;
                                iconName = 'play-circle';
                            }
                        }

                        return `<button type="button"
                            class="btn-view-class-history flex items-center gap-1 text-xs border px-2 py-0.5 rounded-full font-medium transition-all cursor-pointer ${badgeClass}"
                            data-section-id="${section.id}"
                            data-section-name="${section.moodle_name}"
                            data-class-id="${d.class_id}"
                            data-class-name="${className}"
                            title="${tooltip} \u2014 Click để xem lịch sử gán">
                            <i data-lucide="${iconName}" class="w-3 h-3 opacity-70"></i>
                            <span class="pt-px">${className}</span>
                            ${statusHtml}
                        </button>`;
                    });
                    classesHtml = `<div class="flex flex-wrap gap-1.5">${badges.join('')}</div>`;

                } else {
                    classesHtml = '<span class="text-xs text-slate-400 italic">Chưa gán lớp nào</span>';
                }

                const row = `
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="px-3 py-2.5">
                        <div class="text-xs font-semibold text-slate-500 truncate" title="${section.course_name}">${section.course_name}</div>
                    </td>
                    <td class="px-3 py-2.5">
                        <div class="text-sm font-medium text-slate-900 truncate" title="${section.moodle_name}">${section.moodle_name}</div>
                        <div class="text-[10px] text-slate-400">ID: ${section.moodle_id}</div>
                    </td>
                    <td class="px-3 py-2.5">${classesHtml}</td>
                    <td class="px-3 py-2.5 text-center whitespace-nowrap">
                        <button class="btn-manage-deadline inline-flex items-center justify-center w-8 h-8 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors"
                                data-id="${section.id}" 
                                data-course-id="${section.parent_id}" 
                                data-name="${section.moodle_name}" 
                                data-deadlines='${JSON.stringify(section.deadlines)}'
                                title="Cấu hình Lớp">
                            <i data-lucide="settings-2" class="w-5 h-5"></i>
                        </button>
                    </td>
                </tr>
            `;
                $body.append(row);
            });

            lucide.createIcons();
        }

        $(document).on('click', '.btn-manage-deadline', function () {
            const id = $(this).data('id');
            const courseId = $(this).data('course-id');
            const name = $(this).data('name');
            const deadlines = $(this).data('deadlines') || [];

            $('#selected-section-id').val(id);
            $('#selected-course-id').val(courseId);
            $('#target-section-name').text(name);
            $('#selected-classes-body').empty();

            deadlines.forEach(d => {
                if (d.class) {
                    addClassRow(d.class_id, d.class.name, d.open_date || null, d.close_date || d.deadline || null);
                }
            });

            $('#modal-deadline').removeClass('hidden');
            $('body').addClass('overflow-hidden');

            if (classSearch) {
                classSearch.clear();
                classSearch.clearOptions();
            }
        });

        $('.btn-close-modal').click(function () {
            $('#modal-deadline').addClass('hidden');
            $('body').removeClass('overflow-hidden');
        });

        $('#btn-save-deadlines').click(function () {
            const sectionId = $('#selected-section-id').val();
            const deadlines = [];

            // Gom dữ liệu theo từng row (mỗi row có open_date-picker và close_date-picker)
            $('#selected-classes-body tr').each(function () {
                const classId = $(this).find('.open-date-picker').data('class-id');
                const openDate = $(this).find('.open-date-picker').val();
                const closeDate = $(this).find('.close-date-picker').val();
                if (classId) {
                    deadlines.push({
                        class_id: classId,
                        open_date: openDate || null,
                        close_date: closeDate || null,
                    });
                }
            });

            const $btn = $(this);
            const originalHtml = $btn.html();
            $btn.prop('disabled', true).html('<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Đang lưu...');
            lucide.createIcons();

            $.ajax({
                url: '{{ route("exam-permission.save-deadlines") }}',
                method: 'POST',
                data: {
                    section_id: sectionId,
                    deadlines: deadlines,
                    tenant_connection: tenantConnection,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    if (response.success) {
                        showNotificationV2('success', response.message);
                        $('#modal-deadline').addClass('hidden');
                        $('body').removeClass('overflow-hidden');
                        $('#btn-filter').trigger('click');
                    } else {
                        Swal.fire('Lỗi', response.message, 'error');
                    }
                },
                error: function () {
                    Swal.fire('Lỗi', 'Có lỗi kết nối hệ thống!', 'error');
                },
                complete: function () {
                    $btn.prop('disabled', false).html(originalHtml);
                    lucide.createIcons();
                }
            });
        });


        // ==================== Class Assignment History Modal ====================
        $(document).on('click', '.btn-view-class-history', function () {
            const sectionId = $(this).data('section-id');
            const sectionName = $(this).data('section-name');
            const classId = $(this).data('class-id');
            const className = $(this).data('class-name');

            // Set modal header
            $('#class-history-section-name').text(sectionName);
            $('#class-history-class-name').text(className);

            // Show modal + skeleton
            $('#modal-class-history').removeClass('hidden');
            $('body').addClass('overflow-hidden');
            $('#class-history-body').html(`
                <div class="flex flex-col items-center justify-center py-10 gap-3">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                    <p class="text-sm text-slate-500">Đang tải lịch sử...</p>
                </div>
            `);

            $.ajax({
                url: '{{ route("exam-permission.class-assignment-history") }}',
                method: 'GET',
                data: {
                    tenant_connection: tenantConnection,
                    section_id: sectionId,
                    class_id: classId,
                },
                success: function (res) {
                    if (!res.success || res.data.length === 0) {
                        $('#class-history-body').html(`
                            <div class="flex flex-col items-center justify-center py-10 text-slate-400">
                                <i data-lucide="inbox" class="w-10 h-10 mb-2"></i>
                                <p class="text-sm">Chưa có lịch sử gán nào.</p>
                            </div>
                        `);
                        lucide.createIcons();
                        return;
                    }

                    let html = '<div class="relative">';
                    // Timeline vertical line
                    html += '<div class="absolute left-5 top-0 bottom-0 w-0.5 bg-slate-200"></div>';

                    res.data.forEach((item, idx) => {
                        const isLatest = idx === 0;
                        const dotColor = isLatest ? 'bg-blue-600 ring-4 ring-blue-100' : 'bg-slate-300';
                        const cardBg = isLatest ? 'bg-blue-50 border-blue-200' : 'bg-white border-slate-200';
                        const openDate = item.open_date ? formatDateTime(item.open_date) : null;
                        const closeDate = item.close_date ? formatDateTime(item.close_date) : null;

                        html += `
                        <div class="relative flex gap-4 pb-5">
                            <div class="relative z-10 flex-shrink-0 w-10 h-10 rounded-full ${dotColor} flex items-center justify-center">
                                <i data-lucide="${isLatest ? 'check' : 'clock'}" class="w-4 h-4 ${isLatest ? 'text-white' : 'text-slate-400'}"></i>
                            </div>
                            <div class="flex-1 border rounded-xl p-4 ${cardBg}">
                                <div class="flex items-start justify-between gap-2 mb-2">
                                    <div>
                                        <span class="text-sm font-semibold text-slate-900">${item.performed_by_name}</span>
                                        ${isLatest ? '<span class="ml-2 text-[10px] bg-blue-600 text-white px-1.5 py-0.5 rounded font-bold">Mới nhất</span>' : ''}
                                    </div>
                                    <span class="text-[11px] text-slate-400 whitespace-nowrap flex-shrink-0">${formatDateTime(item.created_at)}</span>
                                </div>
                                <div class="flex flex-wrap gap-2 mt-1">
                                    ${openDate ? `<span class="inline-flex items-center gap-1 text-xs bg-green-50 text-green-700 border border-green-200 px-2 py-0.5 rounded-full">
                                        <i data-lucide="calendar-check" class="w-3 h-3"></i> Mở: ${openDate}</span>` : ''}
                                    ${closeDate ? `<span class="inline-flex items-center gap-1 text-xs bg-red-50 text-red-600 border border-red-200 px-2 py-0.5 rounded-full">
                                        <i data-lucide="calendar-x" class="w-3 h-3"></i> Đóng: ${closeDate}</span>` : ''}
                                    ${!openDate && !closeDate ? '<span class="text-xs text-slate-400 italic">Không có deadline</span>' : ''}
                                </div>
                                <div class="mt-2 text-[11px] text-slate-400">Ghi trong lần gán này: ${item.total_classes} lớp</div>
                            </div>
                        </div>`;
                    });

                    html += '</div>';
                    $('#class-history-body').html(html);
                    lucide.createIcons();
                },
                error: function () {
                    $('#class-history-body').html(`<p class="text-center text-sm text-red-500 py-6">Lỗi khi tải lịch sử.</p>`);
                }
            });
        });

        // Close class history modal
        $(document).on('click', '#btn-close-class-history, #modal-class-history-backdrop', function () {
            $('#modal-class-history').addClass('hidden');
            $('body').removeClass('overflow-hidden');
        });

    });
</script>

<style>
    /* TomSelect dropdown fix inside modal */
    .ts-dropdown.custom-ts-dropdown {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }
</style>
@endsection