@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>
        <a href="{{ route('practice.index') }}" 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 transition-all">前往練習考試</a>
    </div>

    {{-- 統計卡片 --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-5 text-center">
            <p class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ $stats['total_exams'] }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">已參加考試</p>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-5 text-center">
            <p class="text-3xl font-bold text-green-600 dark:text-green-400">{{ $stats['total_attempts'] }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">總作答次數</p>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-5 text-center">
            <p class="text-3xl font-bold {{ $stats['avg_score'] >= 60 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">{{ $stats['avg_score'] }}</p>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">平均分數</p>
        </div>
    </div>

    {{-- 搜尋 --}}
    <form method="GET" class="mb-4">
        <div class="flex gap-2">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="搜尋考試名稱..."
                   class="flex-1 max-w-sm px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-blue-500">
            <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('search'))
            <a href="{{ route('my-results') }}" class="px-4 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium">清除</a>
            @endif
        </div>
    </form>

    {{-- 上方分頁 --}}
    @include('components.pagination-bar', ['paginator' => $results])

    {{-- 成績列表 --}}
    <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>
            </tr></thead>
            <tbody>
            @forelse($results as $result)
            <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">
                    @if($result->exam)
                        <a href="{{ route('answers.show', $result->exam_id) }}" class="font-medium text-blue-600 dark:text-blue-400 hover:underline">{{ $result->exam->title }}</a>
                    @else
                        <span class="text-gray-400">考試已刪除</span>
                    @endif
                </td>
                <td class="px-4 py-3">
                    @if($result->exam?->subject)
                        <span class="px-2 py-0.5 text-xs rounded-full font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">{{ $result->exam->subject->name }}</span>
                    @else
                        <span class="text-gray-400 text-xs">-</span>
                    @endif
                </td>
                <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400">{{ $result->exam?->examCategory?->name ?? '-' }}</td>
                <td class="px-4 py-3 text-center">
                    <span class="px-3 py-1 text-sm font-bold rounded-lg {{ $result->score >= 60 ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' }}">
                        {{ $result->score }} 分
                    </span>
                </td>
                <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">
                    {{ $result->completed_at?->format('Y-m-d H:i') ?? $result->created_at->format('Y-m-d H:i') }}
                </td>
                <td class="px-4 py-3">
                    <div class="flex gap-2">
                        @if($result->exam)
                        <a href="{{ route('practice.results', $result->exam_id) }}" class="px-2 py-1 text-xs font-medium text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors">查看詳情</a>
                        <a href="{{ route('answers.show', $result->exam_id) }}" class="px-2 py-1 text-xs font-medium text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded transition-colors">再考一次</a>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="6" class="px-4 py-12 text-center text-gray-400 dark:text-gray-500">
                <svg class="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                <p class="text-lg mb-2">尚無考試紀錄</p>
                <a href="{{ route('practice.index') }}" class="text-blue-600 hover:underline">前往練習考試</a>
            </td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
    </div>

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