<header class="header-container py-3">
    <div class="container-fluid px-0">
    <div class="row col-xl-11 align-items-center">
        <div class=" col-lg-11 col-9 d-flex justify-content-center">
                <div class="top-header px-xl-2">
            <div class="container-fluid px-0">
                <div class="top-header-content position-relative">
                        <button class="mobile-menu-toggle" id="mobileMenuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                        <!-- Left Side -->
                    <nav class=" top-left position-relative">
                        <ul class="top-menu">
                            <li class="categories-menu has-megamenu" data-megamenu-target="#all-category">
                                <img src="/images/category.png" alt="">
                                <span>دسته بندی محصولات</span>
                                <img src="{{ asset('images/flesh-down.png') }}" alt="">
                            </li>
                            
                            @foreach($menus as $menu)
                                <li class="{{ count($menu->activeChildren) ? 'has-dropdown' : '' }}">
                                    <a href="{{ $menu->url }}">
                                        {{ $menu->title }}
                                    </a>
                                    <div class="simple-dropdown">
                                        <div class="dropdown-content">
                                            @foreach($menu->activeChildren as $child)
                                                <a href="{{ $child->url }}" class="dropdown-item">
                                                    <!-- <img src="fas fa-building"></i> -->
                                                    <span>{{ $child->title }}</span>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                        <div id="all-category" class="mega-menu">
                            <div class="pro-menu px-0">
                                <div class="pro-tabs">
                                    @foreach($categories as $category)
                                        <div class="p-tab" data-tab="code-{{ $category->id }}">
                                            <div>
                                                    @if($category->icon)
                                                    <img src="{{ asset($category->icon) }}">
                                                @endif
                                                <span>{{ $category->name }}</span>
                                            </div>
                                        </div>
                                    @endforeach 
                                </div>
                                <div class="pro-contents">
                                    @foreach($categories as $category)
                                        <div class="p-content" id="code-{{ $category->id }}">
                                            <a href="{{ route('categories.show', $category->slug) }}"><i class="fa-solid fa-chevron-left"></i><span>همه محصولات {{ $category->name }}</span></a>
                                            @if(count($category->activeChildren))
                                                <div class="sub-menus row">
                                                    @foreach($category->activeChildren as $child)
                                                        <div class="sub-menu col-md-6 mb-3">
                                                            <a href="{{ route('categories.show', $child->slug) }}">{{ $child->name }}</a>
                                                            @if(count($child->activeChildren))
                                                                <div class="sub-menu-items">
                                                                    @foreach($child->activeChildren as $c)
                                                                        <div class="s-b-item"><a href="{{ route('categories.show', $c->slug) }}">{{ $c->name }}</a></div>
                                                                    @endforeach
                                                                </div>
                                                            @endif
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                @if($category->short_description)
                                                    <p>{{ $category->short_description }}</p>
                                                @endif
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </nav>
                    <div class="top-right">
                        <div class="user-login" id="userDropdown">
                            @guest
                                <span>ورود /</span>
                                <span class="text-white">ثبت نام</span>
                            @else
                                <span>{{ auth()->user()->name ? auth()->user()->name :  'کاربر' }} عزیز</span>
                            @endguest
                            <!--<img src="/image/user.png" alt="">-->
                            <i class="fas fa-user user-icon"></i>
                            <span>|</span>
                                <div class="user-menu">
                                @auth
                                    @can('dashboard access')
                                        <div class="user-header">
                                            <div class="user-avatar">
                                                <i class="fa fa-user"></i>
                                            </div>
                                            <div class="user-info">
                                                <div class="user-name">
                                                    <a href="{{ route('admin.index') }}">
                                                        پنل مدیریت  
                                                    </a>     
                                                </div>
                                                <div class="user-subtitle">{{ auth()->user()->name }}</div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="user-header">
                                            <div class="user-avatar">
                                                <i class="fa fa-user"></i>
                                            </div>
                                            <div class="user-info">
                                                <div class="user-name">
                                                    <a href="{{ route('account.index') }}">
                                                        حساب کاربری 
                                                    </a> 
                                                </div>
                                                <div class="user-subtitle">{{ auth()->user()->name }}</div>
                                            </div>
                                        </div>
                                    @endcan
                                @endauth
                                @auth
                                    <a href="{{ route('account.user.edit') }}" class="menu-item">
                                        <i class="fa fa-user-pen"></i>
                                        <span>ویرایش مشخصات فردی</span>
                                    </a>
                                    <!-- <div class="wallet-item">
                                        <div class="wallet-info">
                                            <i class="fa fa-wallet wallet-icon"></i>
                                            <span>کیف پول</span>
                                        </div>
                                        <span class="wallet-amount">۰ تومان</span>
                                    </div> -->
                                    <a href="{{ route('account.favorites.index') }}" class="menu-item">
                                        <i class="fa fa-heart"></i>
                                        <span>لیست علاقه‌مندی</span>
                                    </a>
                                    <a href="{{ route('account.orders.index') }}" class="menu-item">
                                        <i class="fa fa-box"></i>
                                        <span>سفارش‌های من</span>
                                    </a>
                                    <a href="{{ route('logout') }}" class="menu-item logout"  onclick="event.preventDefault();document.getElementById('logout-form').submit();">
                                        <i class="fa fa-right-from-bracket"></i>
                                        <span>خروج از حساب کاربری</span>
                                    </a>
                                @else
                                    <a href="{{ route('register') }}" class="menu-item">
                                        <i class="fa fa-user"></i>
                                        <span>ثبت نام</span>
                                    </a>
                                    <a href="{{ route('login') }}" class="menu-item">
                                        <i class="fa fa-user-pen"></i>
                                        <span>ورود</span>
                                    </a>
                                @endauth
                            </div>
                        </div>
                        <livewire:frontend.header.desktop-shopping-cart/>
                        <div class="search-top">
                           <form action="{{ route('search.index') }}" method="get">
                                <i class="fa-solid fa-magnifying-glass"></i>
                                <input type="text" placeholder="جستجو" name="q">
                           </form>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
        @if($logo && count($logo->activeItems))
            <div class="  col-lg-1 col-3 d-flex justify-content-lg-center justify-content-end header-logo">
                <a href="{{ route('index') }}">
                    <img src="{{ asset($logo->activeItems[0]->image) }}" alt="{{$logo->activeItems[0]->title}}">
                </a>
            </div>
        @endif
    </div>
        <div class="mobile-search-bar" id="mobileSearchBar">
            <form action="{{ route('search.index') }}" method="get">
                <input type="text" placeholder="جستجو در محصولات..." id="mobileSearchInput" name="q">
                <button type="button" onclick="performMobileSearch()" type="search">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </div>
    <!-- Mobile Side Menu Overlay -->
    <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>
    <!-- Mobile Side Menu -->
    <div class="mobile-side-menu" id="mobileSideMenu">
        <!-- Menu Header -->
        <div class="mobile-menu-header">
            @if($logo && count($logo->activeItems))
                <div class="mobile-menu-logo">
                    <a href="{{ route('index') }}">
                        <img src="{{ asset($logo->activeItems[0]->image) }}" alt="{{$logo->activeItems[0]->title}}">
                    </a>    
                </div>
            @endif
            <button class="mobile-menu-close" id="mobileMenuClose">
                <i class="fas fa-times"></i>
            </button>
        </div>
       
        <!-- Menu Content -->
        <div class="mobile-menu-content">
            <div class="mobile-menu-item has-submenu">
                <button type="button">
                    <span><i class="fas fa-th-large" style="margin-left: 10px;"></i>دسته بندی محصولات</span>
                </button>
                <div class="mobile-submenu">
                    @foreach($categories as $category)
                        <div class="mobile-category-wrapper">
                            <button class="mobile-submenu-category" type="button">
                                <span>
                                    @if($category->icon)
                                        <img src="{{ asset($category->icon) }}">
                                    @endif
                                    {{ $category->name }}
                                </span>
                            </button>
                            <div class="mobile-category-items">
                                <div class="mobile-submenu-item">
                                    <a href="{{ route('categories.show', $category->slug) }}">همه محصولات {{ $category->name }}</a>
                                </div>
                                @foreach($category->activeChildren as $child)
                                    <div class="mobile-submenu-item"><a href="{{ route('categories.show', $child->slug) }}">{{ $child->name }}</a></div>
                                @endforeach
                    
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            @foreach($menus as $menu)
                <div class="mobile-menu-item">
                    <a href="{{ $menu->url }}">{{ $menu->title }}</a>
                </div>
            @endforeach
        </div>

        <!-- Menu Actions -->
        <div class="mobile-menu-actions">
            @auth
                <a href="{{ route('account.index') }}" class="mobile-login-btn">
                    <i class="fas fa-user"></i>
                    <span>پروفایل من</span>
                </a>
            @else
                <a href="{{ route('login') }}" class="mobile-login-btn">
                    <i class="fas fa-user"></i>
                    <span>ورود / ثبت نام</span>
                </a>
            @endauth
            <div class="mobile-search">
                <form action="{{ route('search.index') }}" method="get">
                    <input type="text" placeholder="جستجو در محصولات..." name="q">
                    <button class="mobile-search-btn" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</header>