{{-- Modal Quét & Xử lý bài thi kẹt (Job workflow) --}}
<div id="process_pending_workflows_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-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-emerald-50 text-emerald-600 rounded-lg">
                    <i data-lucide="shield-alert" class="w-5 h-5"></i>
                </div>
                <h3 class="font-extrabold text-slate-800 text-base">Xử lý bài thi kẹt luồng (ProcessExamWorkflowJob)</h3>
            </div>
            <button id="btn_close_pending_workflow_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="pending_workflow_modal_content" class="flex-1 overflow-y-auto py-2">
            
            {{-- Bước 1: Quét danh sách --}}
            <div id="pending_workflow_step_scan" class="space-y-5">
                <div class="bg-emerald-50/50 p-4 rounded-xl border border-emerald-100 text-xs text-emerald-800 leading-relaxed space-y-1">
                    <div class="font-bold flex items-center gap-1.5 text-emerald-700">
                        <i data-lucide="info" class="w-4 h-4"></i> Điều kiện quét bài thi kẹt:
                    </div>
                    <ul class="list-disc list-inside space-y-0.5 text-slate-600 pl-1">
                        <li>Đã hoàn tất nộp bài trên FE (<code class="bg-emerald-100 text-emerald-800 px-1 py-0.5 rounded text-[11px]">fe_submission_status = 2</code>).</li>
                        <li>Chưa được kiểm tra bất thường (<code class="bg-emerald-100 text-emerald-800 px-1 py-0.5 rounded text-[11px]">is_abnormality_checked = 0</code>).</li>
                        <li>Đã có điểm tổng (<code class="bg-emerald-100 text-emerald-800 px-1 py-0.5 rounded text-[11px]">overrall_score !== null</code> và <code class="bg-emerald-100 text-emerald-800 px-1 py-0.5 rounded text-[11px]">!= -1</code>).</li>
                    </ul>
                </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">Bài thi tạo Từ ngày</label>
                        <input type="text" id="pending_workflow_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-emerald-100 focus:border-emerald-500 transition-all bg-white" placeholder="DD-MM-YYYY">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Bài thi tạo Đến ngày</label>
                        <input type="text" id="pending_workflow_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-emerald-100 focus:border-emerald-500 transition-all bg-white" placeholder="DD-MM-YYYY">
                    </div>
                </div>

                <div class="pt-4">
                    <button id="btn_run_pending_workflow_scan" class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm rounded-xl shadow-md shadow-emerald-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 bài thi kẹt
                    </button>
                </div>
            </div>

            {{-- Đang quét danh sách (loading) --}}
            <div id="pending_workflow_step_scanning" class="hidden text-center py-8">
                <div class="inline-block animate-spin text-emerald-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 tìm kiếm bài thi kẹt luồng xử lý điểm...</p>
            </div>

            {{-- Bước 2: Kết quả quét & Preview --}}
            <div id="pending_workflow_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="pending_workflow_result_title">Tìm thấy 0 bài thi kẹt</h4>
                            <p class="text-slate-500 text-xs mt-0.5">Vui lòng chọn bài cần xử lý trước khi bấm Bắt đầu.</p>
                        </div>
                    </div>
                </div>

                {{-- Bảng danh sách preview --}}
                <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 w-12 text-center">
                                    <input type="checkbox" id="pending_workflow_select_all" class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-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>
                                <th class="p-3 text-center">Điểm Overall</th>
                            </tr>
                        </thead>
                        <tbody id="pending_workflow_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_pending_workflow_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_pending_workflow_sync" class="flex-1 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm rounded-xl shadow-md shadow-emerald-200 transition-all flex items-center justify-center gap-2">
                        <i data-lucide="play" class="w-4 h-4"></i> Bắt đầu xử lý hàng loạt
                    </button>
                </div>
            </div>

            {{-- Bước 3: Tiến trình xử lý --}}
            <div id="pending_workflow_step_progress" class="hidden py-2 space-y-4">
                <div class="flex justify-between text-xs font-bold text-slate-600">
                    <span id="pending_workflow_progress_label">Đang chạy luồng xử lý bài thi...</span>
                    <span id="pending_workflow_progress_percent" class="text-emerald-600">0%</span>
                </div>
                <div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
                    <div id="pending_workflow_progress_bar" class="bg-emerald-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="pending_workflow_progress_count" class="text-slate-600 normal-case font-bold">0 / 0</span>
                </div>
                
                {{-- Console Log Terminal --}}
                <div id="pending_workflow_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 kích hoạt luồng xử lý...</div>
                </div>
            </div>

            {{-- Bước 4: Hoàn tất --}}
            <div id="pending_workflow_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">Xử lý hoàn tất!</h4>
                <p class="text-slate-500 text-sm mb-6" id="pending_workflow_complete_desc">Đã xử lý xong các bài thi kẹt luồng.</p>
                <button id="btn_finish_pending_workflow_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>