@extends('layouts.app')

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

@section('content')
<div class="space-y-4 md:space-y-6">
    <h1 class="text-xl md:text-2xl font-bold text-gray-800">Detail Ujian</h1>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-6 space-y-3 md:space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4 text-sm">
            <div><span class="text-gray-500">Judul:</span> <span class="font-medium">{{ $exam->title }}</span></div>
            <div><span class="text-gray-500">Mata Kuliah:</span> <span class="font-medium">{{ $exam->course->name }}</span></div>
            <div><span class="text-gray-500">Mulai:</span> <span class="font-medium">{{ $exam->start_time->format('d M Y H:i') }} WITA</span></div>
            <div><span class="text-gray-500">Selesai:</span> <span class="font-medium">{{ $exam->end_time->format('d M Y H:i') }} WITA</span></div>
            <div><span class="text-gray-500">Durasi:</span> <span class="font-medium">{{ $exam->duration }} menit</span></div>
            <div><span class="text-gray-500">Status:</span> <span class="font-medium capitalize">{{ $exam->status }}</span></div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 md:px-6 py-3 md:py-4 border-b border-gray-100"><h2 class="font-semibold text-sm md:text-base">Soal ({{ $exam->questions->count() }})</h2></div>
        <div class="divide-y divide-gray-100">
            @foreach($exam->questions as $q)
                <div class="px-4 md:px-6 py-3 md:py-4">
                    <p class="font-medium text-sm">{{ $loop->iteration }}. {{ $q->question }}</p>
                    <p class="text-xs text-gray-500 mt-1">Tipe: {{ str_replace('_', ' ', $q->type) }} | Bobot: {{ $q->point }}</p>
                </div>
            @endforeach
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 md:px-6 py-3 md:py-4 border-b border-gray-100"><h2 class="font-semibold text-sm md:text-base">Peserta ({{ $exam->participants->count() }})</h2></div>
        <div class="divide-y divide-gray-100">
            @foreach($exam->participants as $p)
                <div class="px-4 md:px-6 py-3 md:py-4 flex flex-col sm:flex-row sm:justify-between gap-1">
                    <span class="text-sm">{{ $p->user->name }} ({{ $p->user->identifier }})</span>
                    <span class="text-xs text-gray-500 capitalize">{{ $p->status }}</span>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection