@extends('staff.layouts.app')
@section('title', 'My Students')
@section('content')
<div class="max-w-4xl mx-auto px-4 py-6 pb-24">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl font-extrabold text-slate-800">My Students</h1>
            <p class="text-xs text-slate-500 mt-0.5">View and manage students assigned to your classes</p>
        </div>
        <a href="{{ route('staff.profile', ['slug' => session('staff_school_slug')]) }}" class="text-xs font-bold text-slate-500 hover:text-slate-700 flex items-center gap-1">
            <i class="fa-solid fa-arrow-left"></i> Back to Profile
        </a>
    </div>

    <!-- Filters -->
    <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm mb-6">
        <form method="GET" action="{{ route('staff.my_students.list', ['slug' => session('staff_school_slug')]) }}" class="grid grid-cols-1 md:grid-cols-4 gap-3">
            <div class="md:col-span-2">
                <label class="text-[10px] text-slate-400 uppercase font-bold mb-1 block">Search Student</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Name or Admission No..." class="w-full px-3 py-2 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none">
            </div>
            <div>
                <label class="text-[10px] text-slate-400 uppercase font-bold mb-1 block">Class</label>
                <select name="class_id" id="classSelect" class="w-full px-3 py-2 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none">
                    <option value="">All Classes</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="text-[10px] text-slate-400 uppercase font-bold mb-1 block">Section</label>
                <select name="section_id" id="sectionSelect" disabled class="w-full px-3 py-2 text-sm border border-slate-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed">
                    <option value="">Select a Class first</option>
                </select>
            </div>
            <div class="md:col-span-4 flex gap-2">
                <button type="submit" class="flex-1 bg-amber-600 hover:bg-amber-700 text-white text-xs font-bold py-2.5 rounded-xl transition-all active:scale-95">
                    <i class="fa-solid fa-filter mr-1"></i> Apply Filters
                </button>
                <a href="{{ route('staff.my_students.list', ['slug' => session('staff_school_slug')]) }}" class="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold py-2.5 rounded-xl transition-all text-center active:scale-95">
                    <i class="fa-solid fa-rotate-left mr-1"></i> Clear
                </a>
            </div>
        </form>
    </div>

    <!-- Pagination Summary -->
    @if($students->total() > 0)
        <p class="text-xs text-slate-500 mb-2 font-medium">
            Showing {{ $students->firstItem() ?? 1 }} to {{ $students->lastItem() ?? $students->count() }} of {{ $students->total() }} students
        </p>
    @endif

    <!-- ✅ Students List (Single Clean Loop) -->
    <div class="space-y-3">
        @forelse($students as $student)
            {{-- ✅ FIX 4: Clean route helper ensures click opens details page --}}
            <a href="{{ route('staff.my_students.view', ['slug' => session('staff_school_slug'), 'id' => $student->id]) }}" class="block bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md hover:border-amber-200 transition-all group">
                <div class="flex items-center gap-4">
                    {{-- ✅ FIX 2: onerror fallback guarantees an image or clean avatar --}}
                    <img src="{{ $student->photo_url }}" 
                         alt="{{ $student->student_name }}" 
                         onerror="this.onerror=null; this.src='https://ui-avatars.com/api/?name={{ urlencode($student->student_name) }}&background=4f46e5&color=fff&size=128';" 
                         class="w-14 h-14 rounded-full object-cover border-2 border-white shadow-sm group-hover:scale-105 transition-transform bg-slate-100">
                    <div class="flex-1 min-w-0">
                        <h3 class="text-sm font-bold text-slate-800 truncate group-hover:text-amber-600 transition-colors">{{ $student->student_name }}</h3>
                        <p class="text-[11px] text-slate-500 mt-0.5">Admission No: <span class="font-semibold text-slate-700">{{ $student->admission_no }}</span></p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <span class="inline-flex items-center gap-1 bg-amber-50 text-amber-700 px-2 py-1 rounded-lg text-[10px] font-bold">
                            <i class="fa-solid fa-school text-[8px]"></i> {{ $student->class_name ?? 'N/A' }}
                        </span>
                        <p class="text-[10px] text-slate-400 mt-1">Sec: <span class="font-bold text-slate-600">{{ $student->section_name ?? 'N/A' }}</span></p>
                    </div>
                    <i class="fa-solid fa-chevron-right text-slate-300 group-hover:text-amber-500 transition-colors"></i>
                </div>
            </a>
        @empty
            <div class="bg-white p-8 rounded-2xl border border-dashed border-slate-300 text-center">
                <i class="fa-solid fa-user-slash text-slate-300 text-3xl mb-3"></i>
                <p class="text-sm text-slate-500 font-medium">No students found.</p>
                <p class="text-xs text-slate-400 mt-1">Try adjusting your filters or check your class assignments.</p>
            </div>
        @endforelse
    </div>

    <!-- Pagination Links -->
    @if($students->hasPages())
        <div class="mt-6">
            {{ $students->appends(request()->query())->links() }}
        </div>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const classSelect = document.getElementById('classSelect');
    const sectionSelect = document.getElementById('sectionSelect');
    const currentSectionId = "{{ request('section_id') }}";

    if (!classSelect || !sectionSelect) return;

    function loadSections(classId, selectedSectionId = null) {
        if (!classId) {
            sectionSelect.disabled = true;
            sectionSelect.innerHTML = '<option value="">Select a Class first</option>';
            return;
        }

        sectionSelect.disabled = true;
        sectionSelect.innerHTML = '<option value="">Loading sections...</option>';

        // ✅ FIX 3: Use Laravel route() helper to guarantee correct URL
        const baseUrl = "{{ route('staff.ajax.sections', ['slug' => session('staff_school_slug'), 'classId' => 'REPLACE_ME']) }}";
        const fetchUrl = baseUrl.replace('REPLACE_ME', classId);

        fetch(fetchUrl)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then(data => {
                sectionSelect.innerHTML = '<option value="">All Sections</option>';
                if (data && data.length > 0) {
                    data.forEach(section => {
                        const option = document.createElement('option');
                        option.value = section.id;
                        option.textContent = section.name;
                        if (selectedSectionId && selectedSectionId == section.id) {
                            option.selected = true;
                        }
                        sectionSelect.appendChild(option);
                    });
                    sectionSelect.disabled = false; // ✅ Enables dropdown
                } else {
                    sectionSelect.innerHTML = '<option value="">No sections found</option>';
                }
            })
            .catch(error => {
                console.error('Error fetching sections:', error);
                sectionSelect.innerHTML = '<option value="">Error loading</option>';
            });
    }

    classSelect.addEventListener('change', function() {
        loadSections(this.value);
    });

    if (classSelect.value) {
        loadSections(classSelect.value, currentSectionId);
    }
});
</script>
@endsection