@extends('layouts.admin')
@section('title', 'Tambah Siswa — ' . $course->title)
@section('header', 'Tambah Siswa ke Kursus')

@section('content')

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-xs text-gray-400 mb-5">
    <a href="{{ route('teacher.courses.index') }}" class="hover:text-blue-600 transition">Kursus</a>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
    <a href="{{ route('teacher.courses.enrollments.index', $course) }}" class="hover:text-blue-600 transition truncate max-w-xs">{{ $course->title }}</a>
    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
    <span class="text-gray-600 font-medium">Tambah Siswa</span>
</div>

<div class="max-w-3xl mx-auto">
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

        {{-- Header form --}}
        <div class="px-6 py-5 border-b border-gray-50 flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"/>
                </svg>
            </div>
            <div>
                <h3 class="font-semibold text-gray-800">Daftarkan Siswa</h3>
                <p class="text-xs text-gray-400 mt-0.5">ke kursus: <span class="font-medium text-gray-600">{{ $course->title }}</span></p>
            </div>
        </div>

        <form method="POST" action="{{ route('teacher.courses.enrollments.store', $course) }}" id="enroll-form">
            @csrf

            <div class="p-6">

                @if($students->isEmpty())
                {{-- Empty state --}}
                <div class="text-center py-10">
                    <div class="w-14 h-14 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
                        </svg>
                    </div>
                    <p class="text-gray-500 font-medium">Semua siswa sudah terdaftar</p>
                    <p class="text-gray-400 text-sm mt-1">Tidak ada siswa tersisa yang bisa didaftarkan ke kursus ini.</p>
                    <a href="{{ route('teacher.courses.enrollments.index', $course) }}"
                       class="inline-flex items-center gap-2 mt-4 bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-xl text-sm transition">
                        ← Kembali ke Daftar
                    </a>
                </div>

                @else

                {{-- Search filter --}}
                <div class="mb-4">
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
                            </svg>
                        </div>
                        <input type="text"
                               id="search-siswa"
                               placeholder="Cari nama atau NIS siswa..."
                               class="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-400 transition">
                    </div>
                </div>

                {{-- Select All --}}
                <div class="flex items-center justify-between mb-3 px-1">
                    <label class="flex items-center gap-2 cursor-pointer select-none">
                        <input type="checkbox" id="select-all"
                               class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400">
                        <span class="text-sm text-gray-600 font-medium">Pilih Semua</span>
                    </label>
                    <span id="selected-count" class="text-xs text-gray-400">0 dipilih</span>
                </div>

                @error('student_ids')
                <div class="bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 text-sm mb-4 flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
                    {{ $message }}
                </div>
                @enderror

                {{-- Daftar siswa --}}
                <div class="border border-gray-100 rounded-xl divide-y divide-gray-50 max-h-96 overflow-y-auto" id="student-list">
                    @foreach($students as $student)
                    <label class="student-item flex items-center gap-4 px-4 py-3 hover:bg-blue-50/50 cursor-pointer transition"
                           data-name="{{ strtolower($student->name) }}"
                           data-nis="{{ $student->nis_nip }}">
                        <input type="checkbox"
                               name="student_ids[]"
                               value="{{ $student->id }}"
                               class="student-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400 shrink-0">
                        <div class="w-8 h-8 rounded-full bg-violet-100 flex items-center justify-center text-xs font-bold text-violet-700 shrink-0">
                            {{ strtoupper(substr($student->name, 0, 1)) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-800">{{ $student->name }}</p>
                            <p class="text-xs text-gray-400">{{ $student->email }}</p>
                        </div>
                        @if($student->nis_nip)
                        <span class="text-xs font-mono text-gray-400 shrink-0">{{ $student->nis_nip }}</span>
                        @endif
                    </label>
                    @endforeach
                </div>

                {{-- Footer form --}}
                <div class="flex items-center justify-between mt-6 pt-5 border-t border-gray-50">
                    <a href="{{ route('teacher.courses.enrollments.index', $course) }}"
                       class="inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 px-5 py-2.5 rounded-xl text-sm font-medium transition">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
                        Batal
                    </a>
                    <button type="submit"
                            id="submit-btn"
                            class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white px-6 py-2.5 rounded-xl text-sm font-medium transition">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"/></svg>
                        Daftarkan Siswa
                    </button>
                </div>

                @endif
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    const checkboxes = document.querySelectorAll('.student-checkbox');
    const selectAll  = document.getElementById('select-all');
    const countEl    = document.getElementById('selected-count');
    const submitBtn  = document.getElementById('submit-btn');
    const searchEl   = document.getElementById('search-siswa');

    function updateCount() {
        const checked = document.querySelectorAll('.student-checkbox:checked').length;
        countEl.textContent = checked + ' dipilih';
        submitBtn.disabled  = checked === 0;
        selectAll.indeterminate = checked > 0 && checked < checkboxes.length;
        selectAll.checked   = checked === checkboxes.length && checkboxes.length > 0;
    }

    // Select all
    selectAll?.addEventListener('change', function () {
        document.querySelectorAll('.student-item:not([style*="display: none"]) .student-checkbox')
            .forEach(cb => cb.checked = this.checked);
        updateCount();
    });

    checkboxes.forEach(cb => cb.addEventListener('change', updateCount));

    // Search filter
    searchEl?.addEventListener('input', function () {
        const q = this.value.toLowerCase();
        document.querySelectorAll('.student-item').forEach(item => {
            const match = item.dataset.name.includes(q) || (item.dataset.nis || '').includes(q);
            item.style.display = match ? '' : 'none';
        });
    });

    // Init
    updateCount();
</script>
@endpush

@endsection