@extends('layouts.guru')

@section('title', 'Tambah Peserta')
@section('header', 'Tambah Peserta Simulasi')

@section('content')
<div class="bg-white rounded-lg shadow">
    <div class="p-6 border-b">
        <h2 class="text-xl font-semibold">Tambah Peserta untuk: {{ $paketUjian->nama_paket }}</h2>
        <p class="text-gray-500 text-sm">Pilih siswa yang akan mengikuti simulasi</p>
    </div>
    
    <form action="{{ route('guru.monitoring.store-participant', $paketUjian->id) }}" method="POST" class="p-6">
        @csrf
        
        <div class="mb-4">
            <div class="flex justify-between items-center mb-2">
                <label class="block text-gray-700 font-semibold">Pilih Siswa</label>
                <button type="button" onclick="selectAll()" class="text-sm text-purple-600 hover:text-purple-800">
                    <i class="fas fa-check-square mr-1"></i> Pilih Semua
                </button>
            </div>
            
            <div class="border rounded-lg overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left">
                                <input type="checkbox" id="checkAll" onclick="toggleAll(this)">
                            </th>
                            <th class="px-4 py-3 text-left">NIS</th>
                            <th class="px-4 py-3 text-left">Nama Siswa</th>
                            <th class="px-4 py-3 text-left">Kelas</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($siswa as $item)
                        <tr>
                            <td class="px-4 py-3">
                                <input type="checkbox" name="siswa_id[]" value="{{ $item->id }}" class="siswa-checkbox">
                            </td>
                            <td class="px-4 py-3">{{ $item->nis }}</td>
                            <td class="px-4 py-3">{{ $item->user->name }}</td>
                            <td class="px-4 py-3">{{ $item->kelas->nama_kelas ?? '-' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center py-8 text-gray-500">
                                Semua siswa sudah terdaftar dalam simulasi ini
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="flex justify-end space-x-2">
            <a href="{{ route('guru.monitoring.detail', $paketUjian->id) }}" class="px-4 py-2 bg-gray-300 rounded-lg">Batal</a>
            <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg">
                <i class="fas fa-plus mr-2"></i> Tambah Peserta
            </button>
        </div>
    </form>
</div>

<script>
function toggleAll(source) {
    const checkboxes = document.querySelectorAll('.siswa-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = source.checked;
    });
}

function selectAll() {
    const checkboxes = document.querySelectorAll('.siswa-checkbox');
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    checkboxes.forEach(checkbox => {
        checkbox.checked = !allChecked;
    });
    document.getElementById('checkAll').checked = !allChecked;
}
</script>
@endsection