@extends('simaju.layouts.main')
@section('title', 'Kelola Peserta Kokurikuler')
@section('page-title', 'Kelola Peserta Kokurikuler')
@section('page-subtitle', 'Kelola peserta kokurikuler untuk periode aktif')

@section('content')
<!-- Back Button -->
<div class="mb-6">
    <a href="{{ route('simaju.kokurikuler.show', $kokurikuler) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-all duration-300 shadow-sm hover:shadow-md text-gray-700">
        <i class="fas fa-arrow-left"></i>
        <span>Kembali</span>
    </a>
</div>

<!-- Main Card -->
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
    <!-- Header with Gradient -->
    <div class="bg-gradient-to-r from-emerald-600 to-teal-600 p-6">
        <div class="flex items-center gap-4 text-white">
            <div class="bg-white bg-opacity-20 rounded-xl p-3">
                <i class="fas fa-users text-2xl"></i>
            </div>
            <div>
                <h2 class="text-2xl font-bold">Kelola Peserta: {{ $kokurikuler->nama }}</h2>
                <p class="text-emerald-100 text-sm mt-1">Periode: {{ $tahunAjaran }} - Semester {{ ucfirst($semester) }}</p>
            </div>
        </div>
    </div>

    <!-- Form Body -->
    <form action="{{ route('simaju.kokurikuler.store-students', $kokurikuler) }}" method="POST" class="p-8">
        @csrf
        <input type="hidden" name="tahun_ajaran" value="{{ $tahunAjaran }}">
        <input type="hidden" name="semester" value="{{ $semester }}">

        <!-- Filter Section -->
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                    <i class="fas fa-filter"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Filter & Pencarian</h3>
                    <p class="text-sm text-gray-500">Filter siswa berdasarkan kelas atau cari nama/NIS</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <!-- Filter Kelas -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Filter berdasarkan Kelas</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-school text-gray-400"></i>
                        </div>
                        <select id="filterKelas" class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300">
                            <option value="">Semua Kelas</option>
                            @foreach($allSiswas->unique('kelas_id') as $item)
                                @if($item->kelas)
                                <option value="{{ $item->kelas_id }}">{{ $item->kelas->nama_kelas }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Cari Siswa -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Cari Siswa</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400"></i>
                        </div>
                        <input type="text" id="searchSiswa" placeholder="Cari nama atau NIS..." class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300">
                    </div>
                </div>

                <!-- Aksi Cepat -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Aksi Cepat</label>
                    <div class="flex gap-2">
                        <button type="button" id="selectAll" class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl hover:shadow-lg transition-all duration-300 font-semibold text-sm">
                            <i class="fas fa-check-double"></i>
                            <span>Pilih Semua</span>
                        </button>
                        <button type="button" id="deselectAll" class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-gray-500 to-gray-600 text-white rounded-xl hover:shadow-lg transition-all duration-300 font-semibold text-sm">
                            <i class="fas fa-times"></i>
                            <span>Batal</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Divider -->
        <div class="border-t border-gray-200 my-6"></div>

        <!-- Table Section -->
        <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-center text-white shadow-lg">
                        <i class="fas fa-list"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900">Daftar Siswa</h3>
                        <p class="text-sm text-gray-500">Pilih siswa yang akan mengikuti kokurikuler</p>
                    </div>
                </div>
                <div class="flex items-center gap-2 bg-emerald-50 px-4 py-2 rounded-lg border border-emerald-200">
                    <i class="fas fa-users text-emerald-600"></i>
                    <span class="text-sm font-semibold text-emerald-900"><span id="selectedCount">0</span> siswa dipilih</span>
                </div>
            </div>

            <!-- Table Container -->
            <div class="border border-gray-200 rounded-xl overflow-hidden">
                <div class="overflow-x-auto" style="max-height: 500px; overflow-y: auto;">
                    <table class="w-full">
                        <thead class="bg-gradient-to-r from-gray-50 to-gray-100 sticky top-0 z-10">
                            <tr>
                                <th class="px-6 py-4 text-left">
                                    <input type="checkbox" id="checkAll" class="w-4 h-4 text-emerald-600 rounded focus:ring-2 focus:ring-emerald-500 cursor-pointer">
                                </th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">NIS</th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Nama</th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Kelas</th>
                            </tr>
                        </thead>
                        <tbody id="siswaTableBody" class="bg-white divide-y divide-gray-200">
                            @foreach($allSiswas as $siswa)
                            <tr class="siswa-row hover:bg-emerald-50 transition-colors duration-200" data-kelas="{{ $siswa->kelas_id }}" data-nama="{{ strtolower($siswa->nama) }}" data-nis="{{ $siswa->nis }}">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <input class="siswa-checkbox w-4 h-4 text-emerald-600 rounded focus:ring-2 focus:ring-emerald-500 cursor-pointer" 
                                           type="checkbox" 
                                           name="siswa_ids[]" 
                                           value="{{ $siswa->id }}" 
                                           {{ in_array($siswa->id, $enrolledSiswaIds) ? 'checked' : '' }}>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm font-semibold text-gray-900">{{ $siswa->nis }}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-full flex items-center justify-center text-white font-bold text-xs">
                                            {{ strtoupper(substr($siswa->nama, 0, 1)) }}
                                        </div>
                                        <span class="text-sm font-medium text-gray-900">{{ $siswa->nama }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-100 to-teal-100 text-emerald-800 border border-emerald-200">
                                        {{ $siswa->kelas->nama_kelas ?? '-' }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex items-center justify-between pt-6 border-t border-gray-200">
            <a href="{{ route('simaju.kokurikuler.show', $kokurikuler) }}" class="inline-flex items-center gap-2 px-8 py-3 bg-white border-2 border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-all duration-300 font-semibold">
                <i class="fas fa-times"></i>
                <span>Batal</span>
            </a>
            <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-emerald-600 to-teal-600 text-white rounded-xl hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 font-semibold">
                <i class="fas fa-save"></i>
                <span>Simpan Peserta</span>
            </button>
        </div>
    </form>
</div>

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.siswa-checkbox');
    const checkAll = document.getElementById('checkAll');
    const selectAllBtn = document.getElementById('selectAll');
    const deselectAllBtn = document.getElementById('deselectAll');
    const filterKelas = document.getElementById('filterKelas');
    const searchSiswa = document.getElementById('searchSiswa');
    const selectedCount = document.getElementById('selectedCount');

    // Update count
    function updateCount() {
        const checked = document.querySelectorAll('.siswa-checkbox:checked').length;
        selectedCount.textContent = checked;
    }

    // Check all visible
    checkAll.addEventListener('change', function() {
        const visibleCheckboxes = document.querySelectorAll('.siswa-row:not([style*="display: none"]) .siswa-checkbox');
        visibleCheckboxes.forEach(cb => cb.checked = this.checked);
        updateCount();
    });

    // Select all button
    selectAllBtn.addEventListener('click', function(e) {
        e.preventDefault();
        const visibleCheckboxes = document.querySelectorAll('.siswa-row:not([style*="display: none"]) .siswa-checkbox');
        visibleCheckboxes.forEach(cb => cb.checked = true);
        checkAll.checked = true;
        updateCount();
    });

    // Deselect all button
    deselectAllBtn.addEventListener('click', function(e) {
        e.preventDefault();
        const visibleCheckboxes = document.querySelectorAll('.siswa-row:not([style*="display: none"]) .siswa-checkbox');
        visibleCheckboxes.forEach(cb => cb.checked = false);
        checkAll.checked = false;
        updateCount();
    });

    // Filter by class
    filterKelas.addEventListener('change', function() {
        const kelasId = this.value;
        const rows = document.querySelectorAll('.siswa-row');
        
        rows.forEach(row => {
            const rowKelasId = row.getAttribute('data-kelas');
            if (!kelasId || kelasId === '' || rowKelasId === kelasId) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
        
        updateCount();
        checkAll.checked = false;
    });

    // Search
    searchSiswa.addEventListener('input', function() {
        filterSearch();
    });

    function filterSearch() {
        const search = searchSiswa.value.toLowerCase();
        const kelasId = filterKelas.value;
        const rows = document.querySelectorAll('.siswa-row');
        
        rows.forEach(row => {
            const rowKelasId = row.getAttribute('data-kelas');
            const nama = row.getAttribute('data-nama');
            const nis = row.getAttribute('data-nis');
            
            // Check kelas filter
            const kelasMatch = !kelasId || kelasId === '' || rowKelasId === kelasId;
            
            // Check search filter
            const searchMatch = !search || nama.includes(search) || nis.includes(search);
            
            // Show only if both match
            if (kelasMatch && searchMatch) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
        
        updateCount();
    }

    // Update count on checkbox change
    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateCount);
    });

    // Initial count
    updateCount();
});
</script>
@endpush
@endsection