@php
use App\Models\Information;
use App\Models\Category;
  $information = Information::first();
  $categories = Category::where('parent_id', null)->get();
@endphp

<style>
    .axil-product>.thumbnail .label-block .product-badget {
        padding: 6px 18px 5px;
    }
    
    @media only screen and (max-width: 991px) {
        .header-brand a img {
            max-height: 35px;
            width: 142px !important;
        }
        .brand_img {
            width: 60% !important;
        }
        .header_action {
            width: 21% !important;
        }
        .header-brand {
            text-align: center;
        }
    }
    
</style>

<header class="desktop header axil-header header-style-5">
        <!-- Start Mainmenu Area  -->
        <div id="axil-sticky-placeholder"></div>
        <div class="axil-mainmenu" style="background: #00276C;max-width: 1600px;margin: 0 auto;">
            <div class="container-fluid" style="padding-top: 10px;">
                <div class="row header-navbar">
                    <div class="col-3 d-flex">
                        <!--<div>-->
                        <!--    <a href="{{ route('front.home')}}">-->
                        <!--        <img src="{{ asset('frontend/images/home_icon.png')}}" alt="Home" width="40" style="filter: brightness(0) invert(1);">-->
                        <!--    </a>-->
                        <!--</div>-->
                        <div class="header-brand" style="margin-left: 4%;">
                            <a href="{{ route('front.home')}}" class="logo logo-dark">
                                <img src="{{ asset('uploads/img/'.$information->site_logo)}}" alt="Site Logo">
                            </a>
                            <a href="{{ route('front.home')}}" class="logo logo-light">
                                <img src="{{ asset('uploads/img/'.$information->site_logo)}}" alt="Site Logo">
                            </a>
                        </div>
                    </div>
                    
                    <div class="col-5">
                        <form action="{{ route('front.products.index')}}">
                            <div class="header-top-dropdown dropdown-box-style">
                                
                                <div class="axil-search">
                                    <button type="submit" class="icon wooc-btn-search">
                                        <i class="far fa-search"></i>
                                    </button>
                                    <input type="search" class="placeholder product-search-input" name="q" id="search2" value="{{ request('q')??''}}" maxlength="128" placeholder="What are you looking for...." autocomplete="off">
                                </div>
                                
                            </div>
                        </form>
                    </div> 
                    
                    <div class="more-dp text-light col-3" style="text-align: center;">
                            <div class="text-light more-btn">সমস্ত ক্যাটাগরি <i class="fas fa-angle-down"></i></div>
                            <ul class="mainmenu">
                                @foreach($categories as $cat)
                                    <li class="menu-item-has-children">
                                    <a href="{{ route('front.subCategories1',[$cat->url])}}">
                                        
                                        {{ $cat->name }} @if($cat->subcats->count()) <i style="margin-left: 20px;" class="fas fa-angle-down"></i> @else @endif
                                        
                                        </a>
                                    @if($cat->subcats->count())
                                        <ul class="axil-submenu">
                                           @foreach($cat->subcats as $sub)
                                          	<li><a href="{{ route('front.subsubCategories',[$sub->url])}}">{{ $sub->name}}</a></li>
                                            @endforeach
                                        </ul>
                                    @else
                                    @endif
                                </li>
                                @endforeach
                            </ul>
                            
                    </div>
                    <div class="col-1">
                        <div class="header-action">
                            <ul class="action-list">
                                    
                                
                                <li class="shopping-cart">
                                    <a href="{{ route('front.carts.index')}}?segment={{request()->segment(1)}}" class="cart-dropdown-btn">
                                        <span class="cart-count" style="background: #00276C !important;">{{ getTotalCart()}}</span>
                                        Cart <i class="flaticon-shopping-cart"></i> 
                                    </a>
                                    </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="desktopnav container-fluid" style="border-bottom: 1px solid #f2f2f2;background-color:#ededef">
                      
            </div>
            
            
        </div>
        <!-- End Mainmenu Area -->
    </header>
    <!-- End Header -->


    
    <!-- Start Header -->
    <header class="mobile header axil-header header-style-5">
        <!-- Start Mainmenu Area  -->
        <div id="axil-sticky-placeholder"></div>
        <div class="axil-mainmenu">
            <div class="container">
                <div class="row">
                    <div class="col-2">
                        <ul class="mainmenu">
                            <li class="axil-mobile-toggle">
                                <button class="menu-btn mobile-nav-toggler">
                                    <i class="flaticon-menu-2"></i>
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="col-4 brand_img">
                        <div class="header-brand">
                            <a href="{{ route('front.home')}}" class="logo logo-dark">
                                <img src="{{ asset('uploads/img/'.$information->site_logo)}}" alt="Site Logo">
                            </a>                            <a href="{{ route('front.home')}}" class="logo logo-light">
                                <img src="{{ asset('uploads/img/'.$information->site_logo)}}" alt="Site Logo">
                            </a>
                        </div>
                        
                    </div>
                    <div class="col-6 header_action">
                        <div class="header-action">
                            <ul class="action-list">
                                <li class="shopping-cart">
                                    <a href="{{ route('front.carts.index')}}?segment={{request()->segment(1)}}" class="cart-dropdown-btn">
                                        <span class="cart-count" style="background: #00276C !important;">{{ getTotalCart()}}</span>
                                        <i class="flaticon-shopping-cart"></i>
                                    </a>
                                </li>
                                <!--<li class="my-account">-->
                                <!--    <a href=" {{ route('login')}} ">-->
                                <!--        Login-->
                                <!--    </a>-->
                                    
                                <!--</li>-->
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="header-navbar">
                    
                    <div class="header-main-nav">
                        <!-- Start Mainmanu Nav -->
                        <nav class="mainmenu-nav">
                            <!--button class="mobile-close-btn mobile-nav-toggler"><i class="fas fa-times"></i></button-->
                            <div class="mobile-nav-brand">
                              
                                <ul class="action-list">
                                  
                                  <li class="my-account">
                                      
                                      @guest
