@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">Spare Parts</h1>
            <p class="text-gray-600 mt-2">Find genuine and quality spare parts for your vehicle</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 spare parts..." 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">Category</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 Categories</option>
                        <option value="engine">Engine Parts</option>
                        <option value="brakes">Brake System</option>
                        <option value="electrical">Electrical</option>
                        <option value="suspension">Suspension</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>
                        <option value="refurbished">Refurbished</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-5000">Under KSh 5,000</option>
                        <option value="5000-20000">KSh 5,000 - 20,000</option>
                        <option value="20000-50000">KSh 20,000 - 50,000</option>
                        <option value="50000">Over KSh 50,000</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Spare Parts Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @forelse($spareParts as $part)
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
                <div class="relative">
                    <img src="{{ $part->images ? asset('storage/' . $part->images[0]) : 'https://via.placeholder.com/300x200?text=No+Image' }}" 
                         alt="{{ $part->name }}" 
                         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($part->condition) }}
                        </span>
                    </div>
                    @if($part->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
                    @if($part->quantity < 10)
                    <div class="absolute bottom-2 left-2">
                        <span class="bg-orange-500 text-white px-2 py-1 rounded text-xs font-semibold">
                            Low Stock
                        </span>
                    </div>
                    @endif
                </div>
                
                <div class="p-4">
                    <h3 class="font-semibold text-lg mb-1 truncate">{{ $part->name }}</h3>
                    <p class="text-gray-600 text-sm mb-2">{{ $part->part_number }}</p>
                    
                    @if($part->compatible_vehicles)
                    <div class="flex items-center text-sm text-gray-500 mb-3">
                        <i class="fas fa-car mr-1"></i>
                        <span class="truncate">{{ $part->compatible_vehicles }}</span>
                    </div>
                    @endif

                    <div class="flex justify-between items-center mb-3">
                        <span class="text-red-600 font-bold text-lg">KSh {{ number_format($part->price) }}</span>
                        <span class="text-gray-500 text-sm">
                            Stock: {{ $part->quantity }}
                        </span>
                    </div>

                    <div class="flex justify-between items-center mb-3">
                        <span class="text-green-600 text-sm font-semibold">
                            <i class="fas fa-check-circle"></i> Verified
                        </span>
                        <span class="text-blue-600 text-sm font-semibold">
                            {{ $part->category->name ?? 'Parts' }}
                        </span>
                    </div>

                    <div class="flex space-x-2">
                        <a href="{{ route('spare-parts.show', $part->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-cogs text-gray-400 text-6xl mb-4"></i>
                <h3 class="text-xl font-semibold text-gray-600 mb-2">No spare parts found</h3>
                <p class="text-gray-500">Check back later for new inventory updates.</p>
            </div>
            @endforelse
        </div>

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