@extends('layouts.app')

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

@section('content')
<div class="space-y-4 md:space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <div>
            <h1 class="text-xl md:text-2xl font-bold text-gray-800">Detail Hasil</h1>
            <p class="text-gray-500 text-sm">{{ $exam->title }} - {{ $exam->course->name }}</p>
        </div>
        <a href="{{ route('mahasiswa.results.index') }}" class="text-gray-600 hover:text-gray-800 text-sm font-medium"><i class="fas fa-arrow-left mr-1"></i>Kembali</a>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-6">
        <div class="grid grid-cols-3 gap-3 md:gap-6 text-center">
            <div>
                <p class="text-xs text-gray-500">Nilai</p>
                <p class="text-2xl md:text-3xl font-bold text-blue-600">{{ $result->total_score }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-500">Maksimal</p>
                <p class="text-2xl md:text-3xl font-bold text-gray-800">{{ $result->max_score }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-500">Persentase</p>
                <p class="text-2xl md:text-3xl font-bold {{ $result->percentage >= 60 ? 'text-green-600' : 'text-red-600' }}">{{ $result->percentage }}%</p>
            </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">Jawaban Anda</h2></div>
        <div class="divide-y divide-gray-100">
            @foreach($answers as $ans)
            <div class="px-4 md:px-6 py-3 md:py-4">
                <p class="font-medium text-sm">{{ $loop->iteration }}. {{ $ans->question->question }}</p>
                <div class="mt-2 p-3 bg-gray-50 rounded-xl text-sm">
                    <p><strong class="text-gray-500">Jawaban:</strong> {{ $ans->answer ?? '(kosong)' }}</p>
                    @if($ans->score !== null)
                        <p class="mt-1"><strong class="text-gray-500">Nilai:</strong> {{ $ans->score }} / {{ $ans->question->point }}</p>
                    @else
                        <p class="mt-1 text-amber-600"><strong>Nilai:</strong> Menunggu penilaian</p>
                    @endif
                    @if($ans->feedback)
                        <p class="mt-1 text-gray-500"><strong>Feedback:</strong> {{ $ans->feedback }}</p>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection