@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 form-card">
        <span class="eyebrow">Reserva confirmada</span>
        <h1 style="font-size:clamp(2.15rem,4vw,3.7rem);max-width:12ch;">Reserva cerrada.</h1>
        <p class="compact-lead">{{ $booking->offer->title }} ya está en marcha.</p>

        <div class="story-rail" aria-label="Progreso del funnel">
            <span class="story-chip is-done">1 · Taxi</span>
            <span class="story-chip is-done">2 · Confirmado</span>
            <span class="story-chip is-done">3 · Oferta</span>
            <span class="story-chip is-active">4 · Reserva</span>
        </div>

        <div class="route-card">
            <small>Estado actual</small>
            <strong>{{ $booking->offer->title }}</strong>
            <span>{{ $booking->amount ? '€'.number_format((float) $booking->amount, 2) : 'Importe pendiente' }} · {{ ucfirst($booking->status) }}</span>
        </div>

        <div class="metric-strip metric-strip--2">
            <div class="metric-cell">
                <strong>{{ $booking->amount ? '€'.number_format((float) $booking->amount, 0) : '—' }}</strong>
                <span>importe</span>
            </div>
            <div class="metric-cell">
                <strong>{{ ucfirst($booking->status) }}</strong>
                <span>estado</span>
            </div>
        </div>

        <div class="cta-row" style="margin-top:10px;">
            <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
            <button type="button" class="icon-button" data-modal-open="booking-business" data-tooltip="Más info">ℹ️</button>
        </div>

        <details class="disclosure" style="margin-top:8px;">
            <summary>
                <span>ℹ️ Más info</span>
                <span>Abrir</span>
            </summary>
            <div class="disclosure-body">
                <ul class="accordion-list">
                    <li>Booking UUID: <strong>{{ $booking->uuid }}</strong>.</li>
                    <li>Estado: <strong>{{ ucfirst($booking->status) }}</strong>.</li>
                    <li>Zona: <strong>{{ $booking->ride?->context_zone ?: ($booking->offer->location_label ?: 'General') }}</strong>.</li>
                </ul>
            </div>
        </details>
    </article>

    <aside class="card form-card">
        <span class="eyebrow">Resumen</span>
        <div class="decision-primary">
            <h2>Todo listo.</h2>
            <div class="screen-kpis">
                <div class="screen-kpi">
                    <strong>{{ $booking->offer->location_label ?: 'Zona activa' }}</strong>
                    <span>zona</span>
                </div>
                <div class="screen-kpi">
                    <strong>{{ $booking->party_size ?: 1 }}</strong>
                    <span>personas</span>
                </div>
                <div class="screen-kpi">
                    <strong>{{ $booking->customer_email ?: 'No informado' }}</strong>
                    <span>contacto</span>
                </div>
            </div>
        </div>

        <details class="disclosure disclosure--soft" style="margin-top:16px;">
            <summary>
                <span>Ver detalle</span>
                <span>Abrir</span>
            </summary>
            <div class="disclosure-body">
                <ul class="accordion-list">
                    <li>Si vienes desde taxi confirmado, la reserva mantiene la trazabilidad completa.</li>
                    <li>La lectura económica queda fuera de la vista principal.</li>
                    <li>Negocio la consulta solo cuando la necesita.</li>
                </ul>
            </div>
        </details>
    </aside>
</section>

<dialog class="app-modal" id="booking-business" aria-labelledby="booking-business-title">
    <div class="app-modal-card">
        <div class="app-modal-head">
            <div>
                <p class="eyebrow">Más info</p>
                <h2 id="booking-business-title">Detalle de atribución</h2>
            </div>
            <button type="button" class="app-modal-close" data-modal-close aria-label="Cerrar modal">Cerrar</button>
        </div>
        <div class="metric-strip metric-strip--3">
            <div class="metric-cell">
                <strong>{{ $booking->amount ? '€'.number_format((float) $booking->amount, 2) : 'Pendiente' }}</strong>
                <span>importe</span>
            </div>
            <div class="metric-cell">
                <strong>{{ $booking->commission_amount ? '€'.number_format((float) $booking->commission_amount, 2) : 'Pendiente' }}</strong>
                <span>comisión</span>
            </div>
            <div class="metric-cell">
                <strong>{{ $booking->recommendation?->position ? 'Top '.$booking->recommendation->position : 'Directa' }}</strong>
                <span>atribución</span>
            </div>
        </div>
        <ul class="accordion-list">
            <li>Oferta: <strong>{{ $booking->offer->title }}</strong>.</li>
            <li>Ride vinculado: <strong>{{ $booking->ride?->uuid ?? 'Reserva directa' }}</strong>.</li>
            <li>Origen: <strong>{{ $booking->ride?->source_channel ? ucfirst($booking->ride->source_channel) : 'Directo' }}</strong>.</li>
            <li>La UI principal sigue limpia; el detalle de negocio aparece solo bajo demanda.</li>
        </ul>
    </div>
</dialog>
@endsection