@extends('layouts.guru')

@section('title', 'Paket Ujian')
@section('header', 'Paket Ujian')

@section('content')
<div class="bg-white rounded-lg shadow">
    <div class="p-6 border-b flex justify-between items-center">
        <div>
            <h2 class="text-xl font-semibold">Daftar Paket Ujian</h2>
        </div>
        <a href="{{ route('guru.paket-ujian.create') }}" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition">
            <i class="fas fa-plus mr-2"></i> Buat Paket
        </a>
    </div>
    
    <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @forelse($paketUjian as $paket)
            <div class="border rounded-lg p-4 hover:shadow-lg transition">
                <div class="flex justify-between items-start mb-2">
                    <h3 class="font-semibold text-lg">{{ $paket->nama_paket }}</h3>
                    <span class="px-2 py-1 rounded text-xs {{ $paket->status == 'aktif' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                        {{ $paket->status }}
                    </span>
                </div>
                <p class="text-sm text-gray-500 mb-2">{{ Str::limit($paket->deskripsi, 100) }}</p>
                <div class="text-sm text-gray-600 mb-2">
                    <i class="fas fa-clock mr-1"></i> {{ $paket->durasi }} menit |
                    <i class="fas fa-key ml-2 mr-1"></i> Token: <span class="font-mono">{{ $paket->token_ujian }}</span>
                </div>
                <div class="flex justify-between items-center mt-3">
                    <span class="text-xs text-gray-500">{{ $paket->simulasi_count }} peserta</span>
                    <div>
                        <a href="{{ route('guru.paket-ujian.detail', $paket->id) }}" class="text-blue-600 hover:text-blue-800 mr-2">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="{{ route('guru.paket-ujian.edit', $paket->id) }}" class="text-green-600 hover:text-green-800 mr-2">
                            <i class="fas fa-edit"></i>
                        </a>
                        <button onclick="generateToken({{ $paket->id }})" class="text-yellow-600 hover:text-yellow-800 mr-2">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                        <button onclick="confirmDelete({{ $paket->id }})" class="text-red-600 hover:text-red-800">
                            <i class="fas fa-trash"></i>
                        </button>
                        <form id="delete-form-{{ $paket->id }}" action="{{ route('guru.paket-ujian.destroy', $paket->id) }}" method="POST" class="hidden">
                            @csrf @method('DELETE')
                        </form>
                        <form id="token-form-{{ $paket->id }}" action="{{ route('guru.paket-ujian.generate-token', $paket->id) }}" method="POST" class="hidden">
                            @csrf
                        </form>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-span-3 text-center py-8 text-gray-500">Belum ada paket ujian</div>
            @endforelse
        </div>
        <div class="mt-4">{{ $paketUjian->links() }}</div>
    </div>
</div>

<script>
function confirmDelete(id) {
    Swal.fire({ title: 'Yakin hapus?', text: "Paket ujian akan dihapus!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', confirmButtonText: 'Ya, hapus!' })
    .then((result) => { if (result.isConfirmed) document.getElementById('delete-form-' + id).submit(); });
}
function generateToken(id) {
    Swal.fire({ title: 'Generate Token Baru?', text: "Token lama akan tidak berlaku!", icon: 'question', showCancelButton: true, confirmButtonText: 'Ya, Generate!' })
    .then((result) => { if (result.isConfirmed) document.getElementById('token-form-' + id).submit(); });
}
</script>
@endsection