<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <flux:heading size="xl">Edit Vehicle</flux:heading>
            <flux:subheading>Update vehicle information for {{ $vehicle->display_name }}</flux:subheading>
        </div>
        <flux:button href="/vehicles/{{ $vehicle->id }}" variant="outline" size="sm">
            <flux:icon name="arrow-left" class="size-4" />
            Back to Vehicle
        </flux:button>
    </div>

    <!-- Flash Messages -->
    @if (session()->has('success'))
        <div class="bg-green-50 border border-green-200 text-green-800 rounded-md p-4">
            <div class="flex">
                <flux:icon name="check-circle" class="h-5 w-5 text-green-400" />
                <div class="ml-3">
                    <p class="text-sm font-medium">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    <!-- Vehicle Edit Form -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
        <form wire:submit="updateVehicle" class="p-6 space-y-6">
            <!-- Customer Selection -->
            <div>
                <flux:heading size="lg" class="mb-4">Vehicle Owner</flux:heading>
                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <flux:field>
                            <flux:label>Customer *</flux:label>
                            <select wire:model="customer_id" class="w-full rounded-md border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-2 focus:ring-blue-500">
                                <option value="">Select a customer</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->full_name }} - {{ $customer->email }}</option>
                                @endforeach
                            </select>
                            <flux:error name="customer_id" />
                        </flux:field>
                    </div>
                </div>
            </div>

            <!-- Vehicle Information -->
            <div>
                <flux:heading size="lg" class="mb-4">Vehicle Information</flux:heading>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <flux:field>
                            <flux:label>Make *</flux:label>
                            <flux:input wire:model="make" placeholder="e.g., Toyota, Ford, BMW" />
                            <flux:error name="make" />
                        </flux:field>
                    </div>
                    <div>
                        <flux:field>
                            <flux:label>Model *</flux:label>
                            <flux:input wire:model="model" placeholder="e.g., Camry, F-150, X3" />
                            <flux:error name="model" />
                        </flux:field>
                    </div>
                    <div>
                        <flux:field>
                            <flux:label>Year *</flux:label>
                            <flux:input wire:model="year" type="number" min="1900" max="2030" placeholder="e.g., 2020" />
                            <flux:error name="year" />
                        </flux:field>
                    </div>
                </div>
            </div>

            <!-- Identification -->
            <div>
                <flux:heading size="lg" class="mb-4">Vehicle Identification</flux:heading>
                
                <!-- VIN Decode Messages -->
                @if($vinDecodeSuccess)
                    <div class="mb-4 bg-green-50 border border-green-200 text-green-800 rounded-md p-3">
                        <div class="flex">
                            <flux:icon name="check-circle" class="h-5 w-5 text-green-400" />
                            <div class="ml-2">
                                <p class="text-sm">{{ $vinDecodeSuccess }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                @if($vinDecodeError)
                    <div class="mb-4 bg-red-50 border border-red-200 text-red-800 rounded-md p-3">
                        <div class="flex">
                            <flux:icon name="exclamation-circle" class="h-5 w-5 text-red-400" />
                            <div class="ml-2">
                                <p class="text-sm">{{ $vinDecodeError }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <flux:field>
                            <flux:label>VIN (Vehicle Identification Number) *</flux:label>
                            <div class="flex">
                                <flux:input 
                                    wire:model="vin" 
                                    placeholder="17-character VIN" 
                                    maxlength="17" 
                                    class="rounded-r-none"
                                />
                                <flux:button 
                                    type="button"
                                    wire:click="decodeVin"
                                    wire:loading.attr="disabled"
                                    wire:target="decodeVin"
                                    variant="outline"
                                    class="rounded-l-none border-l-0 px-3"
                                    :disabled="$isDecodingVin"
                                >
                                    <div wire:loading.remove wire:target="decodeVin">
                                        <flux:icon name="magnifying-glass" class="size-4" />
                                    </div>
                                    <div wire:loading wire:target="decodeVin">
                                        <flux:icon name="arrow-path" class="size-4 animate-spin" />
                                    </div>
                                </flux:button>
                            </div>
                            <flux:description>Click the search button to decode VIN and update vehicle details</flux:description>
                            <flux:error name="vin" />
                        </flux:field>
                    </div>
                    <div>
                        <flux:field>
                            <flux:label>License Plate *</flux:label>
                            <flux:input wire:model="license_plate" placeholder="e.g., ABC-1234" />
                            <flux:error name="license_plate" />
                        </flux:field>
                    </div>
                </div>
            </div>

            <!-- Physical Details -->
            <div>
                <flux:heading size="lg" class="mb-4">Physical Details</flux:heading>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <flux:field>
                            <flux:label>Color *</flux:label>
                            <div class="flex space-x-2">
                                <input 
                                    type="color" 
                                    wire:model.live="color" 
                                    class="w-12 h-10 border border-zinc-300 dark:border-zinc-600 rounded cursor-pointer"
                                    title="Pick a color"
                                />
                                <flux:input 
                                    wire:model="color" 
                                    placeholder="e.g., White, Black, Silver" 
                                    class="flex-1"
                                />
                            </div>
                            <flux:description>Use the color picker or type the color name</flux:description>
                            <flux:error name="color" />
                        </flux:field>
                    </div>
                    <div>
                        <flux:field>
                            <flux:label>Current Mileage *</flux:label>
                            <flux:input wire:model="mileage" type="number" min="0" max="999999" placeholder="e.g., 45000" />
                            <flux:description>Enter current odometer reading</flux:description>
                            <flux:error name="mileage" />
                        </flux:field>
                    </div>
                </div>
            </div>

            <!-- Technical Specifications -->
            <div>
                <flux:heading size="lg" class="mb-4">Technical Specifications (Optional)</flux:heading>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <flux:field>
                            <flux:label>Engine Type</flux:label>
                            <flux:input wire:model="engine_type" placeholder="e.g., 2.0L Turbo, V6, Electric" />
                            <flux:error name="engine_type" />
                        </flux:field>
                    </div>
                    <div>
                        <flux:field>
                            <flux:label>Transmission</flux:label>
                            <flux:input wire:model="transmission" placeholder="e.g., Automatic, Manual, CVT" />
                            <flux:error name="transmission" />
                        </flux:field>
                    </div>
                </div>
            </div>

            <!-- Additional Information -->
            <div>
                <flux:heading size="lg" class="mb-4">Additional Information</flux:heading>
                <div class="space-y-4">
                    <div>
                        <flux:field>
                            <flux:label>Vehicle Status *</flux:label>
                            <div class="mt-1 space-y-2">
                                <label class="flex items-center">
                                    <input type="radio" wire:model="status" value="active" class="text-blue-600 border-zinc-300 dark:border-zinc-600 focus:ring-2 focus:ring-blue-500" />
                                    <span class="ml-2 text-sm">Active (Currently being serviced)</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" wire:model="status" value="inactive" class="text-blue-600 border-zinc-300 dark:border-zinc-600 focus:ring-2 focus:ring-blue-500" />
                                    <span class="ml-2 text-sm">Inactive (Not currently serviced)</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" wire:model="status" value="sold" class="text-blue-600 border-zinc-300 dark:border-zinc-600 focus:ring-2 focus:ring-blue-500" />
                                    <span class="ml-2 text-sm">Sold (No longer with customer)</span>
                                </label>
                            </div>
                            <flux:error name="status" />
                        </flux:field>
                    </div>
                </div>
            </div>

            <!-- Vehicle Image -->
            <div>
                <flux:heading size="lg" class="mb-4">Vehicle Image</flux:heading>
                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <flux:field>
                            <flux:label>Upload Vehicle Photo</flux:label>
                            <flux:input 
                                type="file" 
                                wire:model="vehicle_image" 
                                accept="image/*"
                            />
                            <flux:description>Upload a new photo of the vehicle (JPG, PNG, GIF - Max 2MB)</flux:description>
                            <flux:error name="vehicle_image" />
                            
                            @if ($vehicle_image)
                                <div class="mt-2">
                                    <img src="{{ $vehicle_image->temporaryUrl() }}" alt="Vehicle Preview" class="w-32 h-24 object-cover rounded border">
                                </div>
                            @elseif ($vehicle->vehicle_image)
                                <div class="mt-2">
                                    <img src="{{ Storage::url($vehicle->vehicle_image) }}" alt="Current Vehicle Photo" class="w-32 h-24 object-cover rounded border">
                                    <p class="text-sm text-zinc-600 dark:text-zinc-400 mt-1">Current vehicle photo</p>
                                </div>
                            @endif
                        </flux:field>
                    </div>
                    <div>
                        <flux:field>
                            <flux:label>Notes</flux:label>
                            <flux:textarea wire:model="notes" placeholder="Add any additional information about the vehicle..." rows="4" />
                            <flux:error name="notes" />
                        </flux:field>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-between pt-6 border-t border-zinc-200 dark:border-zinc-700">
                <flux:button href="/vehicles/{{ $vehicle->id }}" variant="outline">
                    Cancel
                </flux:button>
                <flux:button type="submit" variant="primary">
                    <flux:icon name="check" class="size-4" />
                    Update Vehicle
                </flux:button>
            </div>
        </form>
    </div>
</div>
