@extends('layouts.app')

@section('title', 'Portal Ujian Karyawan')

@section('content')
<div class="max-w-5xl mx-auto py-8">
    
    <div class="bg-indigo-700 rounded-2xl shadow-lg p-8 text-white mb-8 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]">
        <h1 class="text-3xl font-extrabold mb-2">Selamat Datang, {{ $user->first_name }}!</h1>
        <p class="text-indigo-200">Pastikan Anda menyelesaikan kualifikasi CPOB tepat waktu. Semangat!</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <h3 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
                Ujian & Kualifikasi Aktif
            </h3>
            
            <div class="space-y-4">
                @forelse($availableExams as $exam)
                <div class="p-4 border border-slate-100 rounded-lg bg-slate-50 hover:bg-white hover:border-indigo-200 transition-all">
                    <h4 class="font-bold text-slate-800 text-md">{{ $exam->title }}</h4>
                    <div class="flex items-center text-xs text-slate-500 mt-2 mb-4 space-x-4">
                        <span>Durasi: {{ $exam->duration }} Menit</span>
                        <span>KKM: {{ $exam->passing_percentage }}</span>
                    </div>
                    <a href="#" class="inline-block w-full text-center px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-semibold hover:bg-indigo-700">
                        Mulai Ujian
                    </a>
                </div>
                @empty
                <p class="text-sm text-slate-500 text-center py-4">Belum ada ujian yang ditugaskan untuk Anda.</p>
                @endforelse
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <h3 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Riwayat Kelulusan
            </h3>
            
            <div class="space-y-3">
                @forelse($examHistory as $history)
                <div class="flex items-center justify-between p-3 border-b border-slate-100 last:border-0">
                    <div>
                        <p class="font-bold text-sm text-slate-800">{{ $history->exam->title }}</p>
                        <p class="text-xs text-slate-400">{{ $history->created_at->format('d M Y') }}</p>
                    </div>
                    <div class="text-right">
                        <span class="block font-mono font-bold {{ $history->is_passed ? 'text-emerald-600' : 'text-red-600' }}">
                            Skor: {{ $history->score }}
                        </span>
                        <span class="text-[10px] uppercase font-bold px-2 py-0.5 rounded-full {{ $history->is_passed ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }}">
                            {{ $history->is_passed ? 'Lulus' : 'Gagal' }}
                        </span>
                    </div>
                </div>
                @empty
                <p class="text-sm text-slate-500 text-center py-4">Anda belum mengikuti ujian apapun.</p>
                @endforelse
            </div>
        </div>

    </div>
</div>
@endsection