{{-- Modal Quét & Đồng bộ điểm sang ICL (Zeus) --}}
<div id="sync_icl_scores_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-2xl 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-violet-50 text-violet-600 rounded-lg">
                    <i data-lucide="cloud-lightning" class="w-5 h-5"></i>
                </div>
                <h3 class="font-extrabold text-slate-800 text-base">Đồng bộ kết quả thi sang ICL (Zeus)</h3>
            </div>
            <button id="btn_close_icl_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="icl_modal_content" class="flex-1 overflow-y-auto py-2">
            
            {{-- Bước 1: Quét danh sách --}}
            <div id="icl_step_scan" class="space-y-5">
                <div class="bg-violet-50/50 p-4 rounded-xl border border-violet-100 text-xs text-violet-700 leading-relaxed">
                    <span class="font-bold">Lưu ý:</span> Hệ thống sẽ quét các lịch thi được tạo trong khoảng thời gian đã chọn, tự động xác định lượt thi mới nhất (MAX ID) của từng học sinh và đồng bộ điểm số tương ứng sang ICL (Zeus).
                </div>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Lịch thi tạo Từ ngày</label>
                        <input type="text" id="icl_scan_start_date" class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-violet-100 focus:border-violet-500 transition-all bg-white" placeholder="Chọn ngày bắt đầu...">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Lịch thi tạo Đến ngày</label>
                        <input type="text" id="icl_scan_end_date" class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-violet-100 focus:border-violet-500 transition-all bg-white" placeholder="Chọn ngày kết thúc...">
                    </div>
                </div>

                <div class="pt-4">
                    <button id="btn_run_icl_scan" class="w-full py-3 bg-violet-600 hover:bg-violet-700 text-white font-bold text-sm rounded-xl shadow-md shadow-violet-200 transition-all flex items-center justify-center gap-2">
                        <i data-lucide="search" class="w-4 h-4"></i> Quét danh sách cần đồng bộ
                    </button>
                </div>
            </div>

            {{-- Đang quét danh sách (loading) --}}
            <div id="icl_step_scanning" class="hidden text-center py-8">
                <div class="inline-block animate-spin text-violet-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 quét danh sách lịch thi & đối chiếu bài làm học sinh...</p>
            </div>

            {{-- Bước 2: Kết quả quét & Preview --}}
            <div id="icl_step_result" class="hidden space-y-4">
                <div class="flex items-center justify-between bg-amber-50 border border-amber-100 p-3.5 rounded-xl">
                    <div class="flex items-center gap-2.5">
                        <div class="p-1.5 bg-amber-100 text-amber-600 rounded-lg">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-slate-800 text-sm" id="icl_result_title">Tìm thấy 0 lượt thi cần đồng bộ</h4>
                            <p class="text-slate-500 text-xs mt-0.5">Vui lòng kiểm tra danh sách bên dưới trước khi đồng bộ.</p>
                        </div>
                    </div>
                </div>

                {{-- Bảng danh sách preview --}}
                <div class="border border-slate-100 rounded-xl overflow-hidden max-h-60 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 w-12 text-center">
                                    <input type="checkbox" id="icl_select_all" class="rounded border-slate-300 text-violet-600 focus:ring-violet-500 w-4 h-4 cursor-pointer" checked>
                                </th>
                                <th class="p-3">Học sinh</th>
                                <th class="p-3">Bài thi</th>
                                <th class="p-3 text-center">ID Lượt thi</th>
                            </tr>
                        </thead>
                        <tbody id="icl_preview_list" class="divide-y divide-slate-50 text-slate-700 bg-white">
                            {{-- Chèn động qua JS --}}
                        </tbody>
                    </table>
                </div>

                <div class="pt-4 flex gap-3">
                    <button id="btn_cancel_icl_sync" class="flex-1 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-sm rounded-xl transition-all">
                        Quay lại chọn ngày
                    </button>
                    <button id="btn_confirm_icl_sync" class="flex-1 py-3 bg-violet-600 hover:bg-violet-700 text-white font-bold text-sm rounded-xl shadow-md shadow-violet-200 transition-all flex items-center justify-center gap-2">
                        <i data-lucide="play" class="w-4 h-4"></i> Bắt đầu đồng bộ hàng loạt
                    </button>
                </div>
            </div>

            {{-- Bước 3: Tiến trình đồng bộ --}}
            <div id="icl_step_progress" class="hidden py-2 space-y-4">
                <div class="flex justify-between text-xs font-bold text-slate-600">
                    <span id="icl_progress_label">Đang tiến hành đồng bộ dữ liệu...</span>
                    <span id="icl_progress_percent" class="text-violet-600">0%</span>
                </div>
                <div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
                    <div id="icl_progress_bar" class="bg-violet-600 h-3 rounded-full transition-all duration-300 w-0"></div>
                </div>
                <div class="flex justify-between items-center text-[11px] font-bold text-slate-500 uppercase tracking-wider">
                    <span>Trạng thái chi tiết:</span>
                    <span id="icl_progress_count" class="text-slate-600 normal-case font-bold">0 / 0</span>
                </div>
                
                {{-- Console Log Terminal --}}
                <div id="icl_console" class="bg-slate-950 text-emerald-400 font-mono text-[11px] p-3 rounded-lg overflow-y-auto max-h-48 border border-slate-900 shadow-inner flex flex-col space-y-1">
                    <div>[Hệ thống] Sẵn sàng đồng bộ...</div>
                </div>
            </div>

            {{-- Bước 4: Hoàn tất --}}
            <div id="icl_step_complete" class="hidden text-center py-6">
                <div class="w-16 h-16 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4 border border-emerald-100 shadow-sm animate-bounce">
                    <i data-lucide="check-circle-2" class="w-8 h-8"></i>
                </div>
                <h4 class="font-bold text-slate-800 text-lg mb-1">Đồng bộ hoàn tất!</h4>
                <p class="text-slate-500 text-sm mb-6" id="icl_complete_desc">Đã đồng bộ thành công X bài thi sang ICL.</p>
                <button id="btn_finish_icl_sync" class="w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-sm rounded-xl transition-all">
                    Hoàn tất & Đóng
                </button>
            </div>

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