224 lines
13 KiB
PHP
224 lines
13 KiB
PHP
@extends('layouts.app')
|
||
|
||
@section('title', 'Taxi confirmado | TAXILANZ Demo')
|
||
@section('meta_description', 'Pantalla de taxi confirmado con recomendaciones contextuales y decisiones rápidas en TAXILANZ Demo.')
|
||
|
||
@section('content')
|
||
@php
|
||
$recommendationOptions = $recommendations->take(3);
|
||
$primaryRecommendation = $recommendationOptions->first();
|
||
$secondaryRecommendations = $recommendationOptions->skip(1);
|
||
@endphp
|
||
<section class="hero">
|
||
<article class="card hero-copy hero-copy--compact">
|
||
<div>
|
||
<span class="eyebrow">Taxi confirmado</span>
|
||
<h1>Tu taxi llega en {{ $ride->eta_minutes ?? 6 }} min.</h1>
|
||
<p class="compact-lead">Elige si quieres una parada útil antes de llegar.</p>
|
||
</div>
|
||
|
||
<div class="route-card">
|
||
<small>Trayecto activo</small>
|
||
<strong>{{ $ride->pickup_label }} → {{ $ride->destination_label }}</strong>
|
||
<span>{{ ucfirst($ride->status) }} · {{ $ride->eta_minutes ?? 6 }} min</span>
|
||
</div>
|
||
|
||
<div class="story-rail" aria-label="Progreso del funnel">
|
||
<span class="story-chip is-done">1 · Taxi</span>
|
||
<span class="story-chip is-active">2 · Confirmado</span>
|
||
<span class="story-chip">3 · Oferta</span>
|
||
<span class="story-chip">4 · Reserva</span>
|
||
</div>
|
||
|
||
@if ($primaryRecommendation)
|
||
<div class="decision-card">
|
||
<div class="decision-primary decision-primary--accent">
|
||
<span class="screen-badge">Recomendación principal</span>
|
||
<h2 class="decision-title">{{ $primaryRecommendation->offer->title }}</h2>
|
||
<p class="screen-copy">{{ $primaryRecommendation->offer->location_label ?: $ride->destination_label }} · Disponible ahora</p>
|
||
<div class="offer-meta">
|
||
@if($primaryRecommendation->offer->price_from)<span class="pill">€{{ number_format((float) $primaryRecommendation->offer->price_from, 0) }}</span>@endif
|
||
@if($primaryRecommendation->offer->duration_minutes)<span class="pill">{{ $primaryRecommendation->offer->duration_minutes }} min</span>@endif
|
||
<span class="pill">Top {{ $primaryRecommendation->position }}</span>
|
||
</div>
|
||
<div class="inline-actions inline-actions--stack-mobile">
|
||
<a class="btn" href="{{ route('offers.show', $primaryRecommendation->offer->slug) }}?ride={{ $ride->id }}&recommendation={{ $primaryRecommendation->id }}">Ver y reservar</a>
|
||
<button type="button" class="btn btn-secondary" data-modal-open="signal-primary">ℹ️ Más info</button>
|
||
<button type="button" class="icon-button" data-modal-open="impact-primary" data-tooltip="Ver impacto">Impacto</button>
|
||
</div>
|
||
</div>
|
||
|
||
<details class="disclosure">
|
||
<summary>
|
||
<span>¿Por qué esta opción?</span>
|
||
<span>Abrir</span>
|
||
</summary>
|
||
<div class="disclosure-body">
|
||
<ul class="accordion-list">
|
||
<li>Encaja con tu destino: <strong>{{ $ride->destination_label }}</strong>.</li>
|
||
@if($primaryRecommendation->offer->location_label)
|
||
<li>Queda cerca de <strong>{{ $primaryRecommendation->offer->location_label }}</strong>.</li>
|
||
@endif
|
||
<li>{{ $primaryRecommendation->reason ?: 'La priorizamos por cercanía, disponibilidad y cierre rápido.' }}</li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<dialog class="app-modal" id="signal-primary" aria-labelledby="signal-primary-title">
|
||
<div class="app-modal-card">
|
||
<div class="app-modal-head">
|
||
<div>
|
||
<p class="eyebrow">Más info</p>
|
||
<h2 id="signal-primary-title">{{ $primaryRecommendation->offer->title }}</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--2">
|
||
<div class="metric-cell">
|
||
<strong>Top {{ $primaryRecommendation->position }}</strong>
|
||
<span>prioridad</span>
|
||
</div>
|
||
<div class="metric-cell">
|
||
<strong>{{ $ride->eta_minutes ?? 6 }} min</strong>
|
||
<span>momento de atención</span>
|
||
</div>
|
||
</div>
|
||
<ul class="accordion-list">
|
||
<li>Trayecto: <strong>{{ $ride->pickup_label }}</strong> → <strong>{{ $ride->destination_label }}</strong>.</li>
|
||
<li>Zona: <strong>{{ $ride->context_zone ?: 'General' }}</strong>.</li>
|
||
<li>Canal: <strong>{{ ucfirst($ride->source_channel) }}</strong>.</li>
|
||
<li>{{ $primaryRecommendation->reason ?: 'La propuesta destaca por contexto, proximidad y facilidad de reserva.' }}</li>
|
||
</ul>
|
||
</div>
|
||
</dialog>
|
||
|
||
<dialog class="app-modal" id="impact-primary" aria-labelledby="impact-primary-title">
|
||
<div class="app-modal-card">
|
||
<div class="app-modal-head">
|
||
<div>
|
||
<p class="eyebrow">Impacto</p>
|
||
<h2 id="impact-primary-title">Qué mueve esta propuesta</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>{{ $primaryRecommendation->offer->price_from ? '€'.number_format((float) $primaryRecommendation->offer->price_from, 0) : '—' }}</strong>
|
||
<span>ticket visible</span>
|
||
</div>
|
||
<div class="metric-cell">
|
||
<strong>{{ $primaryRecommendation->offer->duration_minutes ? $primaryRecommendation->offer->duration_minutes.' min' : 'Flexible' }}</strong>
|
||
<span>duración</span>
|
||
</div>
|
||
<div class="metric-cell">
|
||
<strong>{{ ucfirst($ride->source_channel) }}</strong>
|
||
<span>origen del trayecto</span>
|
||
</div>
|
||
</div>
|
||
<ul class="accordion-list">
|
||
<li>Se muestra cuando el trayecto ya está resuelto y la decisión es simple.</li>
|
||
<li>La atribución y la lectura de negocio quedan fuera de la pantalla principal.</li>
|
||
<li>Si el usuario reserva, el dashboard recoge el impacto sin añadir ruido aquí.</li>
|
||
</ul>
|
||
</div>
|
||
</dialog>
|
||
@else
|
||
<div class="notice">Todavía no hay una propuesta activa para este trayecto.</div>
|
||
@endif
|
||
</article>
|
||
|
||
<aside class="phone-shell" aria-label="Vista móvil del taxi confirmado">
|
||
<div class="phone-screen phone-screen--focused">
|
||
<div class="phone-topbar">
|
||
<span>Taxi confirmado</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="route-card">
|
||
<small>Trayecto activo</small>
|
||
<strong>{{ $ride->pickup_label }} → {{ $ride->destination_label }}</strong>
|
||
<span>ETA {{ $ride->eta_minutes ?? 6 }} min · {{ ucfirst($ride->status) }}</span>
|
||
</div>
|
||
|
||
@if ($primaryRecommendation)
|
||
<article class="recommendation-focus">
|
||
<div class="phone-action-top">
|
||
<strong class="phone-action-title">{{ $primaryRecommendation->offer->title }}</strong>
|
||
<span>Top {{ $primaryRecommendation->position }}</span>
|
||
</div>
|
||
<small>{{ $primaryRecommendation->offer->location_label ?: 'Disponible ahora' }}</small>
|
||
<div class="phone-action-meta">
|
||
@if($primaryRecommendation->offer->price_from)<span>€{{ number_format((float) $primaryRecommendation->offer->price_from, 0) }}</span>@endif
|
||
@if($primaryRecommendation->offer->duration_minutes)<span>{{ $primaryRecommendation->offer->duration_minutes }} min</span>@endif
|
||
<span>Disponible</span>
|
||
</div>
|
||
<a class="btn" href="{{ route('offers.show', $primaryRecommendation->offer->slug) }}?ride={{ $ride->id }}&recommendation={{ $primaryRecommendation->id }}">Ver y reservar</a>
|
||
</article>
|
||
@endif
|
||
|
||
@if ($secondaryRecommendations->isNotEmpty())
|
||
<div class="phone-list">
|
||
@foreach ($secondaryRecommendations as $recommendation)
|
||
<a class="phone-action" href="{{ route('offers.show', $recommendation->offer->slug) }}?ride={{ $ride->id }}&recommendation={{ $recommendation->id }}">
|
||
<div class="phone-action-top">
|
||
<strong class="phone-action-title">{{ $recommendation->offer->title }}</strong>
|
||
<span>Top {{ $recommendation->position }}</span>
|
||
</div>
|
||
<div class="phone-action-meta">
|
||
@if($recommendation->offer->price_from)<span>€{{ number_format((float) $recommendation->offer->price_from, 0) }}</span>@endif
|
||
@if($recommendation->offer->duration_minutes)<span>{{ $recommendation->offer->duration_minutes }} min</span>@endif
|
||
<span>{{ $recommendation->offer->location_label ?: 'Disponible ahora' }}</span>
|
||
</div>
|
||
</a>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
|
||
@if ($secondaryRecommendations->isNotEmpty())
|
||
<section class="section">
|
||
<div class="section-head section-head--compact">
|
||
<div>
|
||
<span class="eyebrow">Otras opciones</span>
|
||
<h2>Solo 2 más para comparar</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cards cards--compact">
|
||
@foreach ($secondaryRecommendations as $recommendation)
|
||
<article class="card offer-card offer-card--compact">
|
||
<div>
|
||
<div class="offer-meta">
|
||
<span class="pill">Top {{ $recommendation->position }}</span>
|
||
@if($recommendation->offer->price_from)<span class="pill">€{{ number_format((float) $recommendation->offer->price_from, 0) }}</span>@endif
|
||
@if($recommendation->offer->duration_minutes)<span class="pill">{{ $recommendation->offer->duration_minutes }} min</span>@endif
|
||
</div>
|
||
<h3>{{ $recommendation->offer->title }}</h3>
|
||
<p class="screen-copy">{{ $recommendation->offer->location_label ?: 'Disponible ahora' }}</p>
|
||
</div>
|
||
<div class="inline-actions inline-actions--stack-mobile">
|
||
<a class="btn btn-secondary" href="{{ route('offers.show', $recommendation->offer->slug) }}?ride={{ $ride->id }}&recommendation={{ $recommendation->id }}">Ver y reservar</a>
|
||
</div>
|
||
<details class="disclosure disclosure--soft">
|
||
<summary>
|
||
<span>ℹ️ Más info</span>
|
||
<span>Abrir</span>
|
||
</summary>
|
||
<div class="disclosure-body">
|
||
<p>{{ $recommendation->reason ?: 'Opción contextual cercana al destino y fácil de reservar.' }}</p>
|
||
</div>
|
||
</details>
|
||
</article>
|
||
@endforeach
|
||
</div>
|
||
</section>
|
||
@endif
|
||
@endsection
|