@extends('layouts.public')
@section('title', 'Reserve '.$v->display_name)
@section('content')
<div class="mx-auto max-w-lg">
<h1 class="text-xl font-bold">Reserve this car</h1>
<p class="mt-1 text-sm">{{ $v->display_name }} · <strong>KSh {{ number_format((float) $v->selling_price) }}</strong></p>
@if ($errors->any())<div role="alert" class="mt-4 rounded-md border border-stop/30 bg-stop/10 px-4 py-3 text-sm text-stop"><ul class="list-disc pl-5">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>@endif
<form method="POST" action="{{ route('catalog.reserve.store', $v->id) }}" class="mt-5 space-y-4 rounded-lg border border-line bg-panel p-5">@csrf
  <input type="hidden" name="_t" value="{{ $token }}">
  <div class="hidden" aria-hidden="true"><label>Leave empty<input name="website" tabindex="-1" autocomplete="off"></label></div>
  <div><label for="name" class="mb-1 block text-sm font-medium">Your full name</label><input id="name" name="name" value="{{ old('name') }}" required autocomplete="name" class="field"></div>
  <div><label for="phone" class="mb-1 block text-sm font-medium">M-Pesa number</label><input id="phone" name="phone" value="{{ old('phone') }}" required inputmode="tel" autocomplete="tel" placeholder="0712 345 678" class="field"><p class="mt-1 text-xs text-muted">A payment request for <strong>KSh {{ number_format((int) config('experience.reservation.deposit')) }}</strong> will appear on this phone.</p></div>
  <div><label for="email" class="mb-1 block text-sm font-medium">Email (optional)</label><input id="email" name="email" type="email" value="{{ old('email') }}" autocomplete="email" class="field"></div>
  <section class="rounded-md bg-ground p-3 text-sm" aria-labelledby="t-h"><h2 id="t-h" class="font-semibold">Reservation terms</h2><ul class="mt-1 list-disc space-y-1 pl-5">@foreach (config('experience.reservation.terms') as $t)<li>{{ $t }}</li>@endforeach</ul></section>
  <label class="flex items-start gap-2 text-sm"><input type="checkbox" name="terms" value="1" required class="mt-0.5 rounded border-line"> I have read and agree to the reservation terms.</label>
  <button class="btn-primary w-full py-3 text-base">Pay KSh {{ number_format((int) config('experience.reservation.deposit')) }} with M-Pesa</button>
</form></div>
@endsection