39498-vm/resources/views/offers/show.blade.php

@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',
    ];
@endphp
<section class="split">
    <article class="card offer-card">
        <div class="phone-screen" style="padding:18px;">
            <div class="phone-topbar">
                <span>Propuesta contextual</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>
                <span class="screen-badge">4 · Propuesta contextual</span>
                <h1 style="font-size:clamp(2.15rem,4vw,3.6rem);max-width:14ch;margin-top:14px;">{{ $offer->title }}</h1>
                <p>
                    {{ $offer->description ?: $offer->excerpt }}
                    Esta pantalla debe sentirse como una continuación natural del trayecto: útil, cercana y rápida de confirmar.
                </p>
            </div>

            <div class="offer-meta">
                <span class="pill">{{ $categoryLabels[$offer->category] ?? ucfirst($offer->category) }}</span>
                @if($offer->location_label)<span class="pill">{{ $offer->location_label }}</span>@endif
                @if($offer->price_from)<span class="pill">Desde €{{ number_format((float) $offer->price_from, 0) }}</span>@endif
                @if($offer->duration_minutes)<span class="pill">{{ $offer->duration_minutes }} min</span>@endif
                @if($offer->available_now)<span class="pill">Disponible hoy</span>@endif
            </div>

            @if($recommendation)
                <div class="notice">
                    <strong>Por qué aparece ahora:</strong>
                    esta propuesta viene del trayecto hacia <strong>{{ $ride?->destination_label ?? ($offer->location_label ?: 'tu zona') }}</strong>
                    y quedó posicionada como recomendación #{{ $recommendation->position }} por su cercanía y facilidad de cierre.
                </div>
            @endif

            <div class="screen-kpis">
                <div class="screen-kpi">
                    <strong>{{ $offer->location_label ?: 'Zona activa' }}</strong>
                    <span>cerca del destino</span>
                </div>
                <div class="screen-kpi">
                    <strong>{{ $offer->duration_minutes ? $offer->duration_minutes.' min' : 'Flexible' }}</strong>
                    <span>decisión simple</span>
                </div>
                <div class="screen-kpi">
                    <strong>{{ $offer->price_from ? '€'.number_format((float) $offer->price_from, 0) : 'Consultar' }}</strong>
                    <span>ticket trazable</span>
                </div>
            </div>
        </div>
    </article>

    <aside class="card form-card">
        <span class="eyebrow">5 · Reserva simple</span>
        <h2>Confirma en menos de un minuto</h2>
        <p>
            Sin registro largo y sin checkout complejo. Justo lo necesario para que la demo enseñe conversión real,
            no solo intención.
        </p>

        <div class="form-note">
            Este bloque funciona como checkout móvil mínimo: datos esenciales, intención clara y atribución al trayecto.
        </div>

        @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:18px;">
            @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>
                    <input type="number" name="party_size" value="{{ old('party_size', 2) }}" min="1" max="12" required>
                </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>

        <div class="notice">
            <strong>Lectura demo:</strong>
            al confirmar, el panel puede atribuir esta reserva al trayecto y a la recomendación que la activó.
        </div>
    </aside>
</section>
@endsection