{{-- Modal Quét & Đồng bộ Tiến trình Học tập Final Test --}}
<div id="sync_final_test_progress_modal" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-6xl w-full p-6 shadow-2xl border border-slate-100 transform transition-all flex flex-col max-h-[90vh]">
        
        {{-- Header Modal --}}
        <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-4 flex-shrink-0">
            <div class="flex items-center gap-3">
                <div class="p-2 bg-indigo-50 text-indigo-600 rounded-lg">
                    <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
                </div>
                <div>
                    <h3 class="font-extrabold text-slate-800 text-base">Đồng bộ Tiến trình Học tập Final Test</h3>
                    <p class="text-slate-400 text-xs mt-0.5">Quét học viên thi Final Test và đồng bộ tiến độ học tập sang hệ thống bên thứ 3</p>
                </div>
            </div>
            <button id="btn_close_final_test_modal" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg hover:bg-slate-100 transition-all">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        {{-- Content Modal --}}
        <div id="final_test_modal_content" class="flex-1 overflow-y-auto py-2 space-y-4">
            
            {{-- Form Cấu hình Quét --}}
            <div id="final_test_step_form" class="space-y-4">
                <div class="bg-indigo-50/50 p-3.5 rounded-xl border border-indigo-100 text-xs text-indigo-800 leading-relaxed">
                    <span class="font-bold">Lưu ý:</span> Hệ thống sẽ quét các học viên đã hoàn tất bài thi Final test (score_processing_status = 1), tự động kiểm tra hash dữ liệu và MAX(id) bài thi để tránh gửi lặp lại.
                </div>

                {{-- Filter học sinh lẻ --}}
                <div>
                    <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">
                        Lọc theo Học sinh cụ thể <span class="text-slate-400 font-normal capitalize">(Để trống nếu muốn quét toàn bộ)</span>
                    </label>
                    <input type="text" id="final_test_student_filter" class="w-full px-3.5 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 transition-all bg-white" placeholder="Nhập ID học sinh, Zeus ID hoặc Username (Ví dụ: 12345 hoặc 101, 102)...">
                </div>

                {{-- Filter Khóa học --}}
                <div>
                    <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">
                        Lọc theo Khóa học (Course DB ID) <span class="text-slate-400 font-normal capitalize">(Để trống nếu muốn quét toàn bộ)</span>
                    </label>
                    <input type="text" id="final_test_course_filter" class="w-full px-3.5 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 transition-all bg-white" placeholder="Nhập Course ID (Ví dụ: 429, 430 hoặc 431)...">
                </div>

                {{-- Tùy chọn cờ Dry Run & Force Sync --}}
                <div class="grid grid-cols-2 gap-4">
                    <label class="flex items-center justify-between p-3.5 border border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 transition-all">
                        <div class="flex flex-col">
                            <span class="text-xs font-bold text-slate-700">Chế độ Chạy thử (Dry Run)</span>
                            <span class="text-[10px] text-slate-400">Xem trước kết quả mà KHÔNG gửi API & lưu DB</span>
                        </div>
                        <input type="checkbox" id="final_test_dry_run" checked class="w-4 h-4 text-indigo-600 focus:ring-indigo-500 rounded cursor-pointer">
                    </label>

                    <label class="flex items-center justify-between p-3.5 border border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 transition-all">
                        <div class="flex flex-col">
                            <span class="text-xs font-bold text-slate-700">Ép buộc gửi lại (Force Sync)</span>
                            <span class="text-[10px] text-slate-400">Gửi lại kể cả khi dữ liệu không đổi</span>
                        </div>
                        <input type="checkbox" id="final_test_force_sync" class="w-4 h-4 text-indigo-600 focus:ring-indigo-500 rounded cursor-pointer">
                    </label>
                </div>

                <div class="pt-2">
                    <button id="btn_run_final_test_scan" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-sm rounded-xl shadow-md shadow-indigo-200 transition-all flex items-center justify-center gap-2">
                        <i data-lucide="search" class="w-4 h-4"></i> Quét & Kiểm tra Tiến trình Học tập
                    </button>
                </div>
            </div>

            {{-- State: Loading --}}
            <div id="final_test_step_loading" class="hidden text-center py-8">
                <div class="inline-block animate-spin text-indigo-600 mb-3">
                    <i data-lucide="loader-2" class="w-8 h-8"></i>
                </div>
                <p class="text-slate-600 font-medium text-sm">Đang gom tiến trình học tập & đối chiếu dữ liệu học viên...</p>
            </div>

            {{-- State: Result Table & Execution --}}
            <div id="final_test_step_result" class="hidden space-y-4">
                {{-- Thống kê theo từng Khóa học --}}
                <div id="final_test_courses_summary_container" class="hidden space-y-2 p-3.5 bg-indigo-50/50 border border-indigo-100/80 rounded-xl">
                    <div class="text-[11px] font-bold text-indigo-800 uppercase tracking-wider flex items-center gap-1.5">
                        <i data-lucide="book-open" class="w-3.5 h-3.5 text-indigo-600"></i>
                        Thống kê số lượng học viên hoàn tất Final Test theo từng Khóa học:
                    </div>
                    <div id="final_test_courses_pills" class="flex flex-wrap gap-2 text-xs">
                        {{-- Chèn động qua JS --}}
                    </div>
                </div>

                {{-- Summary Cards --}}
                <div class="grid grid-cols-4 gap-3 text-center text-xs">
                    <div class="p-3 bg-slate-50 border border-slate-100 rounded-xl">
                        <div class="text-slate-400 font-medium text-[11px] mb-0.5">Tổng số học viên</div>
                        <div id="summary_total_processed" class="font-extrabold text-slate-800 text-base">0</div>
                    </div>
                    <div class="p-3 bg-emerald-50 border border-emerald-100 rounded-xl">
                        <div class="text-emerald-600 font-medium text-[11px] mb-0.5" id="summary_eligible_label">Sẵn sàng đồng bộ</div>
                        <div id="summary_total_eligible" class="font-extrabold text-emerald-700 text-base">0</div>
                    </div>
                    <div class="p-3 bg-amber-50 border border-amber-100 rounded-xl">
                        <div class="text-amber-600 font-medium text-[11px] mb-0.5">Bỏ qua (Không đổi)</div>
                        <div id="summary_total_skipped" class="font-extrabold text-amber-700 text-base">0</div>
                    </div>
                    <div class="p-3 bg-rose-50 border border-rose-100 rounded-xl">
                        <div class="text-rose-600 font-medium text-[11px] mb-0.5">Lỗi / Thất bại</div>
                        <div id="summary_total_failed" class="font-extrabold text-rose-700 text-base">0</div>
                    </div>
                </div>

                {{-- Table Danh sách --}}
                <div class="border border-slate-100 rounded-xl overflow-hidden max-h-64 overflow-y-auto">
                    <table class="w-full text-left border-collapse text-xs">
                        <thead class="bg-slate-50 text-slate-500 font-semibold sticky top-0 border-b border-slate-100 z-10">
                            <tr>
                                <th class="p-3">Học sinh</th>
                                <th class="p-3">Khóa học</th>
                                <th class="p-3 text-center">Trạng thái</th>
                                <th class="p-3">Chi tiết / Lý do</th>
                                <th class="p-3 text-center">Metrics JSON</th>
                            </tr>
                        </thead>
                        <tbody id="final_test_result_list" class="divide-y divide-slate-50 text-slate-700 bg-white">
                            {{-- Chèn động qua JS --}}
                        </tbody>
                    </table>
                </div>

                {{-- Footer Action Buttons --}}
                <div class="pt-3 flex gap-3">
                    <button id="btn_back_to_scan" class="py-2.5 px-4 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs rounded-xl transition-all">
                        Quay lại cấu hình
                    </button>
                    <button id="btn_export_final_test_excel" class="py-2.5 px-4 bg-emerald-50 hover:bg-emerald-100 border border-emerald-200 text-emerald-700 font-bold text-xs rounded-xl shadow-sm transition-all flex items-center justify-center gap-1.5">
                        <i data-lucide="file-spreadsheet" class="w-4 h-4 text-emerald-600"></i> Xuất Excel (CSV)
                    </button>
                    <button id="btn_execute_real_sync" class="flex-1 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs rounded-xl shadow-md shadow-emerald-200 transition-all flex items-center justify-center gap-2">
                        <i data-lucide="send" class="w-4 h-4"></i> Thực hiện Đồng bộ Thực sự (Gửi API & Lưu Log)
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

{{-- Modal Xem nhanh Payload Metrics JSON --}}
<div id="final_test_json_modal" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-3xl w-full p-5 shadow-2xl border border-slate-100 flex flex-col max-h-[80vh]">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-3">
            <h4 class="font-bold text-slate-800 text-sm" id="json_modal_title">Metrics Payload JSON</h4>
            <button id="btn_close_json_modal" class="text-slate-400 hover:text-slate-600 p-1 rounded-lg">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        <pre id="json_modal_content" class="flex-1 bg-slate-950 text-emerald-400 font-mono text-[11px] p-3.5 rounded-xl overflow-auto leading-relaxed"></pre>
    </div>
</div>