@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto px-4 py-8">
    
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-slate-800 tracking-tight">Manajemen Sesi Ujian (CBT)</h2>
        <a href="{{ route('admin.exams.create') }}" class="px-4 py-2 bg-blue-600 text-white rounded-xl text-sm font-bold hover:bg-blue-700 shadow-sm transition-colors flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            Buat Ujian / Assign Training
        </a>
    </div>

    @if(session('success'))
        <div class="mb-6 p-4 bg-emerald-50 text-emerald-700 rounded-xl border border-emerald-100 text-sm font-bold flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm text-slate-600">
                <thead class="bg-slate-50 border-b border-slate-200 text-slate-500 uppercase text-xs tracking-wider">
                    <tr>
                        <th class="px-6 py-4 font-bold">Detail Ujian</th>
                        <th class="px-6 py-4 font-bold">Materi & Jenis</th>
                        <th class="px-6 py-4 font-bold text-center">Aturan</th>
                        <th class="px-6 py-4 font-bold text-center">Status</th>
                        <th class="px-6 py-4 font-bold text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($exams as $exam)
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="px-6 py-4">
                            <div class="font-bold text-slate-800 text-base">{{ $exam->title }}</div>
                            <div class="text-xs text-slate-400 mt-1 flex items-center">
                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                {{ $exam->duration_minutes }} Menit
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="font-bold text-indigo-700">{{ $exam->subject->name ?? 'Materi Terhapus' }}</div>
                            <div class="text-[11px] font-bold uppercase mt-1.5 px-2 py-0.5 rounded inline-block
                                {{ $exam->training_type == 'matrix_plant' ? 'bg-amber-100 text-amber-700' : ($exam->training_type == 'product' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-700') }}">
                                {{ str_replace('_', ' ', $exam->training_type) }}
                            </div>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <div class="text-xs font-bold text-slate-700">KKM: <span class="text-emerald-600">{{ $exam->passing_grade }}</span></div>
                            <div class="text-[10px] text-slate-500 mt-1">Remedial: {{ $exam->max_retakes }}x</div>
                        </td>
                        <td class="px-6 py-4 text-center">
                            @if($exam->is_active)
                                <span class="px-2 py-1 bg-emerald-50 text-emerald-600 rounded text-xs font-bold border border-emerald-200">Aktif</span>
                            @else
                                <span class="px-2 py-1 bg-red-50 text-red-600 rounded text-xs font-bold border border-red-200">Draft</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 flex justify-end space-x-2">
                            <button class="p-2 text-indigo-500 hover:bg-indigo-50 rounded-lg transition-colors" title="Kelola Soal Ujian">
                                <svg class="w-5 h-5" 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>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-6 py-8 text-center text-slate-500">
                            <div class="flex flex-col items-center justify-center">
                                <svg class="w-12 h-12 text-slate-300 mb-3" 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 2"></path></svg>
                                Belum ada jadwal / sesi ujian.
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <div class="p-4 border-t border-slate-100 bg-slate-50">
            {{ $exams->links() }}
        </div>
    </div>
</div>
@endsection