@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.update', $exam) }}" method="POST">
            @csrf @method('PUT')
            <div class="space-y-5">
                {{-- 考試名稱 --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試名稱 *</label>
                    <input type="text" name="title" value="{{ old('title', $exam->title) }}" 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-blue-500 transition-colors">
                </div>

                {{-- 考試說明 --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試說明</label>
                    <textarea name="description" rows="3" 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', $exam->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', $exam->start_time?->format('Y-m-d\TH:i')) }}"
                                   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', $exam->end_time?->format('Y-m-d\TH:i')) }}"
                                   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>

                {{-- 分類與考科（聯動） --}}
                @php $examSubjectIds = old('subject_ids', $exam->subjects->pluck('id')->toArray()); @endphp
                <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">
                                <option value="">-- 請選擇分類 --</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ old('exam_category_id', $exam->exam_category_id) == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                    @foreach($cat->allChildren ?? $cat->children ?? [] as $child)
                                        <option value="{{ $child->id }}" {{ old('exam_category_id', $exam->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', $exam->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">
                                <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"
                                           :checked="editSubjectIds.includes(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', $exam->exam_category_id) }}',
                        subjectId: '{{ old('subject_id', $exam->subject_id) }}',
                        editSubjectIds: @json(array_map('intval', $examSubjectIds)),
                        map: @json($catSubjectMap),
                        get filteredSubjects() {
                            if (!this.catId) return [];
                            return this.map[this.catId] || this.map['all'] || [];
                        },
                        onCategoryChange() {
                            this.subjectId = '';
                        },
                    };
                }
                </script>

                {{-- 公開範圍 --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" x-data="{ visibility: '{{ old('visibility', $exam->visibility) }}' }">
                    <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">
                            <option value="private">僅自己</option>
                            <option value="class">班級內</option>
                            <option value="school">學校內</option>
                            <option value="public">公開</option>
                        </select>
                    </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', $exam->year) }}" 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">
                    </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">
                            <option value="">-- 請選擇 --</option>
                            @foreach($schools as $s)<option value="{{ $s->id }}" {{ old('school_id', $exam->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">
                            <option value="">-- 請選擇 --</option>
                            @foreach($classes as $c)<option value="{{ $c->id }}" {{ old('school_class_id', $exam->school_class_id) == $c->id ? 'selected' : '' }}>{{ $c->grade->name ?? '' }} {{ $c->name }}</option>@endforeach
                        </select>
                    </div>
                </div>

                {{-- 參與者設定 --}}
                @php
                    $examClassIds = old('participant_class_ids', $exam->getParticipantClassIds());
                    $examRoles = old('participant_roles', $exam->getParticipantRoles());
                @endphp
                <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, $examClassIds) ? '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, $examRoles) ? '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-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">更新考試</button>
                <a href="{{ route('exams.show', $exam) }}" class="px-6 py-3 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">取消</a>
            </div>
        </form>
    </div>
</div>
@endsection