<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <flux:heading size="xl">Edit Service Order #{{ $serviceOrder->order_number }}</flux:heading>
            <flux:subheading>Update service order details and manage work items</flux:subheading>
        </div>
        <div class="flex items-center space-x-3">
            <flux:badge size="lg" variant="{{ $serviceOrder->status === 'completed' ? 'success' : ($serviceOrder->status === 'in_progress' ? 'warning' : 'neutral') }}">
                {{ ucfirst(str_replace('_', ' ', $serviceOrder->status)) }}
            </flux:badge>
        </div>
    </div>

    <!-- Service Order Form -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
        <div class="p-6">
            <form wire:submit="update" class="space-y-6">
                <!-- Customer & Vehicle Information -->
                <div>
                    <flux:heading size="lg" class="mb-4">Customer & Vehicle Information</flux:heading>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- Left Column -->
                        <div class="space-y-4">
                                <!-- Customer Selection -->
                                <flux:field>
                                    <flux:label>Customer</flux:label>
                                    <flux:select wire:model.live="customer_id">
                                        <option value="">Select customer...</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}">{{ $customer->full_name }}</option>
                                        @endforeach
                                    </flux:select>
                                    <flux:error name="customer_id" />
                                </flux:field>

                                <!-- Vehicle Selection -->
                                <flux:field>
                                    <flux:label>Vehicle</flux:label>
                                    <flux:select wire:model="vehicle_id">
                                        <option value="">Select vehicle...</option>
                                        @foreach($vehicles as $vehicle)
                                            <option value="{{ $vehicle->id }}">{{ $vehicle->display_name }} ({{ $vehicle->license_plate }})</option>
                                        @endforeach
                                    </flux:select>
                                    <flux:error name="vehicle_id" />
                                </flux:field>

                        <!-- Right Column -->
                        <div class="space-y-4">
                            <!-- Technician Assignment -->
                            <flux:field>
                                <flux:label>Assigned Technician</flux:label>
                                <flux:select wire:model="technician_id">
                                    <option value="">Select technician...</option>
                                    @foreach($technicians as $technician)
                                        <option value="{{ $technician->id }}">{{ $technician->full_name }}</option>
                                    @endforeach
                                </flux:select>
                                <flux:error name="technician_id" />
                            </flux:field>

                            <!-- Status -->
                            <flux:field>
                                <flux:label>Status</flux:label>
                                <flux:select wire:model="status">
                                    <option value="draft">Draft</option>
                                    <option value="in_progress">In Progress</option>
                                    <option value="completed">Completed</option>
                                    <option value="cancelled">Cancelled</option>
                                </flux:select>
                                <flux:error name="status" />
                            </flux:field>
                        </div>
                    </div>
                </div>

                <!-- Service Details -->
                <div>
                    <flux:heading size="lg" class="mb-4">Service Details</flux:heading>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- Left Column -->
                        <div class="space-y-4">
                            <!-- Customer Complaint -->
                            <flux:field>
                                <flux:label>Customer Complaint</flux:label>
                                <flux:textarea wire:model="customer_complaint" rows="3" />
                                <flux:error name="customer_complaint" />
                            </flux:field>

                            <!-- Diagnosis -->
                            <flux:field>
                                <flux:label>Diagnosis</flux:label>
                                <flux:textarea wire:model="diagnosis" rows="3" />
                                <flux:error name="diagnosis" />
                            </flux:field>
                        </div>

                        <!-- Right Column -->
                        <div class="space-y-4">
                            <!-- Customer Notes -->
                            <flux:field>
                                <flux:label>Customer Notes</flux:label>
                                <flux:textarea wire:model="customer_notes" rows="3" />
                                <flux:error name="customer_notes" />
                            </flux:field>

                            <!-- Discount -->
                            <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>
                </div>

                <!-- Service Items -->
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <flux:heading size="lg">Service Items</flux:heading>
                        <flux:button wire:click="addServiceItem" variant="ghost" size="sm">
                            <flux:icon.plus class="w-4 h-4" />
                            Add Service
                        </flux:button>
                    </div>

                    <div class="space-y-4">
                        @foreach($serviceItems as $index => $item)
                            <div class="border border-zinc-200 dark:border-zinc-600 rounded-lg p-4 bg-zinc-50 dark:bg-zinc-700">
                                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                                    <flux:field>
                                        <flux:label>Service Name</flux:label>
                                        <flux:input wire:model="serviceItems.{{ $index }}.service_name" />
                                    </flux:field>
                                    <flux:field>
                                        <flux:label>Labor Rate</flux:label>
                                        <flux:input wire:model.live="serviceItems.{{ $index }}.labor_rate" 
                                                   wire:change="updateServiceItemCost({{ $index }})"
                                                   type="number" step="0.01" />
                                    </flux:field>
                                    <flux:field>
                                        <flux:label>Hours</flux:label>
                                        <flux:input wire:model.live="serviceItems.{{ $index }}.estimated_hours" 
                                                   wire:change="updateServiceItemCost({{ $index }})"
                                                   type="number" step="0.25" />
                                    </flux:field>
                                    <flux:field>
                                        <flux:label>Total</flux:label>
                                        <flux:input value="${{ number_format($item['labor_cost'], 2) }}" readonly />
                                    </flux:field>
                                    <div class="flex items-end">
                                        <flux:button wire:click="removeServiceItem({{ $index }})" variant="danger" size="sm">
                                            <flux:icon.trash class="w-4 h-4" />
                                        </flux:button>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <flux:field>
                                        <flux:label>Description</flux:label>
                                        <flux:textarea wire:model="serviceItems.{{ $index }}.description" rows="2" />
                                    </flux:field>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Parts -->
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <flux:heading size="lg">Parts</flux:heading>
                        <flux:button wire:click="addPart" variant="ghost" size="sm">
                            <flux:icon.plus class="w-4 h-4" />
                            Add Part
                        </flux:button>
                    </div>

                    <div class="space-y-4">
                        @foreach($selectedParts as $index => $part)
                            <div class="border border-zinc-200 dark:border-zinc-600 rounded-lg p-4 bg-zinc-50 dark:bg-zinc-700">
                                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                                    <flux:field>
                                        <flux:label>Part</flux:label>
                                        <flux:select wire:model.live="selectedParts.{{ $index }}.part_id" 
                                                   wire:change="updatePartPrice({{ $index }})">
                                            <option value="">Select part...</option>
                                            @foreach($availableParts as $availablePart)
                                                <option value="{{ $availablePart->id }}">{{ $availablePart->name }} ({{ $availablePart->part_number }})</option>
                                            @endforeach
                                        </flux:select>
                                    </flux:field>
                                    <flux:field>
                                        <flux:label>Quantity</flux:label>
                                        <flux:input wire:model.live="selectedParts.{{ $index }}.quantity_used" 
                                                   wire:change="updatePartTotal({{ $index }})"
                                                   type="number" min="1" />
                                    </flux:field>
                                    <flux:field>
                                        <flux:label>Unit Price</flux:label>
                                        <flux:input wire:model.live="selectedParts.{{ $index }}.unit_price" 
                                                   wire:change="updatePartTotal({{ $index }})"
                                                   type="number" step="0.01" />
                                    </flux:field>
                                    <flux:field>
                                        <flux:label>Total</flux:label>
                                        <flux:input value="${{ number_format($part['total_price'], 2) }}" readonly />
                                    </flux:field>
                                    <div class="flex items-end">
                                        <flux:button wire:click="removePart({{ $index }})" variant="danger" size="sm">
                                            <flux:icon.trash class="w-4 h-4" />
                                        </flux:button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Order Summary -->
                <div class="bg-zinc-50 dark:bg-zinc-700 rounded-lg p-6 border border-zinc-200 dark:border-zinc-600">
                    <flux:heading size="lg" class="mb-4">Order Summary</flux:heading>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span>Labor Cost:</span>
                            <span>${{ number_format($this->getTotalLaborCost(), 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span>Parts Cost:</span>
                            <span>${{ number_format($this->getTotalPartsCost(), 2) }}</span>
                        </div>
                        @if($discount_amount > 0)
                        <div class="flex justify-between text-green-600">
                            <span>Discount:</span>
                            <span>-${{ number_format($discount_amount, 2) }}</span>
                        </div>
                        @endif
                        <div class="flex justify-between border-t border-zinc-200 dark:border-zinc-600 pt-2">
                            <span>Subtotal:</span>
                            <span>${{ number_format($this->getSubtotal(), 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span>Tax (8%):</span>
                            <span>${{ number_format($this->getTaxAmount(), 2) }}</span>
                        </div>
                        <div class="flex justify-between font-bold text-lg border-t border-zinc-200 dark:border-zinc-600 pt-2">
                            <span>Total:</span>
                            <span>${{ number_format($this->getGrandTotal(), 2) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex items-center justify-between pt-6 border-t border-zinc-200 dark:border-zinc-600">
                    <flux:button href="{{ route('service-orders.show', $serviceOrder) }}" variant="ghost">
                        <flux:icon name="arrow-left" class="size-4" />
                        Back to Service Order
                    </flux:button>
                    <flux:button type="submit" variant="primary">
                        Update Service Order
                    </flux:button>
                </div>
            </form>
        </div>
    </div>
</div>
