<!DOCTYPE html>
@php
    $currentLocale = Session::get('locale', config('app.locale', 'en'));
    $isRtl = in_array($currentLocale, ['ar']);
@endphp
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ $isRtl ? 'rtl' : 'ltr' }}" class="scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'AutoParts Marketplace')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        /* Alpine.js x-cloak - hides elements until Alpine is loaded */
        [x-cloak] { display: none !important; }
        
        /* Mobile/Desktop Header Visibility - Pure CSS fallback */
        @media (min-width: 1024px) {
            .mobile-header { display: none !important; }
            .desktop-header { display: block !important; }
        }
        @media (max-width: 1023px) {
            .mobile-header { display: block !important; }
            .desktop-header { display: none !important; }
        }
        
        /* RTL Support */
        [dir="rtl"] .space-x-1 > * + * {
            --tw-space-x-reverse: 1;
        }
        [dir="rtl"] .space-x-2 > * + * {
            --tw-space-x-reverse: 1;
        }
        [dir="rtl"] .space-x-3 > * + * {
            --tw-space-x-reverse: 1;
        }
        [dir="rtl"] .space-x-4 > * + * {
            --tw-space-x-reverse: 1;
        }
        [dir="rtl"] .space-x-6 > * + * {
            --tw-space-x-reverse: 1;
        }
        [dir="rtl"] .ml-1 {
            margin-left: 0;
            margin-right: 0.25rem;
        }
        [dir="rtl"] .ml-2 {
            margin-left: 0;
            margin-right: 0.5rem;
        }
        [dir="rtl"] .ml-3 {
            margin-left: 0;
            margin-right: 0.75rem;
        }
        [dir="rtl"] .ml-4 {
            margin-left: 0;
            margin-right: 1rem;
        }
        [dir="rtl"] .ml-6 {
            margin-left: 0;
            margin-right: 1.5rem;
        }
        [dir="rtl"] .ml-auto {
            margin-left: 0;
            margin-right: auto;
        }
        [dir="rtl"] .mr-1 {
            margin-right: 0;
            margin-left: 0.25rem;
        }
        [dir="rtl"] .mr-2 {
            margin-right: 0;
            margin-left: 0.5rem;
        }
        [dir="rtl"] .mr-3 {
            margin-right: 0;
            margin-left: 0.75rem;
        }
        [dir="rtl"] .mr-4 {
            margin-right: 0;
            margin-left: 1rem;
        }
        [dir="rtl"] .text-left {
            text-align: right;
        }
        [dir="rtl"] .text-right {
            text-align: left;
        }
        [dir="rtl"] .rounded-l-lg {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
        }
        [dir="rtl"] .rounded-r-lg {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
        }
        [dir="rtl"] .rounded-l-none {
            border-top-left-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
        }
        [dir="rtl"] .rounded-r-none {
            border-top-right-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
        }
        [dir="rtl"] .border-l {
            border-left-width: 0;
            border-right-width: 1px;
        }
        [dir="rtl"] .border-r {
            border-right-width: 0;
            border-left-width: 1px;
        }
    </style>
    @stack('styles')
