部@extends('layouts.app')

@section('title', '匯入題目')

@section('content')
<div class="max-w-4xl mx-auto" x-data="importPage()">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">匯入題目</h1>

    <!-- Tab Navigation -->
    <div class="flex border-b border-gray-200 dark:border-slate-700 mb-8">
        <button @click="activeTab = 'exam_pdf'" :class="activeTab === 'exam_pdf' ? 'border-red-500 text-red-600 dark:text-red-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                class="flex items-center gap-2 px-6 py-3 border-b-2 font-semibold transition-colors">
            <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            國考 PDF
        </button>
        <button @click="activeTab = 'pdf'" :class="activeTab === 'pdf' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                class="flex items-center gap-2 px-6 py-3 border-b-2 font-semibold transition-colors">
            <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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
            PDF 匯入
        </button>
        <button @click="activeTab = 'excel'" :class="activeTab === 'excel' ? 'border-green-500 text-green-600 dark:text-green-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                class="flex items-center gap-2 px-6 py-3 border-b-2 font-semibold transition-colors">
            <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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            Excel / CSV
        </button>
        <button @click="activeTab = 'manual'" :class="activeTab === 'manual' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                class="flex items-center gap-2 px-6 py-3 border-b-2 font-semibold transition-colors">
            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            手動輸入
        </button>
    </div>

    <!-- 共用：考試設定區塊 -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 mb-6">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">匯入目標</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="md:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">匯入到</label>
                <select x-model="examMode" class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
                    <option value="existing">現有考試</option>
                    <option value="new">建立新考試</option>
                </select>
            </div>
            <div x-show="examMode === 'existing'" class="md:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">選擇考試</label>
                <select x-model="examId" class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
                    <option value="">-- 請選擇 --</option>
                    @foreach($exams as $exam)
                        <option value="{{ $exam->id }}">{{ $exam->title }}</option>
                    @endforeach
                </select>
                <p x-show="examId" class="mt-1 text-xs text-gray-400">題目將直接匯入到此考試，考試資訊維持原設定</p>
            </div>

            <!-- 以下欄位只在「建立新考試」時顯示 -->
            <div x-show="examMode === 'new'" class="md:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">考試名稱 *</label>
                <input type="text" x-model="newExamTitle" placeholder="請輸入考試名稱" class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
            </div>
            <div x-show="examMode === 'new'">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">考試分類</label>
                <select x-model="categoryId" class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
                    <option value="">-- 不指定 --</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @if($cat->children)
                            @foreach($cat->children as $child)
                                <option value="{{ $child->id }}">&nbsp;&nbsp;{{ $child->name }}</option>
                            @endforeach
                        @endif
                    @endforeach
                </select>
            </div>
            <div x-show="examMode === 'new'">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">考科</label>
                <select x-model="subjectId" class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
                    <option value="">-- 不指定 --</option>
                    @foreach($subjects as $subject)
                        <option value="{{ $subject->id }}">{{ $subject->name }}</option>
                    @endforeach
                </select>
            </div>
            <div x-show="examMode === 'new'">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">公開範圍</label>
                <select x-model="visibility" class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
                    <option value="private">僅自己</option>
                    <option value="class">班級內</option>
                    <option value="school">學校內</option>
                    <option value="public">公開</option>
                </select>
            </div>
            <div x-show="examMode === 'new' && (visibility === 'school' || visibility === 'class')">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">學校</label>
                <select x-model="schoolId" class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
                    <option value="">-- 請選擇 --</option>
                    @foreach($schools as $school)
                        <option value="{{ $school->id }}">{{ $school->name }}</option>
                    @endforeach
                </select>
            </div>
            <div x-show="examMode === 'new' && visibility === 'class'" class="md:col-span-2">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">班級</label>
                <select x-model="classId" class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
                    <option value="">-- 請選擇 --</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}">{{ $class->grade->name }} {{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <!-- 國考 PDF 匯入（題目 + 答案） -->
    <div x-show="activeTab === 'exam_pdf'" x-transition>
        <form action="{{ route('import.exam_pdf') }}" method="POST" enctype="multipart/form-data" @submit="injectCommonFields($event)">
            @csrf
            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">國考格式 PDF 匯入</h3>
                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
                    <p class="text-sm font-semibold text-red-700 dark:text-red-300 mb-2">使用說明</p>
                    <div class="text-xs text-red-600 dark:text-red-400 space-y-1">
                        <p>1. 上傳<strong>題目 PDF</strong>：國考試題格式（1.題目 A.選項 B.選項 C.選項 D.選項）</p>
                        <p>2. 上傳<strong>答案 PDF</strong>：標準答案對照表（題號/答案表格）</p>
                        <p>3. 系統將自動解析題目與選項，並對應正確答案匯入</p>
                    </div>
                </div>

                <!-- 題目 PDF -->
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">題目 PDF</label>
                    <div class="border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-xl p-6 text-center hover:border-red-400 transition-colors"
                         x-data="{ dragging: false, fileName: '' }"
                         @dragover.prevent="dragging = true" @dragleave.prevent="dragging = false"
                         @drop.prevent="dragging = false; $refs.questionPdfInput.files = $event.dataTransfer.files; fileName = $event.dataTransfer.files[0]?.name || ''"
                         :class="dragging ? 'border-red-500 bg-red-50 dark:bg-red-900/20' : ''">
                        <svg class="w-10 h-10 mx-auto text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                        <p class="text-gray-600 dark:text-gray-400 mb-2 text-sm">拖曳題目 PDF 到此處，或</p>
                        <label class="inline-block px-4 py-2 bg-red-600 text-white rounded-lg cursor-pointer hover:bg-red-700 transition-colors text-sm">
                            選擇題目檔案
                            <input type="file" name="question_pdf" accept=".pdf" class="hidden" x-ref="questionPdfInput" @change="fileName = $event.target.files[0]?.name || ''">
                        </label>
                        <p x-show="fileName" x-text="'已選擇: ' + fileName" class="mt-2 text-sm text-green-600 dark:text-green-400 font-medium"></p>
                    </div>
                    @error('question_pdf')<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
                </div>

                <!-- 答案 PDF -->
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">答案 PDF</label>
                    <div class="border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-xl p-6 text-center hover:border-orange-400 transition-colors"
                         x-data="{ dragging: false, fileName: '' }"
                         @dragover.prevent="dragging = true" @dragleave.prevent="dragging = false"
                         @drop.prevent="dragging = false; $refs.answerPdfInput.files = $event.dataTransfer.files; fileName = $event.dataTransfer.files[0]?.name || ''"
                         :class="dragging ? 'border-orange-500 bg-orange-50 dark:bg-orange-900/20' : ''">
                        <svg class="w-10 h-10 mx-auto text-gray-400 mb-3" 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 2m-6 9l2 2 4-4"></path></svg>
                        <p class="text-gray-600 dark:text-gray-400 mb-2 text-sm">拖曳答案 PDF 到此處，或</p>
                        <label class="inline-block px-4 py-2 bg-orange-600 text-white rounded-lg cursor-pointer hover:bg-orange-700 transition-colors text-sm">
                            選擇答案檔案
                            <input type="file" name="answer_pdf" accept=".pdf" class="hidden" x-ref="answerPdfInput" @change="fileName = $event.target.files[0]?.name || ''">
                        </label>
                        <p x-show="fileName" x-text="'已選擇: ' + fileName" class="mt-2 text-sm text-green-600 dark:text-green-400 font-medium"></p>
                    </div>
                    @error('answer_pdf')<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
                </div>

                <button type="submit" class="mt-4 w-full py-3 bg-gradient-to-r from-red-600 to-orange-600 text-white font-semibold rounded-lg hover:shadow-xl hover:scale-[1.02] transition-all">開始匯入國考題目</button>
            </div>
        </form>
    </div>

    <!-- PDF 匯入 -->
    <div x-show="activeTab === 'pdf'" x-transition>
        <form action="{{ route('import.pdf') }}" method="POST" enctype="multipart/form-data" @submit="injectCommonFields($event)">
            @csrf
            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">上傳 PDF 檔案</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">系統將自動解析 PDF 內容，識別題號、選項和答案。</p>
                <div class="border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-xl p-8 text-center hover:border-blue-400 transition-colors"
                     x-data="{ dragging: false, fileName: '' }"
                     @dragover.prevent="dragging = true" @dragleave.prevent="dragging = false"
                     @drop.prevent="dragging = false; $refs.pdfInput.files = $event.dataTransfer.files; fileName = $event.dataTransfer.files[0]?.name || ''"
                     :class="dragging ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : ''">
                    <svg class="w-12 h-12 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
                    <p class="text-gray-600 dark:text-gray-400 mb-2">拖曳 PDF 檔案到此處，或</p>
                    <label class="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700 transition-colors">
                        選擇檔案
                        <input type="file" name="pdf_file" accept=".pdf" class="hidden" x-ref="pdfInput" @change="fileName = $event.target.files[0]?.name || ''">
                    </label>
                    <p x-show="fileName" x-text="'已選擇: ' + fileName" class="mt-3 text-sm text-green-600 dark:text-green-400 font-medium"></p>
                    <p class="mt-3 text-xs text-gray-400">支援 .pdf，最大 20MB</p>
                </div>
                @error('pdf_file')<p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
                <button type="submit" class="mt-6 w-full py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-lg hover:shadow-xl hover:scale-[1.02] transition-all">開始匯入 PDF</button>
            </div>
        </form>
    </div>

    <!-- Excel/CSV 匯入 -->
    <div x-show="activeTab === 'excel'" x-transition>
        <form action="{{ route('import.excel') }}" method="POST" enctype="multipart/form-data" @submit="injectCommonFields($event)">
            @csrf
            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">上傳 Excel / CSV</h3>
                    <a href="{{ route('import.template') }}" class="text-sm text-green-600 dark:text-green-400 hover:underline font-medium">下載範本</a>
                </div>
                <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-4">
                    <p class="text-sm font-semibold text-green-700 dark:text-green-300 mb-2">欄位說明：</p>
                    <div class="text-xs text-green-600 dark:text-green-400 space-y-1">
                        <p><strong>A</strong>：題目文字（必填）| <strong>B</strong>：題型 | <strong>C~F</strong>：選項 A~D | <strong>G</strong>：正確答案 | <strong>H</strong>：難度 1~3</p>
                    </div>
                </div>
                <div class="border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-xl p-8 text-center hover:border-green-400 transition-colors"
                     x-data="{ dragging: false, fileName: '' }"
                     @dragover.prevent="dragging = true" @dragleave.prevent="dragging = false"
                     @drop.prevent="dragging = false; $refs.excelInput.files = $event.dataTransfer.files; fileName = $event.dataTransfer.files[0]?.name || ''"
                     :class="dragging ? 'border-green-500 bg-green-50 dark:bg-green-900/20' : ''">
                    <svg class="w-12 h-12 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
                    <p class="text-gray-600 dark:text-gray-400 mb-2">拖曳檔案到此處，或</p>
                    <label class="inline-block px-4 py-2 bg-green-600 text-white rounded-lg cursor-pointer hover:bg-green-700 transition-colors">
                        選擇檔案
                        <input type="file" name="excel_file" accept=".xlsx,.xls,.csv" class="hidden" x-ref="excelInput" @change="fileName = $event.target.files[0]?.name || ''">
                    </label>
                    <p x-show="fileName" x-text="'已選擇: ' + fileName" class="mt-3 text-sm text-green-600 dark:text-green-400 font-medium"></p>
                    <p class="mt-3 text-xs text-gray-400">支援 .xlsx, .xls, .csv，最大 10MB</p>
                </div>
                @error('excel_file')<p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
                <button type="submit" class="mt-6 w-full py-3 bg-gradient-to-r from-green-600 to-teal-600 text-white font-semibold rounded-lg hover:shadow-xl hover:scale-[1.02] transition-all">開始匯入 Excel/CSV</button>
            </div>
        </form>
    </div>

    <!-- 手動輸入 -->
    <div x-show="activeTab === 'manual'" x-transition>
        <form action="{{ route('import.manual') }}" method="POST" @submit="injectCommonFields($event)">
            @csrf
            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">手動輸入題目</h3>
                    <button type="button" @click="addQuestion()" class="px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors">+ 新增題目</button>
                </div>
                <div class="space-y-6">
                    <template x-for="(q, index) in manualQuestions" :key="index">
                        <div class="border-2 border-gray-200 dark:border-slate-700 rounded-xl p-5">
                            <div class="flex justify-between items-center mb-4">
                                <span class="text-sm font-bold text-gray-500 dark:text-gray-400" x-text="'第 ' + (index + 1) + ' 題'"></span>
                                <button type="button" @click="removeQuestion(index)" x-show="manualQuestions.length > 1" class="text-red-500 hover:text-red-700 text-sm">刪除</button>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">題目文字</label>
                                <textarea x-model="q.question_text" :name="'questions['+index+'][question_text]'" rows="3" required
                                    class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-purple-500 transition-colors" placeholder="請輸入題目..."></textarea>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">題型</label>
                                    <select x-model="q.question_type" :name="'questions['+index+'][question_type]'"
                                        class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-purple-500 transition-colors">
                                        <option value="multiple_choice">選擇題</option>
                                        <option value="short_answer">簡答題</option>
                                        <option value="essay">問答題</option>
                                        <option value="true_false">是非題</option>
                                        <option value="fill_blank">填充題</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">難度</label>
                                    <select x-model="q.difficulty" :name="'questions['+index+'][difficulty]'"
                                        class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-purple-500 transition-colors">
                                        <option value="1">簡單</option>
                                        <option value="2">中等</option>
                                        <option value="3">困難</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">配分</label>
                                    <input type="number" x-model="q.points" :name="'questions['+index+'][points]'" min="1"
                                        class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-purple-500 transition-colors">
                                </div>
                            </div>
                            <!-- 選擇題選項 -->
                            <div x-show="q.question_type === 'multiple_choice'" class="mb-4 space-y-2">
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">選項</label>
                                <template x-for="opt in ['A','B','C','D']" :key="opt">
                                    <div class="flex items-center gap-2">
                                        <span class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 dark:bg-slate-700 text-sm font-bold text-gray-700 dark:text-gray-300" x-text="opt"></span>
                                        <input type="text" :name="'questions['+index+'][options]['+opt+']'" x-model="q.options[opt]"
                                            class="flex-1 px-4 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-purple-500 transition-colors" :placeholder="'選項 ' + opt">
                                    </div>
                                </template>
                            </div>
                            <!-- 是非題 -->
                            <div x-show="q.question_type === 'true_false'" class="mb-4">
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">正確答案</label>
                                <div class="flex gap-4">
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" :name="'questions['+index+'][correct_answer]'" value="O" x-model="q.correct_answer" class="w-4 h-4 text-green-600">
                                        <span class="text-gray-700 dark:text-gray-300">O（對）</span>
                                    </label>
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" :name="'questions['+index+'][correct_answer]'" value="X" x-model="q.correct_answer" class="w-4 h-4 text-red-600">
                                        <span class="text-gray-700 dark:text-gray-300">X（錯）</span>
                                    </label>
                                </div>
                            </div>
                            <!-- 正確答案 -->
                            <div x-show="q.question_type !== 'true_false'">
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">正確答案</label>
                                <input type="text" x-model="q.correct_answer" :name="'questions['+index+'][correct_answer]'"
                                    class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-purple-500 transition-colors"
                                    :placeholder="q.question_type === 'multiple_choice' ? '例如：A' : '請輸入正確答案'">
                            </div>
                        </div>
                    </template>
                </div>
                <button type="submit" class="mt-6 w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-lg hover:shadow-xl hover:scale-[1.02] transition-all">儲存題目</button>
            </div>
        </form>
    </div>
