@if ($errors->any())<div class="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"><p class="font-semibold">Please correct the highlighted information.</p><ul class="mt-2 list-disc pl-5">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif
<div class="grid gap-6 xl:grid-cols-2">
    <section class="overflow-hidden rounded-2xl border border-blue-100 bg-white shadow-sm"><div class="flex items-center gap-3 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-white px-6 py-5"><span class="grid size-10 place-items-center rounded-xl bg-blue-600 text-white"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 17h14M5 17l-2-5 2-5h14l2 5-2 5M7 17v2M17 17v2"/></svg></span><div><h2 class="font-bold text-slate-900">Vehicle information</h2><p class="text-xs text-slate-500">Identity, type and fleet status</p></div></div><div class="grid gap-5 p-6 sm:grid-cols-2">
        <div><label class="form-label">Vehicle name *</label><input name="name" value="{{ old('name', $vehicle->name) }}" required class="form-input" placeholder="e.g. City Sedan 01"></div><div><label class="form-label">Registration number *</label><input name="registration_number" value="{{ old('registration_number', $vehicle->registration_number) }}" required class="form-input uppercase" placeholder="TN 01 AB 1234"></div>
        <div><label class="form-label">Vehicle type *</label><input name="vehicle_type" value="{{ old('vehicle_type', $vehicle->vehicle_type) }}" required class="form-input" placeholder="Sedan, SUV, Tempo Traveller"></div><div><label class="form-label">Seating capacity *</label><input type="number" min="1" name="seating_capacity" value="{{ old('seating_capacity', $vehicle->seating_capacity) }}" required class="form-input" placeholder="Enter number of seats"></div>
        <div><label class="form-label">Brand</label><input name="brand" value="{{ old('brand', $vehicle->brand) }}" class="form-input" placeholder="Toyota"></div><div><label class="form-label">Model</label><input name="model" value="{{ old('model', $vehicle->model) }}" class="form-input" placeholder="Innova Crysta"></div>
        <div><label class="form-label">Current kilometre *</label><input type="number" min="0" name="current_km" value="{{ old('current_km', $vehicle->current_km ?? 0) }}" required class="form-input" placeholder="Enter current odometer KM"></div><div><label class="form-label">Status *</label><select name="status" class="form-input">@foreach (['available' => 'Available', 'reserved' => 'Reserved', 'on_trip' => 'On Trip', 'under_maintenance' => 'Under Maintenance', 'inactive' => 'Inactive'] as $value => $label)<option value="{{ $value }}" @selected(old('status', $vehicle->status ?: 'available') === $value)>{{ $label }}</option>@endforeach</select></div>
        <div><label class="form-label">Buy date</label><input type="date" name="buy_date" value="{{ old('buy_date', optional($vehicle->buy_date)->format('Y-m-d')) }}" class="form-input"></div>
    </div></section>
    <section class="overflow-hidden rounded-2xl border border-violet-100 bg-white shadow-sm"><div class="flex items-center gap-3 border-b border-violet-100 bg-gradient-to-r from-violet-50 to-white px-6 py-5"><span class="grid size-10 place-items-center rounded-xl bg-violet-600 text-white"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8.5" cy="10" r="1.5"/><path d="m21 15-5-5L5 19"/></svg></span><div><h2 class="font-bold text-slate-900">Vehicle photo</h2><p class="text-xs text-slate-500">Upload up to 4 vehicle images. The extra ones are optional.</p></div></div><div class="grid gap-5 p-6 lg:grid-cols-[220px_1fr]">
        <div class="grid aspect-[4/3] place-items-center overflow-hidden rounded-2xl border-2 border-dashed border-violet-200 bg-violet-50/60">@if($vehicle->image_path)<img id="vehicle-preview" src="{{ asset('vehicle-media/' . $vehicle->image_path) }}" alt="{{ $vehicle->name }}" class="size-full object-cover">@else<div id="vehicle-placeholder" class="text-center text-violet-400"><svg class="mx-auto size-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M5 17h14M5 17l-2-5 2-5h14l2 5-2 5"/></svg><p class="mt-2 text-xs font-semibold">No image selected</p></div><img id="vehicle-preview" class="hidden size-full object-cover" alt="Vehicle preview">@endif</div>
        <div><div class="space-y-4"><div><label class="form-label">Main vehicle image</label><input id="vehicle-image" type="file" name="image" accept=".jpg,.jpeg,.png,.webp" class="form-input"></div><div><label class="form-label">Additional image 2</label><input type="file" name="image_2" accept=".jpg,.jpeg,.png,.webp" class="form-input"></div><div><label class="form-label">Additional image 3</label><input type="file" name="image_3" accept=".jpg,.jpeg,.png,.webp" class="form-input"></div><div><label class="form-label">Additional image 4</label><input type="file" name="image_4" accept=".jpg,.jpeg,.png,.webp" class="form-input"></div></div><div class="mt-5"><label class="form-label">Vehicle notes</label><textarea name="notes" rows="4" class="form-input" placeholder="Maintenance notes or other vehicle information">{{ old('notes', $vehicle->notes) }}</textarea></div></div>
    </div></section>
    <section class="overflow-hidden rounded-2xl border border-amber-100 bg-white shadow-sm xl:col-span-2">
        <div class="flex items-center gap-3 border-b border-amber-100 bg-gradient-to-r from-amber-50 to-white px-6 py-5">
            <span class="grid size-10 place-items-center rounded-xl bg-amber-500 text-white"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2h9l5 5v15H6z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg></span>
            <div><h2 class="font-bold text-slate-900">Compliance documents</h2><p class="text-xs text-slate-500">Store each vehicle document with its expiry date</p></div>
        </div>
        <div class="grid gap-5 p-6 md:grid-cols-2 xl:grid-cols-4">
            @foreach ([
                ['Insurance', 'insurance_expiry', 'insurance_document', 'insurance_document_path'],
                ['Permit', 'permit_expiry', 'permit_document', 'permit_document_path'],
                ['Fitness certificate', 'fitness_expiry', 'fitness_document', 'fitness_document_path'],
                ['Pollution certificate', 'pollution_expiry', 'pollution_document', 'pollution_document_path'],
            ] as [$label, $dateField, $fileField, $pathField])
                <div class="rounded-2xl border border-slate-200 bg-slate-50/60 p-4">
                    <h3 class="mb-4 font-bold text-slate-800">{{ $label }}</h3>
                    <label class="form-label">Expiry date</label>
                    <input type="date" name="{{ $dateField }}" value="{{ old($dateField, optional($vehicle->{$dateField})->format('Y-m-d')) }}" class="form-input">
                    <label class="form-label mt-4">Document</label>
                    <input type="file" name="{{ $fileField }}" accept=".pdf,.jpg,.jpeg,.png,.webp" class="form-input">
                    @if($vehicle->{$pathField})
                        <a href="{{ asset('vehicle-media/' . $vehicle->{$pathField}) }}" target="_blank" rel="noopener" class="mt-3 inline-flex items-center gap-1.5 text-sm font-bold text-blue-600 hover:text-blue-700">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3h7v7M10 14 21 3M21 14v7H3V3h7"/></svg>View current document
                        </a>
                    @endif
                </div>
            @endforeach
        </div>
    </section>
</div>
<script>
    document.getElementById('vehicle-image').addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;
        const preview = document.getElementById('vehicle-preview');
        const placeholder = document.getElementById('vehicle-placeholder');
        preview.src = URL.createObjectURL(file);
        preview.classList.remove('hidden');
        if (placeholder) placeholder.classList.add('hidden');
    });
</script>