@extends('layouts.app')
@section('title', 'Website listing')
@section('heading', 'Website listing: '.$v->stock_id)
@section('content')
<p class="text-sm">{{ $v->display_name }} · asking KSh {{ number_format((float) $v->selling_price) }} · <a class="underline" href="{{ route('vehicles.show', $v) }}">Back to vehicle</a>@if ($v->is_listed) · <a class="underline" target="_blank" href="{{ route('catalog.show', [$v->id, Str::slug($v->display_name)]) }}">View on the website</a>@endif</p>
@if ($errors->has('listing'))<div role="alert" class="mt-3 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->get('listing') as $e)<li>{{ $e }}</li>@endforeach</ul></div>@endif
<section class="mt-4 rounded-lg border border-line bg-panel p-4" aria-labelledby="ph-h"><h2 id="ph-h" class="text-sm font-semibold">Photos ({{ $v->photos->count() }}/{{ $max }})</h2>
<ul class="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">@forelse ($v->photos as $p)<li class="text-xs"><img src="{{ $p->url(true) }}" alt="{{ $p->alt }}" loading="lazy" class="aspect-[4/3] w-full rounded border border-line object-cover">
 <div class="mt-1 flex gap-2">@if ($p->is_cover)<span class="rounded bg-plate px-1.5 font-bold">Cover</span>@else<form method="POST" action="{{ route('listing.photos.cover', $p) }}">@csrf<button class="underline">Make cover</button></form>@endif
 <form method="POST" action="{{ route('listing.photos.destroy', $p) }}" onsubmit="return confirm('Remove this photo?')">@csrf @method('DELETE')<button class="text-stop underline">Remove</button></form></div></li>@empty<li class="col-span-full text-sm text-muted">No photos yet. The first one you add becomes the cover.</li>@endforelse</ul>
<form method="POST" action="{{ route('listing.photos.store', $v) }}" enctype="multipart/form-data" class="mt-4 grid gap-3 border-t border-line pt-4 sm:grid-cols-3">@csrf
 <div class="sm:col-span-2"><label for="photos" class="mb-1 block text-xs font-medium">Add photos (JPEG, PNG or WebP; several at once)</label><input id="photos" name="photos[]" type="file" multiple accept="image/jpeg,image/png,image/webp" required class="field"></div>
 <div><label for="alt" class="mb-1 block text-xs font-medium">Description of the photo</label><input id="alt" name="alt" maxlength="160" class="field"></div>
 <div class="sm:col-span-3"><button class="btn-quiet">Upload</button> <span class="text-xs text-muted">Location data is removed from photos when they are saved.</span></div></form></section>
<form method="POST" action="{{ route('listing.update', $v) }}" class="mt-4 space-y-4 rounded-lg border border-line bg-panel p-4">@csrf @method('PUT')
 <div><label for="web_description" class="mb-1 block text-sm font-medium">Description shown to customers</label><textarea id="web_description" name="web_description" rows="5" maxlength="4000" class="field">{{ old('web_description', $v->web_description) }}</textarea></div>
 <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="listed" value="1" @checked(old('listed', $v->is_listed)) class="rounded border-line"> Show this car on the public website</label>
 <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="featured" value="1" @checked(old('featured', $v->is_featured)) class="rounded border-line"> Feature it at the top of the list</label>
 <button class="btn-primary">Save</button></form>
@endsection