{{-- Modal Quét & Đồng bộ recalculate overall score --}}
<div id="sync_recalculate_modal" class="fixed inset-0 z-50 hidden bg-slate-900/50 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-100 transform transition-all">
        <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-4">
            <div class="flex items-center gap-3">
                <div class="p-2 bg-indigo-50 text-indigo-600 rounded-lg">
                    <i data-lucide="calculator" class="w-5 h-5"></i>
                </div>
                <h3 class="font-extrabold text-slate-800 text-base">Tính lại điểm Overall sau quy đổi</h3>
            </div>
            <button id="btn_close_recalculate_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>

        <div id="recalculate_modal_content" class="py-2">
            {{-- Nhập ID đơn lẻ --}}
            <div id="recalculate_single_section" class="mb-5 bg-slate-50 p-4 rounded-xl border border-slate-100">
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">Tính lại điểm cho 1 bài thi cụ thể (Tùy chọn)</label>
                <div class="flex gap-2">
                    <input type="number" id="recalculate_single_score_id" class="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-100 focus:border-indigo-500 transition-all bg-white" placeholder="Nhập student_score_id...">
                    <button id="btn_run_single_recalculate" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs rounded-lg transition-all shadow-sm">
                        Tính ngay
                    </button>
                </div>
            </div>

            {{-- Bước 1: Đang quét --}}
            <div id="recalculate_step_scan" class="text-center py-6">
                <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 quét danh sách các bài thi giáo viên đã chấm xong...</p>
            </div>

            {{-- Bước 2: Kết quả quét --}}
            <div id="recalculate_step_result" class="hidden text-center py-4">
                <div class="w-12 h-12 bg-amber-50 text-amber-500 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i data-lucide="calculator" class="w-6 h-6"></i>
                </div>
                <h4 class="font-bold text-slate-800 text-lg mb-1" id="recalculate_result_count">Tìm thấy 0 bài thi</h4>
                <p class="text-slate-500 text-sm mb-6" id="recalculate_result_desc">Bài thi đã được giáo viên hoàn thành chấm điểm (status = 2) cần tính lại điểm Overall theo điểm sau quy đổi.</p>
                <button id="btn_confirm_recalculate" 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="play" class="w-4 h-4"></i> Xác nhận tính lại điểm Overall hàng loạt
                </button>
            </div>

            {{-- Bước 3: Tiến trình đồng bộ --}}
            <div id="recalculate_step_progress" class="hidden py-4">
                <div class="flex justify-between text-xs font-bold text-slate-600 mb-2">
                    <span>Đang tiến hành tính toán lại điểm...</span>
                    <span id="recalculate_progress_percent">0%</span>
                </div>
                <div class="w-full bg-slate-100 rounded-full h-3 mb-4 overflow-hidden">
                    <div id="recalculate_progress_bar" class="bg-indigo-600 h-3 rounded-full transition-all duration-300 w-0"></div>
                </div>
                <p class="text-center text-xs text-slate-500 font-medium" id="recalculate_progress_status">Đang xử lý 0 / 0 bài thi...</p>
            </div>

            {{-- Bước 4: Hoàn tất --}}
            <div id="recalculate_step_complete" class="hidden text-center py-4">
                <div class="w-12 h-12 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i data-lucide="check-circle-2" class="w-6 h-6"></i>
                </div>
                <h4 class="font-bold text-slate-800 text-lg mb-1">Cập nhật điểm thành công!</h4>
                <p class="text-slate-500 text-sm mb-6" id="recalculate_complete_desc">Đã tính toán lại điểm Overall chuẩn xác theo converted_score cho tất cả bài thi.</p>
                <button id="btn_finish_recalculate" class="w-full py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-sm rounded-xl transition-all">
                    Đóng cửa sổ
                </button>
            </div>
        </div>
    </div>
</div>