@extends('layouts.app')
@section('title', $exam->title)
@section('content')
<div class="max-w-5xl mx-auto">
    <!-- Exam Info Card -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 mb-6">
        <div class="flex flex-col md:flex-row justify-between items-start gap-4">
            <div class="flex-1">
                <div class="flex items-center gap-3 mb-1">
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $exam->title }}</h1>
                    @php $statusLabel = $exam->status_label; @endphp
                    @if($statusLabel !== '未排程')
                        <span class="px-2.5 py-0.5 text-xs font-bold rounded-full {{ $statusLabel === '進行中' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : ($statusLabel === '未開始' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' : 'bg-gray-100 text-gray-600 dark:bg-slate-800 dark:text-gray-400') }}">{{ $statusLabel }}</span>
                    @endif
                </div>
                @if($exam->description)<p class="text-gray-600 dark:text-gray-400 mt-2">{{ $exam->description }}</p>@endif

                @if($exam->start_time || $exam->end_time)
                <div class="flex items-center gap-2 mt-3 text-sm text-gray-600 dark:text-gray-400">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    @if($exam->start_time)<span>開始：{{ $exam->start_time->format('Y-m-d H:i') }}</span>@endif
                    @if($exam->start_time && $exam->end_time)<span class="text-gray-400">~</span>@endif
                    @if($exam->end_time)<span>結束：{{ $exam->end_time->format('Y-m-d H:i') }}</span>@endif
                </div>
                @endif

                <div class="flex flex-wrap gap-2 mt-3">
                    @if($exam->subject)<span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">{{ $exam->subject->name }}</span>@endif
                    @if($exam->examCategory)<span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-gray-100 text-gray-600 dark:bg-slate-800 dark:text-gray-400">{{ $exam->examCategory->name }}</span>@endif
                    @if($exam->year)<span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400">{{ $exam->year }} 年</span>@endif
                    <span class="px-2.5 py-0.5 text-xs font-bold rounded-full {{ $exam->visibility === 'public' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' }}">{{ $exam->visibility_label }}</span>
                </div>

                @if($exam->subjects->isNotEmpty())
                <div class="mt-3">
                    <span class="text-xs font-bold text-gray-500 dark:text-gray-400">包含考科：</span>
                    @foreach($exam->subjects as $sub)
                        <span class="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">{{ $sub->name }}</span>
                    @endforeach
                </div>
                @endif

                @if($exam->participants->isNotEmpty())
                <div class="mt-3">
                    <span class="text-xs font-bold text-gray-500 dark:text-gray-400">參與者：</span>
                    @foreach($exam->participants as $p)
                        @if($p->participant_type === 'class')
                            @php $cls = \App\Models\SchoolClass::with('grade')->find($p->participant_id); @endphp
                            @if($cls)<span class="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400">{{ $cls->grade->name ?? '' }} {{ $cls->name }}</span>@endif
                        @else
                            @php $roleName = \App\Models\Role::where('slug', $p->participant_id)->value('name'); @endphp
                            <span class="px-2 py-0.5 text-xs rounded-full bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400">{{ $roleName ?? $p->participant_id }}</span>
                        @endif
                    @endforeach
                </div>
                @endif

                <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">
                    建立者：{{ $exam->creator->name ?? '-' }}
                    @if($exam->school) | 學校：{{ $exam->school->name }} @endif
                    @if($exam->schoolClass) | 班級：{{ $exam->schoolClass->name }} @endif
                </p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('exams.edit', $exam) }}" class="px-4 py-2 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors">編輯資訊</a>
                <a href="{{ route('exam-paper.preview', $exam) }}" class="px-4 py-2 bg-gradient-to-r from-green-600 to-teal-600 text-white rounded-lg text-sm font-medium hover:shadow-lg transition-all">產生考卷</a>
                <a href="{{ route('answers.show', $exam) }}" class="px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg text-sm font-medium hover:shadow-lg transition-all">預覽練習</a>
            </div>
        </div>
    </div>

    <!-- Stats -->
    <div class="grid 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 text-center">
            <p class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ $exam->questions->count() }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">題目數</p>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4 text-center">
            <p class="text-3xl font-bold text-green-600 dark:text-green-400">{{ $exam->questions->sum('points') ?: $exam->questions->count() }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">總分</p>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4 text-center">
            @php $types = $exam->questions->groupBy('question_type')->map->count(); @endphp
            <p class="text-3xl font-bold text-purple-600 dark:text-purple-400">{{ $types->count() }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">題型</p>
        </div>
    </div>

    <!-- ===== Add Questions (collapsible, ABOVE list) ===== -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-6" x-data="{ addOpen: false, ...questionAdder() }">
        <!-- Toggle Header -->
        <button @click="addOpen = !addOpen" class="w-full flex items-center justify-between px-6 py-4 hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                新增題目
            </h2>
            <div class="flex items-center gap-3">
                <a href="{{ route('import.create', ['exam_id' => $exam->id]) }}" @click.stop class="px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700">匯入題目</a>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="addOpen && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </div>
        </button>

        <div x-show="addOpen" x-collapse>
            <!-- Tab Header -->
            <div class="flex border-t border-b border-gray-200 dark:border-slate-700">
                <button @click="tab = 'bank'" :class="tab === 'bank' ? 'border-blue-500 text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10' : 'border-transparent text-gray-500 hover:text-gray-700'"
                        class="flex-1 flex items-center justify-center gap-2 px-4 py-3 border-b-2 font-semibold text-sm 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                    從題庫選題
                </button>
                <button @click="tab = 'manual'" :class="tab === 'manual' ? 'border-green-500 text-green-600 dark:text-green-400 bg-green-50/50 dark:bg-green-900/10' : 'border-transparent text-gray-500 hover:text-gray-700'"
                        class="flex-1 flex items-center justify-center gap-2 px-4 py-3 border-b-2 font-semibold text-sm 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"/></svg>
                    手動新增
                </button>
            </div>

            <!-- ═══ 從題庫選題 ═══ -->
            @php
                $bankYears = \App\Models\Exam::where('is_imported', true)->whereNotNull('year')->select('year')->distinct()->pluck('year')->map(fn($y) => (int)$y - 1911)->sort()->values();
            @endphp
            <div x-show="tab === 'bank'" class="p-6">
                <!-- 年份起訖 → 考試名稱 → 科目 -->
                <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 mb-3">
                    <div>
                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">1. 年分（起）</label>
                        <select x-model="filterYearStart" @change="onYearChange()" class="w-full px-3 py-2.5 rounded-lg border-2 border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 text-gray-900 dark:text-white text-sm font-medium focus:outline-none focus:border-blue-500">
                            <option value="">-- 不限 --</option>
                            @foreach($bankYears as $y)
                            <option value="{{ $y }}">{{ $y }} 年</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">年分（訖）</label>
                        <select x-model="filterYearEnd" @change="onYearChange()" class="w-full px-3 py-2.5 rounded-lg border-2 border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 text-gray-900 dark:text-white text-sm font-medium focus:outline-none focus:border-blue-500">
                            <option value="">-- 不限 --</option>
                            @foreach($bankYears as $y)
                            <option value="{{ $y }}">{{ $y }} 年</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">2. 考試名稱</label>
                        <select x-model="filterExamName" @change="onExamNameChange()" :disabled="!filterYearStart && !filterYearEnd" class="w-full px-3 py-2.5 rounded-lg border-2 text-sm font-medium focus:outline-none focus:border-blue-500 disabled:opacity-40 disabled:cursor-not-allowed" :class="(filterYearStart || filterYearEnd) ? 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 text-gray-900 dark:text-white' : 'border-gray-200 dark:border-slate-700 bg-gray-100 dark:bg-slate-800 text-gray-400'">
                            <option value="">-- 選擇考試名稱 --</option>
                            <template x-for="name in examNameOptions" :key="name">
                                <option :value="name" x-text="name"></option>
                            </template>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">3. 科目</label>
                        <select x-model="filterSubject" @change="bankPage=1; fetchQuestions()" :disabled="!filterExamName" class="w-full px-3 py-2.5 rounded-lg border-2 text-sm font-medium focus:outline-none focus:border-blue-500 disabled:opacity-40 disabled:cursor-not-allowed" :class="filterExamName ? 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 text-gray-900 dark:text-white' : 'border-gray-200 dark:border-slate-700 bg-gray-100 dark:bg-slate-800 text-gray-400'">
                            <option value="">-- 選擇科目 --</option>
                            <template x-for="s in subjectOptions" :key="s.id">
                                <option :value="s.id" x-text="s.name"></option>
                            </template>
                        </select>
                    </div>
                </div>

                <!-- 進階篩選 -->
                <div class="flex flex-wrap gap-2 mb-4">
                    <select x-model="filterType" @change="bankPage=1; fetchQuestions()" class="px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 text-xs">
                        <option value="">所有題型</option>
                        <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>
                    <select x-model="filterDifficulty" @change="bankPage=1; fetchQuestions()" class="px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 text-xs">
                        <option value="">所有難度</option>
                        <option value="1">簡單</option>
                        <option value="2">中等</option>
                        <option value="3">困難</option>
                    </select>
                    <input type="text" x-model="search" @input.debounce.400ms="bankPage=1; fetchQuestions()" placeholder="關鍵字搜尋..." class="flex-1 min-w-[140px] px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 text-xs focus:outline-none focus:border-blue-500">
                </div>

                <!-- 全選/取消 + 已選計數 -->
                <div x-show="bankQuestions.length > 0" class="flex items-center justify-between mb-4 p-3 bg-gray-50 dark:bg-slate-800/50 rounded-lg border border-gray-200 dark:border-slate-700">
                    <div class="flex items-center gap-3">
                        <button @click="selectAllBank()" class="px-3 py-1.5 text-xs font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded-lg hover:bg-blue-200 transition-colors">全選本頁</button>
                        <button @click="selectedIds = []" class="px-3 py-1.5 text-xs font-semibold bg-gray-200 text-gray-600 dark:bg-slate-700 dark:text-gray-400 rounded-lg hover:bg-gray-300 transition-colors">取消選擇</button>
                        <span x-show="selectedIds.length > 0" class="text-sm font-medium text-blue-700 dark:text-blue-300">
                            已選 <strong x-text="selectedIds.length"></strong> 題
                        </span>
                    </div>
                    <button x-show="selectedIds.length > 0" @click="submitSelected()" class="px-4 py-1.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">加入考試</button>
                </div>

                <!-- 題目列表 -->
                <div class="space-y-2 max-h-[400px] overflow-y-auto">
                    <template x-if="loading">
                        <div class="text-center py-8 text-gray-400"><svg class="w-6 h-6 mx-auto animate-spin mb-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>載入中...</div>
                    </template>
                    <template x-for="q in bankQuestions" :key="q.id">
                        <div class="flex items-start gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all"
                             :class="selectedIds.includes(q.id) ? 'border-blue-500 bg-blue-50/50 dark:bg-blue-900/10' : 'border-gray-200 dark:border-slate-700 hover:border-blue-300'"
                             @click="toggleSelect(q.id)">
                            <div class="pt-0.5">
                                <div class="w-5 h-5 rounded border-2 flex items-center justify-center transition-colors"
                                     :class="selectedIds.includes(q.id) ? 'bg-blue-600 border-blue-600' : 'border-gray-300 dark:border-slate-600'">
                                    <svg x-show="selectedIds.includes(q.id)" class="w-3.5 h-3.5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                </div>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm text-gray-900 dark:text-white leading-relaxed" x-text="q.question_text.substring(0, 120) + (q.question_text.length > 120 ? '...' : '')"></p>
                                <div class="flex flex-wrap gap-1.5 mt-1.5">
                                    <span class="px-1.5 py-0.5 text-xs rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400" x-text="typeLabel(q.question_type)"></span>
                                    <span class="px-1.5 py-0.5 text-xs rounded" :class="diffClass(q.difficulty)" x-text="diffLabel(q.difficulty)"></span>
                                    <span class="px-1.5 py-0.5 text-xs rounded bg-gray-100 text-gray-500 dark:bg-slate-800 dark:text-gray-400" x-text="'來源：' + (q.exam?.title || '').substring(0, 15)"></span>
                                    <template x-if="q.exam?.subject"><span class="px-1.5 py-0.5 text-xs rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" x-text="q.exam.subject.name"></span></template>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template x-if="!loading && bankQuestions.length === 0">
                        <div class="text-center py-8 text-gray-400">
                            <template x-if="!filterExamName && !filterYearStart && !filterYearEnd && !filterSubject && !search">
                                <div>
                                    <svg class="w-10 h-10 mx-auto text-gray-300 dark:text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                                    <p class="text-sm">請先選擇<strong>年分起訖</strong>、<strong>考試名稱</strong>或<strong>科目</strong>來搜尋題庫</p>
                                </div>
                            </template>
                            <template x-if="filterExamName || filterYearStart || filterYearEnd || filterSubject || search">
                                <p>沒有找到符合條件的題目</p>
                            </template>
                        </div>
                    </template>
                </div>

                <!-- 分頁 -->
                <div x-show="bankTotal > 10" class="flex items-center justify-between mt-4 pt-3 border-t border-gray-200 dark:border-slate-700">
                    <span class="text-xs text-gray-500" x-text="'共 ' + bankTotal + ' 題'"></span>
                    <div class="flex gap-1">
                        <button @click="bankPage > 1 && (bankPage--, fetchQuestions())" :disabled="bankPage <= 1" class="px-3 py-1 text-sm rounded border border-gray-300 dark:border-slate-600 disabled:opacity-30">上一頁</button>
                        <span class="px-3 py-1 text-sm text-gray-600 dark:text-gray-400" x-text="bankPage + ' / ' + Math.ceil(bankTotal / 10)"></span>
                        <button @click="bankPage < Math.ceil(bankTotal / 10) && (bankPage++, fetchQuestions())" :disabled="bankPage >= Math.ceil(bankTotal / 10)" class="px-3 py-1 text-sm rounded border border-gray-300 dark:border-slate-600 disabled:opacity-30">下一頁</button>
                    </div>
                </div>
            </div>

            <!-- ═══ 手動新增 ═══ -->
            <div x-show="tab === 'manual'" class="p-6" x-data="{ qtype: 'multiple_choice' }">
                <form action="{{ route('exams.questions.store', $exam) }}" method="POST">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">題目文字 *</label>
                            <textarea name="question_text" rows="3" required 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-green-500 transition-colors"></textarea>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">題型 *</label>
                                <select name="question_type" x-model="qtype" class="w-full px-4 py-2.5 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-green-500">
                                    <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 name="difficulty" class="w-full px-4 py-2.5 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-green-500">
                                    <option value="1">簡單</option>
                                    <option value="2" selected>中等</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" name="points" value="1" min="1" class="w-full px-4 py-2.5 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-green-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">正確答案</label>
                                <input type="text" name="correct_answer" placeholder="例如：A" class="w-full px-4 py-2.5 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-green-500">
                            </div>
                        </div>
                        <div x-show="qtype === 'multiple_choice'" class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            @foreach(['A','B','C','D'] as $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-600 dark:text-gray-300">{{ $opt }}</span>
                                <input type="text" name="options[{{ $opt }}]" placeholder="選項 {{ $opt }}" class="flex-1 px-3 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-green-500 text-sm">
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <button type="submit" class="mt-5 px-6 py-2.5 bg-gradient-to-r from-green-600 to-teal-600 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-105 transition-all">+ 新增題目</button>
                </form>
            </div>

            <!-- Hidden form for bank submit -->
            <form id="bankForm" action="{{ route('exams.questions.from-bank', $exam) }}" method="POST" class="hidden">
                @csrf
                <div id="bankInputs"></div>
            </form>
        </div>
    </div>

    <!-- ===== Question List with bulk select ===== -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-6" x-data="questionList()">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white">題目列表 <span class="text-sm font-normal text-gray-400">({{ $exam->questions->count() }} 題)</span></h2>
            <div class="flex items-center gap-2">
                <form action="{{ route('ai.explain_exam', $exam) }}" method="POST" onsubmit="return confirm('將為所有題目產生 AI 詳解，可能需要一些時間。確定繼續？')">
                    @csrf
                    <button class="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-xs font-medium hover:bg-purple-700 flex items-center gap-1">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                        AI 批量詳解
                    </button>
                </form>
            </div>
        </div>

        <!-- Bulk action bar -->
        @if($exam->questions->isNotEmpty())
        <div class="px-6 py-3 bg-gray-50 dark:bg-slate-800/50 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" x-model="allSelected" @change="toggleAll()" class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500">
                    <span class="text-sm font-medium text-gray-600 dark:text-gray-300" x-text="allSelected ? '取消全選' : '全選'"></span>
                </label>
                <span x-show="checkedIds.length > 0" class="text-sm text-blue-600 dark:text-blue-400 font-medium">
                    已選 <strong x-text="checkedIds.length"></strong> 題
                </span>
            </div>
            <div x-show="checkedIds.length > 0" class="flex items-center gap-2">
                <button @click="bulkDelete()" class="px-3 py-1.5 bg-red-600 text-white rounded-lg text-xs font-medium hover:bg-red-700 transition-colors flex items-center gap-1">
                    <svg class="w-3.5 h-3.5" 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>
        @endif

        <!-- Hidden form for bulk delete -->
        <form id="bulkDeleteForm" action="{{ route('exams.questions.bulk-destroy', $exam) }}" method="POST" class="hidden">
            @csrf
            <div id="bulkDeleteInputs"></div>
        </form>

        @forelse($exam->questions as $index => $question)
        <div class="p-5 border-b border-gray-100 dark:border-slate-800 hover:bg-gray-50/50 dark:hover:bg-slate-800/30" x-data="{ editing: false }">
            <div x-show="!editing">
                <div class="flex items-start gap-3">
                    <!-- Checkbox -->
                    <label class="flex-shrink-0 pt-0.5 cursor-pointer" @click.stop>
                        <input type="checkbox" value="{{ $question->id }}" x-model.number="checkedIds"
                               class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500">
                    </label>
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="w-7 h-7 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-xs font-bold text-blue-700 dark:text-blue-400">{{ $index + 1 }}</span>
                            <span class="px-2 py-0.5 text-xs rounded-full font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                                {{ match($question->question_type) { 'multiple_choice' => '選擇題', 'true_false' => '是非題', 'fill_blank' => '填充題', 'essay' => '問答題', default => '簡答題' } }}
                            </span>
                            <span class="px-2 py-0.5 text-xs rounded-full font-medium {{ $question->difficulty === 1 ? 'bg-green-100 text-green-700' : ($question->difficulty === 3 ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">{{ $question->difficulty_label }}</span>
                            <span class="text-xs text-gray-400">{{ $question->points ?? 1 }} 分</span>
                        </div>
                        <p class="text-gray-900 dark:text-white">{!! nl2br(e($question->question_text)) !!}</p>

                        @if($question->image_path)
                        <div class="mt-2">
                            <img src="{{ asset('storage/' . $question->image_path) }}" alt="題目圖片" class="max-w-full max-h-64 rounded-lg border border-gray-200 dark:border-slate-700 shadow-sm cursor-pointer hover:shadow-md transition-shadow" onclick="window.open(this.src, '_blank')">
                        </div>
                        @endif

                        @if($question->options)
                        <div class="grid grid-cols-2 gap-1 mt-2">
                            @foreach($question->options as $key => $opt)
                            <span class="text-sm {{ $question->correct_answer === $key ? 'text-green-600 dark:text-green-400 font-bold' : 'text-gray-600 dark:text-gray-400' }}">
                                {{ $key }}. {{ $opt }} @if($question->correct_answer === $key) ✓ @endif
                            </span>
                            @endforeach
                        </div>
                        @endif

                        @if($question->correct_answer && !$question->options)
                        <p class="text-sm mt-1"><span class="text-gray-500">正確答案：</span><span class="text-green-600 dark:text-green-400 font-medium">{{ $question->correct_answer }}</span></p>
                        @endif
                    </div>
                    <div class="flex gap-1 flex-shrink-0">
                        <button @click="editing = true" class="p-1.5 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 text-blue-600 dark:text-blue-400 transition-colors" title="編輯">
                            <svg class="w-4 h-4" 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"/></svg>
                        </button>
                        <form action="{{ route('questions.destroy', $question) }}" method="POST" onsubmit="return confirm('確定刪除此題？')">@csrf @method('DELETE')
                            <button class="p-1.5 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 transition-colors" title="刪除">
                                <svg class="w-4 h-4" 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>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Edit Mode -->
            <div x-show="editing" x-cloak>
                <form action="{{ route('questions.update', $question) }}" method="POST">
                    @csrf @method('PUT')
                    <div class="space-y-3">
                        <textarea name="question_text" rows="3" required class="w-full px-3 py-2 rounded-lg border-2 border-blue-300 dark:border-blue-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">{{ $question->question_text }}</textarea>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <select name="question_type" class="px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
                                <option value="multiple_choice" {{ $question->question_type === 'multiple_choice' ? 'selected' : '' }}>選擇題</option>
                                <option value="short_answer" {{ $question->question_type === 'short_answer' ? 'selected' : '' }}>簡答題</option>
                                <option value="essay" {{ $question->question_type === 'essay' ? 'selected' : '' }}>問答題</option>
                                <option value="true_false" {{ $question->question_type === 'true_false' ? 'selected' : '' }}>是非題</option>
                                <option value="fill_blank" {{ $question->question_type === 'fill_blank' ? 'selected' : '' }}>填充題</option>
                            </select>
                            <select name="difficulty" class="px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
                                <option value="1" {{ $question->difficulty === 1 ? 'selected' : '' }}>簡單</option>
                                <option value="2" {{ $question->difficulty === 2 ? 'selected' : '' }}>中等</option>
                                <option value="3" {{ $question->difficulty === 3 ? 'selected' : '' }}>困難</option>
                            </select>
                            <input type="number" name="points" value="{{ $question->points ?? 1 }}" min="1" placeholder="配分" class="px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
                            <input type="text" name="correct_answer" value="{{ $question->correct_answer }}" placeholder="正確答案" class="px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
                        </div>
                        @if($question->question_type === 'multiple_choice')
                        <div class="grid grid-cols-2 gap-2">
                            @foreach(['A','B','C','D'] as $opt)
                            <input type="text" name="options[{{ $opt }}]" value="{{ $question->options[$opt] ?? '' }}" placeholder="選項 {{ $opt }}" class="px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm">
                            @endforeach
                        </div>
                        @endif
                        <div class="flex gap-2">
                            <button type="submit" class="px-4 py-1.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">儲存</button>
                            <button type="button" @click="editing = false" class="px-4 py-1.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        @empty
        <div class="p-8 text-center text-gray-500 dark:text-gray-400">
            <svg class="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-3" 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"/></svg>
            <p class="text-lg mb-1">此考試還沒有題目</p>
            <p class="text-sm">展開上方「新增題目」區塊，從題庫選題或手動新增</p>
        </div>
        @endforelse
    </div>

    <!-- Bottom Nav -->
    <div class="flex gap-3 mt-6">
        <a href="{{ route('exams.index') }}" class="px-5 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors">返回列表</a>
    </div>
</div>

<script>
function questionAdder() {
    return {
        tab: 'bank',
        search: '',
        filterType: '',
        filterDifficulty: '',
        filterYearStart: '',
        filterYearEnd: '',
        filterExamName: '',
        filterSubject: '',
        examNameOptions: [],
        subjectOptions: [],
        bankQuestions: [],
        bankPage: 1,
        bankTotal: 0,
        loading: false,
        selectedIds: [],

        init() {},

        async onYearChange() {
            this.filterExamName = '';
            this.filterSubject = '';
            this.examNameOptions = [];
            this.subjectOptions = [];
            this.bankQuestions = [];
            this.bankTotal = 0;
            if (!this.filterYearStart && !this.filterYearEnd) return;

            const params = new URLSearchParams();
            if (this.filterYearStart) params.set('year_start', this.filterYearStart);
            if (this.filterYearEnd) params.set('year_end', this.filterYearEnd);
            const r = await fetch(`/exams/bank-filter?${params}`, { headers: { 'Accept': 'application/json' } });
            const data = await r.json();
            this.examNameOptions = data.exam_names || [];
        },

        async onExamNameChange() {
            this.filterSubject = '';
            this.subjectOptions = [];
            this.bankQuestions = [];
            this.bankTotal = 0;
            if (!this.filterExamName) return;

            const params = new URLSearchParams();
            if (this.filterYearStart) params.set('year_start', this.filterYearStart);
            if (this.filterYearEnd) params.set('year_end', this.filterYearEnd);
            params.set('exam_name', this.filterExamName);
            const r = await fetch(`/exams/bank-filter?${params}`, { headers: { 'Accept': 'application/json' } });
            const data = await r.json();
            this.subjectOptions = data.subjects || [];
        },

        async fetchQuestions() {
            this.loading = true;
            const params = new URLSearchParams({
                exclude_exam_id: '{{ $exam->id }}',
                page: this.bankPage,
            });
            if (this.search) params.set('search', this.search);
            if (this.filterType) params.set('type', this.filterType);
            if (this.filterDifficulty) params.set('difficulty', this.filterDifficulty);
            if (this.filterYearStart) params.set('year_start', this.filterYearStart);
            if (this.filterYearEnd) params.set('year_end', this.filterYearEnd);
            if (this.filterExamName) params.set('exam_name', this.filterExamName);
            if (this.filterSubject) params.set('subject_id', this.filterSubject);

            try {
                const r = await fetch(`/questions/search-bank?${params}`, { headers: { 'Accept': 'application/json' } });
                const data = await r.json();
                this.bankQuestions = data.data || [];
                this.bankTotal = data.total || 0;
            } catch (e) {
                this.bankQuestions = [];
            }
            this.loading = false;
        },

        selectAllBank() {
            this.bankQuestions.forEach(q => {
                if (!this.selectedIds.includes(q.id)) this.selectedIds.push(q.id);
            });
        },

        toggleSelect(id) {
            const idx = this.selectedIds.indexOf(id);
            if (idx === -1) this.selectedIds.push(id);
            else this.selectedIds.splice(idx, 1);
        },

        submitSelected() {
            const container = document.getElementById('bankInputs');
            container.innerHTML = '';
            this.selectedIds.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden'; input.name = 'question_ids[]'; input.value = id;
                container.appendChild(input);
            });
            document.getElementById('bankForm').submit();
        },

        typeLabel(t) {
            return { multiple_choice:'選擇題', true_false:'是非題', fill_blank:'填充題', essay:'問答題', short_answer:'簡答題' }[t] || '簡答題';
        },
        diffLabel(d) { return { 1:'簡單', 2:'中等', 3:'困難' }[d] || '中等'; },
        diffClass(d) { return { 1:'bg-green-100 text-green-700', 2:'bg-yellow-100 text-yellow-700', 3:'bg-red-100 text-red-700' }[d] || 'bg-yellow-100 text-yellow-700'; },
    };
}

function questionList() {
    const allIds = @json($exam->questions->pluck('id'));
    return {
        allIds: allIds,
        checkedIds: [],
        allSelected: false,

        toggleAll() {
            if (this.allSelected) {
                this.checkedIds = [...this.allIds];
            } else {
                this.checkedIds = [];
            }
        },

        bulkDelete() {
            if (!this.checkedIds.length) return;
            if (!confirm(`確定刪除已選的 ${this.checkedIds.length} 題？此操作無法復原。`)) return;

            const container = document.getElementById('bulkDeleteInputs');
            container.innerHTML = '';
            this.checkedIds.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden'; input.name = 'question_ids[]'; input.value = id;
                container.appendChild(input);
            });
            document.getElementById('bulkDeleteForm').submit();
        },
    };
}
</script>
@endsection