@extends('layouts.app')

@section('title', 'Confirma tu reserva | Cartagena Tours & Viajes')

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

    <h1 class="text-2xl font-bold text-[#0B1F44] mb-6">Confirma tu reserva</h1>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 mb-6">
        <p class="text-sm text-gray-500 mb-1">{{ $rate->zonaOrigen->nombre }} → {{ $rate->zonaDestino->nombre }}</p>
        <p class="font-bold text-gray-900 mb-3">{{ $rate->vehicle->nombre }} · {{ $pasajeros }} pasajero(s)</p>
        <p class="text-2xl font-extrabold text-[#0B1F44]">
            ${{ number_format($precioFinal, 0, ',', '.') }} <span class="text-sm font-normal text-gray-500">COP</span>
        </p>
    </div>

    @if($errors->any())
        <div class="bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg p-4 mb-6">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('transporte.reservar.store') }}" class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-4">
        @csrf
        <input type="hidden" name="rate_id" value="{{ $rate->id }}">
        <input type="hidden" name="fecha" value="{{ $fecha }}">
        <input type="hidden" name="hora" value="{{ $hora }}">
        <input type="hidden" name="pasajeros" value="{{ $pasajeros }}">
        <input type="hidden" name="precio_final" value="{{ $precioFinal }}">

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Nombre completo</label>
            <input type="text" name="nombre_completo" required value="{{ old('nombre_completo') }}"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Teléfono</label>
            <input type="text" name="telefono" value="{{ old('telefono') }}"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Correo electrónico</label>
            <input type="email" name="email" value="{{ old('email') }}"
                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
        </div>

        <button type="submit"
                class="w-full bg-[#F6C343] hover:bg-[#e0af2e] text-[#0B1F44] font-bold py-3 rounded-lg">
            Confirmar reserva
        </button>
    </form>

</section>
@endsection