@extends('layouts-v2.app')

@section('title', 'Quản lý lịch sử làm bài')

@section('content')
<div class="pb-10">
    <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">
                Quản lý lịch sử làm bài
            </h1>
        </div>
        <div class="flex items-center gap-3">
            <button id="btn_sync_writing_data" class="hidden group flex items-center gap-2 py-2.5 px-4 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="refresh-cw" class="w-4 h-4 text-slate-400 group-hover:text-blue-500"></i>
                <span>Quét & Đồng bộ Writing</span>
            </button>
            <button id="btn_sync_recalculate_overall" class="hidden group flex items-center gap-2 py-2.5 px-4 bg-white border border-slate-200 text-slate-700 rounded-xl hover:bg-slate-50 hover:text-indigo-600 hover:border-indigo-200 transition-all font-semibold text-sm shadow-sm">
                <i data-lucide="calculator" class="w-4 h-4 text-slate-400 group-hover:text-indigo-500"></i>
                <span>Tính lại điểm Overall</span>
            </button>
            <button id="btn_sync_icl_scores" class="hidden group flex items-center gap-2 py-2.5 px-4 bg-white border border-slate-200 text-slate-700 rounded-xl hover:bg-slate-50 hover:text-violet-600 hover:border-violet-200 transition-all font-semibold text-sm shadow-sm">
                <i data-lucide="cloud-lightning" class="w-4 h-4 text-slate-400 group-hover:text-violet-500"></i>
                <span>Đồng bộ điểm sang ICL</span>
            </button>
            <button id="btn_export_history" 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>
        </div>
    </div>

    {{-- Khu vực Bộ lọc (Card) --}}
    <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"></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="DD-MM-YYYY">
                </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"></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="DD-MM-YYYY">
                </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>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">ID Lượt thi (dev)</label>
                <input type="text" id="filter_student_score_id" 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 ID...">
            </div>


            {{-- Selects --}}
            <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" 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" 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">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">Sản phẩm</label>
                <select id="filter_product" 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" 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" placeholder="Chọn bài thi..."></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>

        {{-- Thay thế khối div có id="filter_actions" hiện tại bằng đoạn này --}}
        <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ý (Table Card) --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col relative z-10">

        {{-- Header của Bảng & Chọn số dòng --}}
        <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 lịch sử</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="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Dòng</span>
            </div>
        </div>

        <div id="student-exam-history-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-white/90 backdrop-blur-md sticky top-0 z-30 border-b border-slate-200">
                    <tr>
                        <th class="sticky left-0 bg-white/90 backdrop-blur-md z-30 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="sticky left-[60px] bg-white/90 backdrop-blur-md z-30 w-[260px] 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">Mã lớp</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 min-w-[180px]">Thời gian làm bài</th>
                        <th class="px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Điểm & Kết quả</th>
                        <th class="px-4 py-4 text-center 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">TT 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">TT Nộp bài</th>
                        <th class="px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">TT Xử lý điểm</th>
                        <th class="px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Bất thường</th>
                        <th class="px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">TT Chấm thủ công</th>

                        <th class="sticky right-0 bg-white/90 backdrop-blur-md z-30 w-[120px] 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="mock-table-body">
                </tbody>
            </table>
        </div>

        {{-- Phân trang --}}
        <div class="px-6 py-4 border-t border-slate-200 bg-slate-50 flex items-center justify-between" id="pagination-exam-histories">
        </div>
    </div>

    <x-floating-scroll targetId="student-exam-history-table-container" />

    <input type="hidden" id="tenant-connection" value="{{ $tenant_connection }}">
</div>

@include('exam-history.modal.sync-writing-data')
@include('exam-history.modal.sync-recalculate-overall')
@include('exam-history.modal.sync-icl-scores')
@include('exam-history.modal.exam-detail')
@include('components.assign-modal')

<script>
    window.routes = {
        searchTeachers: "{{ route('teacher.searchTeachers') }}",
        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') }}",
        getExamHistories: "{{ route('exam-histories.getExamHistories') }}",
        exportExamHistories: "{{ route('exam-histories.export') }}",
        exportProgress: "{{ route('exam-histories.export-progress', ['export_id' => 'ID']) }}",
        downloadExport: "{{ route('exam-histories.download', ['export_id' => 'ID']) }}",
        getSkillsForAssignment: "{{ route('student-exam-histories.getSkillsForAssignment', ['student_score_id' => 'ID']) }}",
        assignTeacher: "{{ route('student-exam-histories.assignTeacher') }}",
        getExamOverview: "{{ route('student-exam-histories.getOverview', ['student_score_id' => 'ID']) }}",
        scanMissingExtData: "{{ route('exam-histories.scan-missing-ext-data') }}",
        syncMissingExtData: "{{ route('exam-histories.sync-missing-ext-data') }}",
        syncRecalculateOverallBatch: "{{ route('exam-histories.sync-recalculate-overall-batch') }}",
        scanRecalculateOverall: "{{ route('exam-histories.scan-recalculate-overall') }}",
        scanScoresBySchedule: "{{ route('api.exam-histories.scan-scores-by-schedule') }}",
        syncIclScoresBatch: "{{ route('api.exam-histories.sync-icl-scores-batch') }}",
    }
</script>
<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/exam-history-v2/exam-history.js') }}"></script>
<script src="{{ asset('js/exam-schedule-result/exam-history/exam-detail-modal.js') }}"></script>
<script src="{{ asset('js/exam-schedule-result/exam-history/exam-detail-modal.detail.js') }}"></script>
<script src="{{ asset('js/utils/floating-scroll.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof window.initFloatingScrollbars === 'function') {
            window.initFloatingScrollbars();
        }

        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
@endsection