@extends('layouts.cbt')
@section('page-title', 'Dashboard Siswa')
@section('sidebar')@include('components.siswa-sidebar')@endsection
@section('content')
<div class="card-sdn mb-6">
    <p class="text-gray-600">Selamat datang, <strong>{{ auth()->user()->name }}</strong></p>
    <p class="text-sm text-gray-500 break-words">NIS: {{ $student->nis }} &bull; NISN: {{ $student->nisn }} &bull; Kelas: {{ $student->schoolClass->name }}</p>
</div>

@if($ongoing->count())
<div class="mb-8">
    <h3 class="font-extrabold text-lg mb-4 text-orange-600">Ujian Sedang Berlangsung</h3>
    <p class="text-xs text-gray-400 mb-4">Jawaban tersimpan otomatis di server.</p>
    @foreach($ongoing as $a)
    <div class="card-sdn border-l-4 border-orange-500 flex flex-wrap justify-between items-center gap-4 mb-3">
        <div>
            <p class="font-bold">{{ $a->exam->title }}</p>
            <p class="text-sm text-gray-500">{{ $a->exam->subject->name }}</p>
            <p class="text-xs text-gray-500 mt-1">
                {{ $a->answers_count }}/{{ $a->exam->examQuestions->count() }} terisi
                &bull; Sisa: {{ gmdate('i:s', max(0, $a->remainingSeconds())) }}
            </p>
        </div>
        <a href="{{ route('siswa.exam.resume', $a) }}" class="btn-sdn-primary">Lanjutkan Ujian</a>
    </div>
    @endforeach
</div>
@endif

<div class="mb-8">
    <h3 class="font-extrabold text-lg mb-4">Ujian Tersedia</h3>
    @forelse($available as $exam)
    <div class="card-sdn flex flex-wrap justify-between items-center gap-4 mb-3">
        <div>
            <p class="font-bold">{{ $exam->title }}</p>
            <p class="text-sm text-gray-500">{{ $exam->subject->name }} | {{ $exam->duration_minutes }} menit | KKM: {{ $exam->passing_score }}</p>
            <p class="text-xs text-gray-400">{{ $exam->start_at->format('d/m/Y H:i') }} - {{ $exam->end_at->format('d/m/Y H:i') }}</p>
        </div>
        <form method="POST" action="{{ route('siswa.exam.start', $exam) }}" class="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center w-full sm:w-auto">
            @csrf
            @if($exam->token)
            <input name="token" class="form-input w-full sm:w-28" placeholder="Token" required>
            @endif
            <button class="btn-sdn-primary justify-center">Mulai Ujian</button>
        </form>
    </div>
    @empty
    <p class="text-gray-500">Tidak ada ujian tersedia saat ini</p>
    @endforelse
</div>

<div>
    <h3 class="font-extrabold text-lg mb-4">Riwayat Ujian</h3>
    @forelse($completed as $a)
    <div class="card-sdn flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-3">
        <div class="min-w-0">
            <p class="font-bold break-words">{{ $a->exam->title }}</p>
            <p class="text-sm text-gray-500">{{ $a->submitted_at?->format('d/m/Y H:i') }}</p>
        </div>
        <div class="text-left sm:text-right shrink-0">
            @if($a->exam->show_score)
            <p class="text-2xl font-extrabold {{ $a->isPassed() ? 'text-green-600' : 'text-red-500' }}">{{ $a->score }}</p>
            <p class="text-xs">{{ $a->isPassed() ? 'Lulus' : 'Remedial' }}</p>
            @endif
            <a href="{{ route('siswa.exam.result', $a) }}" class="text-blue-600 text-sm font-semibold">Lihat</a>
        </div>
    </div>
    @empty
    <p class="text-gray-500">Belum ada riwayat</p>
    @endforelse
</div>
@endsection