@extends('layouts.app')
@section('title', 'Students')
@section('page_title', 'Students')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
    <li class="breadcrumb-item active">Students</li>
@endsection
@section('page_actions')
    @can('students.update')
        <a href="{{ route('students.promote-form') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-up-circle me-1"></i>Promote</a>
    @endcan
    @can('create', App\Models\Student::class)
        <a href="{{ route('students.import') }}" class="btn btn-outline-primary"><i class="bi bi-file-earmark-excel me-1"></i>Import Excel</a>
        <a href="{{ route('students.create') }}" class="btn btn-primary"><i class="bi bi-person-plus me-1"></i>Add Student</a>
    @endcan
@endsection

@section('content')
    <div class="card mb-3">
        <div class="card-body">
            <form method="GET" class="row g-2 align-items-end">
                @if($filters['free'] ?? false)<input type="hidden" name="free" value="1">@endif
                <div class="col-md-3">
                    <label class="form-label small">Search</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" name="search" value="{{ $filters['search'] ?? '' }}" class="form-control"
                               placeholder="Name, admission #, mobile…">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Class</label>
                    <select name="class_id" id="st_class" class="form-select form-select-sm">
                        <option value="">All Classes</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}" @selected(($filters['class_id'] ?? '') == $class->id)>{{ $class->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Section</label>
                    <select name="section_id" id="st_section" class="form-select form-select-sm">
                        <option value="">All Sections</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="">All Statuses</option>
                        @foreach(App\Models\Student::STATUSES as $s)
                            <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s) class="text-capitalize">{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 d-flex gap-1 flex-wrap">
                    <button class="btn btn-sm btn-primary"><i class="bi bi-funnel me-1"></i>Filter</button>
                    <a href="{{ route('students.index') }}" class="btn btn-sm btn-light border">Reset</a>
                    @php $stExp = request()->except('export'); @endphp
                    <a href="{{ route('students.index', array_merge($stExp, ['export' => 'pdf'])) }}" class="btn btn-sm btn-light border" title="Download PDF"><i class="bi bi-file-earmark-pdf text-danger"></i></a>
                    <a href="{{ route('students.index', array_merge($stExp, ['export' => 'csv'])) }}" class="btn btn-sm btn-light border" title="Download Excel"><i class="bi bi-file-earmark-excel text-success"></i></a>
                </div>
            </form>
            @push('scripts')
            <script>
                const ST_SECTIONS = @json($sections ?? []);
                const stSel = @json($filters['section_id'] ?? '');
                function stLoadSections() {
                    const c = document.getElementById('st_class').value;
                    const sel = document.getElementById('st_section');
                    sel.innerHTML = '<option value="">All Sections</option>';
                    ST_SECTIONS.filter(s => !c || String(s.class_id) === String(c)).forEach(s => {
                        const o = document.createElement('option');
                        o.value = s.id; o.textContent = s.name;
                        if (String(s.id) === String(stSel)) o.selected = true;
                        sel.appendChild(o);
                    });
                }
                document.getElementById('st_class').addEventListener('change', stLoadSections);
                stLoadSections();
            </script>
            @endpush
            @if($filters['search'] ?? false)
                <div class="small text-muted mt-2">
                    Showing results for “<b>{{ $filters['search'] }}</b>” — {{ $students->total() }} match(es).
                </div>
            @endif
        </div>
    </div>

    @if($filters['free'] ?? false)
        <div class="alert alert-success d-flex justify-content-between align-items-center py-2">
            <span><i class="bi bi-gift me-1"></i>Showing only <b>free students</b> (full-waiver concession) — {{ $students->total() }} found.</span>
            <a href="{{ route('students.index') }}" class="btn btn-sm btn-light border"><i class="bi bi-x-lg me-1"></i>Show all students</a>
        </div>
    @endif
    <div class="card">
        <div class="card-header"><i class="bi bi-mortarboard me-1"></i>{{ ($filters['free'] ?? false) ? 'Free Students' : 'Students' }} ({{ $students->total() }})</div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr><th>Student</th><th>Father Name</th><th>Adm #</th><th>Class</th><th>Family</th><th>Gender</th><th>Status</th><th class="text-end">Actions</th></tr>
                    </thead>
                    <tbody>
                        @forelse($students as $student)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        @if($student->photo_url)
                                            <img src="{{ $student->photo_url }}" class="rounded-circle" width="32" height="32" style="object-fit:cover">
                                        @else
                                            <span class="sms-avatar sm">{{ $student->initials }}</span>
                                        @endif
                                        <a href="{{ route('students.show', $student) }}" class="fw-semibold text-decoration-none">{{ $student->name }}</a>
                                    </div>
                                </td>
                                <td class="small">{{ $student->family?->father_name ?: '—' }}</td>
                                <td class="small">{{ $student->admission_number }}</td>
                                <td class="small">{{ $student->schoolClass?->name ?? '—' }}{{ $student->section ? ' / '.$student->section->name : '' }}</td>
                                <td class="small"><a href="{{ route('families.show', $student->family_id) }}" class="text-decoration-none">{{ $student->family?->family_code }}</a></td>
                                <td class="small text-capitalize">{{ $student->gender }}</td>
                                <td><span class="badge bg-soft-{{ $student->status_color }} text-capitalize">{{ str_replace('_',' ',$student->status) }}</span></td>
                                <td class="text-end">
                                    <a href="{{ route('students.show', $student) }}" class="btn btn-sm btn-light border">Profile</a>
                                    @can('fees.view')
                                        <a href="{{ route('students.fee-card', $student) }}" target="_blank" class="btn btn-sm btn-light border" title="Fee Card"><i class="bi bi-card-heading text-success"></i></a>
                                    @endcan
                                    @can('update', $student)
                                        <a href="{{ route('students.edit', $student) }}" class="btn btn-sm btn-light border"><i class="bi bi-pencil"></i></a>
                                    @endcan
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="text-center text-muted py-4">No students found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            {{ $students->links() }}
        </div>
    </div>
@endsection
