@extends('layouts.app')
@section('title', '建立考試')
@section('content')
<div class="max-w-3xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">建立新考試</h1>

    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
        <form action="{{ route('exams.store') }}" method="POST" x-data="examCreateForm()">
            @csrf
            <div class="space-y-5">

                {{-- ===== 題庫篩選 ===== --}}
                <div class="bg-indigo-50 dark:bg-indigo-900/20 rounded-lg p-4 border border-indigo-200 dark:border-indigo-800">
                    <h3 class="text-sm font-bold text-indigo-700 dark:text-indigo-300 mb-3">從題庫篩選題目</h3>
                    <p class="text-xs text-indigo-600 dark:text-indigo-400 mb-4">依序選擇年分、考試名稱、科目，系統將自動匯入符合條件的題目</p>

                    {{-- 年分起訖 --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 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="yearStart" @change="onYearChange()"
                                    class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-indigo-500 transition-colors">
                                <option value="">-- 不限 --</option>
                                @foreach($bankYears as $y)
                                    <option value="{{ $y }}">{{ $y }} 年</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">年分（訖）</label>
                            <select x-model="yearEnd" @change="onYearChange()"
                                    class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-indigo-500 transition-colors">
                                <option value="">-- 不限 --</option>
                                @foreach($bankYears as $y)
                                    <option value="{{ $y }}">{{ $y }} 年</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- 考試名稱 --}}
                    <div class="mb-4">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試名稱 *</label>
                        <select x-model="bankExamName" @change="onExamNameChange()" name="bank_exam_name"
                                class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-indigo-500 transition-colors">
                            <option value="" x-text="loading ? '載入中...' : (examNames.length ? '-- 請選擇考試名稱 --' : '-- 請先選擇年分 --')"></option>
                            <template x-for="name in examNames" :key="name">
                                <option :value="name" x-text="name"></option>
                            </template>
                        </select>
                    </div>

                    {{-- 科目選擇（多選） --}}
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">科目（可多選）*</label>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2" x-show="bankSubjects.length > 0">
                            <template x-for="sub in bankSubjects" :key="sub.id">
                                <label class="flex items-center gap-2 px-3 py-2 rounded-lg border-2 border-indigo-200 dark:border-indigo-800 bg-white dark:bg-slate-800 cursor-pointer hover:border-indigo-400 transition-colors"
                                       :class="selectedSubjectIds.includes(sub.id) ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/30' : ''">
                                    <input type="checkbox" :value="sub.id" name="bank_subject_ids[]"
                                           x-model.number="selectedSubjectIds"
                                           @change="onSubjectChange()"
                                           class="w-4 h-4 rounded text-indigo-600 focus:ring-indigo-500">
                                    <span class="text-sm text-gray-700 dark:text-gray-300" x-text="sub.name"></span>
                                </label>
                            </template>
                        </div>
                        <p x-show="bankExamName && bankSubjects.length === 0 && !loading" class="text-sm text-gray-400">此考試下尚無科目</p>
                        <p x-show="!bankExamName" class="text-sm text-gray-400">請先選擇考試名稱</p>
                    </div>

                    {{-- 篩選結果預覽 --}}
                    <div x-show="questionCount > 0" class="mt-4 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                        <p class="text-sm font-semibold text-green-700 dark:text-green-300">
                            符合條件的題目共 <span class="text-lg" x-text="questionCount"></span> 題，建立考試後將自動匯入
                        </p>
                    </div>
                </div>

                {{-- 隱藏欄位：傳遞年分 --}}
                <input type="hidden" name="bank_year_start" :value="yearStart">
                <input type="hidden" name="bank_year_end" :value="yearEnd">

                {{-- ===== 考試名稱（自動帶入或手動輸入） ===== --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試標題 *</label>
                    <input type="text" name="title" x-model="examTitle" 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-blue-500 transition-colors">
                    <p class="mt-1 text-xs text-gray-400">可自行修改自動產生的標題</p>
                </div>

                {{-- 考試說明 --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試說明</label>
                    <textarea name="description" rows="3" 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">{{ old('description') }}</textarea>
                </div>

                {{-- 考試時間 --}}
                <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
                    <h3 class="text-sm font-bold text-blue-700 dark:text-blue-300 mb-3">考試時間設定</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">開始時間</label>
                            <input type="datetime-local" name="start_time" value="{{ old('start_time') }}"
                                   class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">結束時間</label>
                            <input type="datetime-local" name="end_time" value="{{ old('end_time') }}"
                                   class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 transition-colors">
                        </div>
                    </div>
                    <p class="mt-2 text-xs text-blue-600 dark:text-blue-400">不設定時間則為不限時考試</p>
                </div>

                {{-- 分類與考科（聯動） --}}
                <div x-data="categorySubjectLink()" class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試分類</label>
                            <select name="exam_category_id" x-model="catId" @change="onCategoryChange()"
                                    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 }}" {{ old('exam_category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                    @foreach($cat->allChildren ?? $cat->children ?? [] as $child)
                                        <option value="{{ $child->id }}" {{ old('exam_category_id') == $child->id ? 'selected' : '' }}>&nbsp;&nbsp;└ {{ $child->name }}</option>
                                        @foreach($child->allChildren ?? $child->children ?? [] as $gc)
                                            <option value="{{ $gc->id }}" {{ old('exam_category_id') == $gc->id ? 'selected' : '' }}>&nbsp;&nbsp;&nbsp;&nbsp;└ {{ $gc->name }}</option>
                                        @endforeach
                                    @endforeach
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">主要考科</label>
                            <select name="subject_id" 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="" x-text="catId ? '-- 請選擇考科 --' : '-- 請先選擇分類 --'"></option>
                                <template x-for="sub in filteredSubjects" :key="sub.id">
                                    <option :value="sub.id" :selected="sub.id == subjectId" x-text="sub.name"></option>
                                </template>
                            </select>
                        </div>
                    </div>

                    {{-- 多考科選擇（依分類過濾） --}}
                    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4 border border-green-200 dark:border-green-800">
                        <h3 class="text-sm font-bold text-green-700 dark:text-green-300 mb-3">包含考科（可多選）</h3>
                        <p class="text-xs text-green-600 dark:text-green-400 mb-3" x-text="catId ? '顯示該分類下可用的考科' : '請先選擇考試分類'"></p>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2" x-show="filteredSubjects.length > 0">
                            <template x-for="sub in filteredSubjects" :key="'multi-'+sub.id">
                                <label class="flex items-center gap-2 px-3 py-2 rounded-lg border-2 border-green-200 dark:border-green-800 bg-white dark:bg-slate-800 cursor-pointer hover:border-green-400 transition-colors">
                                    <input type="checkbox" name="subject_ids[]" :value="sub.id"
                                           class="w-4 h-4 rounded text-green-600 focus:ring-green-500">
                                    <span class="text-sm text-gray-700 dark:text-gray-300" x-text="sub.name"></span>
                                </label>
                            </template>
                        </div>
                        <p x-show="catId && filteredSubjects.length === 0" class="text-sm text-gray-400">此分類下尚無考科</p>
                        <p x-show="!catId" class="text-sm text-gray-400">請先選擇考試分類</p>
                    </div>
                </div>

                <script>
                function categorySubjectLink() {
                    return {
                        catId: '{{ old('exam_category_id', '') }}',
                        subjectId: '{{ old('subject_id', '') }}',
                        map: @json($catSubjectMap),
                        get filteredSubjects() {
                            if (!this.catId) return [];
                            return this.map[this.catId] || this.map['all'] || [];
                        },
                        onCategoryChange() {
                            this.subjectId = '';
                        },
                    };
                }
                </script>

                {{-- 配分設定 --}}
                <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 border border-amber-200 dark:border-amber-800">
                    <h3 class="text-sm font-bold text-amber-700 dark:text-amber-300 mb-3">配分設定</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">每題配分</label>
                            <input type="number" name="default_points" value="{{ old('default_points', 2) }}" min="1" max="100"
                                   class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-amber-500 transition-colors">
                            <p class="mt-1 text-xs text-amber-600 dark:text-amber-400">新增題目時的預設配分，之後可逐題調整</p>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">滿分（自動計算）</label>
                            <div class="px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-gray-400">
                                建立後依題數 × 配分自動計算
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 公開範圍與年度 --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" x-data="{ visibility: '{{ old('visibility', 'private') }}' }">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">公開範圍 *</label>
                        <select name="visibility" 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>
                        <p class="mt-1 text-xs text-gray-400">公開的考試會出現在練習題庫中供他人選用</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">年度</label>
                        <input type="text" name="year" value="{{ old('year') }}" placeholder="例如：112"
                               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="visibility === 'school' || visibility === 'class'">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">學校</label>
                        <select name="school_id" 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 $s)<option value="{{ $s->id }}" {{ old('school_id', auth()->user()->school_id) == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>@endforeach
                        </select>
                    </div>
                    <div x-show="visibility === 'class'">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">班級</label>
                        <select name="school_class_id" 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 $c)<option value="{{ $c->id }}" {{ old('school_class_id') == $c->id ? 'selected' : '' }}>{{ $c->grade->name ?? '' }} {{ $c->name }}</option>@endforeach
                        </select>
                    </div>
                </div>

                {{-- 參與者設定 --}}
                <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 border border-purple-200 dark:border-purple-800">
                    <h3 class="text-sm font-bold text-purple-700 dark:text-purple-300 mb-3">參與者設定（可選）</h3>
                    <p class="text-xs text-purple-600 dark:text-purple-400 mb-3">指定哪些班級或角色可以參加此考試，不設定則依公開範圍決定</p>

                    @if($classes->isNotEmpty())
                    <div class="mb-3">
                        <label class="block text-xs font-bold text-gray-600 dark:text-gray-400 mb-2 uppercase tracking-wider">指定班級</label>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                            @foreach($classes as $c)
                            <label class="flex items-center gap-2 px-3 py-2 rounded-lg border-2 border-purple-200 dark:border-purple-800 bg-white dark:bg-slate-800 cursor-pointer hover:border-purple-400 transition-colors">
                                <input type="checkbox" name="participant_class_ids[]" value="{{ $c->id }}"
                                       {{ in_array($c->id, old('participant_class_ids', [])) ? 'checked' : '' }}
                                       class="w-4 h-4 rounded text-purple-600 focus:ring-purple-500">
                                <span class="text-sm text-gray-700 dark:text-gray-300">{{ $c->grade->name ?? '' }} {{ $c->name }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <div>
                        <label class="block text-xs font-bold text-gray-600 dark:text-gray-400 mb-2 uppercase tracking-wider">指定角色</label>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                            @foreach($roles as $role)
                            <label class="flex items-center gap-2 px-3 py-2 rounded-lg border-2 border-purple-200 dark:border-purple-800 bg-white dark:bg-slate-800 cursor-pointer hover:border-purple-400 transition-colors">
                                <input type="checkbox" name="participant_roles[]" value="{{ $role->slug }}"
                                       {{ in_array($role->slug, old('participant_roles', [])) ? 'checked' : '' }}
                                       class="w-4 h-4 rounded text-purple-600 focus:ring-purple-500">
                                <span class="text-sm text-gray-700 dark:text-gray-300">{{ $role->name }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex gap-3 mt-8">
                <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-lg hover:shadow-lg hover:scale-105 transition-all">建立考試</button>
                <a href="{{ route('exams.index') }}" class="px-6 py-3 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>
        </form>
    </div>
</div>

<script>
function examCreateForm() {
    return {
        yearStart: '',
        yearEnd: '',
        bankExamName: '',
        bankSubjects: [],
        selectedSubjectIds: [],
        examNames: [],
        questionCount: 0,
        examTitle: '{{ old('title', '') }}',
        loading: false,

        async fetchFilter() {
            this.loading = true;
            const params = new URLSearchParams();
            if (this.yearStart) params.set('year_start', this.yearStart);
            if (this.yearEnd) params.set('year_end', this.yearEnd);
            if (this.bankExamName) params.set('exam_name', this.bankExamName);
            if (this.selectedSubjectIds.length) {
                this.selectedSubjectIds.forEach(id => params.append('subject_ids[]', id));
            }

            try {
                const res = await fetch(`{{ route('exams.bank-filter') }}?${params.toString()}`);
                const data = await res.json();
                this.examNames = data.exam_names || [];
                this.bankSubjects = data.subjects || [];
                this.questionCount = data.question_count || 0;
            } catch (e) {
                console.error('篩選失敗', e);
            }
            this.loading = false;
        },

        onYearChange() {
            this.bankExamName = '';
            this.bankSubjects = [];
            this.selectedSubjectIds = [];
            this.questionCount = 0;
            if (this.yearStart || this.yearEnd) {
                this.fetchFilter();
            } else {
                this.examNames = [];
            }
        },

        onExamNameChange() {
            this.selectedSubjectIds = [];
            this.questionCount = 0;
            if (this.bankExamName) {
                this.fetchFilter();
                this.updateTitle();
            } else {
                this.bankSubjects = [];
            }
        },

        onSubjectChange() {
            this.fetchFilter();
            this.updateTitle();
        },

        updateTitle() {
            if (!this.bankExamName) return;
            const subjectNames = this.bankSubjects
                .filter(s => this.selectedSubjectIds.includes(s.id))
                .map(s => s.name);
            const yearPart = this.yearStart ? (this.yearStart + '年') : '';
            const subjectPart = subjectNames.length ? ' - ' + subjectNames.join('、') : '';
            this.examTitle = yearPart + this.bankExamName + subjectPart;
        },
    };
}
</script>
@endsection