<x-public-layout>
    <div class="min-h-screen bg-gray-50 pb-20 pt-16 md:pt-20">
        <!-- Search Header -->
        <div class="bg-white border-b sticky top-16 z-30 shadow-sm backdrop-blur-md bg-white/90">
            <div class="max-w-7xl mx-auto px-4 py-4">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">أسطول السيارات</h1>
                        <p class="text-sm text-gray-500">اختر من بين تشكيلتنا المميزة من سيارات تاتا</p>
                    </div>

                    <form action="{{ route('vehicles.index') }}" method="GET" class="flex flex-wrap items-center gap-2">
                        <!-- Category Filter -->
                        <select name="type" onchange="this.form.submit()" class="w-[130px] h-9 text-xs font-medium bg-gray-50 border-gray-200 rounded-md focus:ring-blue-500 focus:border-blue-500">
                            <option value="all">الفئة: الكل</option>
                            <option value="TRUCK" {{ request('type') == 'TRUCK' ? 'selected' : '' }}>شاحنات</option>
                            <option value="PICKUP" {{ request('type') == 'PICKUP' ? 'selected' : '' }}>بيك أب</option>
                            <option value="BUS" {{ request('type') == 'BUS' ? 'selected' : '' }}>حافلات</option>
                            <option value="VAN" {{ request('type') == 'VAN' ? 'selected' : '' }}>فان</option>
                            <option value="SEDAN" {{ request('type') == 'SEDAN' ? 'selected' : '' }}>سيدان</option>
                        </select>

                        <!-- Fuel Type Filter -->
                        <select name="fuel_type" onchange="this.form.submit()" class="w-[130px] h-9 text-xs font-medium bg-gray-50 border-gray-200 rounded-md focus:ring-blue-500 focus:border-blue-500">
                            <option value="all">الوقود: الكل</option>
                            <option value="DIESEL" {{ request('fuel_type') == 'DIESEL' ? 'selected' : '' }}>ديزل</option>
                            <option value="PETROL" {{ request('fuel_type') == 'PETROL' ? 'selected' : '' }}>بنزين</option>
                            <option value="HYBRID" {{ request('fuel_type') == 'HYBRID' ? 'selected' : '' }}>هجين</option>
                            <option value="ELECTRIC" {{ request('fuel_type') == 'ELECTRIC' ? 'selected' : '' }}>كهرباء</option>
                        </select>

                        <!-- Sorting -->
                        <select name="sort_by" onchange="this.form.submit()" class="w-[130px] h-9 text-xs font-medium bg-gray-50 border-gray-200 rounded-md focus:ring-blue-500 focus:border-blue-500">
                            <option value="featured" {{ request('sort_by') == 'featured' ? 'selected' : '' }}>ترتيب: المميزة</option>
                            <option value="price-asc" {{ request('sort_by') == 'price-asc' ? 'selected' : '' }}>الأقل سعراً</option>
                            <option value="price-desc" {{ request('sort_by') == 'price-desc' ? 'selected' : '' }}>الأعلى سعراً</option>
                            <option value="year-desc" {{ request('sort_by') == 'year-desc' ? 'selected' : '' }}>الأحدث موديلاً</option>
                        </select>
                        
                        <!-- Clear Filters -->
                        @if(request()->anyFilled(['type', 'fuel_type', 'transmission', 'sort_by', 'make', 'model']) && (request('type') != 'all' || request('fuel_type') != 'all'))
                            <a href="{{ route('vehicles.index') }}" class="p-2 text-gray-500 hover:text-gray-700 bg-gray-100 rounded-full transition-colors" title="مسح الفلاتر">
                                <x-icon name="RotateCcw" class="h-4 w-4" /> 
                            </a>
                        @endif
                    </form>
                </div>
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="flex items-center justify-between mb-6">
                <span class="text-sm font-medium text-gray-500">
                    {{ $vehicles->total() }} مركبة متوفرة
                </span>
            </div>

            @if($vehicles->count() == 0)
                <div class="flex flex-col items-center justify-center py-20 text-center">
                    <div class="bg-gray-100 p-6 rounded-full mb-4">
                        <svg class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900">لا توجد نتائج</h3>
                    <p class="text-gray-500 mt-2 max-w-md">لم نتمكن من العثور على مركبات تطابق معايير البحث الحالية.</p>
                    <a href="{{ route('vehicles.index') }}" class="mt-6 px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium hover:bg-gray-50">مسح جميع الفلاتر</a>
                </div>
            @else
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    @foreach($vehicles as $vehicle)
                        <a href="{{ route('vehicles.show', $vehicle->id) }}" class="group block">
                            <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 h-full flex flex-col">
                                <div class="aspect-[4/3] relative bg-gray-200 overflow-hidden">
                                    @if($vehicle->images->count() > 0)
                                        <img src="{{ $vehicle->images->first()->image_url }}" alt="{{ $vehicle->make }} {{ $vehicle->model }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                                    @else
                                        <div class="flex items-center justify-center h-full text-gray-400">
                                            <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                        </div>
                                    @endif
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity"></div>
                                    <div class="absolute top-3 right-3">
                                        <span class="backdrop-blur-md shadow-sm border-0 font-bold px-2 py-1 rounded text-xs {{ $vehicle->status === 'AVAILABLE' ? 'bg-green-500/90 text-white' : 'bg-gray-900/90 text-white' }}">
                                            {{ $vehicle->status === 'AVAILABLE' ? 'متاحة' : ($vehicle->status === 'SOLD' ? 'مباعة' : 'محجوزة') }}
                                        </span>
                                    </div>
                                    <div class="absolute bottom-3 right-3 left-3 text-white">
                                        <h3 class="text-lg font-bold leading-tight drop-shadow-md">{{ $vehicle->make }} {{ $vehicle->model }}</h3>
                                        <p class="text-sm opacity-90 drop-shadow-sm">{{ $vehicle->year }} • {{ $vehicle->category }}</p>
                                    </div>
                                </div>
                                
                                <div class="p-4 pt-5 flex-grow">
                                    <div class="flex items-center gap-4 text-sm text-gray-500 mb-4">
                                        <div class="flex items-center gap-1.5 bg-gray-50 px-2.5 py-1 rounded-md">
                                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                                            <span>{{ $vehicle->fuel_type ?? 'غير محدد' }}</span>
                                        </div>
                                        <div class="flex items-center gap-1.5 bg-gray-50 px-2.5 py-1 rounded-md">
                                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
                                            <span>{{ $vehicle->transmission ?? 'غير محدد' }}</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="p-4 pt-0 border-t border-gray-50 mt-auto">
                                    <div class="flex items-center justify-between pt-2">
                                        <div class="text-blue-900 font-bold text-xl tracking-tight">
                                            {{ number_format($vehicle->price) }} ج.م
                                        </div>
                                        <span class="rounded-full px-5 py-1 text-sm bg-blue-600 hover:bg-blue-700 text-white transition-colors">
                                            التفاصيل
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <div class="mt-8">
                    {{ $vehicles->links() }}
                </div>
            @endif
        </div>
    </div>
</x-public-layout>