</head>
<body class="bg-gray-50 text-gray-800 font-sans {{ $isRtl ? 'rtl' : '' }}">

    <div class="bg-gray-900 text-gray-300 text-sm py-2">
        <div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
            <span>Free shipping on orders over $99</span>
            <div class="flex items-center gap-4">
                {{-- Language Selector --}}
                @php
                    $languages = \App\Http\Controllers\LanguageController::getLanguages();
                    $currentLang = $languages[$currentLocale] ?? $languages['en'];
                @endphp
                
                <div class="relative" id="langDropdown" style="z-index: 9999;">
                    <button onclick="toggleLangDropdown()" class="flex items-center gap-2 hover:text-white py-1 px-2 rounded hover:bg-gray-800 transition">
                        {{-- Current Flag --}}
                        <span class="w-5 h-3.5 rounded overflow-hidden inline-block shadow-sm">
                            <img src="https://flagcdn.com/w40/{{ $currentLang['flag'] }}.png" 
                                 alt="{{ $currentLocale }}" 
                                 class="w-full h-full object-cover">
                        </span>
                        <span class="text-xs uppercase font-medium">{{ $currentLocale }}</span>
                        <svg id="langArrow" class="w-3 h-3 transition-transform" 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>
                    </button>
                    
                    <div id="langMenu" class="absolute right-0 top-full mt-1 w-48 bg-white rounded-lg shadow-2xl py-1 hidden border border-gray-200" style="z-index: 9999;">
                        @foreach($languages as $code => $lang)
                            <form method="POST" action="{{ route('language.switch') }}" class="block">
                                @csrf
                                <input type="hidden" name="locale" value="{{ $code }}">
                                <button type="submit" 
                                   class="w-full flex items-center gap-3 px-4 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition text-left {{ $currentLocale === $code ? 'bg-blue-50 text-blue-600 font-medium' : '' }}">
                                    <span class="w-5 h-3.5 rounded overflow-hidden inline-block shadow-sm">
                                        <img src="https://flagcdn.com/w40/{{ $lang['flag'] }}.png" 
                                             alt="{{ $code }}" 
                                             class="w-full h-full object-cover">
                                    </span>
                                    <span class="text-sm">{{ $lang['native'] }}</span>
                                    @if($currentLocale === $code)
                                        <svg class="w-4 h-4 ml-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                        </svg>
                                    @endif
                                </button>
                            </form>
                        @endforeach
                    </div>
                </div>
                
                @auth
                    <a href="{{ route('profile.index') }}" class="hover:text-white">My Account</a>
                    @if(auth()->user()->isVendor())
                        <a href="{{ route('vendor.dashboard') }}" class="hover:text-white">Vendor Dashboard</a>
                    @endif
                    @if(auth()->user()->isAdmin())
                        <a href="{{ route('admin.dashboard') }}" class="hover:text-white">Admin Panel</a>
                    @endif
                    <form method="POST" action="{{ route('logout') }}" class="inline">
                        @csrf
                        <button type="submit" class="hover:text-white">Logout</button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="hover:text-white">Login</a>
                    <a href="{{ route('register') }}" class="hover:text-white">Register</a>
                @endauth
            </div>
        </div>
    </div>

    <header class="bg-white shadow-md sticky top-0 z-50">
        {{-- Mobile Header --}}
        <div class="mobile-header lg:hidden" x-data="{}" x-show="window.innerWidth < 1024" x-cloak>
            <div class="max-w-7xl mx-auto px-4 py-3">
                <div class="flex items-center justify-between">
                    {{-- Hamburger Menu --}}
                    <button onclick="document.getElementById('mobile-menu').classList.toggle('hidden')" class="p-2 text-gray-700">
                        <svg class="w-6 h-6" 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>
                    </button>
                    
                    {{-- Logo --}}
                    <a href="{{ route('home') }}" class="text-xl font-bold text-red-600">AutoParts</a>
                    
                    {{-- Cart --}}
                    <a href="{{ route('cart.index') }}" class="relative text-gray-700">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        @php $cartCount = \App\Models\Cart::where('user_id', auth()->id() ?? 0)->orWhere('session_id', session()->getId())->count(); @endphp
                        @if($cartCount > 0)<span class="absolute -top-2 -right-2 bg-red-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">{{ $cartCount }}</span>@endif
                    </a>
                </div>
            </div>
            
            {{-- Mobile Menu Dropdown --}}
            <div id="mobile-menu" class="hidden bg-white border-t border-gray-100">
                <div class="px-4 py-2">
                    <form action="{{ route('shop.search') }}" method="GET" class="mb-4">
                        <div class="flex">
                            <input type="text" name="q" placeholder="Search parts..." class="w-full border border-gray-300 rounded-l-lg px-4 py-2 text-sm">
                            <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-r-lg">
                                <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                                </svg>
                            </button>
                        </div>
                    </form>
                    <nav class="space-y-1">
                        <a href="{{ route('home') }}" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">Home</a>
                        <a href="{{ route('shop.index') }}" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">All Parts</a>
                        <a href="{{ route('shop.car-filter') }}" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">Shop by Car</a>
                        <a href="{{ route('shop.index') }}?sort=latest" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">New Arrivals</a>
                        <a href="{{ route('shop.index') }}?featured=1" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">Featured</a>
                        @auth
                            <a href="{{ route('profile.index') }}" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">My Account</a>
                            <a href="{{ route('wishlist.index') }}" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">Wishlist</a>
                            <form method="POST" action="{{ route('logout') }}" class="block">
                                @csrf
                                <button type="submit" class="w-full text-left px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">Logout</button>
                            </form>
                        @else
                            <a href="{{ route('login') }}" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">Login</a>
                            <a href="{{ route('register') }}" class="block px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg">Register</a>
                        @endauth
                    </nav>
                </div>
            </div>
        </div>
        
        {{-- Desktop Header --}}
        <div class="desktop-header hidden lg:block" x-data="{}" x-show="window.innerWidth >= 1024" x-cloak>
            <div class="max-w-7xl mx-auto px-4 py-4">
                <div class="flex items-center justify-between gap-4">
                    <a href="{{ route('home') }}" class="text-2xl font-bold text-red-600">AutoParts</a>
                    <form action="{{ route('shop.search') }}" method="GET" class="flex-1 max-w-2xl">
                        <div class="flex">
                            <input type="text" name="q" value="{{ request('q') }}"
                                placeholder="Search by part name, number, or OEM..."
                                class="w-full border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
                            <button type="submit" class="bg-red-600 text-white px-6 py-2 rounded-r-lg hover:bg-red-700">Search</button>
                        </div>
                    </form>
                    <div class="flex items-center gap-4">
                        @auth
                        <a href="{{ route('wishlist.index') }}" class="text-gray-600 hover:text-red-600">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                        </a>
                        @endauth
                        <a href="{{ route('cart.index') }}" class="relative text-gray-600 hover:text-red-600">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            @php $cartCount = \App\Models\Cart::where('user_id', auth()->id() ?? 0)->orWhere('session_id', session()->getId())->count(); @endphp
                            @if($cartCount > 0)<span class="absolute -top-2 -right-2 bg-red-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">{{ $cartCount }}</span>@endif
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        {{-- Desktop Navigation --}}
        <nav class="hidden lg:block bg-red-600 text-white">
            <div class="max-w-7xl mx-auto px-4">
                <ul class="flex items-center gap-1 overflow-x-auto">
                    <li><a href="{{ route('home') }}" class="block px-4 py-3 hover:bg-red-700 whitespace-nowrap">Home</a></li>
                    <li><a href="{{ route('shop.index') }}" class="block px-4 py-3 hover:bg-red-700 whitespace-nowrap">All Parts</a></li>
                    <li><a href="{{ route('shop.car-filter') }}" class="block px-4 py-3 hover:bg-red-700 whitespace-nowrap">Shop by Car</a></li>
                    <li><a href="{{ route('shop.index') }}?sort=latest" class="block px-4 py-3 hover:bg-red-700 whitespace-nowrap">New Arrivals</a></li>
                    <li><a href="{{ route('shop.index') }}?featured=1" class="block px-4 py-3 hover:bg-red-700 whitespace-nowrap">Featured</a></li>
                    <li><a href="{{ route('vendor.register') }}" class="block px-4 py-3 hover:bg-red-700 whitespace-nowrap">Sell With Us</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <div class="max-w-7xl mx-auto px-4 mt-4">
        @if(session('success'))<div class="bg-green-100 border border-green-400 text-green-800 px-4 py-3 rounded mb-4">{{ session('success') }}</div>@endif
        @if(session('error'))<div class="bg-red-100 border border-red-400 text-red-800 px-4 py-3 rounded mb-4">{{ session('error') }}</div>@endif
        @if(session('warning'))<div class="bg-yellow-100 border border-yellow-400 text-yellow-800 px-4 py-3 rounded mb-4">{{ session('warning') }}</div>@endif
    </div>

    <main>@yield('content')</main>

    <footer class="bg-gray-900 text-gray-300 mt-16">
        <div class="max-w-7xl mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-xl font-bold mb-4">AutoParts</h3>
                    <p class="text-sm">Your trusted multivendor marketplace for quality auto parts from verified sellers.</p>
                </div>
                <div>
                    <h4 class="text-white font-semibold mb-4">Quick Links</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="{{ route('shop.index') }}" class="hover:text-white">Shop All Parts</a></li>
                        <li><a href="{{ route('shop.car-filter') }}" class="hover:text-white">Shop by Car</a></li>
                        <li><a href="{{ route('vendor.register') }}" class="hover:text-white">Become a Vendor</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-white font-semibold mb-4">Customer Service</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="{{ route('shop.orders.index') }}" class="hover:text-white">Track Order</a></li>
                        <li><a href="#" class="hover:text-white">Returns Policy</a></li>
                        <li><a href="#" class="hover:text-white">Contact Us</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-white font-semibold mb-4">My Account</h4>
                    <ul class="space-y-2 text-sm">
                        @auth
                            <li><a href="{{ route('profile.index') }}" class="hover:text-white">Profile</a></li>
                            <li><a href="{{ route('shop.orders.index') }}" class="hover:text-white">My Orders</a></li>
                            <li><a href="{{ route('wishlist.index') }}" class="hover:text-white">Wishlist</a></li>
                        @else
                            <li><a href="{{ route('login') }}" class="hover:text-white">Login</a></li>
                            <li><a href="{{ route('register') }}" class="hover:text-white">Register</a></li>
                        @endauth
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-sm">&copy; {{ date('Y') }} AutoParts Marketplace. All rights reserved.</p>
                
                {{-- Footer Language Selector --}}
                <div class="flex items-center gap-2">
                    <span class="text-sm text-gray-400">Language:</span>
                    <div class="flex gap-2">
                        @foreach($languages as $code => $lang)
                            <form method="POST" action="{{ route('language.switch') }}" class="inline">
                                @csrf
                                <input type="hidden" name="locale" value="{{ $code }}">
                                <button type="submit" 
                                   class="flex items-center gap-1.5 px-3 py-1.5 rounded text-sm transition {{ $currentLocale === $code ? 'bg-red-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600' }}">
                                    <span class="w-4 h-3 rounded overflow-hidden inline-block">
                                        <img src="https://flagcdn.com/w40/{{ $lang['flag'] }}.png" 
                                             alt="{{ $code }}" 
                                             class="w-full h-full object-cover">
                                    </span>
                                    <span class="uppercase">{{ $code }}</span>
                                </button>
                            </form>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </footer>

    {{-- Mobile Bottom Navigation --}}
    <nav class="lg:hidden" style="position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid #e5e7eb; z-index: 9999; width: 100%; display: block;"
         x-data="{ showNav: window.innerWidth < 1024 }"
         x-init="window.addEventListener('resize', () => showNav = window.innerWidth < 1024)"
         x-show="showNav"
         x-cloak>
        <div style="display: flex; align-items: center; justify-content: space-around; padding: 0.5rem 0; width: 100%;">
            <a href="{{ route('shop.index') }}" class="flex flex-col items-center gap-1 p-2 text-gray-600 hover:text-red-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                </svg>
                <span class="text-xs">Store</span>
            </a>
            <button onclick="document.getElementById('mobile-search').classList.remove('hidden')" class="flex flex-col items-center gap-1 p-2 text-gray-600 hover:text-red-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <span class="text-xs">Search</span>
            </button>
            <a href="{{ auth()->check() ? route('wishlist.index') : route('login') }}" class="flex flex-col items-center gap-1 p-2 text-gray-600 hover:text-red-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                </svg>
                <span class="text-xs">Wishlist</span>
            </a>
            <a href="{{ auth()->check() ? route('profile.index') : route('login') }}" class="flex flex-col items-center gap-1 p-2 text-gray-600 hover:text-red-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                <span class="text-xs">Account</span>
            </a>
            <button onclick="document.getElementById('mobile-categories').classList.toggle('hidden')" class="flex flex-col items-center gap-1 p-2 text-gray-600 hover:text-red-600">
                <svg class="w-6 h-6" 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="text-xs">Categories</span>
            </button>
        </div>
    </nav>

    {{-- Mobile Categories Modal --}}
    <div id="mobile-categories" class="hidden lg:hidden" style="position: fixed; inset: 0; z-index: 9999;">
        <div class="absolute inset-0 bg-black/50" onclick="document.getElementById('mobile-categories').classList.add('hidden')" style="position: fixed;"></div>
        <div style="position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 1rem 1rem 0 0; max-height: 80vh; display: flex; flex-direction: column;">
            <div style="position: sticky; top: 0; background: white; padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; justify-content: space-between; z-index: 10;">
                <h3 class="font-semibold text-lg">Categories</h3>
                <button onclick="document.getElementById('mobile-categories').classList.add('hidden')" class="p-2">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <div style="overflow-y: auto; padding: 1rem; -webkit-overflow-scrolling: touch;">
                <ul class="space-y-2">
                    @foreach(\App\Models\Category::active()->whereNull('parent_id')->orderBy('sort_order')->get() as $category)
                    <li>
                        <a href="{{ route('shop.category', $category->slug) }}" class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg">
                            @if($category->image)
                                <img src="{{ asset('storage/' . $category->image) }}" alt="" class="w-10 h-10 object-contain">
                            @else
                                <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-5 h-5 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
                            <span class="font-medium text-gray-700">{{ $category->name }}</span>
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

    {{-- Mobile Search Modal --}}
    <div id="mobile-search" class="hidden lg:hidden" style="position: fixed; inset: 0; z-index: 9999;">
        <div class="absolute inset-0 bg-black/50" onclick="document.getElementById('mobile-search').classList.add('hidden')" style="position: fixed;"></div>
        <div style="position: fixed; top: 20%; left: 1rem; right: 1rem; background: white; border-radius: 1rem; padding: 1.5rem; max-width: 500px; margin: 0 auto;">
            <div class="flex items-center justify-between mb-4">
                <h3 class="font-semibold text-lg">Search Products</h3>
                <button onclick="document.getElementById('mobile-search').classList.add('hidden')" class="p-2">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <form action="{{ route('shop.search') }}" method="GET">
                <div class="flex gap-2">
                    <input type="text" name="q" placeholder="Search parts..." class="flex-1 border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
                    <button type="submit" class="bg-red-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-red-700">
                        Search
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Add padding for mobile bottom nav --}}
    <div class="lg:hidden" style="height: 4rem;"></div>

    @stack('scripts')

    {{-- Loading Overlay --}}
    <div id="loading-overlay" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
        <div class="bg-white rounded-xl p-8 flex flex-col items-center shadow-2xl">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-red-600 mb-4"></div>
            <p class="text-gray-700 font-medium">Loading...</p>
        </div>
    </div>

    <script>
        // Show loading overlay on form submit
        document.addEventListener('DOMContentLoaded', function() {
            const forms = document.querySelectorAll('form');
            const loadingOverlay = document.getElementById('loading-overlay');
            
            forms.forEach(form => {
                form.addEventListener('submit', function(e) {
                    // Don't show loading for forms with data-no-loading="true"
                    if (form.getAttribute('data-no-loading') === 'true') {
                        return;
                    }
                    
                    // Check if form has onsubmit attribute with confirm
                    const onsubmitAttr = form.getAttribute('onsubmit');
                    if (onsubmitAttr && onsubmitAttr.includes('confirm')) {
                        // The confirm dialog will handle the submission
                        // Only show loading if confirm returns true (form actually submits)
                        // We can't easily detect this, so we'll use a different approach
                        // Store a flag to indicate we're waiting for confirmation
                        form.dataset.waitingForConfirm = 'true';
                        return;
                    }
                    
                    loadingOverlay.classList.remove('hidden');
                    loadingOverlay.classList.add('flex');
                });
            });

            // Show loading on link clicks that have data-loading="true"
            const loadingLinks = document.querySelectorAll('a[data-loading="true"]');
            loadingLinks.forEach(link => {
                link.addEventListener('click', function() {
                    loadingOverlay.classList.remove('hidden');
                    loadingOverlay.classList.add('flex');
                });
            });
        });
        
        // Helper function to show loading (can be called from inline handlers)
        function showLoading() {
            const loadingOverlay = document.getElementById('loading-overlay');
            loadingOverlay.classList.remove('hidden');
            loadingOverlay.classList.add('flex');
        }

        // Language dropdown toggle
        function toggleLangDropdown() {
            const menu = document.getElementById('langMenu');
            const arrow = document.getElementById('langArrow');
            
            if (menu.classList.contains('hidden')) {
                menu.classList.remove('hidden');
                arrow.classList.add('rotate-180');
            } else {
                menu.classList.add('hidden');
                arrow.classList.remove('rotate-180');
            }
        }

        // Close language dropdown when clicking outside
        document.addEventListener('click', function(e) {
            const dropdown = document.getElementById('langDropdown');
            const menu = document.getElementById('langMenu');
            const arrow = document.getElementById('langArrow');
            
            if (dropdown && !dropdown.contains(e.target)) {
                menu.classList.add('hidden');
                arrow.classList.remove('rotate-180');
            }
        });
        
        // Handle mobile/desktop header visibility without Alpine.js
        function updateHeaderVisibility() {
            const mobileHeader = document.querySelector('.mobile-header');
            const desktopHeader = document.querySelector('.desktop-header');
            
            if (mobileHeader && desktopHeader) {
                const isDesktop = window.innerWidth >= 1024;
                mobileHeader.style.display = isDesktop ? 'none' : 'block';
                desktopHeader.style.display = isDesktop ? 'block' : 'none';
            }
        }
        
        // Run on load and resize
        window.addEventListener('load', updateHeaderVisibility);
        window.addEventListener('resize', updateHeaderVisibility);
    </script>
</body>
</html>
