@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>

    {{-- 篩選 --}}
    @php
        $subjectMapJson = collect($catSubjectMap)->map(function ($subjects) {
            return collect($subjects)->map(fn($name, $id) => ['id' => $id, 'name' => $name])->values();
        });
    @endphp
    <form method="GET" x-data="myExamsFilter()" 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="">
                    <span x-text="categoryId ? '該類別所有考科' : '請先選擇考試類別'"></span>
                </option>
                <template x-if="!categoryId">
                    <option value="" disabled>-- 請先選擇考試類別 --</option>
                </template>
                <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="status" 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="ongoing" {{ request('status') == 'ongoing' ? 'selected' : '' }}>進行中</option>
                <option value="upcoming" {{ request('status') == 'upcoming' ? 'selected' : '' }}>未開始</option>
                <option value="ended" {{ request('status') == 'ended' ? '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', 'status']))
                <a href="{{ route('my-exams') }}" 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 myExamsFilter() {
        return {
            categoryId: '{{ request('category_id', '') }}',
            subjectId: '{{ request('subject_id', '') }}',
            subjectMap: @json($subjectMapJson),
            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])

    {{-- 考試列表 --}}
    <div class="space-y-4 mt-4">
        @forelse($exams as $exam)
        @php
            $result = $myResults[$exam->id] ?? null;
            $statusLabel = $exam->status_label;
            $statusColors = match($statusLabel) {
                '進行中' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
                '未開始' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
                '已結束' => 'bg-gray-100 text-gray-500 dark:bg-slate-800 dark:text-gray-500',
                default => 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
            };
        @endphp
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-5 hover:shadow-xl transition-shadow"
             x-data="{ showFull: false }">
            <div class="flex flex-col md:flex-row md:items-center gap-4">
                {{-- 左側：考試資訊 --}}
                <div class="flex-1 min-w-0">
                    <div class="flex items-start gap-2 mb-1.5">
                        <h3 class="font-bold text-gray-900 dark:text-white cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                            :class="showFull ? 'text-sm leading-relaxed' : 'text-base line-clamp-2'"
                            @click="showFull = !showFull"
                            title="{{ $exam->title }}">{{ $exam->title }}</h3>
                        <span class="px-2.5 py-0.5 text-xs font-bold rounded-full {{ $statusColors }} flex-shrink-0 mt-0.5">{{ $statusLabel }}</span>
                    </div>

                    <div class="flex flex-wrap gap-2 mb-2">
                        @if($exam->subject)
                            <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">{{ $exam->subject->name }}</span>
                        @endif
                        @foreach($exam->subjects as $sub)
                            @if($sub->id !== $exam->subject_id)
                            <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">{{ $sub->name }}</span>
                            @endif
                        @endforeach
                        @if($exam->examCategory)
                            <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-600 dark:bg-slate-800 dark:text-gray-400">{{ $exam->examCategory->name }}</span>
                        @endif
                        <span class="text-xs text-gray-400">{{ $exam->questions_count }} 題</span>
                    </div>

                    {{-- 時間資訊 --}}
                    @if($exam->start_time || $exam->end_time)
                    <div class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
                        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        @if($exam->start_time){{ $exam->start_time->format('Y-m-d H:i') }}@endif
                        @if($exam->start_time && $exam->end_time) ~ @endif
                        @if($exam->end_time){{ $exam->end_time->format('Y-m-d H:i') }}@endif
                    </div>
                    @endif

                    @if($exam->description)
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">{{ $exam->description }}</p>
                    @endif
                </div>

                {{-- 右側：成績 + 按鈕 --}}
                <div class="flex items-center gap-4 flex-shrink-0">
                    @if($result)
                    <div class="text-center px-4">
                        <p class="text-2xl font-bold {{ $result->best_score >= 60 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">{{ $result->best_score }}</p>
                        <p class="text-xs text-gray-400">最高分 ({{ $result->attempts }}次)</p>
                    </div>
                    @endif

                    <div class="flex flex-col gap-2">
                        @if($statusLabel === '進行中' || $statusLabel === '未排程')
                        <a href="{{ route('answers.show', $exam) }}" class="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg text-sm font-medium hover:shadow-lg transition-all text-center whitespace-nowrap">
                            {{ $result ? '再考一次' : '開始考試' }}
                        </a>
                        @elseif($statusLabel === '未開始')
                        <span class="px-5 py-2.5 bg-gray-100 dark:bg-slate-800 text-gray-400 rounded-lg text-sm font-medium text-center cursor-not-allowed">尚未開放</span>
                        @else
                        <span class="px-5 py-2.5 bg-gray-100 dark:bg-slate-800 text-gray-400 rounded-lg text-sm font-medium text-center cursor-not-allowed">已截止</span>
                        @endif

                        @if($result)
                        <a href="{{ route('practice.results', $exam) }}" class="px-5 py-2 border border-gray-200 dark:border-slate-700 text-gray-600 dark:text-gray-400 rounded-lg text-xs font-medium hover:bg-gray-50 dark:hover:bg-slate-800 text-center transition-colors">查看成績</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-12 text-center">
            <svg class="w-14 h-14 mx-auto text-gray-300 dark:text-gray-600 mb-4" 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 text-gray-500 dark:text-gray-400 mb-2">目前沒有可參加的考試</p>
            <p class="text-sm text-gray-400 dark:text-gray-500">請等待老師指派考試，或前往<a href="{{ route('practice.index') }}" class="text-blue-600 hover:underline">練習考試</a>自主練習</p>
        </div>
        @endforelse
    </div>

    {{-- 下方分頁 --}}
    <div class="mt-4">@include('components.pagination-bar', ['paginator' => $exams])</div>
</div>
@endsection