@extends('layouts.app')

@section('title', 'Student Assignments')

@section('content')
    @php
        $money = fn ($v) => \App\Support\Fmt::money2($v);
    @endphp

    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <p class="text-xs font-medium text-muted-foreground">Assign students to routes and stops with transport mode</p>
                <h1 class="text-lg font-semibold">Student Assignments</h1>
            </div>
        </div>

        @include('partials.flashes')

        <div class="grid gap-5 lg:grid-cols-3">
            <div class="rounded-xl border border-border bg-card p-4">
                <p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Routes</p>
                <div class="mt-2 grid h-[560px] gap-1 overflow-y-auto pr-2">
                    @foreach ($routes as $route)
                        @php
                            $active = $selected && $route->id === $selected->id;
                            $total = $routeTotals[$route->id] ?? 0;
                        @endphp
                        <a href="{{ route('transport.assignments', ['route' => $route->id]) }}"
                           class="flex items-center justify-between gap-2 rounded-lg border px-3 py-2 {{ $active ? 'border-primary/50 bg-primary/5' : 'border-border hover:bg-muted/50' }}">
                            <div class="flex min-w-0 flex-col">
                                <span class="truncate text-sm font-medium">{{ $route->name }}</span>
                                <span class="text-xs text-muted-foreground">{{ $route->stops->count() }} stops</span>
                            </div>
                            <span class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium {{ $active ? 'bg-secondary text-secondary-foreground' : 'border border-border text-foreground' }}">
                                {{ $total }}
                            </span>
                        </a>
                    @endforeach
                </div>
            </div>

            <div class="lg:col-span-2">
                @if (! $selected)
                    <div class="rounded-xl border border-border bg-card p-8 text-center text-sm text-muted-foreground">
                        Select a route to view its stops and assigned students.
                    </div>
                @else
                    @php $routeTotal = $routeTotals[$selected->id] ?? 0; @endphp
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <h2 class="text-xl font-semibold tracking-tight">{{ $selected->name }}</h2>
                            <p class="text-xs text-muted-foreground">
                                {{ $selected->stops->count() }} stops &middot;
                                {{ $selected->vehicle_id ? $selected->vehicle->registration_no.' assigned' : 'no vehicle assigned' }}
                            </p>
                        </div>
                        <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $selected->vehicle_id ? 'bg-secondary text-secondary-foreground' : 'border border-border text-foreground' }}">
                            {{ $routeTotal }} students
                        </span>
                    </div>

                    <div class="mt-4 grid gap-3">
                        @forelse ($stops as $stop)
                            @php $list = $assignments[$stop->id] ?? collect(); @endphp
                            <div class="rounded-xl border border-border bg-card p-4">
                                <div class="flex items-start justify-between gap-3">
                                    <div>
                                        <h3 class="text-sm font-medium">{{ $stop->name }}</h3>
                                        <p class="text-xs text-muted-foreground">
                                            {{ $money($stop->one_way) }} 1-way &middot; {{ $money($stop->two_way) }} 2-way
                                        </p>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span class="rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-foreground">
                                            {{ $list->count() }} assigned
                                        </span>
                                        <button type="button"
                                                onclick="window.location='{{ route('transport.assignments', ['route' => $selected->id, 'assign' => $stop->id]) }}#assign-panel'"
                                                class="rounded-lg border border-border px-2 py-1 text-xs hover:bg-accent">Assign Students</button>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    @forelse ($list as $i => $assignment)
                                        @if ($i > 0)<div class="my-2 border-t border-border"></div>@endif
                                        <div class="flex items-center justify-between gap-3">
                                            <div class="flex min-w-0 flex-col">
                                                <span class="truncate text-sm font-medium">{{ $assignment->student?->full_name ?: '—' }}</span>
                                                <span class="text-xs text-muted-foreground">
                                                    {{ $assignment->student?->admission_no }} &middot;
                                                    {{ $assignment->student?->class_name }} {{ $assignment->student?->stream }}
                                                </span>
                                            </div>
                                            <div class="flex shrink-0 items-center gap-2">
                                                <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $assignment->mode === '2-Way' ? 'bg-secondary text-secondary-foreground' : 'border border-border text-foreground' }}">
                                                    {{ $assignment->mode }}
                                                </span>
                                                <form method="post" action="{{ route('transport.assignments.destroy', $assignment) }}"
                                                      onsubmit="return confirm('Remove {{ $assignment->student?->full_name }} from {{ $stop->name }}?')">
                                                    @csrf @method('DELETE')
                                                    <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Remove</button>
                                                </form>
                                            </div>
                                        </div>
                                    @empty
                                        <p class="text-sm text-muted-foreground">No students assigned to this stop yet.</p>
                                    @endforelse
                                </div>
                            </div>
                        @empty
                            <p class="rounded-xl border border-border bg-card p-6 text-center text-sm text-muted-foreground">
                                This route has no stops yet.
                            </p>
                        @endforelse
                    </div>
                @endif
            </div>
        </div>

        @if ($selected && $assignStop)
            <div id="assign-panel" class="rounded-xl border border-border bg-card p-4">
                <h2 class="text-sm font-semibold">Assign Students</h2>
                <p class="text-xs text-muted-foreground">{{ $assignStop->name }}</p>

                @if ($errors->has('students'))
                    <p class="mt-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-1.5 text-xs">{{ $errors->first('students') }}</p>
                @endif

                <form method="post" action="{{ route('transport.assignments.store') }}" class="mt-3 grid gap-3">
                    @csrf
                    <input type="hidden" name="transport_stop_id" value="{{ $assignStop->id }}">

                    <div class="flex flex-wrap items-end gap-3">
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs text-muted-foreground">Transport Mode</label>
                            <select name="mode" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                <option value="1-Way" @selected(old('mode', '2-Way') === '1-Way')>1-Way (morning only)</option>
                                <option value="2-Way" @selected(old('mode', '2-Way') === '2-Way')>2-Way (morning &amp; afternoon)</option>
                            </select>
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs text-muted-foreground">Search Students</label>
                            <input type="search" name="q" value="{{ $request->input('q', '') }}"
                                   placeholder="Type name or admission no (min 2 chars)"
                                   class="h-9 w-72 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        </div>
                        <button class="h-9 rounded-lg border border-border px-3 text-sm hover:bg-accent">Search</button>
                        <a href="{{ route('transport.assignments', ['route' => $selected->id]) }}#assign-panel"
                           class="h-9 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Clear</a>
                    </div>

                    @php
                        $needle = trim((string) $request->input('q', ''));
                        $matchCount = $candidates->count();
                        $picked = (array) old('students', []);
                    @endphp

                    <div class="flex items-center justify-between text-xs text-muted-foreground">
                        <span>{{ strlen($needle) < 2 ? 'Start typing to search' : $matchCount.' match(es)' }}</span>
                        <span>{{ count($picked) }} selected</span>
                    </div>

                    <div class="grid h-[360px] gap-1 overflow-y-auto rounded-lg border border-border p-2">
                        @if (strlen($needle) < 2)
                            <p class="p-4 text-center text-sm text-muted-foreground">Search to find students</p>
                        @elseif ($candidates->isEmpty())
                            <p class="p-4 text-center text-sm text-muted-foreground">No students match your search.</p>
                        @else
                            @foreach ($candidates as $candidate)
                                <label class="flex items-center gap-3 rounded-lg px-2 py-1.5 hover:bg-muted/50 {{ $candidate['assigned'] ? 'opacity-60' : '' }}">
                                    <input type="checkbox" name="students[]" value="{{ $candidate['student']->id }}"
                                           @checked(in_array($candidate['student']->id, $picked))
                                           @disabled($candidate['assigned'])
                                           class="size-4 rounded border-input">
                                    <div class="flex min-w-0 flex-col">
                                        <span class="truncate text-sm font-medium">{{ $candidate['student']->full_name }}</span>
                                        <span class="text-xs text-muted-foreground">
                                            {{ $candidate['student']->admission_no }} &middot;
                                            {{ $candidate['student']->class_name }} {{ $candidate['student']->stream }}
                                        </span>
                                    </div>
                                    @if ($candidate['assigned'])
                                        <span class="ml-auto rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-foreground">Assigned</span>
                                    @endif
                                </label>
                            @endforeach
                        @endif
                    </div>

                    <div>
                        <button class="h-9 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90">Assign</button>
                    </div>
                </form>
            </div>
        @endif
    </div>
@endsection