@extends('layouts.app')

@section('title', $offer->title . ' | TAXILANZ Demo')
@section('meta_description', $offer->excerpt ?: 'Detalle de oferta contextual con reserva simple en TAXILANZ Demo.')

@section('content')
@php
    $categoryLabels = [
        'restaurant' => 'Restaurante',
        'experience' => 'Experiencia',
        'activity' => 'Actividad',
        'service' => 'Servicio',
    ];

    $contextLine = \Illuminate\Support\Str::limit($offer->excerpt ?: 'Disponible para este trayecto ahora mismo.', 110);
@endphp
<section class="split">
    <article class="card offer-card">
        <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-active">3 · Oferta</span>
            <span class="story-chip">4 · Reserva</span>
        </div>

        <div class="phone-screen phone-screen--focused" style="padding:18px;">
            <div class="phone-topbar">
                <span>Detalle oferta</span>
                <span class="phone-dot-group" aria-hidden="true">
                    <span class="phone-dot"></span>
                    <span class="phone-dot"></span>
                    <span class="phone-dot is-live"></span>
                </span>
            </div>

            <div class="offer-visual" aria-hidden="true"></div>

            <div class="decision-primary">
                <span class="screen-badge">Oferta seleccionada</span>
                <h1 style="font-size:clamp(2.15rem,4vw,3.6rem);max-width:13ch;margin-top:14px;">{{ $offer->title }}</h1>
                <p class="screen-copy">{{ $contextLine }}</p>
                <div class="offer-meta">
                    <span class="pill">{{ $categoryLabels[$offer->category] ?? ucfirst($offer->category) }}</span>
                    @if($offer->price_from)<span class="pill">€{{ number_format((float) $offer->price_from, 0) }}</span>@endif
                    @if($offer->duration_minutes)<span class="pill">{{ $offer->duration_minutes }} min</span>@endif
                    <span class="pill">{{ $offer->available_now ? 'Disponible hoy' : 'Consultar disponibilidad' }}</span>
                </div>
                <div class="inline-actions inline-actions--stack-mobile">
                    <a class="btn" href="#reserve">Reservar ahora</a>
                    @if($recommendation)
                        <button type="button" class="btn btn-secondary" data-modal-open="offer-signal">ℹ️ Más info</button>
                    @endif
                </div>
            </div>

            <details class="disclosure disclosure--soft">
                <summary>
                    <span>Más detalles</span>
                    <span>Abrir</span>
                </summary>
                <div class="disclosure-body">
                    <ul class="accordion-list">
                        @if($offer->location_label)
                            <li>Zona: <strong>{{ $offer->location_label }}</strong>.</li>
                        @endif
                        <li>Disponibilidad: <strong>{{ $offer->available_now ? 'Activa ahora' : 'Bajo confirmación' }}</strong>.</li>
                        @if($offer->description)
                            <li>{{ \Illuminate\Support\Str::limit($offer->description, 180) }}</li>
                        @endif
                    </ul>
                </div>
            </details>
        </div>
    </article>

    <aside class="card form-card" id="reserve">
        <span class="eyebrow">Reserva</span>
        <h2>Confirma y sigue.</h2>
        <p class="compact-lead">Solo lo necesario para cerrar la decisión.</p>

        @if ($errors->any())
            <div class="errors">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="post" action="{{ route('bookings.store', $offer) }}" style="margin-top:10px;">
            @csrf
            <input type="hidden" name="ride_id" value="{{ $ride?->id }}">
            <input type="hidden" name="ride_recommendation_id" value="{{ $recommendation?->id }}">

            <label>
                <span class="field-label">Nombre</span>
                <input type="text" name="customer_name" value="{{ old('customer_name', 'Alex Morgan') }}" required>
            </label>

            <div class="grid-2">
                <label>
                    <span class="field-label">Email</span>
                    <input type="email" name="customer_email" value="{{ old('customer_email', 'alex@example.com') }}">
                </label>
                <label>
                    <span class="field-label">Teléfono</span>
                    <input type="text" name="customer_phone" value="{{ old('customer_phone', '+34 600 123 456') }}">
                </label>
            </div>

            <div class="grid-2">
                <label>
                    <span class="field-label">Personas</span>
                    <select name="party_size">
                        @for ($i = 1; $i <= 8; $i++)
                            <option value="{{ $i }}" @selected((int) old('party_size', 2) === $i)>{{ $i }}</option>
                        @endfor
                    </select>
                </label>
                <label>
                    <span class="field-label">Fecha / hora</span>
                    <input type="datetime-local" name="booking_for" value="{{ old('booking_for') }}">
                </label>
            </div>

            <label>
                <span class="field-label">Nota</span>
                <textarea name="notes">{{ old('notes', 'Mesa tranquila si está disponible.') }}</textarea>
            </label>

            <button class="btn" type="submit">Confirmar reserva</button>
        </form>

        <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>La reserva se vincula al trayecto solo si llegas desde taxi confirmado.</li>
                    <li>La atribución queda guardada sin ensuciar esta pantalla.</li>
                    <li>La lectura de negocio vive en admin, no en el flujo de decisión.</li>
                </ul>
            </div>
        </details>
    </aside>
</section>

@if($recommendation)
    <dialog class="app-modal" id="offer-signal" aria-labelledby="offer-signal-title">
        <div class="app-modal-card">
            <div class="app-modal-head">
                <div>
                    <p class="eyebrow">Más info</p>
                    <h2 id="offer-signal-title">Por qué aparece esta oferta</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>Top {{ $recommendation->position }}</strong>
                    <span>posición</span>
                </div>
                <div class="metric-cell">
                    <strong>{{ $offer->price_from ? '€'.number_format((float) $offer->price_from, 0) : '—' }}</strong>
                    <span>precio visible</span>
                </div>
                <div class="metric-cell">
                    <strong>{{ $offer->duration_minutes ? $offer->duration_minutes.' min' : 'Flexible' }}</strong>
                    <span>duración</span>
                </div>
            </div>
            <ul class="accordion-list">
                <li>{{ $recommendation->reason ?: 'La propuesta aparece por contexto, proximidad y capacidad de cierre.' }}</li>
                @if($ride)
                    <li>Trayecto vinculado: <strong>{{ $ride->pickup_label }}</strong> → <strong>{{ $ride->destination_label }}</strong>.</li>
                @endif
                @if($offer->location_label)
                    <li>Zona relevante: <strong>{{ $offer->location_label }}</strong>.</li>
                @endif
            </ul>
        </div>
    </dialog>
@endif
@endsection