<div class="space-y-6">
    <!-- Header -->
    <div class="bg-gradient-to-r from-accent/10 to-accent/5 rounded-xl p-6 border border-accent/20 dark:border-accent/30">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Create New Estimate</h1>
                <p class="text-gray-600 dark:text-gray-400">Create a standalone estimate for parts sales or services</p>
            </div>
            <div class="flex space-x-3 mt-4 lg:mt-0">
                <a href="{{ route('estimates.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                    Back to Estimates
                </a>
            </div>
        </div>
    </div>

    <!-- Customer and Vehicle Selection -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Customer & Vehicle Information</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <flux:field>
                    <flux:label>Customer</flux:label>
                    <flux:select wire:model.live="customerId" placeholder="Select a customer...">
                        <option value="">Select a customer...</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }} - {{ $customer->email }}</option>
                        @endforeach
                    </flux:select>
                    <flux:error name="customerId" />
                </flux:field>
                
                @if($selectedCustomer)
                    <div class="mt-2 p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
                        <div class="text-sm text-blue-800 dark:text-blue-200">
                            <p><strong>{{ $selectedCustomer->name }}</strong></p>
                            <p>{{ $selectedCustomer->email }}</p>
                            <p>{{ $selectedCustomer->phone }}</p>
                        </div>
                    </div>
                @endif
            </div>
            
            <div>
                <flux:field>
                    <flux:label>Vehicle</flux:label>
                    <flux:select wire:model.live="vehicleId" placeholder="Select a vehicle..." :disabled="!$customerId">
                        <option value="">Select a vehicle...</option>
                        @foreach($customerVehicles as $vehicle)
                            <option value="{{ $vehicle->id }}">
                                {{ $vehicle->year }} {{ $vehicle->make }} {{ $vehicle->model }} - {{ $vehicle->license_plate }}
                            </option>
                        @endforeach
                    </flux:select>
                    <flux:error name="vehicleId" />
                </flux:field>
                
                @if($selectedVehicle)
                    <div class="mt-2 p-3 bg-green-50 dark:bg-green-900/30 rounded-lg">
                        <div class="text-sm text-green-800 dark:text-green-200">
                            <p><strong>{{ $selectedVehicle->year }} {{ $selectedVehicle->make }} {{ $selectedVehicle->model }}</strong></p>
                            <p>License Plate: {{ $selectedVehicle->license_plate }}</p>
                            <p>VIN: {{ $selectedVehicle->vin }}</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Line Items -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Line Items</h3>
            <button wire:click="addLineItem" type="button" class="inline-flex items-center px-3 py-2 bg-accent hover:bg-accent-content text-accent-foreground text-sm font-medium rounded-lg transition-colors">
                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
                </svg>
                Add Item
            </button>
        </div>

        <div class="space-y-4">
            @foreach($lineItems as $index => $item)
                <div class="grid grid-cols-12 gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg" wire:key="item-{{ $index }}">
                    <div class="col-span-2">
                        <flux:field>
                            <flux:label>Type</flux:label>
                            <flux:select wire:model.live="lineItems.{{ $index }}.type">
                                <option value="parts">Parts</option>
                                <option value="labour">Labour</option>
                                <option value="miscellaneous">Miscellaneous</option>
                            </flux:select>
                        </flux:field>
                    </div>
                    
                    <div class="col-span-4">
                        @if($item['type'] === 'parts')
                            <flux:field>
                                <flux:label>Parts Search</flux:label>
                                <div class="relative">
                                    @if(!empty($item['part_id']))
                                        <!-- Selected Part Display -->
                                        <div class="flex items-center justify-between p-2 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 rounded-lg">
                                            <div class="flex-1">
                                                <div class="text-sm font-medium text-green-800 dark:text-green-200">
                                                    {{ $item['part_number'] }} - {{ $item['description'] }}
                                                </div>
                                                @if(isset($item['stock_available']))
                                                    <div class="text-xs text-green-600 dark:text-green-300">
                                                        Stock: {{ $item['stock_available'] }} available
                                                    </div>
                                                @endif
                                            </div>
                                            <button wire:click="clearPartSelection({{ $index }})" type="button" class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300">
                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    @else
                                        <!-- Parts Search Input -->
                                        <flux:input 
                                            wire:model.live.debounce.300ms="partSearch" 
                                            wire:keyup="searchParts($event.target.value)"
                                            placeholder="Search parts by name, part number, or description..." 
                                            autocomplete="off"
                                        />
                                        
                                        @if($showPartsDropdown && count($availableParts) > 0)
                                            <div class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                                                @foreach($availableParts as $part)
                                                    <button 
                                                        wire:click="selectPart({{ $index }}, {{ $part->id }})"
                                                        type="button"
                                                        class="w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-200 dark:border-gray-600 last:border-b-0"
                                                    >
                                                        <div class="flex justify-between items-start">
                                                            <div class="flex-1">
                                                                <div class="font-medium text-gray-900 dark:text-gray-100">
                                                                    {{ $part->part_number }} - {{ $part->name }}
                                                                </div>
                                                                <div class="text-sm text-gray-600 dark:text-gray-400">
                                                                    {{ $part->description }}
                                                                </div>
                                                                <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
                                                                    Stock: {{ $part->quantity_on_hand }} | Price: ${{ number_format($part->sell_price, 2) }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </button>
                                                @endforeach
                                            </div>
                                        @elseif($showPartsDropdown && strlen($partSearch) >= 2)
                                            <div class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg p-4">
                                                <div class="text-gray-500 dark:text-gray-400 text-sm">
                                                    No parts found matching "{{ $partSearch }}"
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            </flux:field>
                        @else
                            <flux:field>
                                <flux:label>Description</flux:label>
                                <flux:input wire:model.live="lineItems.{{ $index }}.description" placeholder="Item description..." />
                            </flux:field>
                        @endif
                    </div>
                    
                    <div class="col-span-2">
                        <flux:field>
                            <flux:label>Quantity</flux:label>
                            <flux:input 
                                wire:model.live="lineItems.{{ $index }}.quantity" 
                                type="number" 
                                step="0.01" 
                                min="0.01" 
                                @if($item['type'] === 'parts' && isset($item['stock_available']))
                                    max="{{ $item['stock_available'] }}"
                                @endif
                            />
                            @if($item['type'] === 'parts' && isset($item['stock_available']))
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    @if($item['stock_available'] <= 5)
                                        <span class="text-red-600 dark:text-red-400">⚠️ Low stock: {{ $item['stock_available'] }} available</span>
                                    @else
                                        <span class="text-green-600 dark:text-green-400">✓ {{ $item['stock_available'] }} available</span>
                                    @endif
                                </div>
                            @endif
                        </flux:field>
                    </div>
                    
                    <div class="col-span-2">
                        <flux:field>
                            <flux:label>Unit Price</flux:label>
                            <flux:input wire:model.live="lineItems.{{ $index }}.unit_price" type="number" step="0.01" min="0" />
                        </flux:field>
                    </div>
                    
                    <div class="col-span-1 flex items-end">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">
                            ${{ number_format($item['subtotal'] ?? 0, 2) }}
                        </div>
                    </div>
                    
                    <div class="col-span-1 flex items-end">
                        @if(count($lineItems) > 1)
                            <button wire:click="removeLineItem({{ $index }})" type="button" class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 mb-2">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                </svg>
                            </button>
                        @endif
                    </div>
                </div>
                
                @error("lineItems.{$index}.type")
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
                @error("lineItems.{$index}.description")
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
                @error("lineItems.{$index}.quantity")
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
                @error("lineItems.{$index}.unit_price")
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror
            @endforeach
        </div>
    </div>

    <!-- Estimate Details & Totals -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Estimate Details -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Estimate Details</h3>
            
            <div class="space-y-4">
                <div>
                    <flux:field>
                        <flux:label>Validity Period (Days)</flux:label>
                        <flux:input wire:model.live="validity_period_days" type="number" min="1" max="365" />
                        <flux:error name="validity_period_days" />
                    </flux:field>
                </div>
                
                <div>
                    <flux:field>
                        <flux:label>Tax Rate (%)</flux:label>
                        <flux:input wire:model.live="tax_rate" type="number" step="0.01" min="0" max="50" />
                        <flux:error name="tax_rate" />
                    </flux:field>
                </div>
                
                <div>
                    <flux:field>
                        <flux:label>Discount Amount ($)</flux:label>
                        <flux:input wire:model.live="discount_amount" type="number" step="0.01" min="0" />
                        <flux:error name="discount_amount" />
                    </flux:field>
                </div>
                
                <div>
                    <flux:field>
                        <flux:label>Customer Notes</flux:label>
                        <flux:textarea wire:model="notes" placeholder="Notes visible to customer..." rows="3" />
                    </flux:field>
                </div>
                
                <div>
                    <flux:field>
                        <flux:label>Internal Notes</flux:label>
                        <flux:textarea wire:model="internal_notes" placeholder="Internal notes (not visible to customer)..." rows="3" />
                    </flux:field>
                </div>
            </div>
        </div>

        <!-- Totals -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Totals</h3>
            
            <div class="space-y-3">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600 dark:text-gray-400">Subtotal:</span>
                    <span class="font-medium text-gray-900 dark:text-gray-100">${{ number_format($subtotal, 2) }}</span>
                </div>
                
                @if($discount_amount > 0)
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">Discount:</span>
                        <span class="font-medium text-red-600">-${{ number_format($discount_amount, 2) }}</span>
                    </div>
                @endif
                
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600 dark:text-gray-400">Tax ({{ $tax_rate }}%):</span>
                    <span class="font-medium text-gray-900 dark:text-gray-100">${{ number_format($tax_amount, 2) }}</span>
                </div>
                
                <div class="border-t border-gray-200 dark:border-gray-600 pt-3">
                    <div class="flex justify-between">
                        <span class="text-lg font-semibold text-gray-900 dark:text-gray-100">Total:</span>
                        <span class="text-lg font-bold text-accent">${{ number_format($total_amount, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Terms and Conditions -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Terms and Conditions</h3>
        <flux:field>
            <flux:textarea wire:model="terms_and_conditions" rows="4" placeholder="Enter terms and conditions..." />
            <flux:error name="terms_and_conditions" />
        </flux:field>
    </div>

    <!-- Action Buttons -->
    <div class="flex justify-end space-x-4">
        <a href="{{ route('estimates.index') }}" class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            Cancel
        </a>
        <button wire:click="save" type="button" class="inline-flex items-center px-6 py-3 bg-accent hover:bg-accent-content text-accent-foreground font-medium rounded-lg transition-colors">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Create Estimate
        </button>
    </div>
</div>
