@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">Roteirização da rota</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400">{{ $route->name }}</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

    <div class="grid gap-4 md:grid-cols-2">
        <x-common.component-card title="Adicionar parada">
            <form method="post" action="{{ route('transporte.rotas.store', $route) }}" class="grid gap-3">
                @csrf
                <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" required 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>
                <div>
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Ordem</label>
                    <input type="number" name="stop_order" value="{{ $route->stops->count() + 1 }}" min="0" class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm" />
                </div>
                <button class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white">Adicionar</button>
            </form>
        </x-common.component-card>

        <x-common.component-card title="Ordem das paradas">
            <form id="order-form" method="post" action="{{ route('transporte.rotas.update', $route) }}">
                @csrf
                @method('PUT')
            </form>

            <div class="space-y-3">
                @foreach ($route->stops as $stop)
                    <div class="flex items-center gap-3">
                        <input type="number" name="orders[{{ $stop->id }}]" form="order-form" value="{{ $stop->pivot->stop_order }}" min="0" class="h-10 w-20 rounded-lg border border-gray-300 px-3 text-sm" />
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900">{{ $stop->name }}</p>
                            <p class="text-xs text-gray-500">{{ $stop->address ?? '-' }}</p>
                        </div>
                        <form method="post" action="{{ route('transporte.rotas.destroy', [$route, $stop]) }}">
                            @csrf
                            @method('DELETE')
                            <button class="rounded-lg border border-gray-200 px-3 py-1 text-xs text-gray-700">Remover</button>
                        </form>
                    </div>
                @endforeach

                <button form="order-form" class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white">Salvar ordem</button>
            </div>
        </x-common.component-card>
    </div>
</div>
@endsection