@if(request()->is('lnpage/*'))
@else
<header class="header-style-1">

 <div class="container-fluid" style="background: #2C2874;">
        <div id="sociallink">
        <div class="row py-1" style="padding-bottom: 0px !important;background: #2C2874;">
            <div class="col-lg-12">
                <div id="">
                    <div class="row">
                        <div class="col-12">
                            <marquee behavior="scroll" direction="left" style="color:#fff;background: #2C2874;">{{ $basicinfo->marquee_text }}</marquee>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
      </div>
    </div>
   
    <div class="main-header" id="myHeader" style="background: #fff;">
        <div class="container">
            <div class="row" style="margin: 0">
                <div class="col-9 col-sm-9 col-md-9 col-lg-3 logo-holder ps-0">
                    <!-- ============================================================= LOGO ============================================================= -->
                    <div class="logo" style="display: flex;justify-content:space-between">
                        <a href="{{ url('/') }}" id="logoimage">
                            <img src="{{ asset($basicinfo->logo) }}" alt="" id="logosm" style=" width: 100%;">
                        </a>
                    </div>
                    <!-- /.logo -->
                    <!-- ============================================================= LOGO : END ============================================================= -->
                </div>
                <!-- /.logo-holder -->

                <div class="col-md-2 col-lg-7 top-search-holder d-flex" style="justify-content:center!important;" id="d-sm-none">
                    <!-- /.contact-row -->
                    <!-- ============================================================= SEARCH AREA ============================================================= -->
                    <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:500px">
                                <button class="search-button" type="submit"></button>
                            </div>
                        </form>
                    </div>
                    </div>
                </div>
                <!-- /.top-search-holder -->
                <div class="p-0 col-3 col-sm-3 col-md-3 col-lg-2 animate-dropdown top-cart-row" id="headcart">
                    <div class="d-none d-lg-block" id="d-sm-none">
                        @if (Auth::id())
                        <div class="d-flex mt-1">
                                <a href="{{ url('login') }}" id="iconhead" style="padding-right: 16px;"><i class="fa-solid fa-user"></i></a>
                                <div class="mt-3"> 
                                 <a href="{{ url('login') }}" id="iconhead" ><p class="my-0" style="font-size:12px;">Welcome</p></a>
                                 <a href="{{ url('login') }}" id="iconhead" s> <p class="my-0"  style="font-size:12px;font-weight:700;"> {{ Auth::user()->name }}</p></a>
                                </div>
                           </div>
                        @else
                           <div class="d-flex mt-1">
                                <a href="{{ url('login') }}" id="iconhead" style="padding-right: 16px;"><i class="fa-solid fa-user"></i></a>
                                <div class="mt-3"> 
                                 <a href="{{ url('login') }}" id="iconhead" ><p class="my-0" style="font-size:12px;">Welcome</p></a>
                                 <a href="{{ url('login') }}" id="iconhead" s> <p class="my-0"  style="font-size:12px;font-weight:700;">Sign in / Register</p></a>
                                </div>
                           </div>
                        @endif
                    </div>

                    <div class="dropdown-cart"  id="d-sm-none">
                        <a href="#" class="dropdown" onclick="checkcart(this)" data-bs-toggle="dropdown"  id="smcarticon">
                            <div class="items-cart-inner">
                                <div class="basket" style="padding: 0;display:flex;">
                                    <i class="fa-solid fa-cart-shopping" style="padding-top: 26px;font-size: 20px;color: #000000;"></i>
                                    <span style="color: #000000;font-weight:bold">৳ {{ intval(Cart::subtotal()) }}</span>
                                </div>
                            </div>
                        </a>
                        <ul class="dropdown-menu">
                            <li id="checkcartview">
                            </li>
                        </ul>
                        <!-- /.dropdown-menu-->
                    </div>
                    <!-- /.dropdown-cart -->

                    <a type="button" class="search-button d-lg-none" onclick="showser()" style="float: right;font-size: 30px; color: #b9b9b9; margin-top:10px; margin-right: 10px;"
                        href="#" id="smsericon"><img src="{{asset('public/search.png')}}" style="width:35px"></a>
                    <!-- ============================================================= SHOPPING CART DROPDOWN : END============================================================= -->
                    <input type="text" id="valcheck" value="0" hidden>
                </div>
                <!-- /.top-cart-row -->

                <div class="mt-1 mb-1 text-left col-lg-6 col-12" id="hideser" >
                    <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-radius: 4px 0px 0px 4px;margin:0;">
                            <div class="input-group-append">
                                <button type="submit" class="input-group-text bg-primary text-light" style="background: black !important;padding: 10.7px;margin-bottom: 2px;margin-left: -10px;margin-top: -1px;border-radius: 0px 4px 4px 0px;">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->

    </div>

<div class="container-fluid" style="background: #fff; border-bottom: 1px solid #e9e9e9;">
  <div class="row">
    <div class="col-lg-12 d-none d-lg-block">
      <div class="d-flex align-items-center gap-4 py-2">

        <!-- All Categories Dropdown -->
        <div class="position-relative" id="categoryMenuWrapper">
          <button class="btn btn-light d-flex align-items-center rounded px-3 py-2" style="box-shadow: 0 1px 4px rgba(0,0,0,0.05);">
            <i class="fa-solid fa-bars me-2"></i> All Categories <i class="fa-solid fa-angle-down ms-2"></i>
          </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="d-flex align-items-center text-decoration-none text-dark">
                    <img src="{{ asset($category->category_icon) }}" alt="{{ $category->category_name }}"
                         style="width: 20px; height: 20px; object-fit: cover; border-radius:5px;" class="me-2">
                    {{ $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)
                          @if ($subcategory->childcategories->count() > 0)
                            <div class="col-md-4 mb-3">
                              <h6 class="fw-bold small mb-2">
                                <a href="{{ url('products/sub/category/' . $subcategory->slug) }}" class="text-decoration-none text-dark">
                                  {{ $subcategory->sub_category_name }}
                                </a>
                              </h6>
                
                              @foreach ($subcategory->childcategories as $child)
                                <a href="{{ url('products/child/category/' . $child->slug) }}" class="text-decoration-none d-block small py-1 px-2 text-secondary">
                                  {{ $child->childcategoryName }}
                                </a>
                              @endforeach
                            </div>
                          @endif
                        @endforeach
                      </div>
                    </div>
                  @endforeach
                </div>


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

        <!-- Static Menu -->
        <ul class="nav m-0 align-items-center">
          <li class="nav-item"><a href="{{Route('shop')}}" class="nav-link fw-bold text-danger">Shop</a></li>
          <li class="nav-item"><a href="{{url('/blogs')}}" class="nav-link">Blog</a></li>
          <li class="nav-item"><a href="{{ url('venture/about_us') }}" class="nav-link">About Us</a></li>
          <li class="nav-item"><a href="{{ url('venture/contact_us') }}" class="nav-link">Contact Us</a></li>
          <li class="nav-item"><a href="{{ url('venture/terms_codition') }}" class="nav-link">Terms & Conditions</a></li>
          <li class="nav-item"><a href="{{ url('track-order') }}" class="nav-link">Track Order</a></li>
        </ul>

      </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

        </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>
.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;
  padding-left: 0;
}

.category-item {
  padding: 10px 15px;
  cursor: pointer;
  font-size: 15px;
  color: #333;
}

.category-item.active,
.category-item:hover {
  background-color: #f3f3f3;
  font-weight: bold;
}

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

.subcategory-box {
  display: none;
}

.subcategory-box.show {
  display: block;
}
.childcategory-box {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 10000;
  border-radius: 5px;
  padding: 10px 0;
}

.col-md-4.mb-2.position-relative:hover .childcategory-box {
  display: block;
}

    #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: black;
        font-size: 18px;
    }

    .category-icon {
        font-size: 18px;
        color: black;
    }
    .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: #000000;
        border: 1px solid #000000;
    }

    .modalsearch-area .search-button:after {
        color: #fff;
        content: "\f00d";
        font-family: fontawesome;
        font-size: 24px;
        line-height: 9px;
        vertical-align: middle;
    }
</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>


@endif

