@extends('layouts.app')
@section('title', '我的考試')
@section('content')
<div class="max-w-6xl mx-auto">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">我的考試</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">管理您建立的考試與題目</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('import.create') }}" class="px-4 py-2.5 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">匯入題目</a>
            <a href="{{ route('exams.create') }}" class="px-4 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg text-sm font-medium hover:shadow-lg hover:scale-105 transition-all">+ 建立考試</a>
        </div>
    </div>

    <!-- Filters -->
    <form method="GET" x-data="examIndexFilter()" class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-4 mb-6">
        <div class="flex flex-wrap gap-3">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="搜尋考試名稱..." class="flex-1 min-w-[200px] 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 text-sm focus:outline-none focus:border-blue-500">
            <select name="category_id" x-model="categoryId" @change="onCategoryChange()" class="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 text-sm">
                <option value="">所有考試類別</option>
                @foreach($categoryOptions as $opt)
                    <option value="{{ $opt['id'] }}" {{ request('category_id') == $opt['id'] ? 'selected' : '' }}>{{ str_repeat('　', $opt['depth']) }}{{ $opt['depth'] > 0 ? '└ ' : '' }}{{ $opt['name'] }}</option>
                @endforeach
            </select>
            <select name="subject_id" x-model="subjectId" @change="$el.form.submit()" class="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 text-sm">
                <option value="" x-text="categoryId ? '該類別所有考科' : '請先選擇類別'"></option>
                <template x-for="sub in availableSubjects" :key="sub.id">
                    <option :value="sub.id" :selected="sub.id == subjectId" x-text="sub.name"></option>
                </template>
            </select>
            <select name="visibility" onchange="this.form.submit()" class="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 text-sm">
                <option value="">所有公開範圍</option>
                <option value="public" {{ request('visibility') == 'public' ? 'selected' : '' }}>公開</option>
                <option value="school" {{ request('visibility') == 'school' ? 'selected' : '' }}>學校內</option>
                <option value="class" {{ request('visibility') == 'class' ? 'selected' : '' }}>班級內</option>
                <option value="private" {{ request('visibility') == 'private' ? 'selected' : '' }}>僅自己</option>
            </select>
            <button class="px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">搜尋</button>
            @if(request()->hasAny(['search', 'category_id', 'subject_id', 'visibility']))
                <a href="{{ route('exams.index') }}" class="px-4 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300 rounded-lg text-sm font-medium">清除</a>
            @endif
        </div>
    </form>
    <script>
    function examIndexFilter() {
        return {
            categoryId: '{{ request('category_id', '') }}',
            subjectId: '{{ request('subject_id', '') }}',
            subjectMap: @json($catSubjectMap),
            get availableSubjects() {
                if (!this.categoryId) return [];
                return this.subjectMap[this.categoryId] || [];
            },
            onCategoryChange() {
                this.subjectId = '';
                this.$nextTick(() => this.$el.submit());
            },
        };
    }
    </script>

    @include('components.pagination-bar', ['paginator' => $exams])

    <!-- Exam Table -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mt-4">
        <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-slate-800"><tr>
                <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">考試名稱</th>
                <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">考科</th>
                <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">分類</th>
                <th class="px-4 py-3 text-center font-semibold text-gray-600 dark:text-gray-300">題數</th>
                <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">公開範圍</th>
                <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">學校/班級</th>
                <th class="px-4 py-3 text-left font-semibold text-gray-600 dark:text-gray-300">操作</th>
            </tr></thead>
            <tbody>
            @forelse($exams as $exam)
            <tr class="border-t border-gray-100 dark:border-slate-800 hover:bg-gray-50 dark:hover:bg-slate-800/50">
                <td class="px-4 py-3 max-w-xs">
                    <a href="{{ route('exams.show', $exam) }}" class="font-medium text-blue-600 dark:text-blue-400 hover:underline break-words" title="{{ $exam->title }}">{{ $exam->title }}</a>
                    @if($exam->year)<span class="ml-1 text-xs text-gray-400">({{ $exam->year }})</span>@endif
                </td>
                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">{{ $exam->subject->name ?? '-' }}</td>
                <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs">{{ $exam->examCategory->name ?? '-' }}</td>
                <td class="px-4 py-3 text-center">
                    <span class="px-2 py-0.5 text-xs font-bold rounded-full {{ $exam->questions_count > 0 ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' : 'bg-gray-100 text-gray-500' }}">{{ $exam->questions_count }}</span>
                </td>
                <td class="px-4 py-3">
                    @php $vis = ['public' => ['公開','green'], 'school' => ['學校內','yellow'], 'class' => ['班級內','blue'], 'private' => ['僅自己','gray']]; $v = $vis[$exam->visibility] ?? ['未知','gray']; @endphp
                    <span class="px-2 py-0.5 text-xs font-bold rounded-full bg-{{ $v[1] }}-100 text-{{ $v[1] }}-700 dark:bg-{{ $v[1] }}-900/30 dark:text-{{ $v[1] }}-400">{{ $v[0] }}</span>
                </td>
                <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                    {{ $exam->school->name ?? '' }}
                    @if($exam->schoolClass) / {{ $exam->schoolClass->name }} @endif
                </td>
                <td class="px-4 py-3">
                    <div class="flex gap-2">
                        <a href="{{ route('exams.show', $exam) }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">管理</a>
                        <a href="{{ route('exams.edit', $exam) }}" class="text-gray-600 hover:text-gray-800 dark:text-gray-400 text-sm font-medium">編輯</a>
                        <form action="{{ route('exams.destroy', $exam) }}" method="POST" onsubmit="return confirm('確定刪除此考試及所有題目？')">@csrf @method('DELETE')
                            <button class="text-red-600 hover:text-red-800 text-sm font-medium">刪除</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="px-4 py-12 text-center text-gray-500 dark:text-gray-400">
                <p class="text-lg mb-2">尚未建立任何考試</p>
                <a href="{{ route('exams.create') }}" class="text-blue-600 hover:underline">建立第一個考試</a>
            </td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
    </div>
    <div class="mt-4">@include('components.pagination-bar', ['paginator' => $exams])</div>
</div>
@endsection