@extends('layouts.admin')
@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold font-display text-ink-900">Exams</h1>
        <a href="{{ route('admin.exams.create') }}" class="inline-flex items-center px-4 py-2 bg-seal-blue-700 text-white rounded hover:bg-seal-blue-700/90 transition">
            Create Exam
        </a>
    </div>

    <div class="bg-white rounded border border-graphite-400/30 p-4">
        <form method="GET" action="{{ route('admin.exams.index') }}" class="flex flex-wrap gap-4 items-end">
            <div class="flex-1 min-w-[200px]">
                <label for="search" class="block text-sm font-medium text-ink-600 mb-1">Search</label>
                <input type="text" id="search" name="search" value="{{ request('search') }}" placeholder="Search by name or year..." class="w-full rounded border-graphite-400/50 border px-3 py-2 focus:ring-seal-blue-700 focus:border-seal-blue-700">
            </div>
            <div class="min-w-[160px]">
                <label for="status" class="block text-sm font-medium text-ink-600 mb-1">Status</label>
                <select id="status" name="status" class="w-full rounded border-graphite-400/50 border px-3 py-2 focus:ring-seal-blue-700 focus:border-seal-blue-700">
                    <option value="">All Statuses</option>
                    <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>
            <button type="submit" class="px-4 py-2 bg-ink-600 text-white rounded hover:bg-graphite-400 transition">Filter</button>
            @if(request('search') || request('status'))
                <a href="{{ route('admin.exams.index') }}" class="px-4 py-2 bg-paper-50 text-ink-600 rounded hover:bg-graphite-400/50 transition">Clear</a>
            @endif
        </form>
    </div>

    <div class="bg-white rounded border border-graphite-400/30 overflow-hidden">
        <table class="min-w-full divide-y divide-graphite-400/30">
            <thead class="bg-paper-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Academic Year</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Class</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Subjects Count</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-graphite-400 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-graphite-400/30">
                @forelse($exams as $exam)
                <tr class="hover:bg-paper-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-ink-900">
                        <a href="{{ route('admin.exams.show', $exam) }}" class="text-seal-blue-700 hover:underline">{{ $exam->name }}</a>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-graphite-400">{{ $exam->academic_year }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-graphite-400">{{ $exam->class }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-graphite-400">{{ $exam->subjects_count ?? $exam->subjects->count() }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @php
                            $statusColors = [
                                'draft' => 'bg-amber-600/10 text-amber-600',
                                'active' => 'bg-ledger-green-700/10 text-ledger-green-700',
                                'completed' => 'bg-seal-blue-700/10 text-seal-blue-700',
                                'cancelled' => 'bg-redpen-600/10 text-redpen-600',
                            ];
                        @endphp
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ $statusColors[$exam->status] ?? 'bg-paper-100 text-graphite-400' }}">
                            {{ ucfirst($exam->status) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <a href="{{ route('admin.exams.edit', $exam) }}" class="text-indigo-600 hover:underline mr-3">Edit</a>
                        <form action="{{ route('admin.exams.destroy', $exam) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-redpen-600 hover:underline">Delete</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-sm text-graphite-400">No exams found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if(method_exists($exams, 'links'))
        <div class="mt-4">
            {{ $exams->withQueryString()->links() }}
        </div>
    @endif
</div>
@endsection