@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Available Vehicles</h1>
            <p class="text-gray-600 mt-2">Find your perfect vehicle from our verified inventory</p>
        </div>

        <!-- Filters and Search -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                    <input type="text" placeholder="Search vehicles..." class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Make</label>
                    <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
                        <option value="">All Makes</option>
                        <option value="Toyota">Toyota</option>
                        <option value="Nissan">Nissan</option>
                        <option value="Subaru">Subaru</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Condition</label>
                    <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
                        <option value="">All Conditions</option>
                        <option value="new">New</option>
                        <option value="used">Used</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Price Range</label>
                    <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
                        <option value="">Any Price</option>
                        <option value="0-500000">Under KSh 500,000</option>
                        <option value="500000-1000000">KSh 500,000 - 1M</option>
                        <option value="1000000-2000000">KSh 1M - 2M</option>
                        <option value="2000000">Over KSh 2M</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Vehicles Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @forelse($vehicles as $vehicle)
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
                <div class="relative">
                    <img src="{{ $vehicle->images ? asset('storage/' . $vehicle->images[0]) : 'https://via.placeholder.com/300x200?text=No+Image' }}" 
                         alt="{{ $vehicle->title }}" 
                         class="w-full h-48 object-cover">
                    <div class="absolute top-2 right-2">
                        <span class="bg-red-600 text-white px-2 py-1 rounded text-xs font-semibold">
                            {{ ucfirst($vehicle->condition) }}
                        </span>
                    </div>
                    @if($vehicle->is_featured)
                    <div class="absolute top-2 left-2">
                        <span class="bg-yellow-500 text-white px-2 py-1 rounded text-xs font-semibold">
                            Featured
                        </span>
                    </div>
                    @endif
                </div>
                
                <div class="p-4">
                    <h3 class="font-semibold text-lg mb-1 truncate">{{ $vehicle->title }}</h3>
                    <p class="text-gray-600 text-sm mb-2">{{ $vehicle->make }} • {{ $vehicle->model }} • {{ $vehicle->year }}</p>
                    
                    <div class="flex items-center text-sm text-gray-500 mb-3">
                        <i class="fas fa-road mr-1"></i>
                        <span>{{ $vehicle->mileage ?? 'N/A' }} km</span>
                        <span class="mx-2">•</span>
                        <i class="fas fa-gas-pump mr-1"></i>
                        <span>{{ $vehicle->fuel_type ?? 'N/A' }}</span>
                    </div>

                    <div class="flex justify-between items-center mb-3">
                        <span class="text-red-600 font-bold text-lg">KSh {{ number_format($vehicle->price) }}</span>
                        <span class="text-green-600 text-sm font-semibold">
                            <i class="fas fa-check-circle"></i> Verified
                        </span>
                    </div>

                    <div class="flex space-x-2">
                        <a href="{{ route('vehicles.show', $vehicle->id) }}" class="flex-1 bg-red-600 text-white text-center py-2 rounded-lg hover:bg-red-700 transition duration-300">
                            View Details
                        </a>
                        <button class="bg-gray-200 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-300 transition duration-300">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-span-full text-center py-12">
                <i class="fas fa-car text-gray-400 text-6xl mb-4"></i>
                <h3 class="text-xl font-semibold text-gray-600 mb-2">No vehicles found</h3>
                <p class="text-gray-500">Check back later for new inventory updates.</p>
            </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if($vehicles->hasPages())
        <div class="mt-8">
            {{ $vehicles->links() }}
        </div>
        @endif
    </div>
</div>
@endsection