@extends('layouts.siswa')

@section('title', 'Riwayat Hasil Diagnosa')
@section('header', 'Riwayat Hasil Diagnosa')

@section('content')
<div class="bg-white rounded-lg shadow">
    <div class="p-6 border-b">
        <h2 class="text-xl font-semibold">Riwayat Simulasi TKA</h2>
        <p class="text-gray-500 text-sm">Daftar hasil diagnosa dari simulasi yang telah Anda kerjakan</p>
    </div>
    
    <div class="p-6">
        @if($hasilSimulasi->count() > 0)
            <div class="space-y-4">
                @foreach($hasilSimulasi as $simulasi)
                <div class="border rounded-lg p-5 hover:shadow-md transition">
                    <div class="flex justify-between items-start flex-wrap gap-4">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-2">
                                <h3 class="font-semibold text-lg">{{ $simulasi->paketUjian->nama_paket }}</h3>
                                @if($simulasi->hasilDiagnosa)
                                    @php
                                        $badgeClass = match($simulasi->hasilDiagnosa->kesiapan) {
                                            'Siap' => 'bg-green-100 text-green-800',
                                            'Kurang Siap' => 'bg-yellow-100 text-yellow-800',
                                            'Tidak Siap' => 'bg-red-100 text-red-800',
                                            default => 'bg-gray-100 text-gray-800'
                                        };
                                    @endphp
                                    <span class="px-2 py-1 rounded text-xs {{ $badgeClass }}">
                                        {{ $simulasi->hasilDiagnosa->kesiapan }}
                                    </span>
                                @endif
                            </div>
                            <p class="text-sm text-gray-500 mb-2">
                                <i class="far fa-calendar-alt mr-1"></i> {{ $simulasi->created_at->format('d/m/Y H:i') }}
                            </p>
                            <div class="flex flex-wrap gap-4 text-sm">
                                <span class="text-gray-600">
                                    <i class="fas fa-clock mr-1"></i> Durasi: {{ $simulasi->paketUjian->durasi }} menit
                                </span>
                                <span class="text-gray-600">
                                    <i class="fas fa-question-circle mr-1"></i> Soal: {{ $simulasi->paketUjian->bankSoal->count() }}
                                </span>
                            </div>
                            <div class="mt-3">
                                <span class="text-gray-600">Nilai Akhir:</span>
                                <span class="font-bold text-xl ml-2 {{ $simulasi->nilai_akhir >= 75 ? 'text-green-600' : ($simulasi->nilai_akhir >= 60 ? 'text-yellow-600' : 'text-red-600') }}">
                                    {{ number_format($simulasi->nilai_akhir ?? 0, 2) }}
                                </span>
                            </div>
                        </div>
                        <div class="text-right">
                            <a href="{{ route('siswa.hasil.detail', $simulasi->id) }}" 
                               class="bg-purple-600 text-white px-5 py-2 rounded-lg hover:bg-purple-700 transition inline-flex items-center">
                                <i class="fas fa-chart-line mr-2"></i> Lihat Diagnosa
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            
            <div class="mt-6">
                {{ $hasilSimulasi->links() }}
            </div>
        @else
            <div class="text-center py-12">
                <i class="fas fa-inbox text-6xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">Belum ada riwayat simulasi</p>
                <p class="text-sm text-gray-400 mt-1">Silakan ikuti ujian terlebih dahulu</p>
                <a href="{{ route('siswa.ujian.index') }}" class="mt-4 inline-block px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                    <i class="fas fa-play mr-2"></i> Ikuti Ujian
                </a>
            </div>
        @endif
    </div>
</div>
@endsection