@extends('layouts.app')

@section('title', 'Booking confirmed | ArrivalFlow')
@section('meta_description', 'Booking success screen for the taxi-to-offer demo flow.')

@section('content')
<section class="split">
    <article class="card success">
        <span class="eyebrow">6 · Booking confirmed</span>
        <h1 style="font-size:clamp(2.1rem,4vw,3.5rem);">Reservation confirmed.</h1>
        <p>{{ $booking->customer_name }} is booked for <strong>{{ $booking->offer->title }}</strong>. This step closes the demo funnel with a real <code>booking_completed</code> event.</p>
        <div class="list" style="margin-top:18px;">
            <div class="list-item">Booking UUID: {{ $booking->uuid }}</div>
            <div class="list-item">Status: {{ ucfirst($booking->status) }}</div>
            <div class="list-item">Amount: {{ $booking->amount ? '€'.number_format((float) $booking->amount, 2) : 'TBD' }}</div>
            <div class="list-item">Commission: {{ $booking->commission_amount ? '€'.number_format((float) $booking->commission_amount, 2) : 'TBD' }}</div>
        </div>
    </article>
    <aside class="card">
        <span class="eyebrow">Attribution summary</span>
        <div class="list">
            <div class="list-item">Ride linked: {{ $booking->ride?->uuid ?? 'Direct booking' }}</div>
            <div class="list-item">Recommendation linked: {{ $booking->recommendation?->id ? '#'.$booking->recommendation->position : 'No' }}</div>
            <div class="list-item">Customer email: {{ $booking->customer_email ?: 'Not provided' }}</div>
        </div>
        <div style="margin-top:18px; display:flex; gap:12px; flex-wrap:wrap;">
            <a class="btn" href="{{ route('home') }}">Start another ride</a>
            @if($booking->ride)
                <a class="btn btn-secondary" href="{{ route('rides.confirmed', $booking->ride) }}">Back to ride</a>
            @endif
        </div>
    </aside>
</section>
@endsection
