@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>
        <span>Mapping Exam</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 flex items-center gap-2">
        <i data-lucide="link" class="w-8 h-8 text-blue-600"></i>
        Mapping Exam cho Domain × Campaign
    </h1>

    <!-- Notifications -->
    <div class="message-class">
        @if(session('success'))
        <div class="fixed top-4 right-4 z-50 max-w-md bg-green-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3"
            id="success-flash">
            {{ session('success') }}
            <button type="button" onclick="document.getElementById('success-flash').remove()"
                class="text-white hover:text-slate-200"><i data-lucide="x" class="w-5 h-5"></i></button>
        </div>
        @endif
        @if(session('error'))
        <div class="fixed top-4 right-4 z-50 max-w-md bg-red-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3"
            id="error-flash">
            {{ session('error') }}
            <button type="button" onclick="document.getElementById('error-flash').remove()"
                class="text-white hover:text-slate-200"><i data-lucide="x" class="w-5 h-5"></i></button>
        </div>
        @endif
    </div>

    <!-- Hướng dẫn -->
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 text-sm text-blue-800">
        <p class="font-semibold mb-2 flex items-center gap-2"><i data-lucide="info" class="w-4 h-4"></i> Hướng dẫn:</p>
        <ul class="list-disc list-inside space-y-1">
            <li>Bảng dưới hiển thị tất cả combinations của <strong>Domain × Campaign</strong>.</li>
            <li>Nhấn nút <strong>"Chọn Exam"</strong> để gán exam cho từng combination.</li>
            <li>Exam Final URL có format: <code
                    class="bg-blue-100 px-1.5 py-0.5 rounded">{domain}/{tenant_code}/{campaign_code}/{exam_slug}</code>
            </li>
        </ul>
    </div>

    <!-- Bảng -->
     <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-max w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th
                            class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider w-14 min-w-[3rem] whitespace-nowrap">
                            STT</th>
                        <th
                            class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider min-w-[160px] whitespace-nowrap">
                            Domain</th>
                        <!-- <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider min-w-[120px] whitespace-nowrap">Tenant Code</th> -->
                        <th
                            class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider min-w-[180px] whitespace-nowrap">
                            Campaign</th>
                        <th
                            class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider min-w-[120px] whitespace-nowrap">
                            Campaign Code</th>
                        <th
                            class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider min-w-[340px] whitespace-nowrap">
                            Exam</th>
                        <th
                            class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider min-w-[380px] whitespace-nowrap">
                            Final URL</th>
                        <th
                            class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider min-w-[120px] whitespace-nowrap">
                            Grade Type</th>
                        <th
                            class="px-4 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider min-w-[120px] whitespace-nowrap">
                            Action</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-slate-200">
                    @forelse($matrix as $index => $item)
                    <tr id="mapping-row-{{ $item['domain_id'] }}-{{ $item['campaign_id'] }}"
                        class="hover:bg-slate-50 transition-colors" data-domain="{{ e($item['domain']) }}"
                        data-campaign-name="{{ e($item['campaign_name']) }}"
                        data-campaign-code="{{ e($item['campaign_code']) }}">
                        <td class="px-4 py-3 text-sm text-slate-700">{{ $index + 1 }}</td>
                        <td class="px-4 py-3 text-sm text-slate-700">{{ $item['domain'] }}</td>
                        <!-- <td class="px-4 py-3 text-sm text-slate-700">{{ $item['tenant_code'] }}</td> -->
                        <td class="px-4 py-3 text-sm text-slate-700">{{ $item['campaign_name'] }}</td>
                        <td class="px-4 py-3 text-sm text-slate-700">{{ $item['campaign_code'] }}</td>
                        <td class="px-4 py-3 text-sm">
                            <div id="exam-display-{{ $item['domain_id'] }}-{{ $item['campaign_id'] }}">
                                @if($item['exam'])
                                <div class="flex flex-wrap items-center gap-2">
                                    <span
                                        class="inline-flex px-2.5 py-1 rounded-lg text-xs font-medium bg-green-100 text-green-800">{{
                                        $item['exam']->name }} (ID: {{ $item['exam']->ems_id }})</span>
                                    <button type="button"
                                        class="inline-flex p-1.5 text-cyan-600 hover:bg-cyan-50 rounded-lg transition-colors"
                                        title="Cấu hình" data-exam-id="{{ $item['exam']->id }}"
                                        data-campaign-id="{{ $item['campaign_id'] }}"
                                        data-mapping-id="{{ $item['mapping_id'] }}"
                                        data-exam-name="{{ e($item['exam']->name) }}"
                                        data-campaign-name="{{ e($item['campaign_name']) }}"
                                        onclick="openConfigModalFromRow(this)">
                                        <i data-lucide="settings" class="w-4 h-4"></i>
                                    </button>
                                    <button type="button"
                                        class="inline-flex p-1.5 text-cyan-600 hover:bg-cyan-50 rounded-lg transition-colors"
                                        title="Cấu hình màn hình" data-exam-id="{{ $item['exam']->id }}"
                                        data-campaign-id="{{ $item['campaign_id'] }}"
                                        data-mapping-id="{{ $item['mapping_id'] }}"
                                        data-exam-name="{{ e($item['exam']->name) }}"
                                        data-campaign-name="{{ e($item['campaign_name']) }}"
                                        onclick="openExamConfigModal(this)">
                                        <i data-lucide="monitor-cog" class="w-4 h-4"></i>
                                    </button>
                                    <button type="button"
                                        class="inline-flex p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                                        title="Xóa"
                                        onclick="removeExam({{ $item['mapping_id'] }}, {{ $item['domain_id'] }}, {{ $item['campaign_id'] }})">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </div>
                                @else
                                <button type="button"
                                    class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700 transition-colors"
                                    data-domain-id="{{ $item['domain_id'] }}"
                                    data-campaign-id="{{ $item['campaign_id'] }}" data-domain="{{ e($item['domain']) }}"
                                    data-campaign-name="{{ e($item['campaign_name']) }}"
                                    data-campaign-code="{{ e($item['campaign_code']) }}"
                                    onclick="openExamSelectorModalFromRow(this)">
                                    <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                                    Chọn Exam
                                </button>
                                @endif
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm max-w-32 truncate"
                            id="final-url-cell-{{ $item['domain_id'] }}-{{ $item['campaign_id'] }}">
                            @if($item['exam'])
                            <a href="{{ $item['final_url'] }}" target="_blank" rel="noopener"
                                class="text-blue-600 hover:underline ">{{ $item['final_url'] }}</a>
                            @else
                            <span class="text-slate-400">---</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-sm"
                            id="grade-type-cell-{{ $item['domain_id'] }}-{{ $item['campaign_id'] }}">
                            @if($item['exam'])
                            <label class="relative inline-flex items-center cursor-pointer">
                                <select class="border rounded px-2 py-1 text-sm"
                                    onchange="updateGradeType({{ (int) $item['mapping_id'] }}, this.value , {{ $item['domain_id'] }}, {{ $item['campaign_id'] }})">
                                    <option value="1" {{ $item['grading_type']==1 ? 'selected' : '' }}>
                                        AI
                                    </option>
                                    <option value="2" {{ $item['grading_type']==2 ? 'selected' : '' }}>
                                        Manual
                                    </option>
                                </select>
                            </label>
                            @else
                            <span class="text-slate-400">---</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-sm">
                            <div id="show-result-display-{{ $item['domain_id'] }}-{{ $item['campaign_id'] }}">
                                @if($item['exam'] && $item['grading_type'] == 1)
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer"
                                        id="show-result-{{ $item['mapping_id'] }}" {{ $item['show_result'] ? 'checked'
                                        : '' }}
                                        onchange="updateShowResult({{ $item['mapping_id'] }}, this.checked, {{ $item['domain_id'] }}, {{ $item['campaign_id'] }})">
                                    <div
                                        class="w-9 h-5 bg-slate-200 peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600">
                                    </div>
                                    <span
                                        class="ms-2 text-sm font-medium text-slate-700 show-result-label-{{ $item['mapping_id'] }}">{{
                                        $item['show_result'] ? 'Hiển thị' : 'Ẩn' }}</span>
                                </label>
                                @else
                                <span class="text-slate-400">-</span>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-4 py-6 text-center text-sm text-slate-500">
                            Không có dữ liệu.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Exam Selector Modal (Tailwind) -->
    <div id="examSelectorModal" 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="exam-selector-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-3xl max-h-[90vh] flex flex-col">
                <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200 text-white rounded-t-xl">
                    <h3 class="text-lg font-semibold flex items-center gap-2"><i data-lucide="list" class="w-5 h-5"></i>
                        Chọn Exam</h3>
                    <button type="button" class="text-black hover:text-slate-600 transition-colors"
                        onclick="closeExamSelectorModal()"><i data-lucide="x" class="w-5 h-5"></i></button>
                </div>
                <div class="px-6 py-4 border-b border-slate-200 space-y-1">
                    <p class="text-sm"><strong class="text-slate-600">Domain:</strong> <span id="modal_domain"
                            class="text-slate-900"></span></p>
                    <p class="text-sm"><strong class="text-slate-600">Campaign:</strong> <span id="modal_campaign"
                            class="text-slate-900"></span> (<code id="modal_campaign_code"
                            class="text-xs bg-slate-100 px-1 rounded"></code>)</p>
                </div>
                <input type="hidden" id="modal_domain_id">
                <input type="hidden" id="modal_campaign_id">
                <div class="px-6 py-3">
                    <input type="text" id="exam_search_modal"
                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                        placeholder="Tìm kiếm exam theo emds id, tên...">
                </div>
                <div class="flex-1 overflow-auto px-6 pb-4">
                    <div class="border border-slate-200 rounded-lg overflow-hidden max-h-[400px] overflow-y-auto">
                        <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 w-24">EMS
                                        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">Slug</th>
                                    <th
                                        class="px-4 py-2 text-right text-xs font-semibold text-slate-600 uppercase w-24 whitespace-nowrap">
                                        Hành động</th>
                                </tr>
                            </thead>
                            <tbody id="exam_list_tbody" class="bg-white divide-y divide-slate-200">
                                @forelse($exams as $exam)
                                <tr class="exam-row hover:bg-slate-50 transition-colors" data-exam-id="{{ $exam->ems_id }}"
                                    data-exam-name="{{ strtolower($exam->name) }}">
                                    <td class="px-4 py-2 text-sm text-slate-700">{{ $exam->ems_id }}</td>
                                    <td class="px-4 py-2 text-sm text-slate-700">{{ $exam->name }}</td>
                                    <td class="px-4 py-2 text-sm"><code
                                            class="text-xs bg-slate-100 px-1.5 py-0.5 rounded">{{ $exam->slug }}</code></td>
                                    <td class="px-4 py-2 text-right">
                                        <button type="button"
                                            class="px-2 py-1 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700 transition-colors"
                                            onclick="selectExamForMapping({{ $exam->id }}, '{{ addslashes(e($exam->name)) }}', '{{ addslashes(e($exam->slug)) }}', '{{ $exam->ems_id }}')">
                                            <i data-lucide="check" class="w-3 h-3 inline-block mr-0.5"></i> Chọn
                                        </button>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="px-4 py-4 text-center text-sm text-slate-500">
                                        Không có dữ liệu.
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="px-6 py-4 border-t border-slate-200 bg-slate-50 rounded-b-xl">
                    <button type="button" onclick="closeExamSelectorModal()"
                        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">
                        <i data-lucide="x" class="w-4 h-4 inline-block mr-1"></i> Đóng
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Config Modal (Tailwind) -->
    <div id="configModal" 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="config-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-6xl max-h-[90vh] flex flex-col">
                <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200 text-white rounded-t-xl">
                    <h3 class="text-lg font-semibold" id="config_modal_title"><i data-lucide="settings"
                            class="w-5 h-5 inline-block mr-2"></i> Cấu hình Exam</h3>
                    <button type="button" class="text-black hover:text-slate-600 transition-colors"
                        onclick="closeConfigModal()"><i data-lucide="x" class="w-5 h-5"></i></button>
                </div>
                <div class="flex-1 overflow-auto px-6 py-4 bg-slate-50">
                    <input type="hidden" id="config_modal_exam_id">
                    <input type="hidden" id="config_modal_campaign_id">
                    <input type="hidden" id="config_modal_campaign_exam_id">

                    <!-- Add Config Form -->
                    <div class="bg-white rounded-xl border border-slate-200 shadow-sm mb-4 overflow-hidden"
                        id="add-config-card">
                        <div class="px-4 py-3 bg-green-600 text-white font-semibold flex items-center gap-2"><i
                                data-lucide="plus-circle" class="w-4 h-4"></i> Thêm cấu hình mới</div>
                        <div class="p-4 space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Input Type</label>
                                    <select id="config_input_type"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                                        <option value="text">Text</option>
                                        <option value="email">Email</option>
                                        <option value="tel">Phone</option>
                                        <option value="number">Number</option>
                                        <option value="date">Date</option>
                                        <option value="textarea">Textarea</option>
                                        <option value="select">Select</option>
                                    </select>
                                </div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Placeholder</label>
                                    <input type="text" id="config_placeholder"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Placeholder text">
                                </div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">ID</label>
                                    <input type="text" id="config_field_id"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Field ID">
                                </div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Label <span
                                            class="text-red-500">*</span></label>
                                    <input type="text" id="config_field_name"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Label" required>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Class</label>
                                    <input type="text" id="config_field_class"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        value="form-control" placeholder="CSS Classes">
                                </div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Name <span
                                            class="text-red-500">*</span> (Example: name, email, phone, etc.)</label>
                                    <input type="text" id="config_key"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Name" required>
                                </div>
                                <div class="flex items-end pb-2"><label
                                        class="inline-flex items-center gap-2 cursor-pointer">
                                        <input type="checkbox" id="config_is_required"
                                            class="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm font-medium text-slate-700">Required</span>
                                    </label></div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Required Message</label>
                                    <input type="text" id="config_required_message"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Required message">
                                </div>
                            </div>
                            <button type="button" onclick="addConfig()"
                                class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
                                <i data-lucide="plus" class="w-4 h-4"></i> Thêm
                            </button>
                        </div>
                    </div>

                    <!-- Edit Config Form -->
                    <div class="bg-white rounded-xl border border-slate-200 shadow-sm mb-4 overflow-hidden hidden"
                        id="edit-config-card">
                        <div class="px-4 py-3 bg-amber-500 text-white font-semibold flex items-center gap-2"><i
                                data-lucide="edit" class="w-4 h-4"></i> Chỉnh sửa cấu hình</div>
                        <div class="p-4 space-y-4">
                            <input type="hidden" id="edit_config_id">
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Input Type</label>
                                    <select id="edit_config_input_type"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                                        <option value="text">Text</option>
                                        <option value="email">Email</option>
                                        <option value="tel">Phone</option>
                                        <option value="number">Number</option>
                                        <option value="date">Date</option>
                                        <option value="textarea">Textarea</option>
                                        <option value="select">Select</option>
                                    </select>
                                </div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Placeholder</label>
                                    <input type="text" id="edit_config_placeholder"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Placeholder text">
                                </div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">ID</label>
                                    <input type="text" id="edit_config_field_id"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Field ID">
                                </div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Label <span
                                            class="text-red-500">*</span></label>
                                    <input type="text" id="edit_config_field_name"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Label" required>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Class</label>
                                    <input type="text" id="edit_config_field_class"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="CSS Classes">
                                </div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Name <span
                                            class="text-red-500">*</span></label>
                                    <input type="text" id="edit_config_key"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Name" required>
                                </div>
                                <div class="flex items-end pb-2"><label
                                        class="inline-flex items-center gap-2 cursor-pointer">
                                        <input type="checkbox" id="edit_config_is_required"
                                            class="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-sm font-medium text-slate-700">Required</span>
                                    </label></div>
                                <div><label class="block text-xs font-medium text-slate-600 mb-1">Required Message</label>
                                    <input type="text" id="edit_config_required_message"
                                        class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                        placeholder="Required message">
                                </div>
                            </div>
                            <div class="flex gap-2">
                                <button type="button" onclick="updateConfig()"
                                    class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors"><i
                                        data-lucide="save" class="w-4 h-4"></i> Cập nhật</button>
                                <button type="button" onclick="cancelEdit()"
                                    class="inline-flex items-center gap-2 px-4 py-2 bg-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-300 transition-colors"><i
                                        data-lucide="x" class="w-4 h-4"></i> Hủy</button>
                            </div>
                        </div>
                    </div>

                    <!-- Configs List -->
                    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
                        <div class="px-4 py-3 bg-blue-500 text-white font-semibold flex items-center gap-2"><i
                                data-lucide="list" class="w-4 h-4"></i> Danh sách cấu hình</div>
                        <div class="p-4">
                            <div id="configsList"></div>
                        </div>
                    </div>
                </div>
                <div class="px-6 py-4 border-t border-slate-200 bg-slate-50 rounded-b-xl">
                    <button type="button" onclick="closeConfigModal()"
                        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"><i
                            data-lucide="x" class="w-4 h-4 inline-block mr-1"></i> Đóng</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Exam Config Modal -->
    <div id="examConfigModal" class="fixed inset-0 z-50 overflow-y-auto hidden" aria-modal="true">
        <div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm transition-opacity"></div>

        <div class="flex min-h-full items-center justify-center p-4 relative">
            <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-3xl flex flex-col overflow-hidden">

                <div class="px-6 py-3 bg-slate-100/50 border-b border-slate-100 flex items-center justify-between">
                    <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
                        <span class="flex items-center gap-1">
                            <i data-lucide="layers" class="w-3 h-3"></i> Chiến dịch:
                            <b id="display_campaign_name" class="text-slate-700">---</b>
                        </span>
                        <span class="flex items-center gap-1">
                            <i data-lucide="file-text" class="w-3 h-3"></i> Đề thi:
                            <b id="display_exam_name" class="text-slate-700">---</b>
                        </span>
                    </div>
                    <button type="button" onclick="closeModal()"
                        class="p-2 hover:bg-slate-100 rounded-full transition-colors">
                        <i data-lucide="x" class="w-5 h-5 text-slate-500"></i>
                    </button>
                    <input type="hidden" id="config_exam_id">
                    <input type="hidden" id="config_campaign_id">
                    <input type="hidden" id="config_mapping_id">
                </div>

                <div class="flex-1 overflow-auto p-6 bg-slate-50/50">
                    <form id="examForm" class="space-y-6">

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="space-y-2">
                                <label class="text-sm font-semibold text-slate-700 flex items-center gap-2">
                                    <i data-lucide="circle-dot" class="w-4 h-4 text-orange-500"></i> Ảnh Logo
                                </label>

                                <div id="logo_preview_container"
                                    class="hidden relative w-full h-32 rounded-lg border-2 border-dashed border-slate-200 overflow-hidden bg-slate-100 group">
                                    <img id="logo_preview_img" src="" class="w-full h-full object-contain p-2">
                                    <div
                                        class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <span class="text-white text-xs font-medium">Logo hiện tại</span>
                                    </div>
                                </div>

                                <input type="file" id="logo_image" accept="image/*"
                                    onchange="handleFilePreview(this, 'logo_preview')"
                                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-orange-50 file:text-orange-700 hover:file:bg-orange-100 border border-slate-200 rounded-lg bg-white p-1" />
                            </div>

                            <div class="space-y-2">
                                <label class="text-sm font-semibold text-slate-700 flex items-center gap-2">
                                    <i data-lucide="image" class="w-4 h-4 text-blue-500"></i> Ảnh Background
                                </label>

                                <div id="bg_preview_container"
                                    class="hidden relative w-full h-32 rounded-lg border-2 border-dashed border-slate-200 overflow-hidden bg-slate-100 group">
                                    <img id="bg_preview_img" src="" class="w-full h-full object-cover">
                                    <div
                                        class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <span class="text-white text-xs font-medium">Background hiện tại</span>
                                    </div>
                                </div>

                                <input type="file" id="bg_image" accept="image/*"
                                    onchange="handleFilePreview(this, 'bg_preview')"
                                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 border border-slate-200 rounded-lg bg-white p-1" />
                            </div>

                            <div class="space-y-2">
                                <label class="text-sm font-semibold text-slate-700 flex items-center gap-2">
                                    <i data-lucide="monitor" class="w-4 h-4 text-purple-500"></i> Ảnh Main (Banner)
                                </label>

                                <div id="main_preview_container"
                                    class="hidden relative w-full h-32 rounded-lg border-2 border-dashed border-slate-200 overflow-hidden bg-slate-100 group">
                                    <img id="main_preview_img" src="" class="w-full h-full object-cover">
                                    <div
                                        class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <span class="text-white text-xs font-medium">Banner hiện tại</span>
                                    </div>
                                </div>

                                <input type="file" id="main_image" accept="image/*"
                                    onchange="handleFilePreview(this, 'main_preview')"
                                    class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100 border border-slate-200 rounded-lg bg-white p-1" />
                            </div>
                        </div>

                        <div class="space-y-2">
                            <label class="text-sm font-semibold text-slate-700">Lời giới thiệu</label>
                            <textarea id="intro_text" rows="5"
                                class="w-full px-4 py-2 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                                placeholder="Nhập tóm tắt về kỳ thi..."></textarea>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-2 md:col-span-1">
                                <label class="text-sm font-semibold text-slate-700">Thời gian (phút)</label>
                                <input type="number" id="duration"
                                    class="w-full px-4 py-2 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                                    placeholder="60">
                            </div>

                            <div class="space-y-2 md:col-span-1">
                                <label class="text-sm font-semibold text-slate-700">Trạng thái hiển thị</label>
                                <div class="flex items-center h-[42px]">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" id="config_status" class="sr-only peer" checked>
                                        <div
                                            class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
                                        </div>
                                        <span id="status_label" class="ml-3 text-sm font-medium text-slate-600">Đang
                                            hiện</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-3">
                            <div class="flex items-center justify-between">
                                <label class="text-sm font-semibold text-slate-700 flex items-center gap-2">
                                    <i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i> Quyền lợi & Lợi ích
                                </label>
                                <button type="button" onclick="addBenefitRow('',true)"
                                    class="text-xs font-medium bg-green-50 text-green-700 px-3 py-1.5 rounded-lg hover:bg-green-100 flex items-center gap-1 transition-colors">
                                    <i data-lucide="plus" class="w-3 h-3"></i> Thêm dòng
                                </button>
                            </div>
                            <div id="benefits_container" class="space-y-2 max-h-64 overflow-y-auto">
                            </div>
                        </div>

                    </form>
                </div>

                <div class="px-6 py-4 border-t border-slate-100 bg-white flex justify-end gap-3">
                    <button type="button" onclick="closeModal()"
                        class="px-5 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-xl transition-colors">Hủy</button>
                    <button type="button" onclick="handleSave()"
                        class="px-5 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-lg shadow-blue-200 transition-all flex items-center gap-2">
                        <i data-lucide="save" class="w-4 h-4"></i> Lưu cấu hình
                    </button>
                </div>
            </div>
        </div>
    </div>
    
