@php
    $item = Cache::get('site_status');
    $ecomm_setting = $item ? json_decode($item) : null;
@endphp
<style>
    .logo_main{
        max-width: 140px;
    }
    @media(max-width: 769px){
        .logo_main{
            max-width: 110px;
        }
    }
</style>
<header id="nav">
    <div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-dark headerContainer">
            <a class="navbar-brand" href="{{ route('home') }}">
                <img src="{{ $ecomm_setting && $ecomm_setting->logo ? url('posadmin/ecommerce_settings', $ecomm_setting->logo) : '' }}" alt="" class="logo_main" loading="lazy">
            </a>
            
            <div class="desktopHide" style="display:contents; color: #fff;">
                <div class="user-info mx-3">
                    <div class="name">
                        <div class="tagline smallHide">
                            @if(Auth::user())
                            <a href="{{ route('customer.dashboard') }}">{{ Auth::user()->name??'Dashboard' }}</a>
                            @else
                            <a href="{{ route('login') }}"><i class="material-icons-outlined">login</i></a>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="favorite badge-icon">
                </div>
                <a href="{{ route('checkouts.index') }}" class="cart-area mx-3">
                    <div class="cart badge-icon">
                        <span class="material-icons-outlined">
                            shopping_cart
                        </span>
                        <span class="badge-tag" id="totalCartCount" style="width: unset; top: 5px;position: absolute;">
                            {{ getTotalCart()}}
                        </span>
                    </div>
                </a>
            </div>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.85-3.85a1.007 1.007 0 0 0-.115-.098zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                  </svg>
            </button>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse form-menu navbar-collapse" id="navbarSupportedContent1">
                <div class="nav-menu category">
                    <ul class="navbar-nav nav_mobile">
                        <li class="nav-item"><a href="{{ route('home')}}" class="nav-link  text-white">Home</a></li>
                        <li class="nav-item">
                            <a href=" {{ route('shop')}} " class="nav-link text-white semi font-16">SHOP PRODUCT</a>
                        </li>
                        @foreach($cats as $cat)
                        @php
                            $count=$cat->sub_categories->count();
                        @endphp
                        <li class="nav-item {{$count?'has_menu':''}}">
                            <a href="{{ route('shop',['cat_id'=> $cat->id])}}" class="nav-link text-white">
                                {{ $cat->name}}
                            </a>
                            @if($count)
                            <ul class="inner_menu">
                                @foreach($cat->sub_categories as $sub)
                                <li class="nav-item">
                                    <a href="{{ route('shop',['cat_id'=> $cat->id, 'sub_cat_id'=> $sub->id])}}" class="nav-link text-white">{{$sub->name}}</a>
                                </li>
                                @endforeach
                            </ul>
                            @endif
                        </li>
                        @endforeach
                            
                        
                          
                    </ul>
                </div>
            </div>

            
            
            <div class="collapse form-menu navbar-collapse" id="navbarSupportedContent">
                <div class="nav-menu">
                    <form class="d-flex search" role="search" action="{{ route('shop')}}" method="GET">
                        <div class="input-group" style="width: 70%; margin: 0 auto; margin-bottom: -3px;">
                            <span class="input-group-text">
                                <span class="material-icons-outlined">
                                    search
                                </span>
                            </span>
                            <input class="form-control" type="search" name="search" placeholder="Search in {{ $ecomm_setting->title }}">
                            <button class="btn input-group-text search-btn">
                                Search
                            </button>
                        </div>
                    </form>
                    <div class="right mobileHide">
                        <div class="user-info">
                            <div class="name">
                                <div class="tagline">
                                    @if(Auth::user())
                                    <a href="{{ route('customer.dashboard') }}"><img src="{{ asset('assets/fontend/img/user.png') }}"style="width: 30px; margin-right: 3px;">{{ Auth::user()->name??'Dashboard' }}</a>
                                    @else
                                    <a href="{{ route('login') }}">Login</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="favorite badge-icon">
                        </div>
                        <a href="#" class="cart-area cart_sidebar_toggler">
                            <div class="cart badge-icon">
                                <span class="material-icons-outlined">
                                    shopping_cart
                                </span>
                                <span class="badge-tag" id="totalCartCount" style="width: unset;">
                                    {{ getTotalCart()}}
                                </span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>