@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">Vínculo de alunos ao transporte</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">Defina rota e parada por aluno.</p>
        </div>
        <a href="{{ route('transporte.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>

    @if (session('success'))
        <div class="rounded-lg border border-success-200 bg-success-50 px-4 py-3 text-sm text-success-700">
            {{ session('success') }}
        </div>
    @endif

    <x-common.component-card title="Selecionar rota">
        <form method="get" class="grid gap-3 md:grid-cols-3">
            <div class="md:col-span-2">
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Rota</label>
                <select name="route_id" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm">
                    <option value="">Selecione</option>
                    @foreach ($routes as $item)
                        <option value="{{ $item->id }}" {{ optional($route)->id == $item->id ? 'selected' : '' }}>
                            {{ $item->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-end">
                <button class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white">Carregar</button>
            </div>
        </form>
    </x-common.component-card>

    @if ($route)
        <div class="grid gap-4 md:grid-cols-2">
            <x-common.component-card title="Adicionar aluno">
                <form method="post" action="{{ route('transporte.vinculos.store') }}" class="grid gap-3">
                    @csrf
                    <input type="hidden" name="transport_route_id" value="{{ $route->id }}" />
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Aluno</label>
                        <select name="student_id" required class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm">
                            <option value="">Selecione</option>
                            @foreach ($students as $student)
                                <option value="{{ $student->id }}">{{ $student->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Parada</label>
                        <select name="transport_stop_id" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm">
                            <option value="">Selecione</option>
                            @foreach ($stops as $stop)
                                <option value="{{ $stop->id }}">{{ $stop->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white">Vincular</button>
                </form>
            </x-common.component-card>

            <x-common.component-card title="Alunos vinculados">
                <form id="stops-form" method="post" action="{{ route('transporte.vinculos.update', $route) }}">
                    @csrf
                    @method('PUT')
                </form>

                <div class="space-y-3">
                    @forelse ($assigned as $student)
                        <div class="flex items-center gap-3">
                            <div class="flex-1">
                                <p class="text-sm font-medium text-gray-900">{{ $student->name }}</p>
                            </div>
                            <select name="stops[{{ $student->id }}]" form="stops-form" class="h-10 rounded-lg border border-gray-300 px-3 text-sm">
                                <option value="">Sem parada</option>
                                @foreach ($stops as $stop)
                                    <option value="{{ $stop->id }}" {{ (string) $student->pivot->transport_stop_id === (string) $stop->id ? 'selected' : '' }}>
                                        {{ $stop->name }}
                                    </option>
                                @endforeach
                            </select>
                            <form method="post" action="{{ route('transporte.vinculos.destroy', [$route, $student]) }}">
                                @csrf
                                @method('DELETE')
                                <button class="rounded-lg border border-gray-200 px-3 py-1 text-xs text-gray-700">Remover</button>
                            </form>
                        </div>
                    @empty
                        <p class="text-sm text-gray-500">Nenhum aluno vinculado.</p>
                    @endforelse

                    @if ($assigned->count())
                        <button form="stops-form" class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white">Salvar paradas</button>
                    @endif
                </div>
            </x-common.component-card>
        </div>
    @endif
</div>
@endsection