<header class="header-style-1">
  
    <div class="main-header py-1" style="background: #fff;">
        <div class="container">
            <div class="row" style="margin: 0">
                <div class="col-8 col-lg-3 logo-holder">
                    <!-- ============================================================= LOGO ============================================================= -->
                    <div class="d-flex" >
                        <div class="mx-2 d-lg-none">
                            <button type="button" onclick="openNav()" id="menubutton">
                             <img src="{{ asset('public/menu.png') }}" alt="" id="menuiconcss">
                            </button>
                        </div>
                         <div class="ms-3">
                            <a href="{{ url('/') }}" id="logoimage">
                             <img src="{{ asset($basicinfo->logo) }}" alt="" id="logosm" style="">
                            </a>
                        </div>
                    </div>
                </div>
                <!-- /.logo-holder -->

                <div class="col-md-2 col-lg-7 top-search-holder d-flex" style="justify-content:start!important;" id="d-sm-none">
                    <div class="search-area" id="d-sm-none">
                     <div class="navbar">
                        <form action="{{ url('search') }}" method="GET">
                            <div class="control-group" style="    display: flex;">
                                <input class="m-0 search-field" name="search" placeholder="Search here..." style="width:600px">
                                <button class="search-button" type="submit"></button>
                            </div>
                        </form>
                     </div>

                    </div>
                </div>
                <!-- /.top-search-holder -->

                <div class="p-0 col-4  col-md-3 col-lg-2">
                   <div class="d-flex align-items-center gap-3 mt-2">
                     <div class="mx-2">
                        <a href="{{ url('track-order') }}" class="d-none d-lg-block " id="iconhead">
                            <img src="{{ asset('public/express-delivery.png') }}" alt="" style="width: 40px;">
                        </a>
                    </div>
                    <div class=""  > 
                        @if (Auth::id())
                            <a href="#" type="button" onclick="openProfileNav()"  style="color: #222;font-size:26px" ><i class="fa-regular fa-user"></i></a>
                        @else
                            <a href="{{ url('login') }}" id="iconhead" style="color: #222;font-size:26px"><i class="fa-regular fa-user"></i></a>
                        @endif
                    </div>

                    <div class="dropdown-cart mr-1" >
                         <!--<a href="{{ url('/checkout') }}" class="dropdown" onclick="checkcart(this)" data-bs-toggle="dropdown"id="smcarticon">-->
                        <a href="{{ url('/checkout') }}" class="dropdown">
                            <div class="items-cart-inner">
                                <div class="basket" style="padding: 0; display: flex; align-items: center; margin-top: 5px;">
                                    <div class="cart-badge-wrapper">
                                        <i class="fa-solid fa-bag-shopping " style="font-size: 22px;color: #fff;"></i>
                                        <span class="badge-count">{{ intval(Cart::count()) }}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <!--<ul class="dropdown-menu">-->
                        <!--    <li id="checkcartview">-->
                        <!--    </li>-->
                        <!--</ul>-->
                    </div> 
                  </div>
                    <input type="text" id="valcheck" value="0" hidden>
                </div>
                <!-- /.top-cart-row -->
                
                <div class="col-12 d-none mt-2 mb-0 pb-0" id="d-lg-none" >
                    <form action="{{url('search')}}" method="GET">
                        <div class="input-group">
                            <input type="text" name="search" id="search" class="form-control"  placeholder="Search for products" style="border: 1px solid #F79AC0;border-right: none; float: left; padding: 20px;border-radius: 5px 0 0 5px;">
                            <div class="input-group-append">
                                <button type="submit" class="input-group-text text-light" style="border: 1px solid #F79AC0; border-left: none; border-radius: 0px 3px 3px 0px;   display: inline-block;float: left; padding:6px 28px 10px;text-align: center; background-color: #fff;">
                                    <i class="fas fa-search" style="color:#F79AC0;"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </div>
    
    
