@extends('layouts.siswa')

@section('title', 'Ikuti Ujian')
@section('header', 'Ikuti Ujian TKA')

@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>
            <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>
        <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

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Paket Ujian Tersedia -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6 border-b">
            <h3 class="text-lg font-semibold">📋 Paket Ujian 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->bankSoal->count() }} soal</span>
                            <span><i class="fas fa-calendar mr-1"></i> {{ date('d/m/Y', strtotime($simulasi->paketUjian->tanggal_mulai)) }} - {{ date('d/m/Y', strtotime($simulasi->paketUjian->tanggal_selesai)) }}</span>
                        </div>
                    </div>
                    <div>
                        <a href="{{ route('siswa.ujian.orientasi', $simulasi->paketUjian->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-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 paket ujian 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="p-6 border-b">
            <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>

<!-- Modal Token (Alternatif) -->
<div id="tokenModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg w-full max-w-md p-6">
        <div class="text-center mb-4">
            <i class="fas fa-key text-4xl text-purple-600 mb-2"></i>
            <h3 class="text-xl font-semibold">Masukkan Token Ujian</h3>
            <p class="text-sm text-gray-500">Token diberikan oleh guru pengawas</p>
        </div>
        <form id="tokenForm" method="POST">
            @csrf
            <input type="hidden" name="paket_id" id="paket_id">
            <div class="mb-4">
                <input type="text" name="token" placeholder="XXXXXX" required 
                    class="w-full border rounded-lg p-3 text-center text-2xl font-mono tracking-wider focus:outline-none focus:border-purple-500"
                    autocomplete="off" maxlength="8">
            </div>
            <div class="flex justify-end space-x-2">
                <button type="button" onclick="hideTokenModal()" class="px-4 py-2 bg-gray-300 rounded-lg hover:bg-gray-400 transition">Batal</button>
                <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                    <i class="fas fa-check mr-1"></i> Verifikasi
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function showTokenModal(paketId) {
    document.getElementById('tokenModal').classList.remove('hidden');
    document.getElementById('tokenModal').classList.add('flex');
    document.getElementById('paket_id').value = paketId;
    document.getElementById('tokenForm').action = "{{ route('siswa.ujian.verifikasi-token') }}";
}

function hideTokenModal() {
    document.getElementById('tokenModal').classList.add('hidden');
    document.getElementById('tokenModal').classList.remove('flex');
}

@if($errors->any())
Swal.fire({
    title: 'Gagal!',
    text: '{{ $errors->first() }}',
    icon: 'error',
    confirmButtonText: 'OK'
});
@endif

@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