@extends('layouts.app')

@section('title', 'Evaluasi')

@section('content')
<div class="mx-auto max-w-6xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Ruang Belajar</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Evaluasi</p>
            <h1 class="pkbm-dashboard__title">Evaluasi Pembelajaran</h1>
            <p class="pkbm-dashboard__subtitle">{{ $student->className }}{{ $period ? ' · '.$period->tahun_pelajaran.' · Semester '.$period->semester : '' }}</p>
        </div>
    </header>
    @if (session('status'))<div role="status" class="settings-notice settings-notice--success">{{ session('status') }}</div>@endif
    @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.</p>
    @elseif ($evaluations->isEmpty())
        <p class="rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900">Belum ada evaluasi yang tersedia untuk kelas Anda.</p>
    @else
        <section class="grid gap-4 md:grid-cols-2">
            @foreach ($evaluations as $evaluation)
                <article class="sp-card flex flex-col p-5">
                    <span class="w-fit rounded-full bg-blue-50 px-3 py-1 text-xs font-bold text-blue-700">{{ $evaluation->nama_mapel }}</span>
                    <h2 class="mt-3 text-lg font-bold text-slate-900">{{ $evaluation->judul }}</h2>
                    <p class="mt-2 text-sm text-slate-500">{{ $evaluation->question_count }} soal</p>
                    @if ($evaluation->completed_at)
                        <div class="mt-4 rounded-lg bg-emerald-50 p-3 text-sm text-emerald-800">
                            <p class="font-semibold">Dikumpulkan · {{ $evaluation->completed_at }}</p>
                            @if ($evaluation->nilai !== null)
                                <p class="mt-1">Nilai: <strong>{{ number_format((float) $evaluation->nilai, 2, ',', '.') }}</strong></p>
                            @else
                                <p class="mt-1">Jawaban sedang diperiksa oleh guru.</p>
                            @endif
                        </div>
                    @else
                        <a class="sp-btn-primary mt-4 w-fit" href="{{ route('student.learning.evaluations.show', ['subjectId' => $evaluation->id_mapel, 'materialId' => $evaluation->id_materi]) }}">Kerjakan evaluasi<i class="bi bi-arrow-right" aria-hidden="true"></i></a>
                    @endif
                </article>
            @endforeach
        </section>
    @endif
</div>
@endsection