@extends('layouts-v2.app')

@section('title', 'Thi lạ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>Thi lại</span>
    </div>
    <h1 class="text-2xl md:text-3xl font-bold text-slate-900 mb-6">Thi lại</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>

    <!-- Search Student Section -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Tìm kiếm học viên</h3>
        <div class="flex flex-col md:flex-row gap-3">
            <div class="flex-1">
                <label for="student-search" class="block text-sm font-medium text-slate-700 mb-1">Tìm kiếm học viên theo Tên, Username hoặc Email:</label>
                <div class="relative group">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-blue-500 transition-colors"></i>
                    <input type="text" class="w-full pl-10 pr-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" id="student-search" placeholder="Nhập từ khóa tìm kiếm...">
                </div>
            </div>
            <div class="flex items-end">
                <button class="w-full md:w-auto px-6 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm flex items-center justify-center gap-2" type="button" id="search-student-btn">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Tìm kiếm
                </button>
            </div>
        </div>
    </div>

    <!-- Search Results -->
    <div id="student-search-results" class="hidden 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">Kết quả tìm kiếm</h3>
        </div>
        <div class="overflow-x-auto min-h-[100px]">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Tên</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Username</th>
                        <th class="px-6 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Thao tác</th>
                    </tr>
                </thead>
                <tbody id="student-results-body" class="bg-white divide-y divide-slate-200">
                    <!-- Results will be injected here -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- Main Table: Danh sách đã cấp -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mb-6 mt-6">
        <div class="px-6 py-4 border-b border-slate-200 bg-slate-50 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <h3 class="text-base font-semibold text-slate-900">Danh sách lượt thi lại đã cấp</h3>
            <div class="flex flex-col md:flex-row items-center gap-3 w-full md:w-auto flex-1 md:flex-none justify-end">
                <div class="w-full md:w-48">
                    <select id="retakes-status" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm text-slate-700 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all appearance-none cursor-pointer">
                        <option value="">Tất cả trạng thái deadline</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 class="relative group w-full md:w-80">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 focus-within:text-blue-500"></i>
                    <input type="text" class="w-full pl-9 pr-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 transition-all" id="retakes-search" placeholder="Tìm kiếm theo Tên/Email HS, Khóa học, Bài test...">
                </div>
            </div>
        </div>
        <div class="overflow-x-auto min-h-[150px]">
            <table class="w-full min-w-[1024px] table-fixed divide-y divide-slate-200 border-collapse">
                <colgroup>
                    <col style="width: 18%">
                    <col style="width: 18%">
                    <col style="width: 18%">
                    <col style="width: 9%">
                    <col style="width: 9%">
                    <col style="width: 18%">
                    <col style="width: 10%">
                </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">Học sinh</th>
                        <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">Bài thi (Quiz)</th>
                        <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Lượt cộng</th>
                        <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Đã dùng</th>
                        <th class="px-3 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Thời gian thi lại</th>
                        <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Thao tác</th>
                    </tr>
                </thead>
                <tbody id="retakes-table-body" class="divide-y divide-slate-100">
                    <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-full"></div></td>
                        <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-full"></div></td>
                        <td class="px-3 py-3"><div class="h-6 bg-slate-200 rounded w-8 mx-auto"></div></td>
                        <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-6 mx-auto"></div></td>
                        <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-24"></div><div class="h-3 bg-slate-200 rounded w-24 mt-1"></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>
        <div id="retakes-pagination" class="border-t border-slate-200 bg-white flex justify-end"></div>
    </div>

    <!-- Modal Danh sách kết quả thi -->
    <div id="modal-exam-results" class="hidden fixed inset-0 z-[100] overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="modal-results-backdrop"></div>
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="relative transform overflow-hidden rounded-2xl bg-white shadow-2xl transition-all w-full max-w-7xl 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">
                    <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="list" class="w-5 h-5 text-blue-600"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-900">Kết quả thi của học viên</h3>
                    </div>
                    <button type="button" class="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all" id="close-results-modal">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>

                <!-- Body -->
                <div class="p-6 space-y-6">
                    <!-- Filters Section -->
                    <div class="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <!-- Search by Name -->
                            <div class="md:col-span-2">
                                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Tìm kiếm tên bài test / Khóa học</label>
                                <div class="relative group">
                                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-blue-600 transition-colors"></i>
                                    <input type="text" id="filter-results-name" class="w-full pl-10 pr-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 outline-none transition-all" placeholder="Tìm kiếm theo bài test hoặc khóa học...">
                                </div>
                            </div>
                            <!-- Date Range -->
                            <div>
                                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Từ ngày</label>
                                <div class="relative group">
                                    <i data-lucide="calendar" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-blue-600 transition-colors"></i>
                                    <input type="text" id="filter-results-start" class="datepicker w-full pl-10 pr-10 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 outline-none transition-all" placeholder="Chọn ngày...">
                                    <button type="button" class="btn-clear-date absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all hidden" data-target="#filter-results-start">
                                        <i data-lucide="x" class="w-3.5 h-3.5"></i>
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-widest mb-1.5">Đến ngày</label>
                                <div class="relative group">
                                    <i data-lucide="calendar" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-blue-600 transition-colors"></i>
                                    <input type="text" id="filter-results-end" class="datepicker w-full pl-10 pr-10 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 outline-none transition-all" placeholder="Chọn ngày...">
                                    <button type="button" class="btn-clear-date absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all hidden" data-target="#filter-results-end">
                                        <i data-lucide="x" class="w-3.5 h-3.5"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Student Info Summary -->
                    <div class="bg-blue-50 border border-blue-100 rounded-xl p-4">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white text-base font-bold shadow-md" id="student-avatar-placeholder">
                                S
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-1 flex-1">
                                <div class="flex flex-col">
                                    <span class="text-[10px] text-blue-600 font-bold uppercase tracking-widest">Họ tên</span>
                                    <span id="display-student-name" class="text-sm font-bold text-slate-900">-</span>
                                </div>
                                <div class="flex flex-col">
                                    <span class="text-[10px] text-blue-600 font-bold uppercase tracking-widest">Username</span>
                                    <span id="display-student-username" class="text-sm font-medium text-slate-700">-</span>
                                </div>
                                <div class="flex flex-col">
                                    <span class="text-[10px] text-blue-600 font-bold uppercase tracking-widest">Email</span>
                                    <span id="display-student-email" class="text-sm font-medium text-slate-700">-</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
                        <div class="px-5 py-3 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
                            <h4 class="text-sm font-bold text-slate-700 uppercase tracking-wider">Danh sách bài thi gần đây</h4>
                        </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: 25%">
                                    <col style="width: 20%">
                                    <col style="width: 15%">
                                    <col style="width: 15%">
                                    <col style="width: 10%">
                                    <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">Tên bài test</th>
                                        <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-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Bắt đầu</th>
                                        <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Kết thúc</th>
                                        <th class="px-3 py-2.5 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Điểm số</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="exam-results-body" class="bg-white divide-y divide-slate-200">
                                    <!-- Results injected here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Footer -->
                <div class="px-6 py-4 border-t border-slate-100 bg-slate-50 flex justify-end">
                    <button type="button" class="px-6 py-2 text-sm font-bold text-slate-700 bg-white border border-slate-200 rounded-xl hover:bg-slate-100 transition-all shadow-sm" id="btn-close-results-modal">
                        Đóng
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Quản lý lượt làm bài -->
<div id="modal-manage-attempts" 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-attempts-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-2xl border border-slate-200">
            <!-- 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-indigo-50 flex items-center justify-center">
                        <i data-lucide="settings-2" class="w-5 h-5 text-indigo-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900">Quản lý lượt làm bài</h3>
                </div>
                <button type="button" class="btn-close-modal p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all" id="close-attempts-modal">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <!-- Content -->
            <div class="p-6 space-y-5">
                <div id="attempts-loading" class="flex flex-col items-center justify-center py-10 space-y-3">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
                    <p class="text-sm text-slate-500">Đang tải thông tin...</p>
                </div>

                <div id="attempts-content" class="hidden space-y-5">
                    <div class="space-y-4 pt-1">
                        <div class="bg-slate-50 rounded-xl p-4 border border-slate-100 space-y-3">
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-slate-500 font-medium">Số lần đã làm bài</span>
                                <span id="display-attempt-count" class="px-2.5 py-1 bg-white border border-slate-200 rounded-lg font-bold text-slate-900 shadow-sm min-w-[2.5rem] text-center">0</span>
                            </div>
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-slate-500 font-medium whitespace-nowrap">Số lần đã dùng reset</span>
                                <span id="display-reset-used" class="px-2.5 py-1 bg-white border border-slate-200 rounded-lg font-bold text-slate-900 shadow-sm min-w-[2.5rem] text-center">0</span>
                            </div>
                            <div id="display-deadline-row" class="flex justify-between items-center text-sm hidden">
                                <span class="text-slate-500 font-medium">Hạn mở/đóng hiện tại</span>
                                <span id="display-current-deadline" class="px-2 py-0.5 text-xs rounded-lg font-semibold space-x-1"></span>
                            </div>
                        </div>

                        <div class="space-y-2">
                            <label for="input-reset-allowance" class="block text-sm font-semibold text-slate-700">Lượt cộng thêm (Reset allowance)</label>
                            <div class="relative group">
                                <i data-lucide="plus-circle" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-indigo-600 transition-colors"></i>
                                <input type="number" id="input-reset-allowance" min="0" class="w-full pl-10 pr-3 py-2.5 bg-white border border-slate-300 rounded-xl text-sm font-medium focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all" placeholder="Nhập số lượt cộng thêm...">
                            </div>
                        </div>

                        <!-- Lịch mở/đóng mới -->
                        <div class="space-y-4">
                            <div class="space-y-2">
                                <label for="input-open-date" class="block text-sm font-semibold text-slate-700">Thời gian mở <span class="text-slate-400 font-normal">(tùy chọn)</span></label>
                                <div class="relative group">
                                    <i data-lucide="calendar" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-indigo-600 transition-colors"></i>
                                    <input type="text" id="input-open-date" class="w-full pl-10 pr-10 py-2.5 bg-white border border-slate-300 rounded-xl text-sm focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all" placeholder="Thời gian bắt đầu...">
                                    <button type="button" id="btn-clear-open-date" class="hidden absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all">
                                        <i data-lucide="x" class="w-3.5 h-3.5"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <label for="input-close-date" class="block text-sm font-semibold text-slate-700">Thời gian đóng <span class="text-slate-400 font-normal">(tùy chọn)</span></label>
                                <div class="relative group">
                                    <i data-lucide="calendar" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-indigo-600 transition-colors"></i>
                                    <input type="text" id="input-close-date" class="w-full pl-10 pr-10 py-2.5 bg-white border border-slate-300 rounded-xl text-sm focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all" placeholder="Thời gian kết thúc...">
                                    <button type="button" id="btn-clear-close-date" class="hidden absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all">
                                        <i data-lucide="x" class="w-3.5 h-3.5"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <p class="text-[11px] text-slate-400 italic">Nếu đặt thời gian mở/đóng, học viên chỉ được thi lại trong khoảng này.</p>

                        <!-- Ghi chú -->
                        <div class="space-y-2">
                            <label for="input-note" class="block text-sm font-semibold text-slate-700">Ghi chú <span class="text-slate-400 font-normal">(tùy chọn)</span></label>
                            <textarea id="input-note" rows="2" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-xl text-sm focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all resize-none" placeholder="Ghi chú lý do cấp thêm lượt..."></textarea>
                        </div>

                        <p class="text-[11px] text-slate-400 italic font-medium leading-tight">Lưu ý: Lượt cộng thêm sẽ cho phép học viên làm lại bài thi nhiều hơn giới hạn mặc định.</p>
                    </div>
                </div>
            </div>

            <!-- 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" id="cancel-attempts-modal">Hủy bỏ</button>
                <button type="button" id="btn-update-allowance" class="px-8 py-2.5 bg-indigo-600 hover:bg-indigo-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>

<!-- Modal Lịch sử cấp lượt -->
<div id="modal-retake-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-retake-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ử cấp lượt thi</h3>
                        <p class="text-xs text-slate-500 mt-0.5">
                            Học viên: <span id="retake-history-student-name" class="font-semibold text-indigo-600"></span>
                            <span class="mx-1 text-slate-300">·</span>
                            Bài thi: <span id="retake-history-quiz-name" class="font-medium text-slate-700"></span>
                        </p>
                    </div>
                </div>
                <button id="btn-close-retake-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="retake-history-body">
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="page-loading-overlay" class="hidden fixed inset-0 z-[60] bg-black bg-opacity-50 flex items-center justify-center">
    <div class="bg-white rounded-2xl p-8 flex flex-col items-center gap-4 shadow-2xl">
        <div class="relative">
            <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-600/20 border-b-blue-600"></div>
        </div>
        <div class="text-center">
            <p class="text-sm font-bold text-slate-700">Đang xử lý dữ liệu</p>
            <p class="text-xs text-slate-400">Vui lòng chờ trong giây lát...</p>
        </div>
    </div>
</div>
    <!-- Hidden Inputs -->
    <input type="hidden" id="tenant-connection" value="{{ $tenantConnection }}">
</div>
@endsection

@section('scripts')
<script>
    // Global State
    let selectedStudentId = null;
    let currentQuizId = null;

    // ==================== Helper ====================
    function formatDateTime(dateStr) {
        if (!dateStr) return '-';
        const d = new Date(dateStr);
        if (isNaN(d.getTime())) return dateStr; // Return original if invalid date
        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');
    }

    function showPageLoading() {
        $('#page-loading-overlay').removeClass('hidden');
    }

    function hidePageLoading() {
        $('#page-loading-overlay').addClass('hidden');
    }

    $(document).ready(function() {
        // Init Lucide
        if (typeof lucide !== 'undefined') { lucide.createIcons(); }

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

        // 1. Search Student
        $('#search-student-btn').on('click', function() {
            const searchTerm = $('#student-search').val().trim();
            if (!searchTerm) {
                showNotificationV2('error', 'Vui lòng nhập từ khóa để tìm kiếm.');
                return;
            }

            showPageLoading();
            $.ajax({
                url: '{{ route("exam-permission.search-students") }}',
                method: 'GET',
                data: { 
                    search: searchTerm,
                    tenant_connection: $('#tenant-connection').val()
                },
                success: function(response) {
                    hidePageLoading();
                    renderStudentSearchResults(response.users);
                },
                error: function() {
                    hidePageLoading();
                    showNotificationV2('error', 'Có lỗi xảy ra khi tìm kiếm học viên.');
                }
            });
        });

        $('#student-search').on('keypress', function(e) {
            if (e.which === 13) $('#search-student-btn').click();
        });

        function renderStudentSearchResults(users) {
            const $tbody = $('#student-results-body');
            $tbody.empty();

            if (!users || users.length === 0) {
                $tbody.append('<tr><td colspan="5" class="px-6 py-10 text-center text-sm text-slate-500"><i data-lucide="info" class="w-5 h-5 inline-block mr-1 mb-1"></i> Không tìm thấy học viên nào khớp với từ khóa.</td></tr>');
            } else {
                users.forEach(user => {
                    $tbody.append(`
                        <tr class="hover:bg-slate-50 transition-colors student-row" id="row-student-${user.id}">
                            <td class="px-6 py-4 text-sm font-medium text-slate-900">#${user.id}</td>
                            <td class="px-6 py-4 text-sm text-slate-700 font-semibold">${user.name || 'N/A'}</td>
                            <td class="px-6 py-4 text-sm text-slate-600">${user.email || 'N/A'}</td>
                            <td class="px-6 py-4 text-sm text-slate-600">${user.username || 'N/A'}</td>
                            <td class="px-6 py-4 text-center">
                                <button class="px-4 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white rounded-lg text-xs font-bold transition-all select-student-btn flex items-center gap-1 mx-auto" 
                                        data-id="${user.id}" 
                                        data-name="${user.name}" 
                                        data-username="${user.username}" 
                                        data-email="${user.email}">
                                    <i data-lucide="mouse-pointer-2" class="w-3 h-3"></i>
                                    Chọn
                                </button>
                            </td>
                        </tr>
                    `);
                });
            }
            $('#student-search-results').removeClass('hidden');
            if (typeof lucide !== 'undefined') { lucide.createIcons(); }
        }

        // 2. Select Student & Load Results
        $(document).on('click', '.select-student-btn', function() {
            const data = $(this).data();
            selectedStudentId = data.id;

            // Highlight row
            $('.student-row').removeClass('bg-blue-50/50 border-l-4 border-blue-600');
            $('#row-student-' + selectedStudentId).addClass('bg-blue-50/50 border-l-4 border-blue-600');

            // Update UI modal
            $('#display-student-name').text(data.name || 'N/A');
            $('#display-student-username').text(data.username || 'N/A');
            $('#display-student-email').text(data.email || 'N/A');
            $('#student-avatar-placeholder').text((data.name || 'S').charAt(0).toUpperCase());

            loadExamResults(selectedStudentId);
        });

        function loadExamResults(studentId) {
            showPageLoading();
            $.ajax({
                url: '{{ route("exam-permission.student-results") }}',
                method: 'GET',
                data: { 
                    student_id: studentId,
                    tenant_connection: $('#tenant-connection').val()
                },
                success: function(response) {
                    hidePageLoading();
                    
                    // Clear filters for new student
                    $('#filter-results-name').val('');
                    $('#filter-results-start').val('');
                    $('#filter-results-end').val('');
                    if (document.querySelector('#filter-results-start')._flatpickr) {
                        document.querySelector('#filter-results-start')._flatpickr.clear();
                    }
                    if (document.querySelector('#filter-results-end')._flatpickr) {
                        document.querySelector('#filter-results-end')._flatpickr.clear();
                    }

                    renderExamResults(response.results);
                    $('#modal-exam-results').removeClass('hidden');
                },
                error: function() {
                    hidePageLoading();
                    showNotificationV2('error', 'Không thể tải lịch sử thi của học viên.');
                }
            });
        }

        function renderExamResults(results) {
            const $tbody = $('#exam-results-body');
            $tbody.empty();

            if (!results || results.length === 0) {
                $tbody.append('<tr><td colspan="6" class="px-6 py-10 text-center text-sm text-slate-500">Học viên chưa có kết quả thi nào.</td></tr>');
            } else {
                results.forEach(res => {
                    $tbody.append(`
                        <tr class="hover:bg-slate-50 transition-colors group result-row" 
                            data-test-name="${res.test_name.toLowerCase()}" 
                            data-course-name="${(res.course_name || '').toLowerCase()}" 
                            data-start-time="${res.start_time}">
                            <td class="px-3 py-2.5">
                                <div class="text-sm font-medium text-slate-900 truncate" title="${res.test_name}">${res.test_name}</div>
                            </td>
                            <td class="px-3 py-2.5">
                                <div class="text-sm text-slate-600 truncate" title="${res.course_name || '-'}">${res.course_name || '-'}</div>
                            </td>
                            <td class="px-3 py-2.5 text-center whitespace-nowrap">
                                <div class="text-xs text-slate-500 font-medium">${res.start_time || '-'}</div>
                            </td>
                            <td class="px-3 py-2.5 text-center whitespace-nowrap">
                                <div class="text-xs text-slate-500 font-medium">${res.end_time || '-'}</div>
                            </td>
                            <td class="px-3 py-2.5 text-center">
                                <span class="inline-flex items-center px-2 py-0.5 bg-green-50 text-green-700 rounded-lg text-xs font-bold border border-green-100 shadow-sm">${res.score}</span>
                            </td>
                            <td class="px-3 py-2.5 text-center">
                                <button class="inline-flex items-center justify-center w-8 h-8 text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded-lg transition-colors btn-open-attempts-modal" 
                                        data-quiz-id="${res.quiz_id}" 
                                        data-test-name="${res.test_name}"
                                        title="Quản lý lượt làm bài">
                                    <i data-lucide="settings-2" class="w-5 h-5"></i>
                                </button>
                            </td>
                        </tr>
                    `);
                });
            }
            if (typeof lucide !== 'undefined') { lucide.createIcons(); }
        }

        // 3. Manage Attempts Modal
        $(document).on('click', '.btn-open-attempts-modal', function() {
            currentQuizId = $(this).data('quiz-id');
            const studentId = $(this).data('student-id');
            if (studentId) {
                selectedStudentId = studentId;
            }
            const testName = $(this).data('test-name');

            // Reset tabs
            $('.modal-tab-btn').removeClass('border-indigo-600 text-indigo-600').addClass('border-transparent text-slate-500');
            $('.modal-tab-btn[data-modal-tab="update"]').addClass('border-indigo-600 text-indigo-600').removeClass('border-transparent text-slate-500');
            $('#modal-tab-content-update').removeClass('hidden');
            $('#modal-tab-content-history').addClass('hidden');
            $('#modal-attempts-footer').removeClass('hidden');

            $('#modal-manage-attempts').removeClass('hidden');
            $('#attempts-loading').removeClass('hidden');
            $('#attempts-content').addClass('hidden');
            if (typeof flatpickr !== 'undefined') {
                ['open-date', 'close-date'].forEach(id => {
                    const inputEl = document.getElementById(`input-${id}`);
                    if (inputEl && !inputEl._flatpickr) {
                        flatpickr(`#input-${id}`, {
                            enableTime: true,
                            dateFormat: "Y-m-d H:i",
                            onChange: function(selectedDates, dateStr) {
                                $(`#btn-clear-${id}`).toggleClass('hidden', !dateStr);
                            }
                        });
                    }
                });
            }

            // Load attempt info
            $.ajax({
                url: '{{ route("exam-permission.user-attempts.search") }}',
                method: 'POST',
                data: {
                    student_id: selectedStudentId,
                    quiz_id: currentQuizId,
                    tenant_connection: $('#tenant-connection').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    $('#attempts-loading').addClass('hidden');
                    $('#attempts-content').removeClass('hidden');

                    if (res.success && res.found) {
                        $('#display-attempt-count').text(res.attempt_count);
                        $('#display-reset-used').text(res.reset_used || 0);
                        $('#input-reset-allowance').val(res.reset_allowance || 0);
                        $('#input-note').val('');

                        // Deadline hiện tại
                        let currentStatusHtml = '';
                        if (res.open_date) currentStatusHtml += `<span class="bg-green-50 text-green-700 px-2.5 py-1 rounded-md mb-1 sm:mb-0 inline-block border border-green-200">Mở: ${res.open_date}</span> `;
                        if (res.close_date) currentStatusHtml += `<span class="bg-red-50 text-red-700 px-2.5 py-1 rounded-md inline-block border border-red-200">Đóng: ${res.close_date}</span>`;
                        
                        if (currentStatusHtml) {
                            $('#display-current-deadline').html(currentStatusHtml);
                            $('#display-deadline-row').removeClass('hidden');
                        } else {
                            $('#display-deadline-row').addClass('hidden');
                        }

                        // Set flatpickr to empty
                        ['open-date', 'close-date'].forEach(id => {
                            if (document.getElementById(`input-${id}`) && document.getElementById(`input-${id}`)._flatpickr) {
                                document.getElementById(`input-${id}`)._flatpickr.clear();
                            }
                            $(`#btn-clear-${id}`).addClass('hidden');
                        });

                    } else {
                        showNotificationV2('error', res.message || 'Không tìm thấy thông tin lượt làm bài.');
                        $('#modal-manage-attempts').addClass('hidden');
                    }
                },
                error: function() {
                    $('#modal-manage-attempts').addClass('hidden');
                    showNotificationV2('error', 'Có lỗi xảy ra khi tải thông tin lượt làm bài.');
                }
            });
        });



        // ==================== Retake History Modal ====================
        $(document).on('click', '.btn-view-retake-history', function () {
            const quizId = $(this).data('quiz-id');
            const studentId = $(this).data('student-id');
            const quizName = $(this).data('test-name');
            const studentName = $(this).data('student-name');

            // Set modal header
            $('#retake-history-student-name').text(studentName);
            $('#retake-history-quiz-name').text(quizName);

            // Show modal + skeleton
            $('#modal-retake-history').removeClass('hidden');
            $('body').addClass('overflow-hidden');
            $('#retake-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-indigo-600"></div>
                    <p class="text-sm text-slate-500">Đang tải lịch sử...</p>
                </div>
            `);

            $.ajax({
                url: '{{ route("exam-permission.retake.history") }}',
                method: 'GET',
                data: {
                    tenant_connection: $('#tenant-connection').val(),
                    quiz_id: quizId,
                    student_id: studentId,
                },
                success: function (res) {
                    if (!res.success || !res.data || !res.data.data || res.data.data.length === 0) {
                        $('#retake-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ử cấp lượt nào.</p>
                            </div>
                        `);
                        if (typeof lucide !== 'undefined') { 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.data.forEach((item, idx) => {
                        const isLatest = idx === 0;
                        const dotColor = isLatest ? 'bg-indigo-600 ring-4 ring-indigo-100' : 'bg-slate-300';
                        const cardBg = isLatest ? 'bg-indigo-50 border-indigo-200' : 'bg-white border-slate-200';
                        
                        let changesHtml = '';
                        if (item.reset_allowance_before !== item.reset_allowance_after) {
                            changesHtml += `<div class="mt-2 text-sm text-slate-700">Lượt thi: <span class="line-through text-slate-400">${item.reset_allowance_before}</span> <i data-lucide="arrow-right" class="w-3 h-3 inline"></i> <span class="font-bold text-indigo-600">${item.reset_allowance_after}</span></div>`;
                        } else {
                            changesHtml += `<div class="mt-2 text-sm text-slate-700">Lượt thi: <span class="font-bold text-indigo-600">${item.reset_allowance_after}</span></div>`;
                        }
                        
                        let deadlineHtml = '';
                        if (item.deadline) {
                            deadlineHtml += `<div class="mt-1 text-sm text-slate-700">Hạn: <span class="font-medium inline-flex items-center gap-1 bg-red-50 text-red-600 border border-red-200 px-2 py-0.5 rounded text-xs"><i data-lucide="calendar-x" class="w-3 h-3"></i> ${formatDateTime(item.deadline)}</span></div>`;
                        }

                        let noteHtml = '';
                        if (item.note) {
                            noteHtml += `<div class="mt-2 text-xs text-slate-500 italic flex gap-1"><i data-lucide="message-square" class="w-3 h-3 mt-0.5 pt-px"></i> <div>${item.note}</div></div>`;
                        }

                        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">
                                    <div>
                                        <span class="text-sm font-semibold text-slate-900">${item.performed_by_name || 'Hệ thống'}</span>
                                        ${isLatest ? '<span class="ml-2 text-[10px] bg-indigo-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>
                                ${changesHtml}
                                ${deadlineHtml}
                                ${noteHtml}
                            </div>
                        </div>`;
                    });

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

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

        // Close Modal Results
        $('#close-results-modal, #btn-close-results-modal').on('click', function() {
            $('#modal-exam-results').addClass('hidden');
        });

        // Close Modal Attempts
        $('#close-attempts-modal, #cancel-attempts-modal').on('click', function() {
            $('#modal-manage-attempts').addClass('hidden');
        });

        $('#btn-update-allowance').on('click', function() {
            const allowance = $('#input-reset-allowance').val();
            const openDate = $('#input-open-date').val() || null;
            const closeDate = $('#input-close-date').val() || null;
            const note = $('#input-note').val() || 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...');
            if (typeof lucide !== 'undefined') { lucide.createIcons(); }

            $.ajax({
                url: '{{ route("exam-permission.user-attempts.update-reset-allowance") }}',
                method: 'POST',
                data: {
                    student_id: selectedStudentId,
                    quiz_id: currentQuizId,
                    reset_allowance: allowance,
                    open_date: openDate,
                    close_date: closeDate,
                    note: note,
                    tenant_connection: $('#tenant-connection').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    if (res.success) {
                        showNotificationV2('success', res.message);
                        $('#modal-manage-attempts').addClass('hidden');
                        if (typeof loadAllRetakes === 'function') {
                            loadAllRetakes(retakesCurrentPage);
                        }
                    } else {
                        showNotificationV2('error', res.message || 'Cập nhật thất bại.');
                    }
                },
                error: function() {
                    showNotificationV2('error', 'Có lỗi xảy ra khi cập nhật.');
                },
                complete: function() {
                    $btn.prop('disabled', false).html(originalHtml);
                    if (typeof lucide !== 'undefined') { lucide.createIcons(); }
                }
            });
        });

        // Clear dates
        $('#btn-clear-open-date, #btn-clear-close-date').on('click', function() {
            const isClose = $(this).attr('id').includes('close');
            const inputId = isClose ? 'input-close-date' : 'input-open-date';
            if (document.getElementById(inputId) && document.getElementById(inputId)._flatpickr) {
                document.getElementById(inputId)._flatpickr.clear();
            }
            $(this).addClass('hidden');
        });

        // 4. Modal Results Filtering
        function applyResultsFilter() {
            const nameSearch = $('#filter-results-name').val().toLowerCase().trim();
            const startDate = $('#filter-results-start').val();
            const endDate = $('#filter-results-end').val();

            $('.result-row').each(function() {
                const $row = $(this);
                const testName = $row.data('test-name');
                const courseName = $row.data('course-name');
                const rowStartTime = $row.data('start-time'); // format YYYY-MM-DD HH:mm:ss

                let show = true;

                // Name filter
                if (nameSearch && !testName.includes(nameSearch) && !courseName.includes(nameSearch)) {
                    show = false;
                }

                // Date filter
                if (show && rowStartTime) {
                    const rowDate = rowStartTime.split(' ')[0]; // YYYY-MM-DD
                    if (startDate && rowDate < startDate) show = false;
                    if (endDate && rowDate > endDate) show = false;
                }

                $row.toggle(show);
            });
        }

        $('#filter-results-name').on('input', applyResultsFilter);
        
        // Initialize Datepickers for Modal Filters
        if (typeof flatpickr !== 'undefined') {
            flatpickr(".datepicker", {
                dateFormat: "Y-m-d",
                locale: "vn",
                onChange: function(selectedDates, dateStr, instance) {
                    const $clearBtn = $(instance.element).parent().find('.btn-clear-date');
                    if (dateStr) {
                        $clearBtn.removeClass('hidden');
                    } else {
                        $clearBtn.addClass('hidden');
                    }
                    applyResultsFilter();
                }
            });
        }

        // Handle Clear Date Buttons
        $(document).on('click', '.btn-clear-date', function(e) {
            e.preventDefault();
            const targetId = $(this).data('target');
            const $input = $(targetId);
            
            if ($input[0]._flatpickr) {
                $input[0]._flatpickr.clear();
            } else {
                $input.val('');
                applyResultsFilter();
            }
            $(this).addClass('hidden');
        });

        // ==================== Thêm tính năng Danh sách cấp lượt ====================
        let retakesCurrentPage = 1;

        window.loadAllRetakes = function(page = 1) {
            retakesCurrentPage = page;
            const search = $('#retakes-search').val().trim();
            const status = $('#retakes-status').val();

            const skeletonHtml = `
                <tr class="skeleton-row animate-pulse">
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-4/5 mb-2"></div><div class="h-2 bg-slate-100 rounded w-3/5"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-full"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-full"></div></td>
                    <td class="px-3 py-3"><div class="h-6 bg-slate-200 rounded w-8 mx-auto"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-6 mx-auto"></div></td>
                    <td class="px-3 py-3"><div class="h-3 bg-slate-200 rounded w-24 mb-1"></div><div class="h-3 bg-slate-200 rounded w-24"></div></td>
                    <td class="px-3 py-3"><div class="h-6 bg-slate-200 rounded w-8 mx-auto"></div></td>
                </tr>`.repeat(5);

            $('#retakes-table-body').html(skeletonHtml);
            if (typeof lucide !== 'undefined') { lucide.createIcons(); }

            $.ajax({
                url: '{{ route("exam-permission.retake.list") }}',
                method: 'GET',
                data: {
                    search: search,
                    status: status,
                    page: page,
                    tenant_connection: $('#tenant-connection').val()
                },
                success: function(res) {
                    if (res.success) {
                        renderAllRetakes(res.data);
                    } else {
                        $('#retakes-table-body').html(`<tr><td colspan="6" class="px-6 py-10 text-center text-sm text-red-500">${res.message}</td></tr>`);
                    }
                },
                error: function() {
                    $('#retakes-table-body').html(`<tr><td colspan="6" class="px-6 py-10 text-center text-sm text-red-500">Lỗi khi tải dữ liệu.</td></tr>`);
                }
            });
        };

        function renderAllRetakes(data) {
            const $tbody = $('#retakes-table-body');
            $tbody.empty();

            if (!data.data || data.data.length === 0) {
                $tbody.html('<tr><td colspan="7" class="px-6 py-10 text-center text-sm text-slate-500">Chưa có lượt thi lại nào được cấp.</td></tr>');
            } else {
                data.data.forEach(item => {
                    const openDate = item.open_date ? formatDateTime(item.open_date) : '';
                    const closeDate = item.close_date ? formatDateTime(item.close_date) : '';
                    
                    let dateHtml = '';
                    if (!openDate && !closeDate) {
                        dateHtml = '<span class="text-xs text-slate-400">Không có thời hạn</span>';
                    } else {
                        if (openDate) dateHtml += `<div class="text-[11px] text-slate-600 border border-slate-200 bg-slate-50 rounded px-1.5 py-0.5 mb-1 w-max"><span class="font-semibold text-green-600">Mở:</span> ${openDate}</div>`;
                        if (closeDate) dateHtml += `<div class="text-[11px] text-slate-600 border border-slate-200 bg-slate-50 rounded px-1.5 py-0.5 w-max"><span class="font-semibold text-red-500">Đóng:</span> ${closeDate}</div>`;
                    }

                    $tbody.append(`
                        <tr class="hover:bg-slate-50 transition-colors group">
                            <td class="px-3 py-3">
                                <div class="text-sm font-semibold text-slate-900">${item.student_name}</div>
                                <div class="text-[11px] text-slate-500">${item.student_email || item.student_username}</div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="text-sm font-medium text-slate-900 line-clamp-2" title="${item.course_name || ''}">${item.course_name || '-'}</div>
                            </td>
                            <td class="px-3 py-3">
                                <div class="text-sm font-medium text-slate-900 line-clamp-2" title="${item.quiz_name}">${item.quiz_name}</div>
                            </td>
                            <td class="px-3 py-3 text-center">
                                <span class="px-2.5 py-1 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold border border-blue-100 shadow-sm">${item.reset_allowance}</span>
                            </td>
                            <td class="px-3 py-3 text-center">
                                <span class="text-slate-600 text-sm font-medium">${item.reset_used || 0}</span>
                            </td>
                            <td class="px-3 py-3">
                                ${dateHtml}
                            </td>
                            <td class="px-3 py-3 text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <button class="btn-open-attempts-modal w-8 h-8 inline-flex items-center justify-center text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded-lg transition-colors border border-transparent shadow-sm" 
                                            data-quiz-id="${item.quiz_id}" 
                                            data-test-name="${item.quiz_name}"
                                            data-student-id="${item.student_id}"
                                            title="Chỉnh sửa lượt làm bài">
                                        <i data-lucide="edit-2" class="w-4 h-4"></i>
                                    </button>
                                    <button class="btn-view-retake-history w-8 h-8 inline-flex items-center justify-center text-slate-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors border border-transparent shadow-sm" 
                                            data-quiz-id="${item.quiz_id}" 
                                            data-test-name="${item.quiz_name}"
                                            data-student-id="${item.student_id}"
                                            data-student-name="${item.student_name}"
                                            title="Lịch sử cấp lượt">
                                        <i data-lucide="history" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    `);
                });
            }

            // Pagination logic
            let phtml = '';
            if (data.total > 0 && data.last_page > 1) {
                phtml += `<div class="px-4 md:px-6 py-4 w-full">
                    <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) {
                    phtml += `<button type="button" class="btn-retake-page 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 {
                    phtml += `<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) {
                    phtml += `<button type="button" class="btn-retake-page 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) phtml += `<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) {
                        phtml += `<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 {
                        phtml += `<button type="button" class="btn-retake-page 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) phtml += `<span class="px-1 sm:px-2 text-xs sm:text-sm text-slate-400 flex-shrink-0">...</span>`;
                    phtml += `<button type="button" class="btn-retake-page 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) {
                    phtml += `<button type="button" class="btn-retake-page 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 {
                    phtml += `<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>`;
                }

                phtml += `</div></div></div>`;
            } else if (data.total > 0) {
                phtml += `<div class="px-4 md:px-6 py-4 w-full text-xs sm:text-sm text-slate-600">Hiển thị ${data.from || 0} - ${data.to || 0} trong tổng số ${data.total} kết quả</div>`;
            }

            $('#retakes-pagination').html(phtml);
            if (typeof lucide !== 'undefined') { lucide.createIcons(); }
        }

        $(document).on('click', '.btn-retake-page', function() {
            loadAllRetakes($(this).data('page'));
        });

        let searchRetakesTimeout;
        $('#retakes-search').on('input', function() {
            clearTimeout(searchRetakesTimeout);
            searchRetakesTimeout = setTimeout(() => {
                loadAllRetakes(1);
            }, 500);
        });

        $('#retakes-status').on('change', function() {
            loadAllRetakes(1);
        });

        // Initialize table
        loadAllRetakes(1);
    });
</script>
@endsection