<!--                                      <a href=" {{ route('login')}} ">-->
<!--                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">-->
<!--  <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>-->
<!--</svg>-->
<!--                                        <span style="padding-left: 5px;"> Signin/Signup </span>-->
<!--                                      </a>-->
<!--                                    	<a href=" {{ route('front.sellerRegister')}} ">-->
<!--                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">-->
<!--  <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>-->
<!--</svg>-->
<!--                                        <span style="padding-left: 5px;"> Become A Seller </span>-->
<!--                                      </a>-->
                                    
                                      @else
                                      <a href="{{ route('front.dashboard.index') }}">{{ auth()->user()->first_name ?auth()->user()->first_name.' '.auth()->user()->last_name:auth()->user()->mobile }}</a>  
                                      @endguest

                                  </li>
                                  
                                    <a href=" {{ route('front.home')}}" class="logo">
                                    <img src="{{ asset('uploads/img/'.$information->site_logo)}}" alt="Site Logo">
                                </a>
                                  
                              </ul>
                              
                            </div>                       
                          
                            <ul class="mainmenu">                                
                                @foreach($categories as $key=>$cat)   
                                
                              <p>
      						@if(($cat->subcats->count() > 0))                          
                           <a class="" data-bs-toggle="collapse" id="dropdownMenuButton1" href="{{ route('front.subCategories1',[$cat->url])}} #collapseExample_{{$key}}" role="button" aria-expanded="false" aria-controls="collapseExample">
                              {{ $cat->name}} <i class="fas fa-arrow-down" style="float:right;"></i>
                           </a>
   							@else                                         
         					<a href="{{ route('front.subCategories1',[$cat->url])}}" >
                            {{ $cat->name}}
                          	</a>                                   
   							@endif              
                            </p>
                             <hr />
                          <div class="collapse" id="collapseExample_{{ $key }}">    
                          @if($cat->subcats->count())
                            <ul style="margin:0; padding:0">
                                @foreach($cat->subcats as $sub)
                                <li style="margin:0; padding:0">
                                  <a class="dropdown-item" style="font-size: 15px;" href="{{ route('front.subsubCategories',[$sub->url])}}">{{ $sub->name}}</a>
                                </li>
                              <hr/>  
                              @endforeach
                            </ul>  								
                            @endif  
                          </div>                                     
                        @endforeach

                            </ul>
                        </nav>
                        <!-- End Mainmanu Nav -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Mainmenu Area -->
        <form action="{{ route('front.products.index')}}">
        <div class="mobilesearch col-12">
            <div class="header-top-dropdown dropdown-box-style">
                <div class="axil-search">
                    <button type="submit" class="icon wooc-btn-search">
                        <i class="far fa-search"></i>
                    </button>
                    <input type="search" class="placeholder product-search-input" name="q" id="search2" value="{{ request('q') ??''}}" maxlength="128" placeholder="What are you looking for...." autocomplete="off">
                </div>
            </div>
        </div>
        </form>
    </header>
    <!-- End Header -->
<a href="{{ route('front.carts.index')}}?segment={{request()->segment(1)}}" class="cart-dropdown-btn">
    <div class="fixed-cart-bottom">
        <p style="background: #00276C;border-top-left-radius: 12px;border-top-right-radius: 12px;">
            <i class="fas fa-shopping-cart" style="color: #ffffff !important;"></i>
        </p>
        <p style="color: white;font-size: 10px;background: #00276C;">
           @if(getTotalCart() > 1) {{ getTotalCart()}} items @else {{ getTotalCart()}} item @endif 
        </p>
        <p style="color: white;font-size: 10px;background: #F39305;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;">৳ {{ getTotalAmount() }}</p>
    </div>
</a>


@if($information->whats_active == '1') 
<a href="https://wa.me/+88{{ $information->whats_num }}" target="_blank" class="whats_btn">
    <span>
       <img width="60px" height="60px" src="https://img.icons8.com/color/48/whatsapp--v1.png" alt="whatsapp--v1"/>
<!--<img width="45" height="45" src="https://img.icons8.com/windows/45/whatsapp--v1.png" alt="whatsapp--v1"/>-->
       
    </span>
</a>
@endif


  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>