<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <flux:heading size="xl">{{ $vehicle->display_name }}</flux:heading>
            <flux:subheading>VIN: {{ $vehicle->vin_display }} • Owner: {{ $vehicle->customer->full_name }}</flux:subheading>
        </div>
        <div class="flex space-x-3">
            <flux:button href="/vehicles" variant="outline" size="sm">
                <flux:icon name="arrow-left" class="size-4" />
                Back to Vehicles
            </flux:button>
            <flux:button href="/vehicles/{{ $vehicle->id }}/edit" variant="outline" size="sm">
                <flux:icon name="pencil" class="size-4" />
                Edit Vehicle
            </flux:button>
            <flux:button href="/service-orders/create?vehicle={{ $vehicle->id }}" size="sm">
                <flux:icon name="plus" class="size-4" />
                New Service Order
            </flux:button>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Vehicle Information -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Basic Information -->
            <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
                <div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
                    <flux:heading size="lg">Vehicle Information</flux:heading>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <flux:label>Make & Model</flux:label>
                            <div class="mt-1 text-sm font-medium">{{ $vehicle->display_name }}</div>
                        </div>
                        <div>
                            <flux:label>Color</flux:label>
                            <div class="mt-1 flex items-center space-x-2">
                                <div 
                                    class="w-6 h-6 rounded border border-zinc-300 dark:border-zinc-600" 
                                    style="background-color: {{ $vehicle->color }}"
                                    title="{{ $vehicle->color }}"
                                ></div>
                                <span class="text-sm">{{ $vehicle->color }}</span>
                            </div>
                        </div>
                        <div>
                            <flux:label>VIN</flux:label>
                            <div class="mt-1 text-sm font-mono">{{ $vehicle->vin }}</div>
                        </div>
                        <div>
                            <flux:label>License Plate</flux:label>
                            <div class="mt-1 text-sm">{{ $vehicle->license_plate }}</div>
                        </div>
                        <div>
                            <flux:label>Current Mileage</flux:label>
                            <div class="mt-1 text-sm">{{ number_format($vehicle->mileage) }} miles</div>
                        </div>
                        <div>
                            <flux:label>Status</flux:label>
                            <div class="mt-1">
                                <flux:badge 
                                    :color="$vehicle->status === 'active' ? 'green' : ($vehicle->status === 'sold' ? 'blue' : 'gray')" 
                                    size="sm"
                                >
                                    {{ ucfirst($vehicle->status) }}
                                </flux:badge>
                            </div>
                        </div>
                        @if($vehicle->engine_type)
                        <div>
                            <flux:label>Engine Type</flux:label>
                            <div class="mt-1 text-sm">{{ $vehicle->engine_type }}</div>
                        </div>
                        @endif
                        @if($vehicle->transmission)
                        <div>
                            <flux:label>Transmission</flux:label>
                            <div class="mt-1 text-sm">{{ $vehicle->transmission }}</div>
                        </div>
                        @endif
                        @if($vehicle->notes)
                        <div class="md:col-span-2">
                            <flux:label>Notes</flux:label>
                            <div class="mt-1 text-sm">{{ $vehicle->notes }}</div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Owner Information -->
            <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
                <div class="border-b border-zinc-200 dark:border-zinc-700 p-4 flex items-center justify-between">
                    <flux:heading size="lg">Owner Information</flux:heading>
                    <flux:button href="/customers/{{ $vehicle->customer->id }}" variant="outline" size="sm">
                        View Customer
                    </flux:button>
                </div>
                <div class="p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <flux:label>Customer Name</flux:label>
                            <div class="mt-1 text-sm">{{ $vehicle->customer->full_name }}</div>
                        </div>
                        <div>
                            <flux:label>Email</flux:label>
                            <div class="mt-1 text-sm">
                                <a href="mailto:{{ $vehicle->customer->email }}" class="text-blue-600 hover:underline">
                                    {{ $vehicle->customer->email }}
                                </a>
                            </div>
                        </div>
                        <div>
                            <flux:label>Phone</flux:label>
                            <div class="mt-1 text-sm">
                                <a href="tel:{{ $vehicle->customer->phone }}" class="text-blue-600 hover:underline">
                                    {{ $vehicle->customer->phone }}
                                </a>
                            </div>
                        </div>
                        <div>
                            <flux:label>Customer Status</flux:label>
                            <div class="mt-1">
                                <flux:badge 
                                    :color="$vehicle->customer->status === 'active' ? 'green' : 'gray'" 
                                    size="sm"
                                >
                                    {{ ucfirst($vehicle->customer->status) }}
                                </flux:badge>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Service History -->
            <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
                <div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
                    <flux:heading size="lg">Service History</flux:heading>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                            <tr class="border-b border-zinc-200 dark:border-zinc-700">
                                <th class="text-left py-2 px-4">Order #</th>
                                <th class="text-left py-2 px-4">Date</th>
                                <th class="text-left py-2 px-4">Technician</th>
                                <th class="text-left py-2 px-4">Status</th>
                                <th class="text-left py-2 px-4">Total</th>
                                <th class="text-left py-2 px-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($vehicle->serviceOrders as $order)
                                <tr class="border-b border-zinc-200 dark:border-zinc-700">
                                    <td class="py-2 px-4 font-medium">{{ $order->order_number }}</td>
                                    <td class="py-2 px-4">{{ $order->created_at->format('M j, Y') }}</td>
                                    <td class="py-2 px-4">{{ $order->assignedTechnician?->full_name ?? 'Unassigned' }}</td>
                                    <td class="py-2 px-4">
                                        <flux:badge 
                                            size="sm" 
                                            :color="$order->status === 'completed' ? 'green' : ($order->status === 'in_progress' ? 'blue' : 'gray')"
                                        >
                                            {{ ucfirst(str_replace('_', ' ', $order->status)) }}
                                        </flux:badge>
                                    </td>
                                    <td class="py-2 px-4">${{ number_format($order->total_amount, 2) }}</td>
                                    <td class="py-2 px-4">
                                        <flux:button href="/service-orders/{{ $order->id }}" variant="outline" size="sm">View</flux:button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-8 text-zinc-500 dark:text-zinc-400">No service history yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Vehicle Image -->
            @if($vehicle->vehicle_image)
            <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
                <div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
                    <flux:heading size="lg">Vehicle Photo</flux:heading>
                </div>
                <div class="p-4">
                    <img 
                        src="{{ Storage::url($vehicle->vehicle_image) }}" 
                        alt="{{ $vehicle->display_name }}" 
                        class="w-full h-48 object-cover rounded-lg border border-zinc-200"
                    >
                </div>
            </div>
            @endif

            <!-- Quick Stats -->
            <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
                <div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
                    <flux:heading size="lg">Quick Stats</flux:heading>
                </div>
                <div class="p-4 space-y-3">
                    <div class="flex justify-between">
                        <span class="text-sm text-zinc-600 dark:text-zinc-400">Service Orders</span>
                        <span class="font-medium">{{ $vehicle->serviceOrders->count() }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-zinc-600 dark:text-zinc-400">Total Spent</span>
                        <span class="font-medium">${{ number_format($vehicle->serviceOrders->sum('total_amount'), 2) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-zinc-600 dark:text-zinc-400">Last Service</span>
                        <span class="font-medium">
                            @if($vehicle->last_service_date)
                                {{ $vehicle->last_service_date->format('M j, Y') }}
                            @else
                                Never
                            @endif
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-zinc-600 dark:text-zinc-400">Vehicle Age</span>
                        <span class="font-medium">{{ date('Y') - $vehicle->year }} years</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-zinc-600 dark:text-zinc-400">Added</span>
                        <span class="font-medium">{{ $vehicle->created_at->format('M j, Y') }}</span>
                    </div>
                </div>
            </div>

            <!-- Upcoming Appointments -->
            <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
                <div class="border-b border-zinc-200 dark:border-zinc-700 p-4 flex items-center justify-between">
                    <flux:heading size="lg">Upcoming Appointments</flux:heading>
                    <flux:button href="/appointments/create?vehicle={{ $vehicle->id }}" size="sm">
                        <flux:icon name="plus" class="size-4" />
                        Schedule
                    </flux:button>
                </div>
                <div class="p-4">
                    @forelse($vehicle->appointments->where('scheduled_datetime', '>=', now())->take(3) as $appointment)
                        <div class="mb-3 last:mb-0">
                            <div class="text-sm font-medium">{{ $appointment->scheduled_datetime->format('M j, Y g:i A') }}</div>
                            <div class="text-xs text-zinc-600 dark:text-zinc-400">{{ $appointment->service_requested }}</div>
                            <div class="text-xs">
                                <flux:badge size="sm" :color="$appointment->status === 'confirmed' ? 'green' : 'gray'">
                                    {{ ucfirst($appointment->status) }}
                                </flux:badge>
                            </div>
                        </div>
                    @empty
                        <div class="text-sm text-zinc-500 dark:text-zinc-400">No upcoming appointments</div>
                    @endforelse
                </div>
            </div>

            <!-- Recent Inspections -->
            <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
                <div class="border-b border-zinc-200 dark:border-zinc-700 p-4">
                    <flux:heading size="lg">Recent Inspections</flux:heading>
                </div>
                <div class="p-4">
                    @forelse($vehicle->inspections->take(3) as $inspection)
                        <div class="mb-3 last:mb-0">
                            <div class="text-sm font-medium">{{ $inspection->inspection_date->format('M j, Y') }}</div>
                            <div class="text-xs text-zinc-600 dark:text-zinc-400">{{ $inspection->inspection_type }}</div>
                            <div class="text-xs">
                                <flux:badge size="sm" :color="$inspection->status === 'passed' ? 'green' : 'red'">
                                    {{ ucfirst($inspection->status) }}
                                </flux:badge>
                            </div>
                        </div>
                    @empty
                        <div class="text-sm text-zinc-500 dark:text-zinc-400">No inspections recorded</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
