@extends('layouts.public')
@section('title', 'Your reservation')
@push('head')<meta name="robots" content="noindex">@endpush
@section('content')
<div class="mx-auto max-w-lg rounded-lg border border-line bg-panel p-6" x-data="reservationStatus({ url: @js(route('reservations.status', $r->access_token)), pending: @js($r->status === 'pending_payment'), message: @js($r->message) })">
<h1 class="text-xl font-bold">Your reservation</h1>
<p class="mt-1 text-sm">{{ $r->vehicle->display_name }} · {{ $r->vehicle->branch->name }}</p>
<p class="mt-4 rounded-md bg-ground p-4 text-base" role="status" aria-live="polite" x-text="message">{{ $r->message }}</p>
@if (in_array($r->status, ['paid', 'applied']))<p class="mt-3 text-sm">Receipt <strong>{{ $r->mpesa_receipt }}</strong>. The car is held until <strong>{{ $r->hold_until?->format('D d M, H:i') }}</strong>. Our team will call you to arrange viewing and payment of the balance.</p>@endif
@if ($r->status === 'failed' || $r->status === 'cancelled' || $r->status === 'expired')<a href="{{ route('catalog.reserve', $r->vehicle_id) }}" class="btn-primary mt-4">Try again</a>@endif
<a href="{{ route('catalog.index') }}" class="mt-4 inline-block text-sm underline">Back to all cars</a>
</div>
<script>
function reservationStatus(c) { return { message: c.message, pending: c.pending, init() { if (this.pending) this.poll(0); },
  poll(n) { setTimeout(async () => { try { const d = await (await fetch(c.url, { headers: { Accept: 'application/json' } })).json(); this.message = d.message; if (d.final) { setTimeout(() => location.reload(), 1200); return; } } catch (e) {} if (n < 50) this.poll(n + 1); else this.message = 'Still waiting. You can close this page: we will confirm by phone once the payment arrives.'; }, 3000); } }; }
</script>
@endsection