@extends('layouts-v2.app')

@section('title', 'Danh sách học viên đến lịch thi')

@section('content')
<div class="pb-10">
    {{-- Header Page --}}
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-3">
            <div class="p-2.5 bg-blue-50 text-blue-600 rounded-xl shadow-sm border border-blue-100">
                <i data-lucide="calendar-days" class="w-6 h-6"></i>
            </div>
            <h1 class="text-2xl md:text-3xl font-extrabold text-slate-800 tracking-tight">
                Danh sách học viên đến lịch thi
            </h1>
        </div>
        <div class="flex items-center gap-3">
            {{-- Nút Xuất dữ liệu --}}
            <button id="btn_export_schedule" class="group flex items-center gap-2 py-2.5 px-5 bg-white border border-slate-200 text-slate-700 rounded-xl hover:bg-slate-50 hover:text-blue-600 hover:border-blue-200 transition-all font-semibold text-sm shadow-sm">
                <i data-lucide="download" class="w-4 h-4 text-slate-400 group-hover:text-blue-500"></i>
                <span>Xuất dữ liệu</span>
            </button>

            {{-- Nút Tạo lịch thi --}}
            <button id="btn-create-exam-schedule" class="group flex items-center gap-2 py-2.5 px-5 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all font-semibold text-sm shadow-sm shadow-blue-200/50">
                <i data-lucide="calendar-plus" class="w-4 h-4 text-blue-100 group-hover:text-white transition-colors"></i>
                <span>Tạo lịch thi</span>
            </button>
        </div>
    </div>

    {{-- Khu vực Bộ lọc --}}
    <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] mb-6 relative">
        <div class="flex items-center gap-2 mb-4 text-slate-800 font-bold text-sm">
            <i data-lucide="filter" class="w-4 h-4 text-blue-500"></i>
            Bộ lọc dữ liệu
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-5 gap-x-4">
            {{-- Ngày tháng --}}
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Từ ngày</label>
                <div class="relative">
                    <i data-lucide="calendar" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
                    <input type="text" id="filter_start_date" class="w-full pl-9 pr-3 py-2.5 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-blue-100 focus:border-blue-500 transition-all shadow-sm" placeholder="Mở bài từ...">
                </div>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Đến ngày</label>
                <div class="relative">
                    <i data-lucide="calendar" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
                    <input type="text" id="filter_end_date" class="w-full pl-9 pr-3 py-2.5 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-blue-100 focus:border-blue-500 transition-all shadow-sm" placeholder="Mở bài đến...">
                </div>
            </div>
            
            {{-- Text Inputs --}}
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Số điện thoại</label>
                <input type="text" id="filter_phone" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-blue-100 focus:border-blue-500 transition-all shadow-sm" placeholder="Nhập SĐT...">
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Email</label>
                <input type="email" id="filter_email" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-blue-100 focus:border-blue-500 transition-all shadow-sm" placeholder="Nhập Email...">
            </div>

            {{-- TomSelect Multiple --}}
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Mã HV</label>
                <select id="filter_student_code" multiple placeholder="Chọn Mã HV..."></select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Mã lớp</label>
                <select id="filter_class_code" multiple placeholder="Chọn Mã lớp..."></select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Sản phẩm</label>
                <select id="filter_product" multiple placeholder="Chọn sản phẩm..."></select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Khóa học</label>
                <select id="filter_course" multiple placeholder="Chọn khóa học..."></select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Bài thi</label>
                <select id="filter_exam" multiple placeholder="Chọn bài thi..."></select>
            </div>

            {{-- TomSelect Single (Trạng thái) --}}
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Trạng thái thi</label>
                <select id="filter_exam_status" placeholder="Chọn trạng thái...">
                    <option value="">Tất cả</option>
                    <option value="0">Chờ nộp</option>
                    <option value="1">Đã nộp</option>
                    <option value="2">Không nộp</option>
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Trạng thái xử lý điểm</label>
                <select id="filter_point_status" placeholder="Chọn trạng thái...">
                    <option value="">Tất cả</option>
                    <option value="0">Đang xử lý</option>
                    <option value="1">Hoàn tất</option>
                    <option value="2">Giao chấm lại</option>
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Yêu cầu</label>
                <select id="filter_requirement" placeholder="Chọn yêu cầu...">
                    <option value="">Tất cả</option>
                    <option value="0">Thi đúng lộ trình</option>
                    <option value="1">Thi lại</option>
                    <option value="2">Thi sớm</option>
                </select>
            </div>
        </div>

        <div id="filter_actions" class="mt-5 pt-5 border-t border-slate-100 flex items-center justify-end gap-3">
            <button id="btn_reset" class="hidden px-5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-600 text-sm font-bold rounded-lg transition-all flex items-center gap-2">
                <i data-lucide="rotate-ccw" class="w-4 h-4"></i> Làm mới
            </button>
            <button id="btn_search" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded-lg shadow-sm shadow-blue-200 transition-all flex items-center gap-2">
                <i data-lucide="search" class="w-4 h-4"></i> Tìm kiếm
            </button>
        </div>
    </div>

    {{-- Khu vực Bảng quản lý --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col relative z-10">
        <div class="px-4 py-3 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
            <h3 class="font-bold text-slate-700 text-sm">Danh sách học viên</h3>
            <div class="flex items-center gap-2">
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Hiển thị</span>
                <select id="perpage" class="border border-slate-300 rounded-lg text-sm bg-white px-3 py-1.5 focus:ring-2 focus:ring-blue-100 focus:border-blue-500 outline-none shadow-sm cursor-pointer">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                </select>
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Dòng</span>
            </div>
        </div>

        <div id="exam-schedule-table-container" class="overflow-x-auto custom-scrollbar" style="max-height: calc(100vh - 350px);">
            <table class="min-w-max w-full divide-y divide-gray-200 text-sm">
                <thead class="bg-slate-50 sticky top-0 z-30 border-b border-slate-200">
                    <tr>
                        <th class="lg:sticky lg:left-0 bg-slate-50 z-30 w-[60px] min-w-[60px] px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">STT</th>
                        <th class="lg:sticky lg:left-[60px] bg-slate-50 z-30 w-[250px] min-w-[250px] lg:shadow-[4px_0_12px_-4px_rgba(0,0,0,0.05)] px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Học viên</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Mã HV</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Sản phẩm</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Khóa học</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Bài thi</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Yêu cầu</th>
                        <th class="px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Trạng thái bài thi</th>
                        <th class="px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Trạng thái nộp bài</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200 min-w-[180px]">Thời gian</th>
                        <th class="lg:sticky lg:right-0 bg-slate-50 z-30 w-[140px] min-w-[140px] lg:shadow-[-4px_0_12px_-4px_rgba(0,0,0,0.05)] px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Hành động</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 bg-white" id="exam-schedule-table-body">
                    {{-- Dữ liệu render qua JS --}}
                </tbody>
            </table>
        </div>
        
        <div class="px-6 py-4 border-t border-slate-200 bg-slate-50 flex items-center justify-between" id="pagination-exam-schedule">
        </div>
    </div>

    <x-floating-scroll targetId="exam-schedule-table-container" />
</div>

@include('exam-schedule.modal.exam-schedule-modal')

<script>
    window.routes = {
        searchCategories: "{{ route('course.searchCategories') }}",
        searchCourses: "{{ route('course.searchCourses') }}",
        searchSections: "{{ route('course.searchSections') }}",
        searchQuizzes: "{{ route('course.searchQuizzes') }}",
        searchClasses: "{{ route('class.searchClasses') }}",
        searchStudents: "{{ route('student.searchStudents') }}",
        studentAvatar: "{{ asset('images/student_avatar.jpg') }}",
        getExamSchedule: "{{ route('exam-schedule.getExamSchedule') }}",
        exportExamSchedule: "{{ route('exam-schedule.export') }}",
        exportProgress: "{{ route('exam-schedule.export-progress', ['export_id' => 'ID']) }}",
        downloadExport: "{{ route('exam-schedule.download', ['export_id' => 'ID']) }}",
        storeExamSchedule: "{{ route('exam-schedule.storeExamSchedule') }}",
        updateExamSchedule: "{{ route('exam-schedule.updateExamSchedule') }}",
    }
</script>
<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/exam-schedule/exam-schedule.js') }}"></script>
<script src="{{ asset('js/utils/floating-scroll.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gọi hàm đã được gắn vào window từ file JS trên
        if (typeof window.initFloatingScrollbars === 'function') {
            window.initFloatingScrollbars();
        }
        
        // Render icon lucide nếu có
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
@endsection