261 lines
13 KiB
PHP
261 lines
13 KiB
PHP
<div class="space-y-6">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<flux:heading size="xl">Add New Vehicle</flux:heading>
|
|
<flux:subheading>Register a new vehicle for customer service tracking</flux:subheading>
|
|
</div>
|
|
<flux:button href="/vehicles" variant="outline" size="sm">
|
|
<flux:icon name="arrow-left" class="size-4" />
|
|
Back to Vehicles
|
|
</flux:button>
|
|
</div>
|
|
|
|
<!-- Vehicle Registration Form -->
|
|
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
|
|
<form wire:submit="createVehicle" 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>Enter the complete 17-character VIN and click the search button to auto-fill 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 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>
|
|
@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" variant="outline">
|
|
Cancel
|
|
</flux:button>
|
|
<flux:button type="submit" variant="primary">
|
|
<flux:icon name="check" class="size-4" />
|
|
Add Vehicle
|
|
</flux:button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|