@extends('layouts.app')

@section('title', 'Resultados de búsqueda | Cartagena Tours & Viajes')

@section('content')
<section class="max-w-5xl mx-auto px-6 py-12">

    <h1 class="text-2xl font-bold text-[#0B1F44] mb-2">
        {{ $origenPlace->zone->nombre }} → {{ $destinoPlace->zone->nombre }}
    </h1>

    @if($ruta)
        <p class="text-gray-500 mb-2">
            Distancia aproximada: {{ $ruta['distancia_km'] }} km · {{ $ruta['duracion_min'] }} min de viaje
        </p>
    @endif

    @if($esNocturno)
        <div class="inline-flex items-center gap-2 bg-amber-50 border border-amber-200 text-amber-800 text-sm font-medium px-4 py-2 rounded-lg mb-6">
            🌙 Recargo nocturno aplicado (+{{ $porcentajeRecargo }}%) por horario entre 9:00 PM y 6:00 AM
        </div>
    @endif

    <div class="space-y-4 mt-4">
        @forelse($opciones as $rate)
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 flex items-center justify-between">
                <div>
                    <p class="font-bold text-gray-900">{{ $rate->vehicle->nombre }}</p>
                    <p class="text-sm text-gray-500">Hasta {{ $rate->vehicle->capacidad }} pasajeros</p>
                </div>
                <div class="text-right">
                    @if($esNocturno)
                        <p class="text-xs text-gray-400 line-through">${{ number_format($rate->precio, 0, ',', '.') }}</p>
                    @endif
                    <p class="text-2xl font-extrabold text-[#0B1F44]">
                        ${{ number_format($rate->precio_final, 0, ',', '.') }} <span class="text-sm font-normal text-gray-500">COP</span>
                    </p>
                    <a href="{{ route('transporte.reservar.create', ['rate' => $rate->id, 'fecha' => request('fecha_ida'), 'hora' => request('hora_ida'), 'pasajeros' => request('pasajeros'), 'precio_final' => $rate->precio_final]) }}"
   class="inline-block mt-2 bg-[#F6C343] hover:bg-[#e0af2e] text-[#0B1F44] font-semibold px-5 py-2 rounded-lg text-sm">
    Reservar
</a>
                </div>
            </div>
        @empty
            <p class="text-center text-gray-400 py-12">
                No hay vehículos disponibles para esta ruta con la capacidad solicitada.
            </p>
        @endforelse
    </div>

</section>
@endsection