@extends('layouts.app')
@section('title', '練習考試')
@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Header -->
    <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>
        @auth
        <a href="{{ route('practice.create_custom') }}" class="px-5 py-2.5 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium rounded-lg hover:shadow-lg hover:scale-105 transition-all">
            + 自建考試
        </a>
        @endauth
    </div>

    <!-- 不需要篩選，我的練習就是自己建的 -->

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

    <!-- Exam Grid -->
    @if($exams->count() > 0)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($exams as $exam)
        @php
            $bestScore = $myResults[$exam->id] ?? null;
            $attempts = $myAttempts[$exam->id] ?? 0;
        @endphp
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden hover:shadow-xl transition-shadow group"
             x-data="{ expanded: false }">
            <!-- Card Header -->
            <div class="p-5 pb-3">
                <div class="flex items-start justify-between mb-2">
                    <div class="flex gap-2 flex-wrap">
                        @if($exam->examCategory)
                        <span class="px-2 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->subject)
                        <span class="px-2 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
                    </div>
                    <span class="px-2 py-0.5 text-xs rounded-full font-bold flex-shrink-0 {{ $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>
                <!-- 標題：預設顯示兩行，點擊展開完整 -->
                <h3 class="font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors cursor-pointer"
                    :class="expanded ? 'text-sm leading-relaxed' : 'text-base line-clamp-2'"
                    @click="expanded = !expanded"
                    title="{{ $exam->title }}">{{ $exam->title }}</h3>
                @if($exam->description)
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">{{ Str::limit($exam->description, 80) }}</p>
                @endif
            </div>

            <!-- Stats -->
            <div class="px-5 py-3 border-t border-gray-100 dark:border-slate-800">
                <div class="flex items-center justify-between text-sm">
                    <div class="flex items-center gap-4 text-gray-500 dark:text-gray-400">
                        <span class="flex items-center gap-1">
                            <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            {{ $exam->questions_count }} 題
                        </span>
                        @if($exam->creator)
                        <span class="flex items-center gap-1">
                            <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            {{ $exam->creator->name }}
                        </span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Score & Action -->
            <div class="px-5 py-3 border-t border-gray-100 dark:border-slate-800 bg-gray-50/50 dark:bg-slate-800/30">
                <div class="flex items-center justify-between">
                    @if($bestScore !== null)
                    <div class="flex items-center gap-2">
                        <div class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold
                            {{ $bestScore >= 80 ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : ($bestScore >= 60 ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400') }}">
                            {{ $bestScore }}
                        </div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">
                            <p class="font-medium">最佳成績</p>
                            <p>已練習 {{ $attempts }} 次</p>
                        </div>
                    </div>
                    @else
                    <span class="text-xs text-gray-400 dark:text-gray-500">尚未練習</span>
                    @endif
                    <a href="{{ route('answers.show', $exam) }}" class="px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-sm font-medium rounded-lg hover:shadow-lg hover:scale-105 transition-all">
                        {{ $bestScore !== null ? '再次練習' : '開始練習' }}
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    <div class="mt-8">@include('components.pagination-bar', ['paginator' => $exams])</div>
    @else
    <div class="text-center py-16">
        <svg class="w-16 h-16 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-gray-500 dark:text-gray-400 text-lg">目前沒有可用的考試</p>
        <p class="text-gray-400 dark:text-gray-500 text-sm mt-1">請等待老師發佈考試，或自行建立練習</p>
    </div>
    @endif
</div>
@endsection