@php($editing = $vehicle->exists)
<x-layouts.admin :title="$editing ? 'Edit vehicle' : 'Add vehicle'" :header="$editing ? $vehicle->year.' '.$vehicle->title : 'Add vehicle'">
    <x-slot:actions>
        <a href="{{ route('admin.vehicles.index') }}" class="btn-light"><x-icon name="arrow-left" class="size-4" /> Back</a>
        @if ($editing && in_array($vehicle->status->value, ['available', 'pending'], true))<a href="{{ route('vehicles.show', $vehicle) }}" target="_blank" class="btn-light"><x-icon name="external" class="size-4" /> View</a>@endif
    </x-slot:actions>

    <form method="POST" action="{{ $editing ? route('admin.vehicles.update', $vehicle) : route('admin.vehicles.store') }}" enctype="multipart/form-data" class="grid gap-6 xl:grid-cols-3">
        @csrf
        @if ($editing) @method('PUT') @endif
        <div class="space-y-6 xl:col-span-2">
            <x-admin.card title="Vehicle details">
                <div class="grid gap-4 sm:grid-cols-2">
                    <x-form.input name="title" label="Listing title" :value="$vehicle->title" required class="sm:col-span-2" help="e.g. Mercedes-Benz E-Class E 350 (the year is added automatically)" />
                    <x-form.select name="brand_id" label="Make / brand" placeholder="Select brand" :value="$vehicle->brand_id" :options="$brands->pluck('name', 'id')->all()" />
                    <x-form.input name="model" label="Model" :value="$vehicle->model" required />
                    <x-form.input name="year" label="Year" type="number" :value="$vehicle->year" required />
                    <x-form.input name="trim" label="Trim" :value="$vehicle->trim" />
                    <x-form.input name="price" label="Asking price ($)" type="number" step="1" :value="$vehicle->price ? (int) $vehicle->price : null" help="Leave empty to show “Call for price”." />
                    <x-form.input name="mileage" label="Mileage" type="number" :value="$vehicle->mileage" />
                    <x-form.input name="exterior_color" label="Exterior color" :value="$vehicle->exterior_color" />
                    <x-form.input name="interior_color" label="Interior color" :value="$vehicle->interior_color" />
                    <x-form.input name="engine" label="Engine" :value="$vehicle->engine" />
                    <x-form.input name="transmission" label="Transmission" :value="$vehicle->transmission" />
                    <x-form.input name="drivetrain" label="Drivetrain" :value="$vehicle->drivetrain" />
                    <x-form.input name="fuel_type" label="Fuel type" :value="$vehicle->fuel_type" />
                    <x-form.input name="vin" label="VIN" :value="$vehicle->vin" />
                    <x-form.input name="stock_number" label="Stock #" :value="$vehicle->stock_number" />
                </div>
            </x-admin.card>
            <x-admin.card title="Description & features">
                <div class="space-y-4">
                    <x-form.textarea name="description" label="Description" rows="6" :value="$vehicle->description" />
                    <x-form.textarea name="features" label="Features (one per line)" rows="6" :value="implode(PHP_EOL, $vehicle->features ?? [])" />
                    <x-form.textarea name="history_notes" label="Vehicle history notes" rows="3" :value="$vehicle->history_notes" />
                </div>
            </x-admin.card>
            <x-admin.card title="Photos" description="Images are automatically resized and converted to WebP for fast loading.">
                <div class="space-y-5">
                    <x-form.image name="cover" label="Main photo" :current="$vehicle->cover_image" />
                    <div>
                        <label class="form-label" for="gallery">Add gallery photos</label>
                        <input id="gallery" type="file" name="gallery[]" multiple accept="image/*" class="block w-full text-sm text-gray-600 file:mr-3 file:rounded-md file:border-0 file:bg-navy-800 file:px-3 file:py-2 file:text-sm file:font-medium file:text-white">
                        @error('gallery.*')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                </div>
            </x-admin.card>
        </div>
        <div class="space-y-6">
            <x-admin.card title="Publishing">
                <div class="space-y-4">
                    <x-form.select name="status" label="Status" :value="$vehicle->status" :options="collect($statuses)->mapWithKeys(fn ($status) => [$status->value => $status->label()])->all()" help="Available & Pending show on the website. Sold & Draft are hidden." />
                    <x-form.select name="category_id" label="Category" placeholder="Uncategorized" :value="$vehicle->category_id" :options="$categories->pluck('name', 'id')->all()" />
                    <x-form.checkbox name="is_featured" label="Featured vehicle" :checked="$vehicle->is_featured" help="Shown on the home page." />
                    <button class="btn-gold w-full">{{ $editing ? 'Save changes' : 'Create vehicle' }}</button>
                </div>
            </x-admin.card>
        </div>
    </form>

    @if ($editing && $vehicle->gallery->isNotEmpty())
        <x-admin.card title="Gallery" :description="$vehicle->gallery->count().' photo(s)'">
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
                @foreach ($vehicle->gallery as $photo)
                    <div class="group relative overflow-hidden rounded-lg">
                        <img src="{{ $photo->url() }}" alt="" loading="lazy" class="aspect-[4/3] w-full object-cover">
                        <div class="absolute top-1 right-1 rounded-md bg-white/90 opacity-0 transition group-hover:opacity-100">
                            <x-delete-button :action="route('admin.vehicles.gallery.destroy', [$vehicle, $photo])" confirm="Remove?" />
                        </div>
                    </div>
                @endforeach
            </div>
        </x-admin.card>
    @endif
</x-layouts.admin>