@extends('layouts.app')

@section('content')
    <div class="flex-1 space-y-6">
        <!-- Header -->
        <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
            <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <a href="{{ route('exams.index') }}" class="hover:text-blue-600 cursor-pointer">Quản lý Exam</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <span>Chỉnh sửa Exam</span>
        </div>
        <h1 class="text-3xl font-bold text-slate-900 mb-6">Chỉnh sửa Exam</h1>

        <!-- Notifications -->
        @if(session('error'))
            <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg flex items-center justify-between">
                {{ session('error') }}
                <button type="button" onclick="this.parentElement.remove()" class="text-red-600 hover:text-red-800"><i
                        data-lucide="x" class="w-5 h-5"></i></button>
            </div>
        @endif
        @if($errors->any())
            <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
                <ul class="list-disc list-inside space-y-1 text-sm">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <form action="{{ route('exams.update', ['id' => $exam->id]) }}" id="form_exam_info" method="post"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <input type="hidden" name="ems_id" id="selected_ems_id" value="{{ old('ems_id', $exam->ems_id) }}" required>
                <input type="hidden" name="contest_type" id="selected_contest_type"
                    value="{{ old('contest_type', $exam->contest_type) }}">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">EMS Exam <span
                                class="text-red-500">*</span></label>
                        <button type="button" onclick="openEmsExamModal()"
                            class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                            <i data-lucide="search" class="w-4 h-4"></i>
                            Chọn EMS Exam
                        </button>
                        <div id="selected_exam_display" class="mt-2">
                            @if(old('ems_id', $exam->ems_id))
                                <span
                                    class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium bg-green-100 text-green-800"
                                    id="exam_badge">
                                    {{ $exam->name }} (ID: {{ old('ems_id', $exam->ems_id) }}, Type:
                                    {{ old('contest_type', $exam->contest_type) }})
                                    <button type="button" onclick="clearEmsExam()"
                                        class="text-green-600 hover:text-green-900">&times;</button>
                                </span>
                            @else
                                <span class="text-sm text-slate-500">Chưa chọn exam</span>
                            @endif
                        </div>
                        <p class="mt-1 text-xs text-slate-500">Chọn exam từ EMS (bắt buộc)</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Tên Exam <span
                                class="text-red-500">*</span></label>
                        <input type="text" name="name" id="exam_name" value="{{ old('name', $exam->name) }}"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            placeholder="Nhập tên Exam" required>
                        <p class="mt-1 text-xs text-slate-500">Tự động lấy từ EMS Exam (có thể chỉnh sửa)</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Slug <span
                                class="text-red-500">*</span></label>
                        <input type="text" name="slug" id="exam_slug" value="{{ old('slug', $exam->slug) }}"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            placeholder="exam-slug" required>
                        <p class="mt-1 text-xs text-slate-500">Tự động sinh từ tên (có thể chỉnh sửa)</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Giới hạn số lần làm bài</label>
                        <input type="number" name="number_limit" id="number_limit"
                            value="{{ old('number_limit', $exam->number_limit) }}"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            placeholder="0" min="0">
                        <p class="mt-1 text-xs text-slate-500">Số lần được làm bài ban đầu. 0: không giới hạn</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Giới hạn số lần làm lại (retry)</label>
                        <input type="number" name="retry_limit" id="retry_limit"
                            value="{{ old('retry_limit', $exam->retry_limit ?? 0) }}"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            placeholder="0" min="0">
                        <p class="mt-1 text-xs text-slate-500">Số lần được phép làm lại sau khi hết lượt làm bài. 0: không cho retry</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Thời gian giới hạn (ngày)</label>
                        <input type="number" name="time_duration_days" id="time_duration_days"
                            value="{{ old('time_duration_days', $exam->time_duration > 0 ? floor($exam->time_duration / 86400) : 0) }}"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            placeholder="0" min="0" step="1">
                        <p class="mt-1 text-xs text-slate-500">Khung thời gian áp dụng giới hạn số lần làm bài/retry. 0: không giới hạn theo thời gian</p>
                    </div>
                </div>

                <!-- Round Descriptions Section -->
                <div id="round_descriptions_section"
                    class="mt-8 space-y-4 {{ $exam->roundDescriptions->count() > 0 ? '' : 'hidden' }}">
                    <div class="flex items-center justify-between border-b border-slate-200 pb-2">
                        <h3 class="text-lg font-semibold text-slate-900">Mô tả các Round</h3>
                        <span class="text-xs text-slate-400">Dùng nút ↑↓ để sắp xếp thứ tự</span>
                    </div>
                    <div id="rounds_container" class="space-y-6">
                        <!-- Rounds will be rendered here dynamically -->
                    </div>
                </div>
                <div class="mt-6 flex items-center gap-3">
                    <button type="submit" id="btn-save"
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm">Cập
                        nhật</button>
                    <a href="{{ route('exams.index') }}"
                        class="px-4 py-2 bg-white border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors">Huỷ</a>
                </div>
            </form>
        </div>
    </div>

    <!-- EMS Exam Selection Modal (Tailwind) -->
    <div id="emsExamModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="ems-modal-backdrop"></div>
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="relative bg-white rounded-xl shadow-xl w-full max-w-5xl max-h-[90vh] flex flex-col">
                <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                    <h3 class="text-lg font-semibold text-slate-900">Chọn EMS Exam</h3>
                    <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors"
                        onclick="closeEmsExamModal()">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                <div class="px-6 py-4 flex-shrink-0 flex gap-4">
                    <select id="ems_contest_type"
                        class="w-1/3 px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 outline-none">
                        <option value="">Tất cả loại thi</option>
                        @foreach(config('ems.contest_type', []) as $key => $val)
                            <option value="{{ $key }}">{{ $val }}</option>
                        @endforeach
                    </select>
                    <input type="text" id="ems_search"
                        class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none flex-1"
                        placeholder="Tìm kiếm theo tên hoặc ID exam...">
                </div>
                <div class="flex-1 overflow-auto px-6">
                    <table class="min-w-full divide-y divide-slate-200">
                        <thead class="bg-slate-50 sticky top-0">
                            <tr>
                                <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">ID</th>
                                <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Tên Exam</th>
                                <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Loại thi</th>
                                <th class="px-4 py-2 text-right text-xs font-semibold text-slate-600 uppercase">Hành động
                                </th>
                            </tr>
                        </thead>
                        <tbody id="ems_exam_tbody" class="bg-white divide-y divide-slate-200">
                            <tr>
                                <td colspan="4" class="px-4 py-8 text-center text-sm text-slate-500">
                                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                                    <span class="block mt-2">Loading...</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div id="ems_pagination" class="my-3 flex justify-center gap-2 flex-wrap"></div>
                </div>
                <div class="px-6 py-4 border-t border-slate-200 bg-slate-50">
                    <button type="button" onclick="closeEmsExamModal()"
                        class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">Đóng</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const contestTypes = @json(config('ems.contest_type', []));
        const existingDescriptions = @json($exam->roundDescriptions);
        document.getElementById('exam_name').addEventListener('input', function (e) {
            const name = e.target.value.trim();
            const slug = name.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/đ/g, 'd').replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-').trim();
            document.getElementById('exam_slug').value = slug;
        });
        let currentPage = 1;
        let searchTimeout = null;
        function openEmsExamModal() {
            document.getElementById('emsExamModal').classList.remove('hidden');
            if (typeof lucide !== 'undefined') lucide.createIcons();
            loadEmsExams(1, '');
        }
        function closeEmsExamModal() {
            document.getElementById('emsExamModal').classList.add('hidden');
        }
        document.getElementById('ems-modal-backdrop').addEventListener('click', closeEmsExamModal);
        function loadEmsExams(page, search) {
            currentPage = page;
            const contestType = document.getElementById('ems_contest_type') ? document.getElementById('ems_contest_type').value : '';
            const tbody = document.getElementById('ems_exam_tbody');
            tbody.innerHTML = '<tr><td colspan="4" class="px-4 py-8 text-center"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div></td></tr>';
            $.ajax({
                url: '{{ route("exams.ems-exams") }}',
                type: 'GET',
                data: { page: page, perpage: 10, search: search, contest_type: contestType },
                success: function (response) { displayEmsExams(response); },
                error: function (xhr) {
                    tbody.innerHTML = '<tr><td colspan="4" class="px-4 py-4 text-center text-sm text-red-600">Lỗi khi tải dữ liệu EMS</td></tr>';
                }
            });
        }
        function displayEmsExams(response) {
            const tbody = document.getElementById('ems_exam_tbody');
            tbody.innerHTML = '';
            let exams = [];
            let total = 0;
            let perpage = 10;
            if (response.data && Array.isArray(response.data)) { exams = response.data; total = response.total || 0; }
            else if (response.result && Array.isArray(response.result)) { exams = response.result; total = response.total || 0; }
            else if (Array.isArray(response)) { exams = response; total = exams.length; }
            const totalPages = Math.ceil(total / perpage);
            if (exams.length === 0) {
                tbody.innerHTML = '<tr><td colspan="4" class="px-4 py-6 text-center text-sm text-slate-500">Không có dữ liệu</td></tr>';
                return;
            }
            exams.forEach(exam => {
                const examId = exam.idMockContest || exam.id || 'N/A';
                const examName = (exam.name || 'N/A').replace(/'/g, "\\'").replace(/"/g, '&quot;');
                const contestType = exam.contest_type || 0;
                const contestTypeText = contestTypes[contestType] ? contestTypes[contestType] : (contestType == 0 ? 'Không xác định' : contestType);
                tbody.innerHTML += `
                        <tr class="hover:bg-slate-50">
                            <td class="px-4 py-2 text-sm text-slate-700">${examId}</td>
                            <td class="px-4 py-2 text-sm text-slate-700">${(exam.name || 'N/A').replace(/</g, '&lt;')}</td>
                            <td class="px-4 py-2 text-sm text-slate-700">${contestTypeText}</td>
                            <td class="px-4 py-2 text-right">
                                <button type="button" class="px-3 py-1 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700" onclick="selectEmsExam('${examId}', '${examName}', ${contestType})">Chọn</button>
                            </td>
                        </tr>
                    `;
            });
            displayPagination(totalPages);
        }
        function displayPagination(totalPages) {
            const div = document.getElementById('ems_pagination');
            div.innerHTML = '';
            if (totalPages <= 1) return;
            const q = document.getElementById('ems_search').value.replace(/'/g, "\\'");

            const addPage = (page) => {
                if (page === currentPage) {
                    div.innerHTML += `<span class="px-2.5 py-1.5 text-sm font-medium text-white bg-blue-600 rounded-lg">${page}</span>`;
                } else {
                    div.innerHTML += `<a href="javascript:void(0)" onclick="loadEmsExams(${page}, '${q}')" class="px-2.5 py-1.5 text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50">${page}</a>`;
                }
            };

            const addEllipsis = () => {
                div.innerHTML += `<span class="px-2 py-1 text-slate-400">...</span>`;
            };

            if (currentPage > 1) {
                div.innerHTML += `<a href="javascript:void(0)" onclick="loadEmsExams(${currentPage - 1}, '${q}')" class="px-2.5 py-1.5 text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50"><i data-lucide="chevron-left" class="w-4 h-4 inline-block"></i></a>`;
            }

            const range = 2;
            for (let i = 1; i <= totalPages; i++) {
                if (i === 1 || i === totalPages || (i >= currentPage - range && i <= currentPage + range)) {
                    addPage(i);
                } else if (i === 2 && currentPage > range + 2) {
                    addEllipsis();
                    i = currentPage - range - 1;
                } else if (i === currentPage + range + 1 && i < totalPages) {
                    addEllipsis();
                    i = totalPages - 1;
                }
            }

            if (currentPage < totalPages) {
                div.innerHTML += `<a href="javascript:void(0)" onclick="loadEmsExams(${currentPage + 1}, '${q}')" class="px-2.5 py-1.5 text-sm text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50"><i data-lucide="chevron-right" class="w-4 h-4 inline-block"></i></a>`;
            }
            if (typeof lucide !== 'undefined') lucide.createIcons();
        }
        function selectEmsExam(examId, examName, contestType) {
            document.getElementById('selected_ems_id').value = examId;
            document.getElementById('selected_contest_type').value = contestType;
            const rawName = examName.replace(/\\'/g, "'").replace(/&quot;/g, '"').trim();
            document.getElementById('exam_name').value = rawName;
            const slug = rawName.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/đ/g, 'd').replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-').trim();
            document.getElementById('exam_slug').value = slug;
            const displayName = examName.replace(/\\'/g, "'").replace(/</g, '&lt;');
            document.getElementById('selected_exam_display').innerHTML = `<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium bg-green-100 text-green-800" id="exam_badge">${displayName} (ID: ${examId}, Type: ${contestType}) <button type="button" onclick="clearEmsExam()" class="text-green-600 hover:text-green-900">&times;</button></span>`;
            closeEmsExamModal();
            if (typeof lucide !== 'undefined') lucide.createIcons();

            // Fetch exam details to get rounds
            fetchExamRounds(examId);
        }

        function fetchExamRounds(examId) {
            const container = document.getElementById('rounds_container');
            const section = document.getElementById('round_descriptions_section');

            section.classList.remove('hidden');
            container.innerHTML = '<div class="flex justify-center py-8"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>';

            $.ajax({
                url: '{{ route("exams.ems-exam-detail") }}',
                type: 'GET',
                data: { idMockContest: examId },
                success: function (response) {
                    if (response.status && response.data && response.data.rounds) {
                        let rounds = response.data.rounds;
                        // Nếu có dữ liệu sort_order đã lưu, sort lại rounds theo thứ tự đó
                        if (Array.isArray(existingDescriptions) && existingDescriptions.length > 0) {
                            rounds = rounds.slice().sort((a, b) => {
                                const aDesc = existingDescriptions.find(d => d.round_id == a.id);
                                const bDesc = existingDescriptions.find(d => d.round_id == b.id);
                                const aOrder = aDesc != null ? (aDesc.sort_order ?? 9999) : 9999;
                                const bOrder = bDesc != null ? (bDesc.sort_order ?? 9999) : 9999;
                                return aOrder - bOrder;
                            });
                        }
                        renderRounds(rounds);
                    } else {
                        container.innerHTML = '<p class="text-sm text-slate-500">Không tìm thấy thông tin round cho exam này.</p>';
                    }
                },
                error: function () {
                    container.innerHTML = '<p class="text-sm text-red-500">Lỗi khi tải chi tiết exam.</p>';
                }
            });
        }

        function renderRounds(rounds) {
            const container = document.getElementById('rounds_container');
            container.innerHTML = '';

            rounds.forEach((round, roundIndex) => {
                const idBaikiemtra = round.listBaikiemtra && round.listBaikiemtra.length > 0 ? round.listBaikiemtra[0].idBaikiemtra : '';
                const testFormat = round.listBaikiemtra && round.listBaikiemtra.length > 0 ? round.listBaikiemtra[0].testFormat : '';

                // Find existing description for this round
                const localData = Array.isArray(existingDescriptions) ? existingDescriptions.find(d => d.round_id == round.id) : null;

                const title = localData ? localData.title : round.name;
                const icon = localData ? localData.icon : '';
                const time = localData ? localData.time : '';
                const sortOrder = localData ? (localData.sort_order ?? roundIndex) : roundIndex;

                const sectionsExam = localData && Array.isArray(localData.sections_exam) ? localData.sections_exam : [];
                const sectionsPractice = localData && Array.isArray(localData.sections_practice) ? localData.sections_practice : [];

                const roundHtml = `
                        <div class="round-card bg-slate-50 rounded-xl p-6 border border-slate-200 space-y-4" data-round-id="${round.id}">
                            <div class="flex items-center gap-3 mb-2">
                                <div class="flex flex-col gap-0.5">
                                    <button type="button" onclick="moveRound(this.closest('.round-card'), -1)" class="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors" title="Di chuyển lên">
                                        <i data-lucide="chevron-up" class="w-4 h-4"></i>
                                    </button>
                                    <button type="button" onclick="moveRound(this.closest('.round-card'), 1)" class="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors" title="Di chuyển xuống">
                                        <i data-lucide="chevron-down" class="w-4 h-4"></i>
                                    </button>
                                </div>
                                <div class="round-order-badge w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-sm">
                                    ${roundIndex + 1}
                                </div>
                                <h4 class="text-md font-semibold text-slate-800">${round.name}</h4>
                                <input type="hidden" class="input-round-id" name="round_descriptions[${roundIndex}][round_id]" value="${round.id}">
                                <input type="hidden" class="input-round-name" name="round_descriptions[${roundIndex}][round_name]" value="${round.name}">
                                <input type="hidden" class="input-idBaikiemtra" name="round_descriptions[${roundIndex}][idBaikiemtra]" value="${idBaikiemtra}">
                                <input type="hidden" class="input-testFormat" name="round_descriptions[${roundIndex}][testFormat]" value="${testFormat}">
                                <input type="hidden" class="input-sort-order" name="round_descriptions[${roundIndex}][sort_order]" value="${sortOrder}">
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-xs font-medium text-slate-600 mb-1">Tiêu đề (Ví dụ: Listening)</label>
                                    <input type="text" name="round_descriptions[${roundIndex}][title]" value="${title || ''}" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 outline-none">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-600 mb-1">Icon (Chọn ảnh hoặc nhập Class/SVG)</label>
                                    <div class="space-y-2">
                                        <input type="text" name="round_descriptions[${roundIndex}][icon]" value="${icon || ''}" class="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 outline-none" placeholder="Icon class hoặc SVG...">
                                        <div class="flex items-center gap-2">
                                            <label class="cursor-pointer px-3 py-1.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-lg text-xs font-medium transition-all">
                                                <span>Chọn ảnh</span>
                                                <input type="file" name="round_descriptions[${roundIndex}][icon_file]" class="hidden" onchange="previewIcon(this, ${roundIndex})">
                                            </label>
                                            <div id="icon_preview_${roundIndex}" class="w-12 h-8 rounded border border-slate-200 flex items-center justify-center bg-white overflow-hidden">
                                                ${icon ? `<img src="${icon.includes('://') ? icon : '{{ asset('') }}' + icon}" class="w-full h-full object-contain">` : '<span class="text-[10px] text-slate-400">Preview</span>'}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-600 mb-1">Thời gian (Ví dụ: Approximately 30 minutes)</label>
                                    <input type="text" name="round_descriptions[${roundIndex}][time]" value="${time || ''}" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 outline-none" placeholder="Nhập thời gian dự kiến">
                                </div>
                            </div>

                            <!-- Mode Selection Tabs -->
                            <div class="flex gap-4 border-b border-slate-200 mt-6 hidden">
                                <button type="button" onclick="switchRoundTab(${roundIndex}, 'exam')" id="tab_btn_${roundIndex}_exam" class="tab-btn-${roundIndex} px-4 py-2 text-sm font-bold text-blue-600 border-b-2 border-blue-600 transition-all">
                                    EXAM MODE
                                </button>
                                <button type="button" onclick="switchRoundTab(${roundIndex}, 'practice')" id="tab_btn_${roundIndex}_practice" class="tab-btn-${roundIndex} px-4 py-2 text-sm font-medium text-slate-500 border-b-2 border-transparent hover:text-slate-700 transition-all">
                                    PRACTICE MODE
                                </button>
                            </div>

                            <!-- EXAM TAB CONTENT -->
                            <div id="tab_content_${roundIndex}_exam" class="tab-content-${roundIndex} space-y-6 pt-4">
                                <div id="sections_exam_container_${roundIndex}" class="space-y-6">
                                    ${sectionsExam.map((sec, secIndex) => renderSectionItem(roundIndex, 'exam', secIndex, sec)).join('')}
                                </div>
                                <button type="button" onclick="addSection(${roundIndex}, 'exam')" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-600 rounded-lg text-sm font-medium hover:bg-blue-100 transition-all">
                                    <i data-lucide="plus" class="w-4 h-4"></i> Thêm mục mới (EXAM)
                                </button>
                            </div>

                            <!-- PRACTICE TAB CONTENT -->
                            <div id="tab_content_${roundIndex}_practice" class="tab-content-${roundIndex} hidden space-y-6 pt-4">
                                <div id="sections_practice_container_${roundIndex}" class="space-y-6">
                                    ${sectionsPractice.map((sec, secIndex) => renderSectionItem(roundIndex, 'practice', secIndex, sec)).join('')}
                                </div>
                                <button type="button" onclick="addSection(${roundIndex}, 'practice')" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-600 rounded-lg text-sm font-medium hover:bg-blue-100 transition-all">
                                    <i data-lucide="plus" class="w-4 h-4"></i> Thêm mục mới (PRACTICE)
                                </button>
                            </div>
                        </div>
                    `;
                container.insertAdjacentHTML('beforeend', roundHtml);

                // Initialize TinyMCE for existing sections
                sectionsExam.forEach((_, secIndex) => initEditor(`editor_${roundIndex}_exam_${secIndex}`));
                sectionsPractice.forEach((_, secIndex) => initEditor(`editor_${roundIndex}_practice_${secIndex}`));
            });

            if (typeof lucide !== 'undefined') lucide.createIcons();
        }

        function moveRound(card, direction) {
            const container = document.getElementById('rounds_container');
            const cards = Array.from(container.querySelectorAll('.round-card'));
            const idx = cards.indexOf(card);
            const targetIdx = idx + direction;
            if (targetIdx < 0 || targetIdx >= cards.length) return;
            // Swap trong DOM
            if (direction === -1) {
                container.insertBefore(card, cards[targetIdx]);
            } else {
                container.insertBefore(cards[targetIdx], card);
            }
            reindexRounds();
            if (typeof lucide !== 'undefined') lucide.createIcons();
        }

        function reindexRounds() {
            const cards = document.querySelectorAll('#rounds_container .round-card');
            cards.forEach((card, idx) => {
                const badge = card.querySelector('.round-order-badge');
                if (badge) badge.textContent = idx + 1;
                card.querySelectorAll('[name]').forEach(el => {
                    el.name = el.name.replace(/round_descriptions\[\d+\]/, `round_descriptions[${idx}]`);
                });
                const sortInput = card.querySelector('.input-sort-order');
                if (sortInput) sortInput.value = idx;
            });
        }

        function renderSectionItem(roundIndex, mode, secIndex, data = null) {
            const title = data ? data.title : '';
            const content = data ? data.content : '';
            const fieldNameBase = `round_descriptions[${roundIndex}][sections_${mode}][${secIndex}]`;
            const editorId = `editor_${roundIndex}_${mode}_${secIndex}`;

            return `
                    <div class="bg-white p-4 rounded-lg border border-slate-200 relative group shadow-sm">
                        <button type="button" onclick="this.parentElement.remove()" class="absolute top-2 right-2 p-1.5 text-red-500 hover:bg-red-50 rounded-lg transition-all opacity-0 group-hover:opacity-100">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </button>
                        <div class="space-y-3">
                            <div>
                                <label class="block text-xs font-semibold text-slate-500 mb-1 uppercase tracking-wider">Tiêu đề mục</label>
                                <input type="text" name="${fieldNameBase}[title]" value="${title}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:border-blue-500 outline-none font-medium" placeholder="Ví dụ: Instructions to candidates">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-500 mb-1 uppercase tracking-wider">Nội dung</label>
                                <textarea id="${editorId}" name="${fieldNameBase}[content]" class="section-editor">${content}</textarea>
                            </div>
                        </div>
                    </div>
                `;
        }

        function addSection(roundIndex, mode) {
            const container = document.getElementById(`sections_${mode}_container_${roundIndex}`);
            const secIndex = container.children.length;
            const html = renderSectionItem(roundIndex, mode, secIndex);

            const wrapper = document.createElement('div');
            wrapper.innerHTML = html;
            const item = wrapper.firstElementChild;
            container.appendChild(item);

            initEditor(`editor_${roundIndex}_${mode}_${secIndex}`);
            if (typeof lucide !== 'undefined') lucide.createIcons();
        }

        function initEditor(id) {
            if (typeof tinymce === 'undefined') return;

            tinymce.init({
                selector: `#${id}`,
                height: 200,
                menubar: false,
                plugins: 'lists link',
                toolbar: 'undo redo | bold italic | bullist numlist | link',
                content_style: 'body { font-family:Inter,sans-serif; font-size:14px }',
                setup: function (editor) {
                    editor.on('change', function () {
                        tinymce.triggerSave();
                    });
                }
            });
        }

        function switchRoundTab(index, mode) {
            document.querySelectorAll(`.tab-content-${index}`).forEach(el => el.classList.add('hidden'));
            document.getElementById(`tab_content_${index}_${mode}`).classList.remove('hidden');

            document.querySelectorAll(`.tab-btn-${index}`).forEach(el => {
                el.classList.remove('text-blue-600', 'border-blue-600', 'font-bold');
                el.classList.add('text-slate-500', 'border-transparent', 'font-medium');
            });

            const btn = document.getElementById(`tab_btn_${index}_${mode}`);
            btn.classList.add('text-blue-600', 'border-blue-600', 'font-bold');
            btn.classList.remove('text-slate-500', 'border-transparent', 'font-medium');
        }


        function previewIcon(input, index) {
            const preview = document.getElementById(`icon_preview_${index}`);
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-contain">`;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        function clearEmsExam() {
            document.getElementById('selected_ems_id').value = '';
            document.getElementById('selected_contest_type').value = '';
            document.getElementById('exam_name').value = '';
            document.getElementById('exam_slug').value = '';
            document.getElementById('selected_exam_display').innerHTML = '<span class="text-sm text-slate-500">Chưa chọn exam</span>';
            document.getElementById('round_descriptions_section').classList.add('hidden');
            document.getElementById('rounds_container').innerHTML = '';
        }
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('ems_search');
            const typeSelect = document.getElementById('ems_contest_type');
            if (searchInput) {
                searchInput.addEventListener('input', function (e) {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => loadEmsExams(1, e.target.value), 500);
                });
            }
            if (typeSelect) {
                typeSelect.addEventListener('change', function (e) {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => loadEmsExams(1, searchInput ? searchInput.value : ''), 300);
                });
            }
            if (typeof lucide !== 'undefined') lucide.createIcons();

            // Auto-fetch rounds on load if exam exists
            const initialEmsId = document.getElementById('selected_ems_id').value;
            if (initialEmsId) {
                fetchExamRounds(initialEmsId);
            }

            const form = document.getElementById('form_exam_info');
            if (form) {
                form.addEventListener('submit', function () {
                    const btn = document.getElementById('btn-save');
                    if (btn) {
                        btn.disabled = true;
                        btn.classList.add('opacity-50', 'cursor-not-allowed');
                        btn.innerHTML = '<div class="flex items-center gap-2"><div class="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div> Đang lưu...</div>';
                    }
                });
            }
        });
    </script>
@endsection