@extends('layouts.siswa')

@section('title', 'Dashboard Siswa')
@section('header', 'Dashboard')

@section('content')
<!-- Simulasi Aktif -->
@if($simulasiAktif)
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded-lg">
    <div class="flex justify-between items-center flex-wrap gap-4">
        <div class="flex items-center">
            <div class="mr-4">
                <i class="fas fa-hourglass-half text-3xl text-yellow-600"></i>
            </div>
            <div>
                <p class="font-semibold text-yellow-800">⚠️ Anda sedang mengerjakan ujian!</p>
                <p class="text-sm text-yellow-700">{{ $simulasiAktif->paketUjian->nama_paket }}</p>
                <p class="text-xs text-yellow-600">Silakan lanjutkan ujian Anda</p>
            </div>
        </div>
        <a href="{{ route('siswa.ujian.simulasi', $simulasiAktif->id) }}" class="bg-yellow-500 text-white px-5 py-2 rounded-lg hover:bg-yellow-600 transition">
            Lanjutkan Ujian <i class="fas fa-arrow-right ml-2"></i>
        </a>
    </div>
</div>
@endif

<!-- Statistik Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center">
            <div class="p-3 bg-blue-100 rounded-full">
                <i class="fas fa-pen text-2xl text-blue-600"></i>
            </div>
            <div class="ml-4">
                <p class="text-gray-500 text-sm">Total Simulasi</p>
                <p class="text-2xl font-bold">{{ $statistik['total_simulasi'] }}</p>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center">
            <div class="p-3 bg-green-100 rounded-full">
                <i class="fas fa-check-circle text-2xl text-green-600"></i>
            </div>
            <div class="ml-4">
                <p class="text-gray-500 text-sm">Simulasi Selesai</p>
                <p class="text-2xl font-bold">{{ $statistik['simulasi_selesai'] }}</p>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center">
            <div class="p-3 bg-purple-100 rounded-full">
                <i class="fas fa-chart-line text-2xl text-purple-600"></i>
            </div>
            <div class="ml-4">
                <p class="text-gray-500 text-sm">Rata-rata Nilai</p>
                <p class="text-2xl font-bold">{{ number_format($statistik['rata_rata_nilai'], 2) }}</p>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Simulasi Tersedia -->
    <div class="bg-white rounded-lg shadow">
        <div class="border-b px-6 py-4">
            <h3 class="text-lg font-semibold">📋 Simulasi Tersedia</h3>
            <p class="text-sm text-gray-500">Ujian yang sudah ditugaskan untuk Anda</p>
        </div>
        <div class="p-6">
            @forelse($simulasiTersedia as $simulasi)
            <div class="border rounded-lg p-4 mb-4 hover:shadow-md transition">
                <div class="flex justify-between items-start flex-wrap gap-4">
                    <div class="flex-1">
                        <h4 class="font-semibold text-lg">{{ $simulasi->paketUjian->nama_paket }}</h4>
                        <p class="text-sm text-gray-500 mt-1">{{ Str::limit($simulasi->paketUjian->deskripsi ?? 'Tidak ada deskripsi', 100) }}</p>
                        <div class="flex flex-wrap gap-4 mt-2 text-sm text-gray-500">
                            <span><i class="fas fa-clock mr-1"></i> {{ $simulasi->paketUjian->durasi }} menit</span>
                            <span><i class="fas fa-question-circle mr-1"></i> {{ $simulasi->paketUjian->bank_soal_count }} soal</span>
                            <span><i class="fas fa-key mr-1"></i> Token: <span class="font-mono font-bold">{{ $simulasi->paketUjian->token_ujian }}</span></span>
                        </div>
                    </div>
                    <div>
                        <a href="{{ route('siswa.ujian.orientasi', $simulasi->paketUjian->id) }}" 
                           class="bg-green-600 text-white px-5 py-2 rounded-lg hover:bg-green-700 transition inline-flex items-center">
                            <i class="fas fa-play mr-2"></i> Mulai Ujian
                        </a>
                    </div>
                </div>
            </div>
            @empty
            <div class="text-center py-8">
                <i class="fas fa-inbox text-5xl text-gray-300 mb-3"></i>
                <p class="text-gray-500">Belum ada simulasi yang ditugaskan</p>
                <p class="text-sm text-gray-400">Silakan hubungi guru untuk mendapatkan token ujian</p>
            </div>
            @endforelse
        </div>
    </div>
    
    <!-- Riwayat Simulasi -->
    <div class="bg-white rounded-lg shadow">
        <div class="border-b px-6 py-4">
            <h3 class="text-lg font-semibold">📊 Riwayat Simulasi</h3>
            <p class="text-sm text-gray-500">Hasil ujian yang sudah Anda kerjakan</p>
        </div>
        <div class="p-6">
            @forelse($riwayatSimulasi as $riwayat)
            <div class="border rounded-lg p-4 mb-4 hover:shadow-md transition">
                <div class="flex justify-between items-start">
                    <div>
                        <h4 class="font-semibold">{{ $riwayat->paketUjian->nama_paket }}</h4>
                        <p class="text-xs text-gray-500 mt-1">{{ $riwayat->created_at->format('d/m/Y H:i') }}</p>
                        <div class="mt-2">
                            <span class="text-sm">Nilai: </span>
                            <span class="font-bold text-lg {{ $riwayat->nilai_akhir >= 75 ? 'text-green-600' : ($riwayat->nilai_akhir >= 60 ? 'text-yellow-600' : 'text-red-600') }}">
                                {{ number_format($riwayat->nilai_akhir ?? 0, 2) }}
                            </span>
                        </div>
                        @if($riwayat->hasilDiagnosa)
                        <div class="mt-1">
                            <span class="text-xs px-2 py-1 rounded {{ $riwayat->hasilDiagnosa->kesiapan == 'Siap' ? 'bg-green-100 text-green-800' : ($riwayat->hasilDiagnosa->kesiapan == 'Kurang Siap' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                {{ $riwayat->hasilDiagnosa->kesiapan }}
                            </span>
                        </div>
                        @endif
                    </div>
                    <a href="{{ route('siswa.hasil.detail', $riwayat->id) }}" class="text-purple-600 hover:text-purple-800">
                        Detail <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
            @empty
            <div class="text-center py-8">
                <i class="fas fa-history text-5xl text-gray-300 mb-3"></i>
                <p class="text-gray-500">Belum ada riwayat simulasi</p>
                <p class="text-sm text-gray-400">Mulai ujian pertama Anda</p>
            </div>
            @endforelse
        </div>
    </div>