<div class="container-fluid d-none d-lg-block" style="background: #fff; ">
 <div class="container">
    <div class="row">
    <div class="col-lg-12 ">
      <div class="d-flex justify-content-start py-2">
        <!-- All Categories Dropdown -->
        <div class="position-relative" id="categoryMenuWrapper">
          <button class="btn btn-light" style="box-shadow: 0 1px 4px rgba(0,0,0,0.05);">
            All Product
          </button>

          <!-- Mega Menu -->
          <div class="mega-menu-container" id="megaMenu">
            <div class="d-flex">
              <!-- Left Category List -->
             <ul class="category-list">
              @foreach ($categories as $index => $category)
                <li class="category-item {{ $index == 0 ? 'active' : '' }}" data-target="cat{{ $index }}">
                  <a href="{{ url('products/category/' . $category->slug) }}" class=" text-decoration-none text-dark"> {{ $category->category_name }} </a>
                </li>
              @endforeach
            </ul>
              <!-- Right Subcategories -->
                <div class="subcategory-panel">
                  @foreach ($categories as $index => $category)
                    <div class="subcategory-box {{ $index == 0 ? 'show' : '' }}" id="cat{{ $index }}">
                      <div class="row">
                        @foreach ($category->subcategories as $subcategory)
                            <div class="col-md-3 col-lg-2 mb-3">
                              <h6 class="fw-bold small mb-2">
                                <a href="{{ url('products/sub/category/' . $subcategory->slug) }}" class="text-decoration-none text-dark">
                                  <img src="{{ asset($subcategory->subcategory_icon) }}" alt="{{ $category->category_name }}" style="width: 90%; height: 100px; object-fit: cover; border-radius:3px;" class="me-2">
                                  <p style="color: #222;font-size: 14px;padding: 5px;text-align: center;">{{ $subcategory->sub_category_name }}</p>
                                </a>
                              </h6>
                            </div>
                        @endforeach
                      </div>
                    </div>
                  @endforeach
                </div>
            </div>
          </div>
        </div>

         <div id="menu" class="py-0">
            <ul class="nav m-0" style="text-align:left;">
                @forelse ($categories as $maincategory)
                    @if (count($maincategory->subcategories) > 0)
                        <li class="dropdown menu-item">
                            <a href="{{ url('products/category/' . $maincategory->slug) }}"  class="dropdown-toggle" data-bs-hover="dropdown"> 
                                <span style="margin-left:6px">{{ $maincategory->category_name }}</span>
                             </a>
                            <ul class="dropdown-menu mega-menu p-3">
                                   <div class="container">
                                    <div class="row">
                                      <div class="col-md-2 sidebar-list mx-0 px-0">
                                        <a href="{{ url('products/category/' . $maincategory->slug) }}" ><h6 class="my-0 py-0">All {{ $maincategory->category_name }}</h6></a>
                                        <ul>
                                          @foreach ($maincategory->subcategories as $subcategory)
                                          <li><a href="{{ url('products/sub/category/' . $subcategory->slug) }}" style="padding: 1px 12px; font-size: 13.117px;" >{{ $subcategory->sub_category_name }}</a></li>
                                          @endforeach
                                        </ul>
                                      </div>
                                    
                                      <!-- RIGHT SIDE PRODUCT CARDS -->
                                      <div class="col-md-10">
                                        <div class="row g-3">
                                            @foreach ($offerSubcategories as $subcat)
                                            <div class="col-6 col-md-3">
                                                <div class="product-box">
                                                   <div class="product-box-img">
                                                        <img src="{{ asset($subcat->subcategory_icon) }}" alt="{{ $subcat->sub_category_name }}">
                                                   </div>
                                                    <h6>{{ $subcat->sub_category_name }}</h6>
                                                    <p>{{ Str::limit($subcat->description ?? '', 40) }}</p> 
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                     </div>
                                    </div>
                                   </div>
                               </ul>
                            </li>
                    @else
                        <li class="dropdown menu-item">
                            <a href="{{ url('products/category/' . $maincategory->slug) }}" class=" text-truncate" data-bs-hover="dropdown">
                                <span style="margin-left:6px">{{ $maincategory->category_name }}</span>
                            </a>
                        </li>
                    @endif
                @empty
                @endforelse
                <li class="dropdown menu-item">
                    <a href="{{ url('/featured/products') }}"  class=" text-truncate">
                        <span class="menu_top_elmt" style="color:#ffffff;background-color:#F79AC0;padding: 8px 16px 8px 16px;border-radius:6px;">Special offers</span>
                    </a>
                </li>
                  <li class="dropdown menu-item">
                    <a href="{{ url('/blogs') }}"  class=" text-truncate">
                        <span class="menu_top_elmt" style="margin-left:6px">Our Expert's Advice</span>
                    </a>
                </li>
            </ul>
        </div>
        
        
      </div>
    </div>
  </div>
 </div>
</div>

 


    <!-- side bar panel start -->
    <div id="mySidepanel" class="sidepanel">
        <div class="side-menu-header ">
            <div class="side-menu-close" onclick="closeNav()">
                <i class="fas fa-close"></i>
            </div>
            <div class="px-3 pb-3 side-login" style="padding-top: 12px;padding-bottom: 15px; padding-left: 10px;">
                <a href=""></a>
                <a style="font-size: 16px" href="#">Categories</a>
            </div>
        </div>
        <ul class="level1-styles collapse show" id="id0">

            @forelse ($categories as $category)
                <li>
                    <a href="{{ url('products/category/' . $category->slug) }}">{{ $category->category_name }} </a>
                </li>
            @empty
            @endforelse
            <li>
                <a href="{{ url('/featured/products') }}">Special offers </a>
            </li>
            <li>
                <a href="{{ url('/blogs') }}">Our Expert's Advice</a>
            </li>

        </ul>
    </div>

     <!-- side bar panel start -->
     <div id="myProfileSidepanel" class="sidepanel">
        <div class="side-menu-header ">
            <div class="side-menu-close" onclick="clossProfileNav()">
                <i class="fas fa-close"></i>
            </div>
            <div class="px-3 pb-3 side-login" style="padding-top: 12px;padding-bottom: 15px; padding-left: 10px;">
                @if(Auth::guard('web')->check())
                   @if(Auth::guard('web')->user()->profile))
                        <img src="{{ asset(Auth::guard('web')->user()->profile) }}" alt="" id="profileImage">
                    @else
                        <img src="{{ asset('public/backend/img/user.jpg') }}" alt="" id="profileImage">
                    @endif
                <h4 class="m-0 text-left" style="color: white;font-size: 16px;text-transform: uppercase;">{{ Auth::guard('web')->user()->name }}</h4>
                <h4 class="m-0 text-left" style="color: white;font-size: 16px;">{{ Auth::guard('web')->user()->email }}</h4>
                @else
                @endif
            </div>
        </div>
        <div class="py-0 widget-profile-menu">
            <ul class="categories categories--style-3">
                <li class="p-0">
                    <a href="{{ url('user/dashboard') }}" class="active">
                        <i class="fas fa-dashboard category-icon"></i>
                        <span class="category-name">
                            Dashboard
                        </span>
                    </a>
                </li>

                <li class="p-0">
                    <a href="{{ url('user/wallets') }}" class="">
                        <i class="fas fa-wallet category-icon"></i>
                        <span class="category-name">
                            Wallet </span>
                    </a>
                </li>

                <li class="p-0">
                    <a href="{{ url('user/purchase_history') }}" class="">
                        <i class="fas fa-file-text category-icon"></i>
                        <span class="category-name">
                            Orders </span>
                    </a>
                </li>

                <li class="p-0">
                    <a href="{{ url('track-order') }}" class="">
                        <i class="fas fa-file-text category-icon"></i>
                        <span class="category-name">
                            Track Order
                        </span>
                    </a>
                </li>
                <li class="p-0">
                    <a href="{{ url('user/profile') }}" class="">
                        <i class="fas fa-user category-icon"></i>
                        <span class="category-name">
                            Manage Profile
                        </span>
                    </a>
                </li>
                <li class="p-0">
                    <a href="{{ url('logout') }}" class="">
                        <i class="fas fa-comment category-icon"></i>
                        <span class="category-name">
                            Logout
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- side bar panel end -->
</header>

<!-- Search Popup Modal -->
<div class="modal fade" id="searchPopup" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="border-radius: 0px !important">
            <div class="modal-body" style="padding: 0px;">
                <div class="modalsearch-area">
                    <div class="control-group d-flex justify-content-between">
                        <input class="mb-0 search-field" id="modalsearchinput" onkeyup="searchproduct()"
                            placeholder="Search here...">
                        <a class="search-button" data-bs-dismiss="modal" href="#"></a>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="searchproductlist" style="background: white;margin: 10px;height: auto;overflow: scroll;">

    </div>
</div>

<style>
.mega-menu {
    border: none;
    box-shadow: 0px 6px 18px rgba(0,0,0,0.1);
    background: #f7fbfc;
}

.mega-menu h6 {
    font-size: 14px;
    font-weight: 700;
}

.mega-menu ul li a {
    display: block;
    color: #333;
    padding: 4px 0;
    text-decoration: none;
}

.mega-menu ul li a:hover {
    color: #f37021;
}


/* Sidebar List */
.sidebar-list h6 {
  color: #f37021;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
}
.sidebar-list ul {
   margin: 5px 0;
    font-size: 10pt;
}

.sidebar-list ul li a {
  text-decoration: none;
  color: #333;
  transition: 0.3s;
}
.sidebar-list ul li a:hover {
  color: #f37021;
}

/* Product Card */
.product-box {
  position:relative;
  border-radius: 6px; 
  text-align: center;
  height: 100%;
  transition: 0.3s;
}
.product-box:hover {
  transform: translateY(-2px);
}
.product-box .product-box-img{
  width: 80%;
  height: 260px;
  border-radius: 8px;
  margin:0px auto;
} 
.product-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.product-box h6 {
  font-size: 14px; 
  font-weight: 600;
  margin-top: 8px;
}
.product-box p {
  font-size: 11px; /* smaller */
  color: #666;
  margin: 4px 0 0 0;
  line-height: 1.2;
}

/* Optional: make sidebar sticky for better UX */
@media (min-width: 992px) {
  .sidebar-list {
    position: sticky;
    top: 20px;
  }
}



.nav-link {
    top: -9px;
    color: #222 !important;
    font-weight: 500;
    padding: 8px 15px;
    display: inline-block;
}

.nav-link:hover,
.hover-link:hover {
    color: #ff4d4d !important;
    text-decoration: underline;
}
.mega-menu-container {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 1000px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 9999;
  padding: 20px;
}

.category-list {
  width: 250px;
  max-height: 400px;
  overflow-y: auto;
  border-right: 1px solid #eee;
  list-style: none;
  margin: 0;
  display: block;
  text-align:right;
 
}

.category-item {
  margin-right: 0 !important;
  display: block;
  text-align: right;
  padding: 7px 15px 7px 0;
  cursor: pointer;
  font-size: 10pt;
  font-weight: 700;
  color: #333;
}

.category-item.active,
.category-item:hover {

  font-weight: bold;
}

.category-item a:hover{
   padding-left:5px;
   border-left:2px solid #F79AC0;
}

.subcategory-panel {
  flex: 1;
  padding-left: 20px;
}

.subcategory-box {
  display: none;
}

.subcategory-box.show {
  display: block;
}

   .cart-badge-wrapper {
        position: relative;
        display: inline-block;
        padding:10px 13px;
        border-radius:50%;
        background-color: #F79AC0;
    }

    .cart-badge-wrapper .badge-count {
        position: absolute;
        top: 15px;
        right: -10px;
        background-color: #F79AC0;
        color: white;
        font-size: 12px;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 50%;
        line-height: 1;
        z-index: 10;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .cart-badge-wrapper i {
        font-size: 26px;
        color: #fff;
    }
    #profileImage {
        border-radius: 50%;
        padding: 0px;
        padding-bottom: 8px;
        padding-top: 10px;
    }

    .sidebar-widget-title {
        position: relative;
    }

    .sidebar-widget-title:before {
        content: "";
        width: 100%;
        height: 1px;
        background: #eee;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
    }

    .py-3 {
      padding-bottom: 1rem !important;
    }

    .sidebar-widget-title span {
        background: #fff;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2em;
        position: relative;
        padding: 8px;
        color: #dadada;
    }

    ul.categories {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    ul.categories--style-3>li {
        border: 0;
    }

    ul.categories>li {
        border-bottom: 1px solid #f1f1f1;
    }

    .widget-profile-menu a i {
        opacity: 0.6;
        font-size: 13px !important;
        top: 0 !important;
        width: 18px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        display: inline-block;
        margin-right: 0.5rem !important;
    }

    .category-name {
        color: #36757C;
        font-size: 18px;
    }

    .category-icon {
        font-size: 18px;
        color: #36757C;
    }
    .modalsearch-area .search-field {
        border: medium none;
        padding: 10px;
        border-right: none;
        float: left;
    }

    .modalsearch-area .search-button {
        display: inline-block;
        float: left;
        margin-top: -1px;
        padding: 6px 15px 7px;
        text-align: center;
        background-color: #36757C;
        border: 1px solid #36757C;
    }

    .modalsearch-area .search-button:after {
        color: #fff;
        content: "\f00d";
        font-family: fontawesome;
        font-size: 24px;
        line-height: 9px;
        vertical-align: middle;
    }
    
   @media only screen and (max-width: 600px) {
       .cart-badge-wrapper {
           padding: 8px 10px;
         }
         .basket {
            margin-top: -2px !important;
         }
   }
    
</style>
<script>
    function showser() {
        var s=$('#valcheck').val();
        if(s=='0'){
            $('#valcheck').val('1');
            $('#hideser').css('display','inline');
        }else{
            $('#valcheck').val('0');
            $('#hideser').css('display','none');
        }
    }
</script>

<script>
$(document).ready(function () {
  $('#categoryMenuWrapper').hover(
    function () {
      $('#megaMenu').stop(true, true).fadeIn(200);
    },
    function () {
      $('#megaMenu').stop(true, true).fadeOut(200);
    }
  );

  $('.category-item').hover(function () {
    var target = $(this).data('target');
    $('.category-item').removeClass('active');
    $(this).addClass('active');
    $('.subcategory-box').removeClass('show');
    $('#' + target).addClass('show');
  });

  // Optional: Show child categories on hover via JS
  $('.subcategory-link').hover(function () {
    const subId = $(this).data('sub');
    $('.childcategory-box').hide();
    $('#' + subId).show();
  }, function () {
    const subId = $(this).data('sub');
    setTimeout(() => {
      $('#' + subId).hide();
    }, 300);
  });
});
</script>