</div>


@endsection

@section('scripts')
<script>
    let currentDomainId, currentCampaignId;
    let benefits = [];

    async function openExamConfigModal(btn) {
        // 1. Lấy thông tin từ nút bấm
        const examId = btn.dataset.examId;
        const campaignId = btn.dataset.campaignId;
        const mappingId = btn.dataset.mappingId;
        const examName = btn.dataset.examName;
        const campaignName = btn.dataset.campaignName;

        // 2. Hiển thị thông tin cơ bản
        document.getElementById('display_exam_name').innerText = examName;
        document.getElementById('display_campaign_name').innerText = campaignName;
        document.getElementById('config_mapping_id').value = mappingId;

        // 3. Reset form về trạng thái trống trước khi load
        document.getElementById('intro_text').value = '';
        document.getElementById('duration').value = '';
        document.getElementById('config_status').checked = true;
        document.getElementById('status_label').innerText = 'Đang hiện';
        document.getElementById('benefits_container').innerHTML = ''; // Xóa trắng danh sách benefits cũ
        // Reset previews về ẩn
        document.getElementById('bg_preview_container').classList.add('hidden');
        document.getElementById('main_preview_container').classList.add('hidden');
        document.getElementById('logo_preview_container').classList.add('hidden');
        document.getElementById('bg_image').value = ''; // Reset input file luôn
        document.getElementById('main_image').value = '';
        document.getElementById('logo_image').value = '';


        // 4. Gọi API lấy dữ liệu cũ
        try {
            const response = await fetch(`/campaign-exam-config/show/${mappingId}`);
            const result = await response.json();

            if (result.success && result.data) {
                const data = result.data;

                // Đổ dữ liệu vào các ô input
                document.getElementById('intro_text').value = data.introduction || '';
                document.getElementById('duration').value = data.duration || '';
                const statusCheckbox = document.getElementById('config_status');
                statusCheckbox.checked = data.status == 1;
                document.getElementById('status_label').innerText = data.status == 1 ? 'Đang hiện' : 'Đang ẩn';

                statusCheckbox.addEventListener('change', function () {
                    document.getElementById('status_label').innerText = this.checked ? 'Đang hiện' : 'Đang ẩn';
                });

                // Đổ dữ liệu Benefits (Mảng JSON)
                if (data.benefits && Array.isArray(data.benefits)) {
                    data.benefits.forEach(benefit => {
                        addBenefitRow(benefit);
                    });
                } else {
                    addBenefitRow(); // Nếu mảng trống thì hiện 1 dòng trống
                }

                // --- HIỂN THỊ ẢNH CŨ NẾU CÓ ---
                if (data.bg_image) {
                    const bgImg = document.getElementById('bg_preview_img');
                    const bgCont = document.getElementById('bg_preview_container');
                    bgImg.src = data.bg_image; // Link server_url từ DB
                    bgCont.classList.remove('hidden');
                }

                if (data.main_image) {
                    const mainImg = document.getElementById('main_preview_img');
                    const mainCont = document.getElementById('main_preview_container');
                    mainImg.src = data.main_image; // Link server_url từ DB
                    mainCont.classList.remove('hidden');
                }

                if (data.logo_image) {
                    const logoImg = document.getElementById('logo_preview_img');
                    const logoCont = document.getElementById('logo_preview_container');
                    logoImg.src = data.logo_image;
                    logoCont.classList.remove('hidden');
                }
            } else {
                // Nếu là lần đầu cấu hình (chưa có data), hiện 1 dòng benefits trống
                addBenefitRow();
            }
        } catch (error) {
            console.error("Lỗi khi load cấu hình:", error);
            addBenefitRow();
        }

        // 5. Hiện Modal
        document.getElementById('examConfigModal').classList.remove('hidden');
        lucide.createIcons();
    }

    function closeModal() {
        document.getElementById('examConfigModal').classList.add('hidden');
    }

    // Đóng modal khi nhấn phím ESC
    document.addEventListener('keydown', function (event) {
        if (event.key === "Escape") {
            const modal = document.getElementById('examConfigModal');
            if (!modal.classList.contains('hidden')) {
                closeModal();
            }
        }
    });

    function addBenefitRow(value = "", shouldFocus = false) {
        const container = document.getElementById('benefits_container');
        const rowId = 'benefit_' + Date.now();

        const rowHtml = `
        <div id="${rowId}" class="flex items-start gap-2 group animate-in fade-in slide-in-from-top-1">
            <div class="flex-1 relative">
                <textarea 
                    class="benefit-input w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:border-green-500 outline-none transition-all" 
                    rows="2"
                    placeholder="Ví dụ: Cấp chứng chỉ ngay sau khi hoàn thành kỳ thi với số điểm trên 80/100...">${value}</textarea>
                <i data-lucide="badge-check" class="w-4 h-4 text-slate-400 absolute left-3 top-2.5"></i>
            </div>
            <button type="button" onclick="removeBenefitRow('${rowId}')" class="p-2 mt-1 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all">
                <i data-lucide="trash-2" class="w-4 h-4"></i>
            </button>
        </div>
    `;

        container.insertAdjacentHTML('beforeend', rowHtml);
        lucide.createIcons();

        if (shouldFocus) {
            const newRow = document.getElementById(rowId);
            const textarea = newRow.querySelector('textarea');
            if (textarea) {
                setTimeout(() => {
                    textarea.focus();
                    // Đưa con trỏ chuột xuống cuối văn bản nếu có giá trị
                    textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
                }, 0);
            }
        }
    }

    function removeBenefitRow(id) {
        document.getElementById(id).remove();
    }

    function handleFilePreview(input, type) {
        const container = document.getElementById(`${type}_container`);
        const img = document.getElementById(`${type}_img`);

        if (input.files && input.files[0]) {
            const reader = new FileReader();

            reader.onload = function (e) {
                img.src = e.target.result;
                container.classList.remove('hidden');
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    async function handleSave() {
        // 1. Thu thập các element cần thiết
        const mappingId = document.getElementById('config_mapping_id').value;
        const intro = document.getElementById('intro_text').value;
        const duration = document.getElementById('duration').value;
        const benefitInputs = document.querySelectorAll('.benefit-input');
        const statusValue = document.getElementById('config_status').checked ? 1 : 0;

        // Kiểm tra nhanh xem đã chọn Exam chưa (mappingId)
        if (!mappingId) {
            Swal.fire('Lỗi!', 'Không tìm thấy ID định danh của kỳ thi.', 'error');
            return;
        }

        // 2. Khởi tạo FormData
        const formData = new FormData();
        formData.append('mapping_id', mappingId);
        formData.append('intro', intro);
        formData.append('duration', duration);
        formData.append('status', statusValue);

        // Xử lý Benefits (Mảng -> JSON string)
        const benefitsArray = Array.from(benefitInputs)
            .map(input => input.value)
            .filter(v => v.trim() !== "");
        formData.append('benefits', JSON.stringify(benefitsArray));

        // Xử lý Files (Bạn tự xử lý S3 sau, nhưng vẫn gửi file lên để Controller nhận diện)
        const bgFile = document.getElementById('bg_image').files[0];
        const mainFile = document.getElementById('main_image').files[0];
        const logoFile = document.getElementById('logo_image').files[0];
        if (bgFile) formData.append('background_image', bgFile);
        if (mainFile) formData.append('main_image', mainFile);
        if (logoFile) formData.append('logo_image', logoFile);

        // 3. Hiển thị Loading với SweetAlert2
        Swal.fire({
            title: 'Đang lưu cấu hình...',
            text: 'Vui lòng không đóng trình duyệt',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        try {
            // 4. Gửi request tới Route mới
            const response = await fetch("{{ route('campaign-exam-config.store') }}", {
                method: 'POST',
                body: formData,
                headers: {
                    // Quan trọng: Phải có CSRF Token để Laravel không chặn request
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                }
            });

            const result = await response.json();

            if (result.success) {
                // 5. Thông báo thành công
                Swal.fire({
                    icon: 'success',
                    title: 'Đã lưu!',
                    text: result.message || 'Cấu hình đã được cập nhật thành công.',
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => {
                    closeModal(); // Hàm đóng modal của bạn
                    // location.reload(); // Có thể reload lại trang nếu bạn muốn cập nhật giao diện ngay
                });
            } else {
                // Thông báo lỗi từ server (validation, logic...)
                Swal.fire({
                    icon: 'error',
                    title: 'Thất bại',
                    text: result.message || 'Có lỗi xảy ra, vui lòng kiểm tra lại.',
                    showConfirmButton: false,
                    timer: 1500
                });
            }
        } catch (error) {
            console.error('Save Error:', error);
            Swal.fire({
                icon: 'error',
                title: 'Lỗi kết nối',
                text: 'Không thể gửi dữ liệu đến máy chủ.',
                showConfirmButton: false,
                timer: 1500
            });
        }
    }

    function openExamSelectorModalFromRow(btn) {
        const d = btn.dataset;
        openExamSelectorModal(d.domainId, d.campaignId, d.domain || '', d.campaignName || '', d.campaignCode || '');
    }
    function openExamSelectorModal(domainId, campaignId, domainName, campaignName, campaignCode) {
        currentDomainId = domainId;
        currentCampaignId = campaignId;
        document.getElementById('modal_domain_id').value = domainId;
        document.getElementById('modal_campaign_id').value = campaignId;
        document.getElementById('modal_domain').textContent = domainName;
        document.getElementById('modal_campaign').textContent = campaignName;
        document.getElementById('modal_campaign_code').textContent = campaignCode;
        document.getElementById('examSelectorModal').classList.remove('hidden');
        if (typeof lucide !== 'undefined') lucide.createIcons();
    }
    function closeExamSelectorModal() {
        document.getElementById('examSelectorModal').classList.add('hidden');
    }
    document.getElementById('exam-selector-backdrop').addEventListener('click', closeExamSelectorModal);

    function selectExamForMapping(examId, examName, examSlug, emsId) {
        const domainId = document.getElementById('modal_domain_id').value;
        const campaignId = document.getElementById('modal_campaign_id').value;
        $.ajax({
            url: '{{ route("exam-mapping.assign") }}',
            type: 'POST',
            data: { _token: '{{ csrf_token() }}', domain_id: domainId, campaign_id: campaignId, exam_id: examId },
            success: function (response) {
                if (response.success) {
                    const mappingId = response.mapping_id;
                    const finalUrl = response.final_url || '';
                    const showResult = response.show_result !== false;
                    const gradeType = response.grade_type || 1;
                    const displayDiv = document.getElementById('exam-display-' + domainId + '-' + campaignId);
                    const examLabel = (response.exam && response.exam.name) ? response.exam.name : (examName || '');
                    const emsIdVal = (response.exam && response.exam.ems_id) ? response.exam.ems_id : emsId;
                    const rowForData = document.getElementById('mapping-row-' + domainId + '-' + campaignId);
                    const campaignNameForBtn = (rowForData && rowForData.dataset.campaignName) ? rowForData.dataset.campaignName.replace(/"/g, '&quot;') : '';
                    // displayDiv.innerHTML = '<div class="flex flex-wrap items-center gap-2"><span class="inline-flex px-2.5 py-1 rounded-lg text-xs font-medium bg-green-100 text-green-800">' + (examLabel || '').replace(/</g, '&lt;') + ' (ID: ' + emsIdVal + ')</span><button type="button" class="inline-flex p-1.5 text-cyan-600 hover:bg-cyan-50 rounded-lg transition-colors" title="Cấu hình" data-exam-id="' + examId + '" data-campaign-id="' + campaignId + '" data-mapping-id="' + mappingId + '" data-exam-name="' + (examLabel || '').replace(/"/g, '&quot;') + '" data-campaign-name="' + campaignNameForBtn + '" onclick="openConfigModalFromRow(this)"><i data-lucide="settings" class="w-4 h-4"></i></button><button type="button" class="inline-flex p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="Xóa" onclick="removeExam(' + mappingId + ', ' + domainId + ', ' + campaignId + ')"><i data-lucide="trash-2" class="w-4 h-4"></i></button></div>';
                    displayDiv.innerHTML = `
                    <div class="flex flex-wrap items-center gap-2">
                    <span class="inline-flex px-2.5 py-1 rounded-lg text-xs font-medium bg-green-100 text-green-800">
                        ${(examLabel || '').replace(/</g, '&lt;')} (ID: ${emsIdVal})
                    </span>

                    <button
                        type="button"
                        class="inline-flex p-1.5 text-cyan-600 hover:bg-cyan-50 rounded-lg transition-colors"
                        title="Cấu hình"
                        data-exam-id="${examId}"
                        data-campaign-id="${campaignId}"
                        data-mapping-id="${mappingId}"
                        data-exam-name="${(examLabel || '').replace(/"/g, '&quot;')}"
                        data-campaign-name="${campaignNameForBtn}"
                        onclick="openConfigModalFromRow(this)"
                    >
                        <i data-lucide="settings" class="w-4 h-4"></i>
                    </button>

                    <button
                        type="button"
                        class="inline-flex p-1.5 text-cyan-600 hover:bg-cyan-50 rounded-lg transition-colors"
                        title="Cấu hình màn hình"
                        data-exam-id="${examId}"
                        data-campaign-id="${campaignId}"
                        data-mapping-id="${mappingId}"
                        data-exam-name="${(examLabel || '').replace(/"/g, '&quot;')}"
                        data-campaign-name="${campaignNameForBtn}"
                        onclick="openExamConfigModal(this)"
                    >
                        <i data-lucide="monitor-cog" class="w-4 h-4"></i>
                    </button>

                    <button
                        type="button"
                        class="inline-flex p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                        title="Xóa"
                        onclick="removeExam(${mappingId}, ${domainId}, ${campaignId})"
                    >
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                    </button>
                    </div>
                    `;
                    const finalUrlCell = document.getElementById('final-url-cell-' + domainId + '-' + campaignId);
                    if (finalUrlCell) finalUrlCell.innerHTML = '<a href="' + (finalUrl || '').replace(/"/g, '&quot;').replace(/</g, '&lt;') + '" target="_blank" rel="noopener" class="text-blue-600 hover:underline break-all">' + (finalUrl || '').replace(/</g, '&lt;') + '</a>';
                    const gradeTypeCell = document.getElementById('grade-type-cell-' + domainId + '-' + campaignId);
                    if (gradeTypeCell) {
                        gradeTypeCell.innerHTML = `
                        <label class="relative inline-flex items-center cursor-pointer">
                            <select class="border rounded px-2 py-1 text-sm" onchange="updateGradeType(${mappingId}, this.value)">
                                <option value="1" ${gradeType == 1 ? 'selected' : ''}>AI</option>
                                <option value="2" ${gradeType == 2 ? 'selected' : ''}>Manual</option>
                            </select>
                        </label>
                    `;
                    }
                    const showResultDiv = document.getElementById('show-result-display-' + domainId + '-' + campaignId);
                    if (showResultDiv) {
                        showResultDiv.innerHTML = '<label class="relative inline-flex items-center cursor-pointer"><input type="checkbox" class="sr-only peer" id="show-result-' + mappingId + '" ' + (showResult ? 'checked' : '') + ' onchange="updateShowResult(' + mappingId + ', this.checked, ' + domainId + ', ' + campaignId + ')"><div class="w-9 h-5 bg-slate-200 peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[\'\'] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div><span class="ms-2 text-sm font-medium text-slate-700 show-result-label-' + mappingId + '">' + (showResult ? 'Hiển thị' : 'Ẩn') + '</span></label>';
                    }
                    closeExamSelectorModal();
                    showMessage('success', response.message || 'Exam đã được assign thành công!');
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                }
            },
            error: function (xhr) {
                showMessage('error', 'Lỗi khi assign exam: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unknown error'));
            }
        });
    }

    function removeExam(mappingId, domainId, campaignId) {
        if (!confirm('Bạn có chắc chắn muốn xóa exam này khỏi mapping?')) return;
        if (!mappingId) { location.reload(); return; }
        $.ajax({
            url: '{{ route("exam-mapping.remove") }}',
            type: 'POST',
            data: { _token: '{{ csrf_token() }}', mapping_id: mappingId },
            success: function (response) {
                if (response.success) {
                    const row = document.getElementById('mapping-row-' + domainId + '-' + campaignId);
                    const domain = (row && row.dataset.domain) ? row.dataset.domain : '';
                    const campaignName = (row && row.dataset.campaignName) ? row.dataset.campaignName : '';
                    const campaignCode = (row && row.dataset.campaignCode) ? row.dataset.campaignCode : '';
                    const displayDiv = document.getElementById('exam-display-' + domainId + '-' + campaignId);
                    if (displayDiv) displayDiv.innerHTML = '<button type="button" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700 transition-colors" data-domain-id="' + domainId + '" data-campaign-id="' + campaignId + '" data-domain="' + (domain || '').replace(/"/g, '&quot;') + '" data-campaign-name="' + (campaignName || '').replace(/"/g, '&quot;') + '" data-campaign-code="' + (campaignCode || '').replace(/"/g, '&quot;') + '" onclick="openExamSelectorModalFromRow(this)"><i data-lucide="plus" class="w-3.5 h-3.5"></i> Chọn Exam</button>';
                    const finalUrlCell = document.getElementById('final-url-cell-' + domainId + '-' + campaignId);
                    if (finalUrlCell) finalUrlCell.innerHTML = '<span class="text-slate-400">-</span>';
                    const gradeTypeCell = document.getElementById('grade-type-cell-' + domainId + '-' + campaignId);
                    if (gradeTypeCell) gradeTypeCell.innerHTML = '<span class="text-slate-400">---</span>';
                    const showResultDiv = document.getElementById('show-result-display-' + domainId + '-' + campaignId);
                    if (showResultDiv) showResultDiv.innerHTML = '<span class="text-slate-400">-</span>';
                    showMessage('success', response.message || 'Exam đã được xóa khỏi mapping!');
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                }
            },
            error: function (xhr) {
                showMessage('error', 'Lỗi khi xóa exam: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unknown error'));
            }
        });
    }

    function updateGradeType(mappingId, gradeType, domainId, campaignId) {
        $.ajax({
            url: '{{ route("exam-mapping.update-grade-type") }}',
            type: 'POST',
            data: { _token: '{{ csrf_token() }}', mapping_id: mappingId, grading_type: gradeType },
            success: function (response) {
                if (response.success) {
                    showMessage('success', response.message);
                    const showResultDiv = document.getElementById('show-result-display-' + domainId + '-' + campaignId);
                    const showResult = response.show_result !== false;
                    if (showResultDiv && gradeType == 1) {
                        showResultDiv.innerHTML = '<label class="relative inline-flex items-center cursor-pointer"><input type="checkbox" class="sr-only peer" id="show-result-' + mappingId + '" ' + (showResult ? 'checked' : '') + ' onchange="updateShowResult(' + mappingId + ', this.checked, ' + domainId + ', ' + campaignId + ')"><div class="w-9 h-5 bg-slate-200 peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[\'\'] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div><span class="ms-2 text-sm font-medium text-slate-700 show-result-label-' + mappingId + '">' + (showResult ? 'Hiển thị' : 'Ẩn') + '</span></label>';
                    } else {
                        showResultDiv.innerHTML = '<span class="text-slate-400">-</span>';
                    }
                } else {
                    showMessage('error', response.message);
                }
            },
            error: function (xhr) {
                showMessage('error', 'Lỗi khi cập nhật: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unknown error'));
            }
        });
    }

    function updateShowResult(mappingId, showResult, domainId, campaignId) {
        $.ajax({
            url: '{{ route("exam-mapping.update-show-result") }}',
            type: 'POST',
            data: { _token: '{{ csrf_token() }}', mapping_id: mappingId, show_result: showResult ? 1 : 0 },
            success: function (response) {
                if (response.success) {
                    const label = document.querySelector('.show-result-label-' + mappingId);
                    if (label) label.textContent = showResult ? 'Hiển thị' : 'Ẩn';
                    showMessage('success', response.message);
                }
            },
            error: function (xhr) {
                const checkbox = document.getElementById('show-result-' + mappingId);
                if (checkbox) checkbox.checked = !showResult;
                showMessage('error', 'Lỗi khi cập nhật: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'Unknown error'));
            }
        });
    }

    function showMessage(type, message) {
        const id = 'msg-' + Date.now();
        const bg = type === 'success' ? 'bg-green-500' : 'bg-red-500';
        const html = '<div id="' + id + '" class="fixed top-4 right-4 z-50 max-w-md ' + bg + ' text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3"><span>' + (message || '').replace(/</g, '&lt;') + '</span><button type="button" class="text-white hover:text-slate-200" onclick="document.getElementById(\'' + id + '\').remove()"><i data-lucide="x" class="w-5 h-5"></i></button></div>';
        document.querySelector('.message-class').insertAdjacentHTML('beforeend', html);
        if (typeof lucide !== 'undefined') lucide.createIcons();
        setTimeout(function () { const el = document.getElementById(id); if (el) el.remove(); }, 3000);
    }

    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('exam_search_modal');
        if (searchInput) {
            searchInput.addEventListener('input', function (e) {
                const searchTerm = e.target.value.toLowerCase();
                document.querySelectorAll('.exam-row').forEach(function (row) {
                    const examName = row.getAttribute('data-exam-name');
                    const examId = row.getAttribute('data-exam-id');

                    const match =
                        examName.includes(searchTerm) ||
                        examId.includes(searchTerm);

                    row.style.display = match ? '' : 'none';
                });
            });
        }

        // Enforce required for name, email, phone
        const enforceRequired = function (keyInputId, checkboxId) {
            const keyInput = document.getElementById(keyInputId);
            const checkbox = document.getElementById(checkboxId);
            if (!keyInput || !checkbox) return;

            keyInput.addEventListener('input', function () {
                const isDefault = ['name', 'email', 'phone'].includes(this.value.trim().toLowerCase());
                if (isDefault) {
                    checkbox.checked = true;
                    checkbox.disabled = true;
                } else {
                    checkbox.disabled = false;
                }
            });
        };
        enforceRequired('config_key', 'config_is_required');
        enforceRequired('edit_config_key', 'edit_config_is_required');
    });

    function openConfigModalFromRow(btn) {
        const d = btn.dataset;
        openConfigModal(parseInt(d.examId), parseInt(d.campaignId), d.examName || '', d.campaignName || '', parseInt(d.mappingId || 0));
    }
    function openConfigModal(examId, campaignId, examName, campaignName, campaignExamId) {
        document.getElementById('config_modal_exam_id').value = examId;
        document.getElementById('config_modal_campaign_id').value = campaignId;
        document.getElementById('config_modal_campaign_exam_id').value = campaignExamId || '';
        document.getElementById('config_modal_title').innerHTML = '<i data-lucide="settings" class="w-5 h-5 inline-block mr-2"></i> Cấu hình: ' + (examName || '').replace(/</g, '&lt;') + ' - ' + (campaignName || '').replace(/</g, '&lt;');
        loadConfigs(examId, campaignId, campaignExamId);
        document.getElementById('configModal').classList.remove('hidden');
        document.getElementById('edit-config-card').classList.add('hidden');
        document.getElementById('add-config-card').classList.remove('hidden');
        if (typeof lucide !== 'undefined') lucide.createIcons();
    }
    function closeConfigModal() {
        document.getElementById('configModal').classList.add('hidden');
    }
    document.getElementById('config-modal-backdrop').addEventListener('click', closeConfigModal);

    function loadConfigs(examId, campaignId, campaignExamId) {
        const configsList = document.getElementById('configsList');
        configsList.innerHTML = '<div class="text-center py-6 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">Đang tải...</span></div>';
        const params = new URLSearchParams();
        params.append('exam_id', examId);
        params.append('campaign_id', campaignId);
        if (campaignExamId) {
            params.append('campaign_exam_id', campaignExamId);
        }
        params.append('tenant_connection', '{{ $tenantConnection }}');

        fetch('/api/exam-configs/get-configs?' + params.toString(), {
            method: 'GET',
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
            credentials: 'same-origin'
        }).then(function (r) { return r.ok ? r.json() : Promise.reject(r); }).then(function (data) {
            if (data.success) displayConfigs(data.configs);
            else configsList.innerHTML = '<div class="text-sm text-red-600">Có lỗi xảy ra khi tải cấu hình.</div>';
        }).catch(function () {
            configsList.innerHTML = '<div class="text-sm text-red-600">Có lỗi xảy ra khi tải cấu hình. Vui lòng thử lại.</div>';
        });
    }

    let currentConfigs = [];
    function displayConfigs(configs) {
        currentConfigs = configs;
        const configsList = document.getElementById('configsList');
        if (!configs || configs.length === 0) {
            configsList.innerHTML = '<div class="text-center text-slate-500 py-4">Chưa có cấu hình nào.</div>';
            return;
        }
        let html = '<div class="overflow-x-auto"><table class="min-w-full divide-y divide-slate-200"><thead class="bg-slate-50"><tr><th class="px-3 py-2 text-left text-xs font-semibold text-slate-600 w-12">Order</th><th class="px-3 py-2 text-left text-xs font-semibold text-slate-600">Name</th><th class="px-3 py-2 text-left text-xs font-semibold text-slate-600">Type</th><th class="px-3 py-2 text-left text-xs font-semibold text-slate-600">Placeholder</th><th class="px-3 py-2 text-left text-xs font-semibold text-slate-600">Class</th><th class="px-3 py-2 text-left text-xs font-semibold text-slate-600">Required</th><th class="px-3 py-2 text-right text-xs font-semibold text-slate-600 w-40">Actions</th></tr></thead><tbody id="sortable-configs" class="divide-y divide-slate-200">';
        configs.forEach(function (config, index) {
            const order = config.order || index + 1;
            const isDefaultConfig = ['name', 'email', 'phone'].includes(config.key);
            let actionsHtml = '<button type="button" class="p-1.5 text-green-600 hover:bg-green-50 rounded" onclick="moveUp(' + config.id + ')" title="Lên"><i data-lucide="arrow-up" class="w-4 h-4"></i></button>'
                + '<button type="button" class="p-1.5 text-amber-600 hover:bg-amber-50 rounded" onclick="moveDown(' + config.id + ')" title="Xuống"><i data-lucide="arrow-down" class="w-4 h-4"></i></button>'
                + '<button type="button" class="p-1.5 text-cyan-600 hover:bg-cyan-50 rounded" onclick="editConfig(' + config.id + ')" title="Sửa"><i data-lucide="edit" class="w-4 h-4"></i></button>';
            if (!isDefaultConfig) {
                actionsHtml += '<button type="button" class="p-1.5 text-red-600 hover:bg-red-50 rounded" onclick="deleteConfig(' + config.id + ')"><i data-lucide="trash-2" class="w-4 h-4"></i></button>';
            }
            html += '<tr class="hover:bg-slate-50" data-id="' + config.id + '" data-order="' + order + '">'
                + '<td class="px-3 py-2 text-center text-slate-500"><i data-lucide="grip-vertical" class="w-4 h-4 inline-block"></i></td>'
                + '<td class="px-3 py-2 text-sm font-medium text-slate-900">' + (config.field_name || config.key || '').replace(/</g, '&lt;') + '</td>'
                + '<td class="px-3 py-2 text-sm"><span class="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">' + (config.input_type || 'text') + '</span></td>'
                + '<td class="px-3 py-2 text-sm text-slate-600">' + (config.placeholder || '-').replace(/</g, '&lt;') + '</td>'
                + '<td class="px-3 py-2 text-sm"><code class="text-xs bg-slate-100 px-1 rounded">' + (config.field_class || 'form-control').replace(/</g, '&lt;') + '</code></td>'
                + '<td class="px-3 py-2">' + (config.is_required ? '<span class="px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Required</span>' : '<span class="px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-700">Optional</span>') + '</td>'
                + '<td class="px-3 py-2 text-right"><div class="flex justify-end gap-1">' + actionsHtml + '</div></td>'
                + '</tr>';
        });
        html += '</tbody></table></div>';
        configsList.innerHTML = html;
        if (typeof lucide !== 'undefined') lucide.createIcons();
    }

    function addConfig() {
        var examId = document.getElementById('config_modal_exam_id').value;
        var campaignId = document.getElementById('config_modal_campaign_id').value;
        var campaignExamId = document.getElementById('config_modal_campaign_exam_id').value;
        var inputType = document.getElementById('config_input_type').value;
        var placeholder = document.getElementById('config_placeholder').value;
        var fieldId = document.getElementById('config_field_id').value;
        var fieldName = document.getElementById('config_field_name').value;
        var fieldClass = document.getElementById('config_field_class').value;
        var key = document.getElementById('config_key').value;
        var isRequired = document.getElementById('config_is_required').checked;
        var requiredMessage = document.getElementById('config_required_message').value;
        if (!fieldName || !fieldName.trim()) { alert('Vui lòng nhập Label.'); return; }
        var csrf = document.querySelector('meta[name="csrf-token"]');
        if (!csrf) { showMessage('error', 'CSRF token không tìm thấy.'); return; }
        var body = JSON.stringify({ exam_id: examId, campaign_id: campaignId, campaign_exam_id: campaignExamId, key: key, input_type: inputType, placeholder: placeholder, field_id: fieldId, field_name: fieldName, field_class: fieldClass, value: fieldName, is_required: isRequired ? 1 : 0, required_message: requiredMessage, tenant_connection: '{{ $tenantConnection }}' });
        fetch('/api/exam-configs/store-config', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf.getAttribute('content'), 'Accept': 'application/json' }, credentials: 'same-origin', body: body })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.success) {
                    document.getElementById('config_input_type').value = 'text';
                    document.getElementById('config_placeholder').value = '';
                    document.getElementById('config_field_id').value = '';
                    document.getElementById('config_field_name').value = '';
                    document.getElementById('config_field_class').value = 'form-control';
                    document.getElementById('config_key').value = '';
                    document.getElementById('config_is_required').checked = false;
                    document.getElementById('config_is_required').disabled = false;
                    document.getElementById('config_required_message').value = '';
                    loadConfigs(examId, campaignId, campaignExamId);
                    showMessage('success', data.message || 'Đã thêm cấu hình.');
                } else { showMessage('error', data.message || 'Có lỗi xảy ra.'); }
            })
            .catch(function () { showMessage('error', 'Có lỗi xảy ra. Vui lòng thử lại.'); });
    }

    function editConfig(configId) {
        var config = currentConfigs.find(function (c) { return c.id === configId; });
        if (!config) { showMessage('error', 'Không tìm thấy cấu hình.'); return; }
        document.getElementById('edit_config_id').value = config.id;
        document.getElementById('edit_config_input_type').value = config.input_type || 'text';
        document.getElementById('edit_config_placeholder').value = config.placeholder || '';
        document.getElementById('edit_config_field_id').value = config.field_id || '';
        document.getElementById('edit_config_field_name').value = config.field_name || config.key || '';
        document.getElementById('edit_config_field_class').value = config.field_class || 'form-control';
        document.getElementById('edit_config_key').value = config.key || '';

        var isDefault = ['name', 'email', 'phone'].includes(config.key);
        var reqCheckbox = document.getElementById('edit_config_is_required');
        reqCheckbox.checked = isDefault ? true : (config.is_required ? true : false);
        reqCheckbox.disabled = isDefault;

        document.getElementById('edit_config_required_message').value = config.required_message || '';
        document.getElementById('add-config-card').classList.add('hidden');
        document.getElementById('edit-config-card').classList.remove('hidden');
    }
    function cancelEdit() {
        document.getElementById('edit-config-card').classList.add('hidden');
        document.getElementById('add-config-card').classList.remove('hidden');
        document.getElementById('edit_config_id').value = '';
        document.getElementById('edit_config_is_required').disabled = false;
    }

    function updateConfig() {
        var examId = document.getElementById('config_modal_exam_id').value;
        var campaignId = document.getElementById('config_modal_campaign_id').value;
        var campaignExamId = document.getElementById('config_modal_campaign_exam_id').value;
        var configId = document.getElementById('edit_config_id').value;
        var inputType = document.getElementById('edit_config_input_type').value;
        var placeholder = document.getElementById('edit_config_placeholder').value;
        var fieldId = document.getElementById('edit_config_field_id').value;
        var fieldName = document.getElementById('edit_config_field_name').value;
        var fieldClass = document.getElementById('edit_config_field_class').value;
        var key = document.getElementById('edit_config_key').value;
        var isRequired = document.getElementById('edit_config_is_required').checked;
        var requiredMessage = document.getElementById('edit_config_required_message').value;
        if (!fieldName || !fieldName.trim()) { alert('Vui lòng nhập Label.'); return; }
        var csrf = document.querySelector('meta[name="csrf-token"]');
        if (!csrf) { showMessage('error', 'CSRF token không tìm thấy.'); return; }
        var body = JSON.stringify({ config_id: configId, exam_id: examId, campaign_id: campaignId, campaign_exam_id: campaignExamId, key: key, input_type: inputType, placeholder: placeholder, field_id: fieldId, field_name: fieldName, field_class: fieldClass, value: fieldName, is_required: isRequired ? 1 : 0, required_message: requiredMessage, tenant_connection: '{{ $tenantConnection }}' });
        fetch('/api/exam-configs/update-config', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf.getAttribute('content'), 'Accept': 'application/json' }, credentials: 'same-origin', body: body })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.success) { cancelEdit(); loadConfigs(examId, campaignId, campaignExamId); showMessage('success', data.message || 'Đã cập nhật.'); }
                else { showMessage('error', data.message || 'Có lỗi xảy ra.'); }
            })
            .catch(function () { showMessage('error', 'Có lỗi xảy ra. Vui lòng thử lại.'); });
    }

    function deleteConfig(configId) {
        if (!confirm('Bạn có chắc chắn muốn xóa cấu hình này?')) return;
        var csrf = document.querySelector('meta[name="csrf-token"]');
        if (!csrf) { showMessage('error', 'CSRF token không tìm thấy.'); return; }
        fetch('/api/exam-configs/delete-config', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf.getAttribute('content'), 'Accept': 'application/json' }, credentials: 'same-origin', body: JSON.stringify({ config_id: configId, tenant_connection: '{{ $tenantConnection }}' }) })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.success) { loadConfigs(document.getElementById('config_modal_exam_id').value, document.getElementById('config_modal_campaign_id').value); showMessage('success', data.message || 'Đã xóa.'); }
                else { showMessage('error', data.message || 'Có lỗi xảy ra.'); }
            })
            .catch(function () { showMessage('error', 'Có lỗi xảy ra. Vui lòng thử lại.'); });
    }

    function moveUp(configId) {
        var examId = document.getElementById('config_modal_exam_id').value;
        var campaignId = document.getElementById('config_modal_campaign_id').value;
        var tbody = document.getElementById('sortable-configs');
        var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr'));
        var idx = rows.findIndex(function (r) { return r.dataset.id == configId; });
        if (idx <= 0) { showMessage('error', 'Đã ở vị trí đầu tiên.'); return; }
        tbody.insertBefore(rows[idx], rows[idx - 1]);
        updateConfigOrder(examId, campaignId);
    }
    function moveDown(configId) {
        var examId = document.getElementById('config_modal_exam_id').value;
        var campaignId = document.getElementById('config_modal_campaign_id').value;
        var tbody = document.getElementById('sortable-configs');
        var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr'));
        var idx = rows.findIndex(function (r) { return r.dataset.id == configId; });
        if (idx < 0 || idx >= rows.length - 1) { showMessage('error', 'Đã ở vị trí cuối cùng.'); return; }
        tbody.insertBefore(rows[idx + 1], rows[idx]);
        updateConfigOrder(examId, campaignId);
    }

    function updateConfigOrder(examId, campaignId) {
        var tbody = document.getElementById('sortable-configs');
        if (!tbody) return;
        var rows = tbody.querySelectorAll('tr');
        var orders = Array.prototype.map.call(rows, function (row, i) { return { id: parseInt(row.dataset.id), order: i + 1 }; });
        var csrf = document.querySelector('meta[name="csrf-token"]');
        if (!csrf) { showMessage('error', 'CSRF token không tìm thấy.'); return; }
        fetch('/api/exam-configs/update-order', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf.getAttribute('content'), 'Accept': 'application/json' }, credentials: 'same-origin', body: JSON.stringify({ orders: orders, tenant_connection: '{{ $tenantConnection }}' }) })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.success) { showMessage('success', 'Đã cập nhật thứ tự.'); }
                else { showMessage('error', data.message || 'Có lỗi xảy ra.'); }
            })
            .catch(function () { showMessage('error', 'Có lỗi xảy ra. Vui lòng thử lại.'); });
    }

    function showAlert(type, message) {
        var modalBody = document.querySelector('#configModal .bg-slate-50');
        if (!modalBody) return;
        var div = document.createElement('div');
        div.className = 'mb-4 px-4 py-3 rounded-lg ' + (type === 'success' ? 'bg-green-100 text-green-800' : type === 'danger' ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800');
        div.textContent = message;
        modalBody.insertBefore(div, modalBody.firstChild);
        setTimeout(function () { div.remove(); }, 3000);
    }
    if (typeof lucide !== 'undefined') lucide.createIcons();
</script>
@endsection