@extends('layouts.admin')
@section('title', '國營事業考題')
@section('content')
<div class="max-w-6xl">
    {{-- 統計卡片 --}}
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4">
            <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $syncedCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">已同步科目</div>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4">
            <div class="text-2xl font-bold text-amber-600">{{ $pendingCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">待處理</div>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4">
            <div class="text-2xl font-bold text-red-600">{{ $failedCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">失敗</div>
        </div>
    </div>

    {{-- 頁籤 --}}
    <div class="flex gap-2 mb-6 border-b border-gray-200 dark:border-slate-700 pb-2">
        <button onclick="switchTab('list')" id="tabList" class="tab-btn px-5 py-2.5 rounded-t-lg text-sm font-semibold border-b-2 border-orange-600 text-orange-700 dark:text-orange-400 bg-orange-50 dark:bg-orange-900/20">
            <svg class="w-4 h-4 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            考題清單
        </button>
        <button onclick="switchTab('import')" id="tabImport" class="tab-btn px-5 py-2.5 rounded-t-lg text-sm font-semibold border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700">
            <svg class="w-4 h-4 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
            匯入清單
        </button>
    </div>

    {{-- ====================== TAB 1: 考題清單 ====================== --}}
    <div id="panelList">
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-6">
            <div class="p-5 space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">起始年份</label>
                        <select id="localYearStart" onchange="loadLocalExams()" class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-orange-500">
                            <option value="">不限</option>
                            @for($y = $currentRocYear; $y >= 90; $y--)
                                <option value="{{ $y }}">{{ $y }}（{{ $y + 1911 }}）</option>
                            @endfor
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">結束年份</label>
                        <select id="localYearEnd" onchange="loadLocalExams()" class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-orange-500">
                            <option value="">不限</option>
                            @for($y = $currentRocYear; $y >= 90; $y--)
                                <option value="{{ $y }}">{{ $y }}（{{ $y + 1911 }}）</option>
                            @endfor
                        </select>
                    </div>
                    <div class="md:col-span-5">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試分類</label>
                        <select id="localExam" class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-orange-500">
                            <option value="">全部考試</option>
                        </select>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試名稱</label>
                        <input type="text" id="localExamName" placeholder="例：台電新進員工甄試..."
                               class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-orange-500 placeholder-gray-400">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">類別</label>
                        <input type="text" id="localCategory" placeholder="例：會管、電力..."
                               class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-orange-500 placeholder-gray-400">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">科目</label>
                        <input type="text" id="localKeyword" placeholder="例：電力系統工程..."
                               class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-orange-500 placeholder-gray-400">
                    </div>
                </div>
                <div class="flex gap-3 items-center">
                    <button onclick="doLocalSearch()" class="px-6 py-2.5 bg-gradient-to-r from-orange-600 to-amber-600 text-white rounded-lg text-sm font-semibold hover:shadow-lg hover:scale-[1.02] transition-all whitespace-nowrap">搜尋</button>
                    <button onclick="resetLocalSearch()" class="px-4 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-semibold hover:bg-gray-300 transition-colors whitespace-nowrap">清除</button>
                    <div class="flex items-center gap-1.5 ml-auto">
                        <label class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">每頁</label>
                        <select id="localPerPage" onchange="doLocalSearch()" class="px-2 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm">
                            <option value="20">20</option>
                            <option value="50" selected>50</option>
                            <option value="150">150</option>
                            <option value="200">200</option>
                        </select>
                        <label class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">筆</label>
                    </div>
                </div>
            </div>
        </div>

        {{-- 操作列 --}}
        <div id="localActions" class="hidden flex items-center justify-between mb-4 flex-wrap gap-2">
            <div class="flex items-center gap-3">
                <span id="localResultInfo" class="text-sm text-gray-600 dark:text-gray-400"></span>
                <span id="localSelectedInfo" class="text-sm font-semibold text-orange-600 dark:text-orange-400 hidden"></span>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                <button id="btnSelectAll" onclick="selectAllSearchResults(false)"
                    class="px-3 py-2 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-lg text-xs font-semibold hover:bg-orange-200 transition-colors"
                    title="清除舊選取，改選此搜尋結果">選取所有結果</button>
                <button id="btnAddAll" onclick="selectAllSearchResults(true)"
                    class="px-3 py-2 bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 rounded-lg text-xs font-semibold hover:bg-teal-200 transition-colors"
                    title="保留舊選取，再加入此搜尋結果">＋加入選取</button>
                <button onclick="clearAllSelection()" class="px-3 py-2 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-xs font-semibold hover:bg-gray-300 transition-colors">清除選取</button>
                <input type="text" id="tocLine1" placeholder="目錄標題第一行" value="" class="px-2 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-xs text-gray-700 dark:text-gray-300 w-36">
                <input type="text" id="tocLine2" placeholder="第二行（選填）" value="" class="px-2 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-xs text-gray-700 dark:text-gray-300 w-36">
                <select id="downloadMode" class="px-2 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-xs font-semibold text-gray-700 dark:text-gray-300">
                    <optgroup label="合併下載（含目錄+筆記+頁碼）">
                        <option value="merge|both">合併：試題 + 答案</option>
                        <option value="merge|question">合併：僅試題</option>
                        <option value="merge|answer">合併：僅答案</option>
                    </optgroup>
                    <optgroup label="分科下載">
                        <option value="split|both">分科：試題 + 答案</option>
                        <option value="split|question">分科：僅試題</option>
                        <option value="split|answer">分科：僅答案</option>
                    </optgroup>
                    <optgroup label="原始檔案">
                        <option value="raw|both">原始 PDF：試題 + 答案</option>
                        <option value="raw|question">原始 PDF：僅試題</option>
                        <option value="raw|answer">原始 PDF：僅答案</option>
                    </optgroup>
                </select>
                <button onclick="previewToc()" id="btnDownloadLocal"
                    class="px-4 py-2 bg-gradient-to-r from-orange-600 to-amber-600 text-white rounded-lg text-xs font-semibold hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>合併下載 PDF
                </button>
                <button onclick="deleteLocalSelected()" id="btnDeleteLocal"
                    class="px-4 py-2 bg-gradient-to-r from-red-600 to-rose-600 text-white rounded-lg text-xs font-semibold hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>刪除
                </button>
            </div>
        </div>

        {{-- 表格 --}}
        <div id="localResultsTable" class="hidden bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 dark:bg-slate-800">
                        <tr>
                            <th class="w-10 px-3 py-3 text-center"><input type="checkbox" id="localCheckAll" onchange="toggleLocalSelectAll(this.checked)" class="rounded border-gray-300 text-orange-600 focus:ring-orange-500"></th>
                            <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">年份</th>
                            <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">考試名稱</th>
                            <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">類別</th>
                            <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">科目</th>
                            <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">試題</th>
                            <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">答案</th>
                            <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">操作</th>
                        </tr>
                    </thead>
                    <tbody id="localResultsBody" class="divide-y divide-gray-100 dark:divide-slate-800"></tbody>
                </table>
            </div>
            <div id="localPagination" class="p-4 flex justify-center gap-2"></div>
        </div>

        <div id="localHint" class="text-center py-16">
            <svg class="w-16 h-16 mx-auto text-orange-200 dark:text-orange-900 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            <p class="text-gray-500 dark:text-gray-400 text-lg font-semibold">請設定篩選條件後點擊「搜尋」</p>
            <p class="text-gray-400 dark:text-gray-500 text-sm mt-1">或直接點搜尋查看全部已匯入的科目</p>
        </div>
        <div id="localEmpty" class="hidden text-center py-16">
            <svg class="w-16 h-16 mx-auto text-gray-200 dark:text-gray-700 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-gray-400 dark:text-gray-500 text-lg font-semibold">未找到符合條件的科目</p>
            <p class="text-gray-400 dark:text-gray-500 text-sm mt-1">請調整條件或到「匯入清單」頁籤上傳 HTML 檔案</p>
        </div>
    </div>

    {{-- ====================== TOC 預覽 Modal ====================== --}}
    <style>
        .toc-drag-over { outline: 2px dashed #f97316; outline-offset: -2px; background-color: rgba(251,146,60,0.08) !important; }
        .toc-dragging  { opacity: 0.35; }
        .toc-item-row:hover .toc-item-remove { opacity: 1; }
        .toc-item-remove { opacity: 0; transition: opacity .15s; }
    </style>
    <div id="tocPreviewModal" class="hidden fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4">
        <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[85vh] flex flex-col">
            <div class="p-5 border-b border-gray-100 dark:border-slate-800 flex items-start justify-between gap-4">
                <div>
                    <h2 class="text-lg font-bold text-gray-900 dark:text-white">確認目錄排序</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">拖曳 <span class="font-mono">⠿</span> 排序・點擊科目名稱可編輯・✕ 移除・年份可拖到其他科目</p>
                </div>
                <button onclick="closeTocModal()" class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-800 text-gray-400 shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <div class="flex-1 overflow-y-auto p-5">
                <div id="tocGroupList" class="space-y-2"></div>
            </div>
            <div class="p-5 border-t border-gray-100 dark:border-slate-800 flex justify-end gap-3">
                <button onclick="closeTocModal()" class="px-5 py-2 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-semibold hover:bg-gray-300 transition-colors">取消</button>
                <button onclick="confirmGenerate()" class="px-6 py-2 bg-gradient-to-r from-orange-600 to-amber-600 text-white rounded-lg text-sm font-semibold hover:shadow-lg transition-all">
                    <svg class="w-4 h-4 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                    確認產生 PDF
                </button>
            </div>
        </div>
    </div>

    {{-- ====================== TAB 2: 匯入清單 ====================== --}}
    <div id="panelImport" class="hidden">
        {{-- 台電 --}}
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-4">
            <div class="bg-gradient-to-r from-orange-600 to-amber-600 p-5">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center">
                        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-white">匯入台灣電力公司 HTML 檔案</h3>
                        <p class="text-orange-100 text-sm">從台電歷年試題解答頁面另存 HTML，解析匯入考題清單</p>
                    </div>
                </div>
            </div>
            <div class="p-6 space-y-5">
                <div class="bg-orange-50 dark:bg-orange-900/20 rounded-lg p-4 text-sm text-orange-800 dark:text-orange-300">
                    <p class="font-semibold mb-2">操作步驟：</p>
                    <ol class="list-decimal list-inside space-y-1 text-orange-700 dark:text-orange-400">
                        <li>前往 <a href="https://www.taipower.com.tw/2289/2544/2554/2556/" target="_blank" class="underline font-semibold">台電歷年新進員工試題解答</a></li>
                        <li>在瀏覽器按 <kbd class="px-1.5 py-0.5 bg-white dark:bg-slate-800 rounded text-xs font-mono border">Ctrl+S</kbd> 儲存整個頁面為 HTML 檔案</li>
                        <li>回到這裡上傳該 HTML 檔案</li>
                    </ol>
                    <p class="mt-2 text-xs text-orange-600 dark:text-orange-500">重複的科目會自動跳過，可多次匯入（例如不同年份分批儲存的頁面）。</p>
                </div>
                <div class="flex items-center gap-4">
                    <label class="flex-1">
                        <input type="file" id="htmlFileInput" accept=".html,.htm"
                               onchange="document.getElementById('btnUploadHtml').disabled = !this.files.length; document.getElementById('htmlUploadResult').classList.add('hidden');"
                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-6 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 dark:file:bg-orange-900/30 dark:file:text-orange-400 cursor-pointer">
                    </label>
                    <button onclick="uploadHtmlFile()" id="btnUploadHtml"
                            class="px-6 py-2.5 bg-gradient-to-r from-orange-600 to-amber-600 text-white rounded-lg text-sm font-semibold hover:shadow-lg hover:scale-[1.02] transition-all disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap" disabled>
                        解析並匯入
                    </button>
                    <div id="htmlUploadLoading" class="hidden flex items-center gap-2 text-sm text-gray-500 whitespace-nowrap">
                        <svg class="animate-spin h-5 w-5 text-orange-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                        解析中...
                    </div>
                </div>
                <div id="htmlUploadResult" class="hidden"></div>
            </div>
        </div>
    </div>
</div>

<script>
const CSRF_TOKEN = '{{ csrf_token() }}';
const selectedIds = new Set();

function switchTab(tab) {
    document.getElementById('panelList').classList.toggle('hidden', tab !== 'list');
    document.getElementById('panelImport').classList.toggle('hidden', tab !== 'import');
    const active = 'tab-btn px-5 py-2.5 rounded-t-lg text-sm font-semibold border-b-2 border-orange-600 text-orange-700 dark:text-orange-400 bg-orange-50 dark:bg-orange-900/20';
    const inactive = 'tab-btn px-5 py-2.5 rounded-t-lg text-sm font-semibold border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700';
    document.getElementById('tabList').className = tab === 'list' ? active : inactive;
    document.getElementById('tabImport').className = tab === 'import' ? active : inactive;
}

// ══ HTML 上傳 ══
async function uploadHtmlFile() {
    const input = document.getElementById('htmlFileInput');
    if (!input.files.length) return;
    document.getElementById('btnUploadHtml').disabled = true;
    document.getElementById('htmlUploadLoading').classList.remove('hidden');
    document.getElementById('htmlUploadResult').classList.add('hidden');

    const formData = new FormData();
    formData.append('html_file', input.files[0]);
    formData.append('_token', CSRF_TOKEN);

    try {
        const res = await fetch('{{ route("admin.soe.import-html") }}', { method: 'POST', body: formData });
        const data = await res.json();
        const div = document.getElementById('htmlUploadResult');
        div.classList.remove('hidden');
        if (data.success) {
            div.innerHTML = `<div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4 text-sm text-green-800 dark:text-green-300">
                <p class="font-semibold">匯入成功</p>
                <p>${data.message}</p>
                <p class="text-xs mt-1 text-green-600">新增 ${data.synced} 筆，跳過 ${data.skipped} 筆重複</p>
            </div>`;
            doLocalSearch();
        } else {
            div.innerHTML = `<div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4 text-sm text-red-800 dark:text-red-300"><p class="font-semibold">匯入失敗</p><p>${data.message || '未知錯誤'}</p></div>`;
        }
    } catch (e) {
        document.getElementById('htmlUploadResult').innerHTML = `<div class="bg-red-50 rounded-lg p-3 text-sm text-red-700">錯誤：${e.message}</div>`;
        document.getElementById('htmlUploadResult').classList.remove('hidden');
    } finally {
        document.getElementById('btnUploadHtml').disabled = false;
        document.getElementById('htmlUploadLoading').classList.add('hidden');
    }
}

// ══ 年份/考試下拉 ══
// 靜態年份已由 Blade 預填；此函式僅在 DB 有資料時縮減為「有資料的年份」
async function loadLocalYears() {
    const sel1 = document.getElementById('localYearStart');
    const sel2 = document.getElementById('localYearEnd');
    const curVal1 = sel1.value, curVal2 = sel2.value;
    try {
        const res = await fetch('{{ route("admin.soe.local-years") }}', { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        const years = data.years || [];
        if (years.length === 0) return; // 無資料時保留 Blade 靜態選項
        sel1.innerHTML = '<option value="">不限</option>';
        sel2.innerHTML = '<option value="">不限</option>';
        years.forEach(y => {
            sel1.innerHTML += `<option value="${y.roc_year}"${curVal1 == y.roc_year ? ' selected' : ''}>${y.roc_year}（${y.roc_year + 1911}）</option>`;
            sel2.innerHTML += `<option value="${y.roc_year}"${curVal2 == y.roc_year ? ' selected' : ''}>${y.roc_year}（${y.roc_year + 1911}）</option>`;
        });
    } catch (e) {}
}

async function loadLocalExams() {
    const sel = document.getElementById('localExam');
    const params = new URLSearchParams();
    if (document.getElementById('localYearStart').value) params.set('roc_year_start', document.getElementById('localYearStart').value);
    if (document.getElementById('localYearEnd').value)   params.set('roc_year_end', document.getElementById('localYearEnd').value);
    sel.innerHTML = '<option value="">全部考試</option>';
    try {
        const res = await fetch(`{{ route("admin.soe.local-exams") }}?${params}`, { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        (data.exams || []).forEach(e => {
            const opt = document.createElement('option');
            opt.value = e.id;
            opt.textContent = `[${e.roc_year}] ${e.exam_name}（${e.subject_count}）`;
            sel.appendChild(opt);
        });
    } catch (e) {}
}

function resetLocalSearch() {
    document.getElementById('localYearStart').value = '';
    document.getElementById('localYearEnd').value = '';
    document.getElementById('localExam').innerHTML = '<option value="">全部考試</option>';
    document.getElementById('localExamName').value = '';
    document.getElementById('localCategory').value = '';
    document.getElementById('localKeyword').value = '';
    loadLocalExams();
    doLocalSearch();
}

async function doLocalSearch(page = 1) {
    const params = new URLSearchParams({ page, per_page: document.getElementById('localPerPage').value });
    const fields = {
        roc_year_start: 'localYearStart', roc_year_end: 'localYearEnd',
        soe_exam_id: 'localExam', exam_name: 'localExamName',
        category: 'localCategory', keyword: 'localKeyword',
    };
    Object.entries(fields).forEach(([k, id]) => {
        const v = document.getElementById(id)?.value;
        if (v) params.set(k, v);
    });
    try {
        const res = await fetch(`{{ route("admin.soe.local-search") }}?${params}`, { headers: { 'Accept': 'application/json' } });
        renderLocalResults(await res.json());
    } catch (e) { alert('搜尋失敗：' + e.message); }
}

function renderLocalResults(data) {
    const items = data.data || [];
    const tbody = document.getElementById('localResultsBody');
    const table = document.getElementById('localResultsTable');
    const actions = document.getElementById('localActions');
    const empty = document.getElementById('localEmpty');
    const hint = document.getElementById('localHint');
    hint.classList.add('hidden');

    if (!items.length && (!data.total || data.total === 0)) {
        table.classList.add('hidden'); actions.classList.add('hidden');
        empty.classList.remove('hidden'); return;
    }
    empty.classList.add('hidden'); table.classList.remove('hidden'); actions.classList.remove('hidden');
    document.getElementById('localResultInfo').textContent = `共 ${data.total} 筆（第 ${data.current_page}/${data.last_page} 頁）`;

    const btnSA = document.getElementById('btnSelectAll');
    if (btnSA) btnSA.textContent = `選取所有 ${data.total} 筆`;
    const btnAA = document.getElementById('btnAddAll');
    if (btnAA) btnAA.textContent = `＋加入 ${data.total} 筆`;

    tbody.innerHTML = '';
    items.forEach(item => {
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors';
        const checked = selectedIds.has(item.id) ? 'checked' : '';
        tr.innerHTML = `
            <td class="px-3 py-2.5 text-center"><input type="checkbox" data-id="${item.id}" ${checked} onchange="onCheckChange(this)" class="local-check rounded border-gray-300 text-orange-600 focus:ring-orange-500"></td>
            <td class="px-4 py-2.5 text-xs text-gray-500">${item.soe_exam?.roc_year || ''}</td>
            <td class="px-4 py-2.5 text-xs text-gray-900 dark:text-white">${escapeHtml(item.soe_exam?.exam_name || '')}</td>
            <td class="px-4 py-2.5 text-xs text-gray-600 dark:text-gray-400">${escapeHtml(item.category_name)}</td>
            <td class="px-4 py-2.5 text-xs font-medium text-gray-900 dark:text-white">${escapeHtml(item.subject_name)}</td>
            <td class="px-4 py-2.5 text-center">${item.question_url ? '<span class="inline-block w-2 h-2 rounded-full bg-blue-500" title="有試題"></span>' : '<span class="text-gray-300">-</span>'}</td>
            <td class="px-4 py-2.5 text-center">${item.answer_url ? '<span class="inline-block w-2 h-2 rounded-full bg-green-500" title="有答案"></span>' : '<span class="text-gray-300">-</span>'}</td>
            <td class="px-4 py-2.5 text-center">
                <button onclick="deleteSingle(${item.id})" class="px-2 py-1 bg-red-100 text-red-600 rounded text-xs font-semibold hover:bg-red-200">刪除</button>
            </td>
        `;
        tbody.appendChild(tr);
    });

    const pag = document.getElementById('localPagination');
    pag.innerHTML = '';
    if (data.last_page > 1) {
        for (let p = 1; p <= data.last_page; p++) {
            const btn = document.createElement('button');
            btn.textContent = p;
            btn.className = `px-3 py-1 rounded text-xs font-semibold ${p === data.current_page ? 'bg-orange-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}`;
            btn.onclick = () => doLocalSearch(p);
            pag.appendChild(btn);
        }
    }
}

// ══ 選取 ══
function onCheckChange(checkbox) {
    const id = parseInt(checkbox.dataset.id);
    checkbox.checked ? selectedIds.add(id) : selectedIds.delete(id);
    updateLocalCount();
}

function toggleLocalSelectAll(checked) {
    document.querySelectorAll('.local-check').forEach(c => {
        c.checked = checked;
        const id = parseInt(c.dataset.id);
        checked ? selectedIds.add(id) : selectedIds.delete(id);
    });
    updateLocalCount();
}

function clearAllSelection() {
    selectedIds.clear();
    document.querySelectorAll('.local-check').forEach(c => c.checked = false);
    const ca = document.getElementById('localCheckAll');
    if (ca) { ca.checked = false; ca.indeterminate = false; }
    updateLocalCount();
}

async function selectAllSearchResults(addMode = false) {
    const btn = document.getElementById(addMode ? 'btnAddAll' : 'btnSelectAll');
    const origText = btn.textContent;
    btn.disabled = true; btn.textContent = '讀取中...';
    const params = new URLSearchParams({ ids_only: '1' });
    const fields = {
        roc_year_start: 'localYearStart', roc_year_end: 'localYearEnd',
        soe_exam_id: 'localExam', exam_name: 'localExamName',
        category: 'localCategory', keyword: 'localKeyword',
    };
    Object.entries(fields).forEach(([k, id]) => {
        const v = document.getElementById(id)?.value;
        if (v) params.set(k, v);
    });
    try {
        const res = await fetch(`{{ route("admin.soe.local-search") }}?${params}`, { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        const ids = data.ids || [];
        if (!addMode) selectedIds.clear();
        ids.forEach(id => selectedIds.add(id));
        document.querySelectorAll('.local-check').forEach(c => {
            c.checked = selectedIds.has(parseInt(c.dataset.id));
        });
        updateLocalCount();
        btn.textContent = addMode ? `＋已加入 ${ids.length} 筆` : `已選 ${ids.length} 筆`;
    } catch (e) {
        btn.textContent = origText;
    } finally {
        btn.disabled = false;
    }
}

function updateLocalCount() {
    const count = selectedIds.size;
    const info = document.getElementById('localSelectedInfo');
    info.textContent = count > 0 ? `已選取 ${count} 筆` : '';
    info.classList.toggle('hidden', count === 0);
    document.getElementById('btnDownloadLocal').disabled = count === 0;
    document.getElementById('btnDeleteLocal').disabled = count === 0;
}

// ══ TOC 預覽 ══
let tocGroups = [];
let tocDownloadType = 'both';
let _dragSrc = null;

async function previewToc() {
    if (selectedIds.size === 0) return;
    const [mode, type] = (document.getElementById('downloadMode').value || 'merge|both').split('|');
    tocDownloadType = type;
    if (mode !== 'merge') { await doActualDownload([...selectedIds], type, mode); return; }

    const btn = document.getElementById('btnDownloadLocal');
    const origHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<svg class="w-3.5 h-3.5 inline animate-spin -mt-0.5 mr-1" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> 載入目錄...';
    try {
        const res = await fetch('{{ route("admin.soe.toc-preview") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body: JSON.stringify({ subject_ids: [...selectedIds], type }),
        });
        const data = await res.json();
        if (!data.groups) throw new Error(data.error || '無法取得目錄資料');
        tocGroups = data.groups;
        renderTocModal();
        document.getElementById('tocPreviewModal').classList.remove('hidden');
    } catch (e) { alert('載入目錄失敗：' + e.message); }
    finally { btn.disabled = false; btn.innerHTML = origHtml; }
}

function renderTocModal() {
    const container = document.getElementById('tocGroupList');
    const scrollTop = container.scrollTop;
    container.innerHTML = '';

    tocGroups.forEach((group, gi) => {
        const div = document.createElement('div');
        div.className = 'border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden';

        const isEditing = !!group._editing;
        const nameEl = isEditing
            ? `<input id="tgi-${gi}" value="${escapeAttr(group.subject_name)}"
                    onblur="saveGName(${gi})"
                    onkeydown="if(event.key==='Enter')saveGName(${gi});else if(event.key==='Escape'){tocGroups[${gi}]._editing=false;renderTocModal();}"
                    class="flex-1 min-w-0 px-2 py-0.5 text-sm border border-orange-300 rounded bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-200 outline-none focus:ring-1 focus:ring-orange-400">`
            : `<span onclick="editGName(${gi})" title="點擊編輯科目名稱" class="font-semibold text-sm text-gray-800 dark:text-gray-200 flex-1 min-w-0 truncate cursor-text hover:text-orange-600 transition-colors">${escapeHtml(group.subject_name)}</span>`;

        div.innerHTML = `
            <div draggable="true"
                 ondragstart="tocDragStart(event,'group',${gi})"
                 ondragend="tocDragEnd(event)"
                 ondragover="tocDragOver(event)"
                 ondragleave="tocDragLeave(event)"
                 ondrop="tocDropGroup(event,${gi})"
                 class="flex items-center bg-orange-50 dark:bg-orange-900/20 px-3 py-2 gap-2 select-none">
                <span class="text-lg leading-none text-gray-300 hover:text-gray-500 cursor-grab shrink-0" title="拖曳排序">⠿</span>
                <div class="flex gap-1 shrink-0">
                    <button onclick="moveTocGroup(${gi},-1)" ${gi===0?'disabled':''} class="w-6 h-6 flex items-center justify-center text-xs bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed">▲</button>
                    <button onclick="moveTocGroup(${gi},1)" ${gi===tocGroups.length-1?'disabled':''} class="w-6 h-6 flex items-center justify-center text-xs bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed">▼</button>
                </div>
                ${nameEl}
                <span class="text-xs text-gray-400 shrink-0">${group.items.length}年</span>
                <button onclick="removeGroup(${gi})" title="移除此科目群組" class="shrink-0 w-6 h-6 flex items-center justify-center text-gray-300 hover:text-red-500 hover:bg-red-50 rounded transition-colors text-xs">✕</button>
            </div>
            <div ondragover="tocDragOver(event)"
                 ondragleave="tocDragLeave(event)"
                 ondrop="tocDropGroup(event,${gi})"
                 class="divide-y divide-gray-100 dark:divide-slate-800 min-h-[6px]">
                ${group.items.map((item, ii) => `
                    <div draggable="true"
                         ondragstart="tocDragStart(event,'item',${gi},${ii})"
                         ondragend="tocDragEnd(event)"
                         ondragover="tocDragOver(event)"
                         ondragleave="tocDragLeave(event)"
                         ondrop="tocDropItem(event,${gi},${ii})"
                         class="toc-item-row flex items-center px-3 py-1.5 gap-2 bg-white dark:bg-slate-900 select-none">
                        <span class="text-lg leading-none text-gray-300 hover:text-gray-500 cursor-grab shrink-0 pl-4" title="拖曳（可跨科目）">⠿</span>
                        <div class="flex gap-1 shrink-0">
                            <button onclick="moveTocItem(${gi},${ii},-1)" ${ii===0?'disabled':''} class="w-5 h-5 flex items-center justify-center text-xs bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed">▲</button>
                            <button onclick="moveTocItem(${gi},${ii},1)" ${ii===group.items.length-1?'disabled':''} class="w-5 h-5 flex items-center justify-center text-xs bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed">▼</button>
                        </div>
                        <span class="text-sm text-gray-700 dark:text-gray-300 font-medium w-14">${item.year}年</span>
                        ${item.category ? `<span class="text-xs text-gray-400">${escapeHtml(item.category)}</span>` : ''}
                        <button onclick="removeItem(${gi},${ii})" title="移除此年份" class="toc-item-remove ml-auto shrink-0 w-5 h-5 flex items-center justify-center text-gray-300 hover:text-red-500 hover:bg-red-50 rounded text-xs">✕</button>
                    </div>
                `).join('')}
            </div>`;
        container.appendChild(div);
        if (isEditing) setTimeout(() => { const el = document.getElementById(`tgi-${gi}`); if (el) { el.focus(); el.select(); } }, 10);
    });
    container.scrollTop = scrollTop;
}

// ── 編輯科目名稱 ──
function editGName(gi) { tocGroups[gi]._editing = true; renderTocModal(); }
function saveGName(gi) {
    const input = document.getElementById(`tgi-${gi}`);
    if (input) { const v = input.value.trim(); if (v) tocGroups[gi].subject_name = v; }
    delete tocGroups[gi]._editing;
    renderTocModal();
}

// ── 移除 ──
function removeGroup(gi) { if (confirm(`移除「${tocGroups[gi].subject_name}」及其所有年份？`)) { tocGroups.splice(gi, 1); renderTocModal(); } }
function removeItem(gi, ii) {
    tocGroups[gi].items.splice(ii, 1);
    if (tocGroups[gi].items.length === 0) tocGroups.splice(gi, 1);
    renderTocModal();
}

// ── 上下移動 ──
function moveTocGroup(gi, dir) {
    const ni = gi + dir;
    if (ni < 0 || ni >= tocGroups.length) return;
    [tocGroups[gi], tocGroups[ni]] = [tocGroups[ni], tocGroups[gi]];
    renderTocModal();
}
function moveTocItem(gi, ii, dir) {
    const ni = ii + dir;
    if (ni < 0 || ni >= tocGroups[gi].items.length) return;
    [tocGroups[gi].items[ii], tocGroups[gi].items[ni]] = [tocGroups[gi].items[ni], tocGroups[gi].items[ii]];
    renderTocModal();
}

// ── Drag & Drop ──
function tocDragStart(event, type, gi, ii) {
    _dragSrc = { type, gi, ii: ii ?? null };
    event.dataTransfer.effectAllowed = 'move';
    event.dataTransfer.setData('text/plain', '');
    setTimeout(() => event.target.classList.add('toc-dragging'), 0);
}
function tocDragEnd(event) {
    event.target.classList.remove('toc-dragging');
    document.querySelectorAll('.toc-drag-over').forEach(el => el.classList.remove('toc-drag-over'));
    _dragSrc = null;
}
function tocDragOver(event) {
    event.preventDefault();
    event.stopPropagation();
    event.dataTransfer.dropEffect = 'move';
    event.currentTarget.classList.add('toc-drag-over');
}
function tocDragLeave(event) {
    event.currentTarget.classList.remove('toc-drag-over');
}
function tocDropGroup(event, targetGi) {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.classList.remove('toc-drag-over');
    if (!_dragSrc) return;
    if (_dragSrc.type === 'group') {
        if (_dragSrc.gi === targetGi) return;
        const [moved] = tocGroups.splice(_dragSrc.gi, 1);
        tocGroups.splice(_dragSrc.gi < targetGi ? targetGi - 1 : targetGi, 0, moved);
    } else {
        // item dropped onto group header or group body → move to end of that group
        if (_dragSrc.gi === targetGi) return;
        const [moved] = tocGroups[_dragSrc.gi].items.splice(_dragSrc.ii, 1);
        tocGroups[targetGi].items.push(moved);
        if (tocGroups[_dragSrc.gi].items.length === 0) tocGroups.splice(_dragSrc.gi, 1);
    }
    _dragSrc = null;
    renderTocModal();
}
function tocDropItem(event, targetGi, targetIi) {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.classList.remove('toc-drag-over');
    if (!_dragSrc || _dragSrc.type !== 'item') return;
    const { gi: srcGi, ii: srcIi } = _dragSrc;
    if (srcGi === targetGi && srcIi === targetIi) return;
    const [moved] = tocGroups[srcGi].items.splice(srcIi, 1);
    if (srcGi === targetGi) {
        tocGroups[targetGi].items.splice(srcIi < targetIi ? targetIi - 1 : targetIi, 0, moved);
    } else {
        tocGroups[targetGi].items.splice(targetIi, 0, moved);
        if (tocGroups[srcGi].items.length === 0) tocGroups.splice(srcGi, 1);
    }
    _dragSrc = null;
    renderTocModal();
}

function closeTocModal() {
    document.getElementById('tocPreviewModal').classList.add('hidden');
}
async function confirmGenerate() {
    const ordered = [];
    tocGroups.forEach(g => g.items.forEach(item => ordered.push(item.subject_id)));
    closeTocModal();
    await doActualDownload([...selectedIds], tocDownloadType, 'merge', ordered);
}

async function doActualDownload(subject_ids, type, mode, ordered_subject_ids = null) {
    const btn = document.getElementById('btnDownloadLocal');
    const origHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<svg class="w-3.5 h-3.5 inline animate-spin -mt-0.5 mr-1" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>下載中...';
    try {
        const body = {
            subject_ids, type, mode,
            toc_line1: document.getElementById('tocLine1').value,
            toc_line2: document.getElementById('tocLine2').value,
        };
        if (ordered_subject_ids) body.ordered_subject_ids = ordered_subject_ids;
        const res = await fetch('{{ route("admin.soe.local-batch-download") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json, application/pdf, application/zip' },
            body: JSON.stringify(body),
        });
        if (!res.ok) { const err = await res.json(); alert('錯誤：' + (err.error || '未知錯誤')); return; }
        const ct = res.headers.get('Content-Type') || '';
        let fn = ct.includes('zip') ? '國營事業歷年考題.zip' : '國營事業歷年考題.pdf';
        const cd = res.headers.get('Content-Disposition') || '';
        const m = cd.match(/filename\*?=(?:UTF-8'')?["']?([^"';\r\n]+)["']?/i);
        if (m) fn = decodeURIComponent(m[1]);
        const blob = await res.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a'); a.href = url; a.download = fn; a.click();
        URL.revokeObjectURL(url);
    } catch (e) { alert('下載失敗：' + e.message); }
    finally { btn.disabled = false; btn.innerHTML = origHtml; }
}

// ══ 刪除 ══
async function deleteSingle(id) {
    if (!confirm('確定刪除此科目？')) return;
    try {
        const res = await fetch('{{ route("admin.soe.delete-subjects") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body: JSON.stringify({ subject_ids: [id] }),
        });
        const data = await res.json();
        if (data.success) { selectedIds.delete(id); updateLocalCount(); doLocalSearch(); }
    } catch (e) { alert('刪除失敗'); }
}

async function deleteLocalSelected() {
    if (selectedIds.size === 0 || !confirm(`確定刪除選取的 ${selectedIds.size} 筆科目？`)) return;
    try {
        const res = await fetch('{{ route("admin.soe.delete-subjects") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body: JSON.stringify({ subject_ids: [...selectedIds] }),
        });
        const data = await res.json();
        if (data.success) { selectedIds.clear(); updateLocalCount(); doLocalSearch(); }
    } catch (e) { alert('刪除失敗'); }
}

function escapeHtml(s) { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
function escapeAttr(s) { return (s || '').replace(/"/g, '&quot;'); }

// 初始化
loadLocalYears().then(() => loadLocalExams());
doLocalSearch();
</script>
@endsection