</div>

<!-- Pengumuman -->
<div class="mt-6 bg-white rounded-lg shadow">
    <div class="border-b px-6 py-4">
        <h3 class="text-lg font-semibold">📢 Pengumuman</h3>
    </div>
    <div class="p-6">
        @forelse($pengumuman as $item)
        <div class="border-b last:border-0 pb-3 mb-3">
            <h4 class="font-semibold">{{ $item->judul }}</h4>
            <p class="text-sm text-gray-600">{{ Str::limit($item->isi, 100) }}</p>
            <p class="text-xs text-gray-400 mt-1">{{ $item->created_at->format('d/m/Y') }}</p>
        </div>
        @empty
        <p class="text-gray-500 text-center">Tidak ada pengumuman</p>
        @endforelse
    </div>
</div>

<script>
@if(session('success'))
Swal.fire({
    title: 'Berhasil!',
    text: '{{ session('success') }}',
    icon: 'success',
    timer: 2000,
    showConfirmButton: false
});
@endif

@if(session('error'))
Swal.fire({
    title: 'Gagal!',
    text: '{{ session('error') }}',
    icon: 'error',
    confirmButtonText: 'OK'
});
@endif

@if(session('warning'))
Swal.fire({
    title: 'Peringatan!',
    text: '{{ session('warning') }}',
    icon: 'warning',
    confirmButtonText: 'OK'
});
@endif
</script>
@endsection