</div>

<script>
function importPage() {
    return {
        activeTab: 'exam_pdf',
        examMode: '{{ $preselectedExamId ? 'existing' : 'new' }}',
        examId: '{{ $preselectedExamId ?? '' }}',
        newExamTitle: '',
        categoryId: '',
        subjectId: '',
        visibility: 'private',
        schoolId: '{{ auth()->user()->school_id ?? '' }}',
        classId: '',
        manualQuestions: [{
            question_text: '', question_type: 'multiple_choice',
            options: { A: '', B: '', C: '', D: '' },
            correct_answer: '', difficulty: '2', points: 1,
        }],

        addQuestion() {
            this.manualQuestions.push({
                question_text: '', question_type: 'multiple_choice',
                options: { A: '', B: '', C: '', D: '' },
                correct_answer: '', difficulty: '2', points: 1,
            });
        },
        removeQuestion(index) { this.manualQuestions.splice(index, 1); },

        injectCommonFields(event) {
            const form = event.target;
            form.querySelectorAll('.injected-field').forEach(el => el.remove());
            const fields = {};

            if (this.examMode === 'existing') {
                fields['exam_id'] = this.examId;
            } else {
                fields['new_exam_title'] = this.newExamTitle;
                fields['visibility'] = this.visibility;
                fields['exam_category_id'] = this.categoryId;
                fields['subject_id'] = this.subjectId;
                fields['school_id'] = this.schoolId;
                fields['school_class_id'] = this.classId;
            }

            for (const [name, value] of Object.entries(fields)) {
                if (value) {
                    const input = document.createElement('input');
                    input.type = 'hidden'; input.name = name; input.value = value;
                    input.className = 'injected-field';
                    form.appendChild(input);
                }
            }
        }
    };
}
</script>
@endsection