@extends('layouts.app')

@section('title', __('messages.home') . ' - ' . config('app.name', 'AutoParts'))

@section('content')

{{-- Main Content Area with Sidebar Layout --}}
<div class="max-w-7xl mx-auto px-4 py-6">
    <div class="flex flex-col lg:flex-row gap-6">
        
        {{-- Left Sidebar with Categories Mega Menu --}}
        
        <div class="hidden lg:block lg:w-64 flex-shrink-0" x-data="{ menuOpen: true }">
            {{-- Categories Header (Click to Toggle) --}}
            
            <button @click="menuOpen = !menuOpen" 
                    class="w-full bg-red-600 hover:bg-red-700 px-4 py-3 rounded-lg flex items-center justify-between text-white shadow-md transition-colors">
                <div class="flex items-center gap-3">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                    <span class="font-semibold">{{ __('messages.all_categories') }}</span>
                </div>
                <svg x-show="!menuOpen" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
                <svg x-show="menuOpen" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
                </svg>
            </button>
            
            {{-- Scrollable Category List (Collapsible) --}}
            
            <div x-show="menuOpen"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 max-h-0"
                 x-transition:enter-end="opacity-100 max-h-[700px]"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 max-h-[700px]"
                 x-transition:leave-end="opacity-0 max-h-0"
                 class="overflow-hidden mt-2">
                
                <div class="bg-white rounded-lg shadow-lg border border-gray-100">
                    <div class="max-h-[600px] overflow-y-auto">
                        <ul class="divide-y divide-gray-50">
                            @foreach($categories as $category)
                            
                            <li class="group" x-data="{ subOpen: false }">
                                {{-- Category Link --}}
                                
                                <a href="{{ route('shop.category', $category->slug) }}" 
                                   @mouseenter="subOpen = true"
                                   class="flex items-center gap-3 px-4 py-3 hover:bg-red-50 transition-colors">
                                    <span class="w-8 h-8 flex items-center justify-center text-gray-500 group-hover:text-red-600 transition-colors flex-shrink-0">
                                        @if($category->image)
                                            <img src="{{ asset('storage/' . $category->image) }}" alt="" class="w-6 h-6 object-contain opacity-70 group-hover:opacity-100">
                                        @else
                                            <svg class="w-5 h-5" 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>
                                        @endif
                                    </span>
                                    
                                    <span class="flex-1 text-sm font-medium text-gray-700 group-hover:text-red-600 transition-colors truncate">{{ $category->name }}</span>
                                    
                                    @if($category->children->count() > 0)
                                        
                                        <svg class="w-4 h-4 text-gray-400 group-hover:text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                        </svg>
                                    @endif
                                </a>
                                
                                {{-- Side-by-Side Subcategories Mega Menu --}}
                                @if($category->children->count() > 0)
                                
                                <div x-show="subOpen"
                                     x-transition:enter="transition ease-out duration-200"
                                     x-transition:enter-start="opacity-0"
                                     x-transition:enter-end="opacity-100"
                                     x-transition:leave="transition ease-in duration-150"
                                     x-transition:leave-start="opacity-100"
                                     x-transition:leave-end="opacity-0"
                                     @mouseleave="subOpen = false"
                                     class="lg:absolute lg:left-full lg:top-0 lg:ml-2 lg:w-[600px] bg-white rounded-lg shadow-xl border border-gray-100 z-50"
                                     style="display: none;">
                                    
                                    <div class="p-5">
                                        <div class="flex items-center gap-2 mb-4 pb-3 border-b border-gray-100">
                                            <span class="font-bold text-lg text-gray-800">{{ $category->name }}</span>
                                            <span class="text-sm text-gray-500">({{ $category->children->count() }} items)</span>
                                        </div>
                                        
                                        <div class="grid grid-cols-2 gap-x-6 gap-y-2">
                                            @foreach($category->children as $child)
                                            
                                            <a href="{{ route('shop.category', $child->slug) }}" 
                                               class="flex items-center gap-2 px-2 py-2 rounded hover:bg-red-50 transition-colors group/item">
                                                <span class="w-2 h-2 rounded-full bg-gray-300 group-hover/item:bg-red-500"></span>
                                                <span class="text-sm text-gray-600 group-hover/item:text-red-600 truncate">{{ $child->name }}</span>
                                            </a>
                                            @endforeach
                                        </div>
                                        
                                        <a href="{{ route('shop.category', $category->slug) }}" class="block mt-4 pt-3 border-t border-gray-100 text-sm text-center text-red-600 hover:text-red-700 font-semibold">
                                            View All {{ $category->name }} →
                                        </a>
                                    </div>
                                </div>
                                @endif
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        {{-- Main Content Area --}}
        
        <div class="flex-1 min-w-0">
            
            {{-- Hero Banner Section --}}
            
            <div class="bg-gradient-to-r from-gray-900 to-red-900 rounded-2xl overflow-hidden shadow-xl mb-8 text-white">
                <div class="p-8 md:p-12 text-center">
                    
                    <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">{{ __('messages.hero_title') }}</h1>
                    
                    <p class="text-lg text-gray-300 mb-6 max-w-2xl mx-auto">{{ __('messages.hero_subtitle') }}</p>

                    {{-- Car Filter Search --}}
                    
                    <div class="bg-white text-gray-800 rounded-xl p-6 shadow-xl max-w-3xl mx-auto">
                        <h2 class="text-lg font-semibold mb-4 text-gray-700">{{ __('messages.shop_by_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="">{{ __('messages.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="">{{ __('messages.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="">{{ __('messages.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">
                                {{ __('messages.find_parts') }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
            {{-- Featured Products --}}
            @if($featuredProducts->count() > 0)
            
            <div class="mb-8">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold text-gray-800">{{ __('messages.featured_parts') }}</h2>
                    
                    <a href="{{ route('shop.index') }}" class="text-red-600 hover:text-red-800 text-sm font-medium">{{ __('messages.view_all') }} →</a>
                </div>
                
                <div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    @foreach($featuredProducts as $product)
                        @include('components.product-card', ['product' => $product])
                    @endforeach
                </div>
            </div>
            @endif
            
            {{-- New Arrivals --}}
            
            <div class="mb-8">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold text-gray-800">{{ __('messages.new_arrivals') }}</h2>
                    
                    <a href="{{ route('shop.index', ['sort' => 'latest']) }}" class="text-red-600 hover:text-red-800 text-sm font-medium">{{ __('messages.view_all') }} →</a>
                </div>
                
                <div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    @foreach($newArrivals as $product)
                        @include('components.product-card', ['product' => $product])
                    @endforeach
                </div>
            </div>
            
        </div>
    </div>
</div>

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

{{-- Top Vendors Section --}}
@if($topVendors->count() > 0)
<section class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-xl font-bold text-gray-800 mb-6">{{ __('messages.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 truncate">{{ $vendor->shop_name }}</p>
                    
                    <p class="text-xs text-gray-400">{{ $vendor->products_count }} {{ __('messages.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">{{ __('messages.why_choose_us') }}</h2>
        
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
                <div class="text-4xl mb-3">🔧</div>
                <h3 class="font-semibold mb-2">{{ __('messages.quality_parts') }}</h3>
                <p class="text-red-100 text-sm">{{ __('messages.quality_parts_desc') }}</p>
            </div>
            
            <div>
                <div class="text-4xl mb-3">🚚</div>
                <h3 class="font-semibold mb-2">{{ __('messages.fast_shipping') }}</h3>
                <p class="text-red-100 text-sm">{{ __('messages.fast_shipping_desc') }}</p>
            </div>
            
            <div>
                <div class="text-4xl mb-3">💰</div>
                <h3 class="font-semibold mb-2">{{ __('messages.best_prices') }}</h3>
                <p class="text-red-100 text-sm">{{ __('messages.best_prices_desc') }}</p>
            </div>
            
            <div>
                <div class="text-4xl mb-3">🛡️</div>
                <h3 class="font-semibold mb-2">{{ __('messages.secure_payment') }}</h3>
                <p class="text-red-100 text-sm">{{ __('messages.secure_payment_desc') }}</p>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
// Car Filter
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="">{{ __("messages.select_model") }}</option>';
    yearSelect.innerHTML = '<option value="">{{ __("messages.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="">{{ __("messages.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
