@extends('layouts.app')

@section('title', 'Reserva confirmada | TAXILANZ Demo')
@section('meta_description', 'Pantalla de éxito de la reserva para el funnel taxi → recomendación → booking.')

@section('content')
<section class="split">
    <article class="card success">
        <span class="eyebrow">6 · Reserva confirmada</span>
        <h1 style="font-size:clamp(2.15rem,4vw,3.7rem);max-width:14ch;">Reserva cerrada.</h1>
        <p>
            {{ $booking->customer_name }} ya quedó registrado para <strong>{{ $booking->offer->title }}</strong>.
            Este paso cierra el funnel demo con un evento real de <code>booking_completed</code>.
        </p>
        <div class="list">
            <div class="list-item">Booking UUID: {{ $booking->uuid }}</div>
            <div class="list-item">Estado: {{ ucfirst($booking->status) }}</div>
            <div class="list-item">Importe: {{ $booking->amount ? '€'.number_format((float) $booking->amount, 2) : 'Pendiente' }}</div>
            <div class="list-item">Comisión estimada: {{ $booking->commission_amount ? '€'.number_format((float) $booking->commission_amount, 2) : 'Pendiente' }}</div>
        </div>
    </article>

    <aside class="card">
        <span class="eyebrow">Resumen de atribución</span>
        <div class="list">
            <div class="list-item">Ride vinculado: {{ $booking->ride?->uuid ?? 'Reserva directa' }}</div>
            <div class="list-item">Recomendación vinculada: {{ $booking->recommendation?->id ? '#'.$booking->recommendation->position : 'No' }}</div>
            <div class="list-item">Email cliente: {{ $booking->customer_email ?: 'No informado' }}</div>
        </div>
        <div class="cta-row" style="margin-top:18px;">
            <a class="btn" href="{{ route('home') }}">Iniciar otro trayecto</a>
            @if($booking->ride)
                <a class="btn btn-secondary" href="{{ route('rides.confirmed', $booking->ride) }}">Volver al taxi confirmado</a>
            @endif
        </div>
    </aside>
</section>
@endsection
