@extends('layouts.app')

@section('title', 'AutoParts Marketplace - Quality Auto Parts')

@section('content')

{{-- Hero Section --}}
<section class="bg-gradient-to-r from-gray-900 to-red-900 text-white py-16">
    <div class="max-w-7xl mx-auto px-4 text-center">
        <h1 class="text-4xl md:text-5xl font-bold mb-4">Find the Right Part for Your Car</h1>
        <p class="text-xl text-gray-300 mb-8">Thousands of quality auto parts from verified vendors</p>

        {{-- Car Filter Search --}}
        <div class="bg-white text-gray-800 rounded-xl p-6 max-w-3xl mx-auto shadow-xl">
            <h2 class="text-lg font-semibold mb-4 text-gray-700">Shop by Your Vehicle</h2>
            <form action="{{ route('shop.car-filter') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-3">
                <select name="make_id" id="make-select" class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                    <option value="">Select Make</option>
                    @foreach($carMakes as $make)
                        <option value="{{ $make->id }}">{{ $make->name }}</option>
                    @endforeach
                </select>
                <select name="model_id" id="model-select" class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" disabled>
                    <option value="">Select Model</option>
                </select>
                <select name="year_id" id="year-select" class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" disabled>
                    <option value="">Select Year</option>
                </select>
                <button type="submit" class="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 font-semibold">
                    Find Parts
                </button>
            </form>
        </div>
    </div>
</section>

{{-- Categories --}}
<section class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Shop by Category</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
            @foreach($categories as $category)
            <a href="{{ route('shop.category', $category->slug) }}" class="group text-center">
                <div class="bg-gray-100 rounded-xl p-4 group-hover:bg-red-50 group-hover:shadow-md transition-all">
                    @if($category->image)
                        <img src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name }}" class="w-12 h-12 object-contain mx-auto mb-2">
                    @else
                        <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-2">
                            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                        </div>
                    @endif
                    <p class="text-xs font-medium text-gray-700 group-hover:text-red-600">{{ $category->name }}</p>
                    <p class="text-xs text-gray-400">{{ $category->products_count }} parts</p>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>

{{-- Featured Products --}}
@if($featuredProducts->count() > 0)
<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-gray-800">Featured Parts</h2>
            <a href="{{ route('shop.index') }}" class="text-red-600 hover:text-red-800 font-medium">View All →</a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            @foreach($featuredProducts as $product)
                @include('components.product-card', ['product' => $product])
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- New Arrivals --}}
<section class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-gray-800">New Arrivals</h2>
            <a href="{{ route('shop.index', ['sort' => 'latest']) }}" class="text-red-600 hover:text-red-800 font-medium">View All →</a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            @foreach($newArrivals as $product)
                @include('components.product-card', ['product' => $product])
            @endforeach
        </div>
    </div>
</section>

{{-- Top Brands --}}
@if($brands->count() > 0)
<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Top Brands</h2>
        <div class="flex flex-wrap gap-4 justify-center">
            @foreach($brands as $brand)
            <a href="{{ route('shop.brand', $brand->slug) }}" class="bg-white border border-gray-200 rounded-lg px-6 py-3 hover:border-red-400 hover:shadow-md transition-all text-gray-700 font-medium">
                {{ $brand->name }}
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Top Vendors --}}
@if($topVendors->count() > 0)
<section class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Top Vendors</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            @foreach($topVendors as $vendor)
            <a href="{{ route('shop.vendor', $vendor->slug) }}" class="text-center group">
                <div class="bg-gray-100 rounded-xl p-4 group-hover:bg-red-50 transition-all">
                    @if($vendor->logo)
                        <img src="{{ asset('storage/' . $vendor->logo) }}" alt="{{ $vendor->shop_name }}" class="w-12 h-12 rounded-full object-cover mx-auto mb-2">
                    @else
                        <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-2 text-white font-bold">
                            {{ strtoupper(substr($vendor->shop_name, 0, 1)) }}
                        </div>
                    @endif
                    <p class="text-sm font-medium text-gray-700">{{ $vendor->shop_name }}</p>
                    <p class="text-xs text-gray-400">{{ $vendor->products_count }} products</p>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Why Choose Us --}}
<section class="py-12 bg-red-600 text-white">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-center mb-10">Why Choose AutoParts?</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
            <div>
                <div class="text-4xl mb-3">🔧</div>
                <h3 class="font-semibold mb-2">Quality Parts</h3>
                <p class="text-red-100 text-sm">All vendors are verified for quality and authenticity</p>
            </div>
            <div>
                <div class="text-4xl mb-3">🚚</div>
                <h3 class="font-semibold mb-2">Fast Shipping</h3>
                <p class="text-red-100 text-sm">Free shipping on orders over $99</p>
            </div>
            <div>
                <div class="text-4xl mb-3">💰</div>
                <h3 class="font-semibold mb-2">Best Prices</h3>
                <p class="text-red-100 text-sm">Competitive pricing from multiple vendors</p>
            </div>
            <div>
                <div class="text-4xl mb-3">🛡️</div>
                <h3 class="font-semibold mb-2">Secure Payment</h3>
                <p class="text-red-100 text-sm">Safe and secure checkout with Stripe</p>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
document.getElementById('make-select').addEventListener('change', function() {
    const makeId = this.value;
    const modelSelect = document.getElementById('model-select');
    const yearSelect = document.getElementById('year-select');

    modelSelect.innerHTML = '<option value="">Select Model</option>';
    yearSelect.innerHTML = '<option value="">Select Year</option>';
    modelSelect.disabled = true;
    yearSelect.disabled = true;

    if (makeId) {
        fetch(`/api/car-models?make_id=${makeId}`)
            .then(r => r.json())
            .then(models => {
                models.forEach(m => {
                    modelSelect.innerHTML += `<option value="${m.id}">${m.name}</option>`;
                });
                modelSelect.disabled = false;
            });
    }
});

document.getElementById('model-select').addEventListener('change', function() {
    const modelId = this.value;
    const yearSelect = document.getElementById('year-select');

    yearSelect.innerHTML = '<option value="">Select Year</option>';
    yearSelect.disabled = true;

    if (modelId) {
        fetch(`/api/car-years?model_id=${modelId}`)
            .then(r => r.json())
            .then(years => {
                years.forEach(y => {
                    yearSelect.innerHTML += `<option value="${y.id}">${y.year}</option>`;
                });
                yearSelect.disabled = false;
            });
    }
});
</script>
@endpush