<div>
    <div class="max-w-4xl mx-auto space-y-6">
        <!-- Clean Header -->
        <div class="flex items-center justify-between">
            <div>
                <flux:heading size="xl">New Job Card</flux:heading>
                <flux:subheading>Vehicle Reception & Service Assignment</flux:subheading>
            </div>
            
            <flux:button href="{{ route('job-cards.index') }}" variant="ghost" size="sm" icon="arrow-left">
                Back
            </flux:button>
        </div>

        <!-- Enhanced Form -->
        <form wire:submit="save" class="space-y-6">
            <!-- Customer & Vehicle Selection -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <flux:heading size="lg" class="mb-6">Customer & Vehicle</flux:heading>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Customer Selection - Half Width -->
                    <div>
                        <flux:select wire:model.live="customer_id" label="Customer" placeholder="Select customer..." required>
                            @if($customers && count($customers) > 0)
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->full_name }} - {{ $customer->phone }}</option>
                                @endforeach
                            @endif
                        </flux:select>
                        @error('customer_id') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>

                    <!-- Vehicle Selection - Half Width -->
                    <div>
                        <flux:select wire:model="vehicle_id" label="Vehicle" placeholder="Select vehicle..." required>
                            @if($vehicles && count($vehicles) > 0)
                                @foreach($vehicles as $vehicle)
                                    <option value="{{ $vehicle->id }}">{{ $vehicle->year }} {{ $vehicle->make }} {{ $vehicle->model }} - {{ $vehicle->license_plate }}</option>
                                @endforeach
                            @endif
                        </flux:select>
                        @error('vehicle_id') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Service Assignment -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <flux:heading size="lg" class="mb-6">Service Assignment</flux:heading>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Service Advisor - Half Width -->
                    <div>
                        <flux:select wire:model="service_advisor_id" label="Service Advisor" placeholder="Select service advisor..." required>
                            @if($serviceAdvisors && count($serviceAdvisors) > 0)
                                @foreach($serviceAdvisors as $advisor)
                                    <option value="{{ $advisor->id }}">{{ $advisor->name }}</option>
                                @endforeach
                            @endif
                        </flux:select>
                        @error('service_advisor_id') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>

                    <!-- Branch Selection - Half Width -->
                    <div>
                        <flux:select wire:model="branch_code" label="Branch" placeholder="Select branch..." required>
                            @if($branches && count($branches) > 0)
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->code }}">{{ $branch->name }}</option>
                                @endforeach
                            @endif
                        </flux:select>
                        @error('branch_code') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Reception Details -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <flux:heading size="lg" class="mb-6">Reception Details</flux:heading>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Arrival DateTime -->
                    <div>
                        <flux:input 
                            type="datetime-local"
                            wire:model="arrival_datetime"
                            label="Arrival Date & Time"
                            required
                        />
                        @error('arrival_datetime') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>

                    <!-- Expected Completion -->
                    <div>
                        <flux:input 
                            type="date"
                            wire:model="expected_completion_date"
                            label="Expected Completion"
                        />
                        @error('expected_completion_date') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>

                    <!-- Priority -->
                    <div>
                        <flux:select wire:model="priority" label="Priority" required>
                            <option value="low">Low</option>
                            <option value="medium" selected>Medium</option>
                            <option value="high">High</option>
                            <option value="urgent">Urgent</option>
                        </flux:select>
                        @error('priority') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>
                </div>

                <!-- Vehicle Details Row -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
                    <!-- Mileage -->
                    <div>
                        <flux:input 
                            type="number"
                            wire:model="mileage_in"
                            label="Current Mileage (km)"
                            placeholder="e.g., 45000"
                            min="0"
                        />
                        @error('mileage_in') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>

                    <!-- Fuel Level -->
                    <div>
                        <flux:select wire:model="fuel_level_in" label="Fuel Level">
                            <option value="">Select fuel level...</option>
                            <option value="Empty">Empty (0-10%)</option>
                            <option value="Low">Low (10-25%)</option>
                            <option value="Quarter">Quarter (25-40%)</option>
                            <option value="Half">Half (40-60%)</option>
                            <option value="Three Quarters">Three Quarters (60-85%)</option>
                            <option value="Full">Full (85-100%)</option>
                        </flux:select>
                        @error('fuel_level_in') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>

                    <!-- Keys Location -->
                    <div>
                        <flux:input 
                            wire:model="keys_location"
                            label="Keys Location"
                            placeholder="e.g., In vehicle, Key box"
                        />
                        @error('keys_location') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Issues Assessment -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <flux:heading size="lg" class="mb-6">Issues Assessment</flux:heading>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Reported Issues -->
                    <div>
                        <flux:textarea 
                            wire:model="customer_reported_issues"
                            label="Reported Issues"
                            placeholder="What is the customer reporting? Be specific about symptoms and when they occur..."
                            rows="4"
                            required
                        />
                        @error('customer_reported_issues') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>

                    <!-- Additional Notes -->
                    <div>
                        <flux:textarea 
                            wire:model="notes"
                            label="Additional Notes"
                            placeholder="Special instructions, customer requests, or other relevant information..."
                            rows="4"
                        />
                        @error('notes') 
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-between items-center">
                <!-- Left Side: Inspection Button (shown after job card is created) -->
                <div>
                    @if(isset($jobCardId))
                        <flux:button 
                            href="{{ route('inspections.create', ['jobCard' => $jobCardId, 'type' => 'incoming']) }}" 
                            variant="outline" 
                            size="sm"
                            icon="clipboard-document-check"
                        >
                            Perform Initial Inspection
                        </flux:button>
                    @endif
                </div>

                <!-- Right Side: Form Actions -->
                <div class="flex space-x-3">
                    <flux:button href="{{ route('job-cards.index') }}" variant="ghost" size="sm">
                        Cancel
                    </flux:button>
                    <flux:button type="submit" variant="primary" size="sm">
                        Create Job Card
                    </flux:button>
                </div>
            </div>
        </form>
    </div>
</div>
