@extends('layouts.app')
@section('title', 'Assign Transport')
@section('page_title', 'Assign Students to Transport')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li><li class="breadcrumb-item active">Assign Transport</li>
@endsection

@section('content')
    <div class="card mb-3"><div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-4"><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="{{ $search ?? '' }}" class="form-control" placeholder="Student name, admission #, father name/mobile…">
                </div>
            </div>
            <div class="col-md-3"><label class="form-label small">Class</label>
                <select name="class_id" id="ta_class" class="form-select form-select-sm">
                    <option value="">All classes</option>
                    @foreach($classes as $c)<option value="{{ $c->id }}" @selected($classId==$c->id)>{{ $c->name }}</option>@endforeach
                </select></div>
            <div class="col-md-3"><label class="form-label small">Section</label>
                <select name="section_id" id="ta_section" class="form-select form-select-sm">
                    <option value="">All sections</option>
                </select></div>
            <div class="col-md-2 d-flex gap-1">
                <button class="btn btn-sm btn-primary"><i class="bi bi-funnel me-1"></i>Filter</button>
                <a href="{{ route('transport-assign.index') }}" class="btn btn-sm btn-light border">Reset</a>
            </div>
        </form>
    </div></div>

    <div class="card"><div class="card-body">
        <table class="table table-hover align-middle">
            <thead><tr><th>Student</th><th>Father Name</th><th>Class / Section</th><th style="width:240px">Route</th><th style="width:240px">Stop</th><th></th></tr></thead>
            <tbody>
                @forelse($students as $s)
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ $s->name }}</div>
                            <div class="small text-muted">{{ $s->admission_number }}</div>
                        </td>
                        <td class="small">{{ $s->family?->father_name ?: '—' }}</td>
                        <td class="small">{{ $s->schoolClass?->name ?? '—' }}{{ $s->section ? ' / '.$s->section->name : '' }}</td>
                        <td colspan="3">
                            <form method="POST" action="{{ route('transport-assign.store') }}" class="row g-1 align-items-center">
                                @csrf
                                <input type="hidden" name="student_id" value="{{ $s->id }}">
                                <div class="col-md-5">
                                    <select name="transport_route_id" class="form-select form-select-sm js-route" data-target="stop{{ $s->id }}">
                                        <option value="">— No transport —</option>
                                        @foreach($routes as $r)<option value="{{ $r->id }}" @selected($s->transport_route_id==$r->id)>{{ $r->name }}</option>@endforeach
                                    </select>
                                </div>
                                <div class="col-md-5">
                                    <select name="transport_stop_id" id="stop{{ $s->id }}" class="form-select form-select-sm">
                                        <option value="">— Stop —</option>
                                        @if($s->transport_route_id)
                                            @foreach($routes->firstWhere('id', $s->transport_route_id)?->stops ?? [] as $st)
                                                <option value="{{ $st->id }}" @selected($s->transport_stop_id==$st->id)>{{ $st->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                @can('transport.update')<div class="col-md-2"><button class="btn btn-sm btn-primary w-100"><i class="bi bi-check"></i></button></div>@endcan
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="text-center text-muted py-4">No students match.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div></div>

    @push('scripts')
    <script>
        // Section dropdown depends on the chosen class.
        const TA_SECTIONS = @json($sections ?? []);
        const taSel = @json($sectionId ?? '');
        function taLoadSections() {
            const c = document.getElementById('ta_class').value;
            const sel = document.getElementById('ta_section');
            sel.innerHTML = '<option value="">All sections</option>';
            TA_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(taSel)) o.selected = true;
                sel.appendChild(o);
            });
        }
        document.getElementById('ta_class').addEventListener('change', taLoadSections);
        taLoadSections();

        const ROUTES = @json($routes->mapWithKeys(fn($r) => [$r->id => $r->stops->map(fn($s)=>['id'=>$s->id,'name'=>$s->name])]));
        document.querySelectorAll('.js-route').forEach(sel => {
            sel.addEventListener('change', function(){
                const stopSel = document.getElementById(this.dataset.target);
                stopSel.innerHTML = '<option value="">— Stop —</option>';
                (ROUTES[this.value] || []).forEach(s => {
                    const o = document.createElement('option'); o.value = s.id; o.textContent = s.name; stopSel.appendChild(o);
                });
            });
        });
    </script>
    @endpush
@endsection
