@extends('layouts.app')

@section('title', 'Daftar Ujian')

@php
    $statusMeta = [
        'tersedia' => ['label' => 'Siap Dikerjakan', 'class' => 'bg-emerald-50 text-emerald-700', 'icon' => 'bi-pencil-square'],
        'ulang' => ['label' => 'Boleh Diulang', 'class' => 'bg-amber-50 text-amber-700', 'icon' => 'bi-arrow-clockwise'],
        'belum' => ['label' => 'Belum Dimulai', 'class' => 'bg-sky-50 text-sky-700', 'icon' => 'bi-clock-history'],
        'lewat' => ['label' => 'Waktu Habis', 'class' => 'bg-rose-50 text-rose-700', 'icon' => 'bi-alarm'],
        'habis' => ['label' => 'Kesempatan Habis', 'class' => 'bg-slate-100 text-slate-600', 'icon' => 'bi-lock-fill'],
        'menunggu' => ['label' => 'Menunggu Jadwal', 'class' => 'bg-slate-100 text-slate-600', 'icon' => 'bi-hourglass-split'],
    ];
@endphp

@section('content')
<div class="mx-auto max-w-6xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="pkbm-dashboard__breadcrumb"><a class="text-blue-700" href="{{ route('student.dashboard') }}">Ruang Belajar</a><i class="bi bi-chevron-right" aria-hidden="true"></i>Ujian</p>
                <h1 class="pkbm-dashboard__title">Daftar Ujian PTS &amp; PAS</h1>
                <p class="pkbm-dashboard__subtitle">{{ $student->className ?: 'Kelas Anda' }} · {{ $period ? 'TP '.$period->tahun_pelajaran.' · Semester '.$period->semester : 'Periode akademik belum diatur' }}</p>
            </div>
            <div class="flex items-center gap-2 rounded-xl bg-white/90 px-3.5 py-2 shadow-sm backdrop-blur">
                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700"><i class="bi bi-person-badge"></i></div>
                <div class="text-xs">
                    <span class="block text-[10px] font-bold uppercase text-slate-400">Siswa</span>
                    <span class="font-bold text-slate-800">{{ $student->name }}</span>
                </div>
            </div>
        </div>
    </header>

    @if (session('status'))<div role="status" class="settings-notice settings-notice--success">{{ session('status') }}</div>@endif
    @if ($errors->any())<div role="alert" class="settings-notice settings-notice--error">{{ $errors->first() }}</div>@endif

    <section class="grid grid-cols-2 gap-3 sm:grid-cols-4">
        @foreach ([
            ['label' => 'Total Ujian', 'value' => $counts['total'], 'icon' => 'bi-journal-text', 'tone' => 'text-slate-700'],
            ['label' => 'Siap Dikerjakan', 'value' => $counts['tersedia'], 'icon' => 'bi-pencil-square', 'tone' => 'text-emerald-600'],
            ['label' => 'Sudah Dikerjakan', 'value' => $counts['selesai'], 'icon' => 'bi-check2-circle', 'tone' => 'text-blue-600'],
            ['label' => 'Terkunci', 'value' => $counts['habis'], 'icon' => 'bi-lock-fill', 'tone' => 'text-rose-600'],
        ] as $card)
            <article class="sp-card p-4">
                <div class="flex items-center gap-3">
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 {{ $card['tone'] }}"><i class="bi {{ $card['icon'] }} text-lg" aria-hidden="true"></i></span>
                    <div><p class="text-xl font-extrabold leading-none text-slate-900">{{ $card['value'] }}</p><p class="mt-1 text-xs text-slate-500">{{ $card['label'] }}</p></div>
                </div>
            </article>
        @endforeach
    </section>

    <nav class="sp-card flex flex-wrap gap-2 p-2.5" aria-label="Jenis ujian">
        @foreach (['' => 'Semua', 'PTS' => 'PTS / PSTS', 'PAS' => 'PAS / PSAS'] as $param => $label)
            <a href="{{ route('student.exams.index', $param ? ['jenis' => $param] : []) }}" @class([
                'inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-semibold no-underline transition',
                'bg-blue-600 text-white shadow-sm' => $jenis === $param,
                'text-slate-600 hover:bg-slate-100' => $jenis !== $param,
            ])>{{ $label }}</a>
        @endforeach
    </nav>

    @if (! $period)
        <p class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Periode akademik aktif belum diatur oleh administrator.</p>
    @elseif ($exams->isEmpty())
        <div class="sp-card p-12 text-center text-slate-400">
            <div class="mb-3 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 text-slate-400"><i class="bi bi-journal-x text-3xl" aria-hidden="true"></i></div>
            <h2 class="text-[13.5px]! font-extrabold! text-slate-700!">Belum Ada Ujian</h2>
            <p class="mx-auto mt-1 max-w-sm text-sm text-slate-500">Butir soal ujian belum dipublikasikan untuk kelas Anda pada periode ini.</p>
        </div>
    @else
        <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @foreach ($exams as $exam)
                @php $meta = $statusMeta[$exam->status] ?? $statusMeta['menunggu']; @endphp
                <article class="sp-card flex flex-col gap-3 p-5">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-bold text-blue-700">{{ $exam->jenis === 'PTS' ? 'PTS / PSTS' : 'PAS / PSAS' }}</span>
                        <span class="rounded-full px-3 py-1 text-xs font-bold {{ $meta['class'] }}"><i class="bi {{ $meta['icon'] }} mr-1" aria-hidden="true"></i>{{ $meta['label'] }}</span>
                    </div>
                    <div>
                        <h2 class="text-[13.5px]! font-extrabold! leading-snug! text-slate-900!">{{ $exam->subjectName }}</h2>
                        <p class="mt-1 text-xs text-slate-500">{{ $exam->examName }} · {{ $exam->questionCount }} butir soal</p>
                    </div>

                    @if ($exam->schedule)
                        <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50 p-3 text-xs text-slate-600">
                            <p class="flex items-center gap-1.5"><i class="bi bi-calendar-event" aria-hidden="true"></i>{{ $exam->schedule->hari ?: '-' }} · {{ $exam->schedule->tgl_ujian }}</p>
                            <p class="mt-1 flex items-center gap-1.5"><i class="bi bi-clock" aria-hidden="true"></i>{{ substr((string) $exam->schedule->waktu_mulai, 0, 5) }} – {{ substr((string) $exam->schedule->waktu_selesai, 0, 5) }} WIB</p>
                        </div>
                    @endif

                    <p class="text-xs text-slate-500">
                        Kesempatan terpakai: <strong class="text-slate-700">{{ $exam->attempt }}/{{ $exam->maxAttempts }}</strong>
                        @if ($exam->answered > 0) · Terkirim {{ $exam->answered }} jawaban @endif
                        @if ($exam->avgScore !== null) · Rata-rata nilai <strong class="text-emerald-700">{{ number_format($exam->avgScore, 2, ',', '.') }}</strong> @endif
                    </p>
                    @if ($exam->notice)<p class="rounded-lg bg-amber-50 p-2.5 text-xs text-amber-800">{{ $exam->notice }}</p>@endif

                    <div class="mt-auto flex flex-wrap gap-2 pt-1">
                        @if ($exam->open)
                            <a class="sp-btn-primary flex-1 justify-center" href="{{ route('student.exams.show', $exam->key) }}"><i class="bi bi-pencil-square" aria-hidden="true"></i>{{ $exam->attempt > 0 ? 'Kerjakan Ulang' : 'Kerjakan' }}</a>
                        @else
                            <button type="button" class="sp-btn-disabled flex-1 justify-center" disabled title="{{ $exam->notice }}">
                                <i class="bi {{ $meta['icon'] }}" aria-hidden="true"></i>{{ $meta['label'] }}
                            </button>
                        @endif
                        @if ($exam->answered > 0)
                            <a class="sp-btn-secondary justify-center" href="{{ route('student.exams.result', $exam->key) }}"><i class="bi bi-eye" aria-hidden="true"></i>Lihat Jawaban</a>
                        @endif
                    </div>
                </article>
            @endforeach
        </section>
    @endif
</div>
@endsection