@extends('layouts.dasht')
@section('content')
<div class="max-w-7xl mx-auto">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">My Car Orders</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Track and manage your vehicle purchases.</p>
    </div>

    @if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-6">
        <p class="text-green-700 dark:text-green-400">{{ session('success') }}</p>
    </div>
    @endif

    @if($orders->count() > 0)
    <div class="space-y-4">
        @foreach($orders as $order)
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-shadow">
            <div class="flex flex-col md:flex-row md:items-center gap-4">
                {{-- Car Photo --}}
                <div class="flex-shrink-0">
                    @if($order->car && $order->car->photos->count() > 0)
                        <img src="{{ asset('dash/' . $order->car->primary_photo) }}" alt="{{ $order->car->name ?? '' }}"
                             class="w-24 h-16 object-cover rounded-lg">
                    @else
                        <div class="w-24 h-16 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                            <i data-lucide="car" class="w-8 h-8 text-gray-300 dark:text-gray-600"></i>
                        </div>
                    @endif
                </div>

                {{-- Order Info --}}
                <div class="flex-1 min-w-0">
                    <div class="flex flex-wrap items-center gap-2 mb-1">
                        <h3 class="font-bold text-gray-900 dark:text-white">{{ $order->car->name ?? 'Deleted Car' }}</h3>
                        @php
                            $statusColors = [
                                'pending' => 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400',
                                'approved' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
                                'shipped' => 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400',
                                'in-transit' => 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400',
                                'delivered' => 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
                                'completed' => 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
                                'cancelled' => 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400',
                                'refunded' => 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-400',
                            ];
                        @endphp
                        <span class="px-2 py-0.5 rounded-full text-xs font-medium {{ $statusColors[$order->status] ?? 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400' }}">
                            {{ ucfirst($order->status) }}
                        </span>
                    </div>
                    <div class="flex flex-wrap gap-4 text-sm text-gray-500 dark:text-gray-400">
                        <span>Order #{{ $order->order_number }}</span>
                        <span>{{ $order->created_at->format('M d, Y') }}</span>
                        <span class="font-semibold text-gray-900 dark:text-white">${{ number_format($order->total_price, 2) }}</span>
                    </div>
                </div>

                {{-- Actions --}}
                <div class="flex items-center gap-2">
                    <a href="{{ route('cars.order-details', $order) }}"
                       class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg text-sm font-medium transition-colors">
                        View Details
                    </a>
                    <a href="{{ route('cars.invoice', $order) }}" target="_blank"
                       class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <i data-lucide="download" class="w-4 h-4 inline mr-1"></i>Invoice
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="text-center py-16">
        <i data-lucide="shopping-bag" class="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4"></i>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">No orders yet</h3>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Browse our inventory and place your first order.</p>
        <a href="{{ route('cars.index') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium transition-colors">
            <i data-lucide="car" class="w-5 h-5"></i>Browse Cars
        </a>
    </div>
    @endif
</div>
@endsection
