@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Ocupação das rotas</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">Alunos por rota e parada.</p>
        </div>
        <a href="{{ route('relatorios.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Voltar</a>
    </div>

    <div class="space-y-4">
        @forelse ($routes as $route)
            @php
                $grouped = $route->students->groupBy('pivot.transport_stop_id');
            @endphp
            <x-common.component-card title="{{ $route->name }}">
                <div class="text-sm text-gray-500">
                    Capacidade: {{ $route->capacity }} · Alunos: {{ $route->students->count() }}
                </div>
                <div class="mt-4 space-y-3">
                    @foreach ($route->stops as $stop)
                        @php
                            $students = $grouped->get($stop->id, collect());
                        @endphp
                        <div class="rounded-lg border border-gray-100 p-3">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-900">{{ $stop->name }}</p>
                                    <p class="text-xs text-gray-500">{{ $stop->address ?? '-' }}</p>
                                </div>
                                <span class="text-xs text-gray-600">{{ $students->count() }} alunos</span>
                            </div>
                            @if ($students->count())
                                <div class="mt-2 text-xs text-gray-500">
                                    {{ $students->pluck('name')->join(', ') }}
                                </div>
                            @endif
                        </div>
                    @endforeach
                    @if ($grouped->has(null))
                        <div class="rounded-lg border border-dashed border-gray-200 p-3">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm font-medium text-gray-900">Sem parada</p>
                                </div>
                                <span class="text-xs text-gray-600">{{ $grouped->get(null, collect())->count() }} alunos</span>
                            </div>
                        </div>
                    @endif
                </div>
            </x-common.component-card>
        @empty
            <div class="rounded-lg border border-dashed border-gray-200 p-6 text-center text-sm text-gray-500">Nenhuma rota cadastrada.</div>
        @endforelse
    </div>
</div>
@endsection