@extends('layouts.public')
@section('title', $v->display_name.' for sale · '.config('experience.site_name'))
@section('description', $v->display_name.', '.number_format($v->mileage).' '.$v->mileage_unit.', KSh '.number_format((float) $v->selling_price).'. '.Str::limit(strip_tags((string) $v->web_description), 120))
@push('head')
<script type="application/ld+json">{!! json_encode(['@context' => 'https://schema.org', '@type' => 'Car', 'name' => $v->display_name, 'vehicleModelDate' => (string) $v->year, 'mileageFromOdometer' => ['@type' => 'QuantitativeValue', 'value' => $v->mileage, 'unitCode' => $v->mileage_unit === 'mi' ? 'SMI' : 'KMT'], 'color' => $v->color, 'vehicleTransmission' => $v->transmission, 'fuelType' => $v->fuel_type, 'image' => $v->photos->take(4)->map(fn ($p) => url($p->url()))->all(), 'offers' => ['@type' => 'Offer', 'priceCurrency' => 'KES', 'price' => (float) $v->selling_price, 'availability' => $v->status->value === 'in_stock' ? 'https://schema.org/InStock' : 'https://schema.org/LimitedAvailability', 'url' => url()->current()]], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush
@section('content')
@php $msg = rawurlencode('Hello, I am interested in the '.$v->display_name.' ('.$v->stock_id.') listed at KSh '.number_format((float) $v->selling_price).'.'); @endphp
<nav class="text-sm text-muted" aria-label="Breadcrumb"><a class="underline" href="{{ route('catalog.index') }}">Cars for sale</a> / {{ $v->display_name }}</nav>
<div class="mt-3 grid gap-6 lg:grid-cols-3">
 <div class="lg:col-span-2" x-data="{ i: 0 }">
  @if ($v->photos->count())
   <img :src="[{{ $v->photos->map(fn ($p) => "'".$p->url()."'")->implode(',') }}][i]" alt="{{ $v->display_name }}" class="aspect-[4/3] w-full rounded-lg border border-line bg-ground object-cover" width="1200" height="900">
   <ul class="mt-2 grid grid-cols-5 gap-2">@foreach ($v->photos as $n => $p)<li><button type="button" @click="i = {{ $n }}" class="block w-full overflow-hidden rounded border border-line" aria-label="Show photo {{ $n + 1 }}"><img src="{{ $p->url(true) }}" alt="" loading="lazy" width="120" height="90" class="aspect-[4/3] w-full object-cover"></button></li>@endforeach</ul>
  @endif
  @if ($v->web_description)<section class="mt-5" aria-labelledby="d-h"><h2 id="d-h" class="text-lg font-semibold">About this car</h2><p class="mt-2 whitespace-pre-line text-sm">{{ $v->web_description }}</p></section>@endif
  <section class="mt-5" aria-labelledby="s-h"><h2 id="s-h" class="text-lg font-semibold">Specifications</h2>
   <dl class="mt-2 grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
    @foreach (['Year' => $v->year, 'Mileage' => number_format($v->mileage).' '.$v->mileage_unit, 'Transmission' => config('inventory.transmissions')[$v->transmission] ?? $v->transmission, 'Fuel' => config('inventory.fuel_types')[$v->fuel_type] ?? $v->fuel_type, 'Engine' => $v->engine_cc ? number_format($v->engine_cc).' cc' : null, 'Body' => config('inventory.body_types')[$v->body_type] ?? null, 'Drive' => config('inventory.drive_types')[$v->drive_type] ?? null, 'Colour' => $v->color, 'Duty' => $v->duty_status === 'cleared' ? 'Paid' : ($v->duty_status === 'bonded' ? 'Not yet paid' : 'Locally registered'), 'Showroom' => $v->branch->name] as $l => $val)@if ($val)<div><dt class="text-xs text-muted">{{ $l }}</dt><dd class="font-medium">{{ $val }}</dd></div>@endif @endforeach
   </dl></section>
 </div>
 <aside class="h-fit rounded-lg border border-line bg-panel p-4 lg:sticky lg:top-4">
  <h1 class="text-xl font-bold">{{ $v->display_name }}</h1>
  <p class="mt-1 text-3xl font-bold">KSh {{ number_format((float) $v->selling_price) }}</p>
  @if ($v->status->value === 'reserved' || $active)
    <p class="mt-3 rounded bg-amber-100 p-3 text-sm text-amber-900">This car is reserved. Ask us to put you on the waiting list in case it becomes available.</p>
  @else
    <a href="{{ route('catalog.reserve', $v->id) }}" class="btn-primary mt-4 w-full py-3 text-base">Reserve for KSh {{ number_format((int) config('experience.reservation.deposit')) }}</a>
    <p class="mt-1 text-xs text-muted">Pay by M-Pesa. We hold the car for {{ config('experience.reservation.hold_hours') }} hours.</p>
  @endif
  <a href="{{ route('enquiry.show', ['vehicle' => $v->stock_id]) }}" class="btn-quiet mt-3 w-full">Ask a question or book a test drive</a>
  @if (config('experience.whatsapp_number'))<a href="https://wa.me/{{ config('experience.whatsapp_number') }}?text={{ $msg }}" class="btn-quiet mt-2 w-full">Chat on WhatsApp</a>@endif
 </aside>
</div>
@if ($related->count())<section class="mt-8" aria-labelledby="r-h"><h2 id="r-h" class="text-lg font-semibold">Similar cars</h2><ul class="mt-3 grid grid-cols-2 gap-3 lg:grid-cols-4">@foreach ($related as $r)<li class="overflow-hidden rounded-lg border border-line bg-panel"><a href="{{ route('catalog.show', [$r->id, Str::slug($r->display_name)]) }}">@if ($r->photos->first())<img src="{{ $r->photos->first()->url(true) }}" alt="" loading="lazy" width="400" height="300" class="aspect-[4/3] w-full object-cover">@endif<span class="block p-2 text-sm"><span class="block font-medium">{{ $r->display_name }}</span>KSh {{ number_format((float) $r->selling_price) }}</span></a></li>@endforeach</ul></section>@endif
@endsection