@extends('layouts.frontend')

@section('title', 'تصفح السيارات')

@section('content')
<div class="py-12 bg-[#0a0a0a]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row gap-8">
            <!-- Sidebar Filters -->
            <aside class="w-full md:w-64 space-y-8">
                <div class="bg-[#111] p-6 rounded-2xl border border-gray-800">
                    <h3 class="text-white font-bold mb-6 flex items-center">
                        <span class="ml-2">🔍</span> تصفية النتائج
                    </h3>
                    
                    <form action="{{ route('cars.index') }}" method="GET" class="space-y-6">
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">معرض السيارة</label>
                            <select name="branch_id" class="w-full bg-[#1a1a1a] border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:border-[#d4af37] outline-none">
                                <option value="">الكل</option>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm text-gray-400 mb-2">نوع الطلب</label>
                            <select name="type" class="w-full bg-[#1a1a1a] border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:border-[#d4af37] outline-none">
                                <option value="all">الكل</option>
                                <option value="sale" {{ request('type') == 'sale' ? 'selected' : '' }}>للبيع</option>
                                <option value="rent" {{ request('type') == 'rent' ? 'selected' : '' }}>للايجار</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">سنة الصنع</label>
                            <select name="year" class="w-full bg-[#1a1a1a] border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:border-[#d4af37] outline-none">
                                <option value="">الكل</option>
                                @for($y = date('Y')+1; $y >= 2015; $y--)
                                    <option value="{{ $y }}" {{ request('year') == $y ? 'selected' : '' }}>{{ $y }}</option>
                                @endfor
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm text-gray-400 mb-2">نوع الهيكل</label>
                            <select name="body_type" class="w-full bg-[#1a1a1a] border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:border-[#d4af37] outline-none">
                                <option value="">الكل</option>
                                <option value="sedan" {{ request('body_type') == 'sedan' ? 'selected' : '' }}>سيدان</option>
                                <option value="suv" {{ request('body_type') == 'suv' ? 'selected' : '' }}>SUV</option>
                                <option value="crossover" {{ request('body_type') == 'crossover' ? 'selected' : '' }}>كروس أوفر</option>
                                <option value="hatchback" {{ request('body_type') == 'hatchback' ? 'selected' : '' }}>هاتشباك</option>
                                <option value="coupe" {{ request('body_type') == 'coupe' ? 'selected' : '' }}>كوبيه</option>
                                <option value="pickup" {{ request('body_type') == 'pickup' ? 'selected' : '' }}>بيك أب</option>
                                <option value="van" {{ request('body_type') == 'van' ? 'selected' : '' }}>فان</option>
                                <option value="convertible" {{ request('body_type') == 'convertible' ? 'selected' : '' }}>مكشوفة</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm text-gray-400 mb-2">السعر (ر.س)</label>
                            <div class="flex gap-2">
                                <input type="number" name="min_price" value="{{ request('min_price') }}" class="w-1/2 bg-[#1a1a1a] border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="من">
                                <input type="number" name="max_price" value="{{ request('max_price') }}" class="w-1/2 bg-[#1a1a1a] border-gray-700 rounded-lg px-3 py-2 text-white text-sm" placeholder="إلى">
                            </div>
                        </div>

                        <button type="submit" class="btn-gold w-full py-3 rounded-lg text-sm">تطبيق الفلاتر</button>
                        <a href="{{ route('cars.index') }}" class="block text-center text-gray-500 text-xs hover:text-[#d4af37]">إعادة ضبط</a>
                    </form>
                </div>
            </aside>

            <!-- Grid -->
            <div class="flex-grow">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @forelse($cars as $car)
                    <div class="card-dark overflow-hidden flex flex-col">
                        <div class="relative h-56">
                            @php
                                $imagePath = $car->mainImage ? $car->mainImage->path : null;
                                $imageUrl = $imagePath ? (str_starts_with($imagePath, 'http') ? $imagePath : asset('storage/'.$imagePath)) : 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&q=80&w=800';
                            @endphp
                            <img src="{{ $imageUrl }}" class="w-full h-full object-cover" alt="{{ $car->title }}">
                            <div class="absolute top-3 right-3 flex flex-col gap-1">
                                <div class="bg-[#d4af37] text-black text-[10px] font-bold px-2 py-1 rounded">
                                    {{ $car->type == 'sale' ? 'للبيع' : ($car->type == 'rent' ? 'للايجار' : 'للبيع/للايجار') }}
                                </div>
                                <div class="bg-{{ $car->dynamic_status['color'] }}-600 text-white text-[10px] font-bold px-2 py-1 rounded">
                                    {{ $car->dynamic_status['label'] }}
                                </div>
                            </div>
                        </div>
                        <div class="p-5 flex-grow">
                            <h3 class="text-lg font-bold mb-2">{{ $car->title }}</h3>
                            <div class="flex gap-4 text-gray-500 text-xs mb-4">
                                <span>📅 {{ $car->year }}</span>
                                <span>🛣️ {{ number_format($car->mileage) }} كم</span>
                            </div>
                            <div class="flex items-center justify-between mt-auto">
                                <div class="text-[#d4af37] font-bold">
                                    @if($car->price)
                                        {{ number_format($car->price) }} ر.س
                                    @elseif($car->daily_price)
                                        {{ number_format($car->daily_price) }} ر.س / يوم
                                    @endif
                                </div>
                                <a href="{{ route('cars.show', $car->id) }}" class="btn-gold px-4 py-2 rounded text-[10px]">عرض التفاصيل</a>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-span-3 text-center text-gray-500 py-20 bg-[#111] rounded-2xl border border-gray-800">
                        لم يتم العثور على سيارات تطابق بحثك.
                    </div>
                    @endforelse
                </div>
                
                <div class="mt-12">
                    {{ $cars->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection