@extends('layouts.guru')

@section('title', 'Tambah Peserta')
@section('header', 'Tambah Peserta ke Paket Ujian')

@section('content')
<div class="bg-white rounded-lg shadow max-w-4xl mx-auto">
    <div class="p-6 border-b">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="text-xl font-semibold">Tambah Peserta</h2>
                <p class="text-gray-500 text-sm">Paket: {{ $paketUjian->nama_paket }}</p>
                <p class="text-gray-500 text-sm">Token: <span class="font-mono font-bold text-purple-600">{{ $paketUjian->token_ujian }}</span></p>
            </div>
            <a href="{{ route('guru.paket-ujian.detail', $paketUjian->id) }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times text-xl"></i>
            </a>
        </div>
    </div>
    
    <form action="{{ route('guru.paket-ujian.store-peserta', $paketUjian->id) }}" method="POST" class="p-6">
        @csrf
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">Pilih Siswa</label>
            <div class="border rounded-lg p-4 max-h-96 overflow-y-auto">
                @forelse($siswa as $s)
                <label class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded cursor-pointer border-b last:border-0">
                    <input type="checkbox" name="siswa_ids[]" value="{{ $s->id }}" class="w-4 h-4 text-purple-600">
                    <div class="flex-1">
                        <p class="font-medium">{{ $s->user->name }}</p>
                        <p class="text-sm text-gray-500">NIS: {{ $s->nis }} | Kelas: {{ $s->kelas->nama_kelas ?? '-' }}</p>
                    </div>
                </label>
                @empty
                <p class="text-center text-gray-500 py-4">Tidak ada siswa yang tersedia</p>
                @endforelse
            </div>
            @if($siswa->count() > 0)
            <div class="mt-2">
                <button type="button" onclick="selectAll()" class="text-sm text-blue-600 hover:text-blue-800">Pilih Semua</button>
                <span class="mx-2 text-gray-300">|</span>
                <button type="button" onclick="deselectAll()" class="text-sm text-red-600 hover:text-red-800">Hapus Pilihan</button>
            </div>
            @endif
        </div>
        
        <div class="bg-yellow-50 p-4 rounded-lg mb-6">
            <h3 class="font-semibold text-yellow-800 mb-2">Informasi:</h3>
            <ul class="text-sm text-yellow-700 space-y-1">
                <li><i class="fas fa-info-circle mr-2"></i> Siswa akan langsung terdaftar di paket ujian ini</li>
                <li><i class="fas fa-key mr-2"></i> Siswa perlu memasukkan token <strong>{{ $paketUjian->token_ujian }}</strong> untuk memulai ujian</li>
                <li><i class="fas fa-clock mr-2"></i> Waktu ujian dimulai saat siswa memasukkan token</li>
            </ul>
        </div>
        
        <div class="flex justify-end space-x-2">
            <a href="{{ route('guru.paket-ujian.detail', $paketUjian->id) }}" class="px-4 py-2 bg-gray-300 rounded-lg hover:bg-gray-400 transition">Batal</a>
            <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                <i class="fas fa-save mr-2"></i> Tambah Peserta
            </button>
        </div>
    </form>
</div>

<script>
function selectAll() {
    document.querySelectorAll('input[name="siswa_ids[]"]').forEach(checkbox => {
        checkbox.checked = true;
    });
}

function deselectAll() {
    document.querySelectorAll('input[name="siswa_ids[]"]').forEach(checkbox => {
        checkbox.checked = false;
    });
}
</script>
@endsection