@php
$user = Auth::user();
$logo = \App\Models\Logo::select('logo')->first();
$logopath = asset('/uploads/logos/').'/'.$logo->logo;

$isUser = Auth::check() && strtolower(Auth::user()->user_type) === 'user';
$wishlistCount = \App\Models\Wishlist::where(['user_id'=> Auth::id()])->count();
$cartCount = \App\Models\Cart::where('user_id', Auth::id())->where('type', 'cart')->count();

@endphp
<style>
   .profile-container {
   position: relative;
   display: inline-block;
   }
   .profile-btn {
   border: none;
   background: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   margin-top: 11px;
   }
   .profile-btn img {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   }
   .dropdown-menu-custom {
   position: absolute;
   top: 60px;
   right: 0;
   /* width: 260px; */
   background: #fff;
   border-radius: 0px;
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.12);
   display: none;
   flex-direction: column;
   overflow: hidden;
   z-index: 1000;
   padding: 0px;
   padding-bottom:6px;
   }
   .profile-header {
   display: flex;
   align-items: center;
   padding: 12px;
   border-bottom: 1px solid #eee;
   }
   .profile-header img {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   margin-right: 0px;
   padding:0px!important;
   }
      .dropdown-item{
          font-size: 15px !important;
   }
   .dropdown-item i{
      font-size:18px!important;
   }
   .dropdown-item {
   padding: 1px 8px;
   display: flex
   ;
   align-items: center;
   gap: 10px;
   cursor: pointer;
   text-decoration: none;
   color: #333 !important;
   font-size: 16px !important;
   }
   .dropdown-item:hover {
   background: #f1f5f9;
   }
   .dropdown-divider {
   height: 1px;
   background: #eee;
   margin: 4px 0;
   }
   .dropdown-item.text-danger {
   color: #dc3545;
   }
   .profile-img{
   color: black !important;
   font-size: 17px;
   }

   {{-- subcategory --}}
   ul li { position: relative; list-style: none; }
   ul li ul.submenu { 
      display: none; 
      /* position: absolute;  */
      left: 100%; 
      top: 0; 
      /* background: #fff;  */
      padding: 0; 
   }
   /* ul li.has-submenu:hover > ul.submenu { display: block; } */

</style>
<header class="nav__side">
   <nav class="container-fluid cus_nav">
      <div class="barand"><a class="navbar-brand brand-logo" href="{{route('index')}}"><img src="{{ $logopath }}" alt=""></a></div>


<div class="searchbar position-relative">
    <input type="text" id="global-search" placeholder="Search by Title, Keywords, Publisher or ISBN" autocomplete="off">
    <button id="search-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
    <div id="search-suggestions" 
         class="list-group position-absolute w-50 mt-1 shadow-sm" 
         style="top:100%; display:none; border-radius: 10px; overflow:hidden;">
    </div>
</div>

     
     
      {{-- <div id="search-results"></div> --}}
      <div class="links">
         <div class="bell">
            @if($isUser)
               <a href="{{ route('wishlist.index') }}">
               <i class="fa-regular fa-heart"></i>
               <span class="wishlistCount">
               {{$wishlistCount}}
               </span>
               </a>
            @else
            <a href="javascript:void(0)" onclick="showLoginPopup()">
            <i class="fa-regular fa-heart"></i>
            </a>
            @endif
         </div>
         <div class="cart" id="">
            @if($isUser)
            <a href="{{ route('cart.data') }}">
            <i class="bi bi-cart"></i>
            <span class="cartCount">{{ $cartCount }}</span>
            </a>
            @else
            <a href="javascript:void(0)" onclick="showLoginPopup()">
            <i class="bi bi-cart"></i>
            </a>
            @endif
         </div>
         <i class="fa-regular fa-circle-user profile-btn"  id="profileToggle" ></i>
         <div class="profile-container">
            <div class="dropdown-menu-custom" id="profileDropdown">
               <!-- Profile Header -->
               @if($isUser)
               <div class="profile-header">
                  <img src="{{ Auth::user()->user_profile 
                     ? asset('/' . Auth::user()->user_profile) 
                     : asset('uploads/images/autar.avif') }}" 
                     alt="Profile">
                  <div class="profile-img">
                     <h6 class="mb-0"> {{ ucwords(Auth::user()->name) }}</h6>
                     <small class="text-muted">{{ ucwords(Auth::user()->email) }}</small>
                  </div>
               </div>
               <!-- Items -->
               <a class="dropdown-item" href="{{route('user.dashboard')}}"><i class="bi bi-person"></i> My Account</a>
               <div class="dropdown-divider"></div>
              <a class="dropdown-item text-danger" href="{{ route('user.logout') }}"
                  onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                  <i class="bi bi-box-arrow-right"></i> Log out
               </a>

               <form id="logout-form" action="{{ route('user.logout') }}" method="POST" style="display: none;">
                  @csrf
               </form>

            </div>
            @else
            <a class="dropdown-item" href="{{route('login.form')}}"><i class="bi bi-person"></i> Sign in</a>
            @endif
         </div>
      </div>
   </nav>
   <div class="container-fluid px-0">
      <div class="nav2">
         <div class="menu showbtn">
            <i class="fa-solid fa-bars "></i>
            {{-- <span>All</span> --}}
         </div>
         <div class="header-content">
            <ul>
               <li><a href="{{ route('podcast') }}">Podcast</a></li>
               <!-- <li><a href="{{ route('products.load',['type'=>'sell']) }}">Sell</a></li> -->
               <li><a href="{{ route('products.load',['type'=>'bestseller']) }}">Best Sellers</a></li>
               <li><a href="{{ route('products.load',['type'=>'todaysdeals']) }}">Today's Deal</a></li>
               <li class="shop-link"><a href="{{ route('products.load',['type'=>'shop']) }}">Shop</a></li>
               <li class=""><a href="{{ route('customer.service') }}">Customer Service</a></li>
               <li class="shop-link"><a href="{{ route('about') }}">About</a></li>
             
            </ul>
         </div>
       
      </div>
   </div>
   <div class="sidebar" id="sidemenu">
      <div class="top">
         <div><i class="fa-regular fa-circle-user"></i>
            @if($isUser)
            <span>Hello,     {{ ucwords(Auth::user()->name) }}</span>
            @endif
         </div>
         <div> <button class="showbtn"><i class="fa-solid fa-xmark"></i></button></div>
      </div>
<ul>
    <li>
        <div class="title">
            <a href="#">All Categories</a>
        </div>
    </li>

    @php
        $categories = \App\Models\Category::whereNull('parent_code')
            ->where('level', 1)
            ->get(['id','name','slug','code']);  
    @endphp

    @foreach($categories as $category)
        @php
            $subcategories = \App\Models\Category::where('parent_code', $category->code)
            ->orderBy('name', 'asc')
            ->get(['name','slug','code']);

        @endphp

        <li class="has-submenu">
            <a href="{{ route('products.load', ['type' => $category->slug]) }}">
                {{ ucwords($category->name) }}

                <i class="bi bi-chevron-down"></i>
            </a>
            

            @if($subcategories->count())
                <ul class="submenu">
                  <li><a href="{{ route('products.load', ['type' => $category->slug]) }}" style='font-weight:bold;'>View all {{ ucwords($category->name) }}</a></li>
                    @foreach($subcategories as $sub)
                        <li>
                           
                            <a href="{{ route('products.load', ['type' => $sub->slug]) }}">
                                {{ ucwords($sub->name) }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            @endif
        </li>
    @endforeach
</ul>


   </div>


</header>

<div class="mobile-menu  ">
   <div class="mobile-menudata w-100 d-flex align-items-center  justify-content-center">
   <div class="links mobile_menu d-flex align-items-center justify-content-center">
      <div class="menu showbtn text-center">
            <i class="fa-solid fa-bars "></i>
                   {{-- <img     width= "35%" src="{{asset('frontend/assets/images/Categories.png')}}" alt=""> --}}

            {{-- <i class="fa-solid fa-table-cells-large"></i> --}}
            {{-- <p class="mb-0">Categories</p> --}}
         </div>

       

         {{-- ❤️ Wishlist --}}
         <div class="bell">
            @if($isUser)
               <a href="{{ url('user/wishlist') }}">
                     <i class="fa-regular fa-heart"></i>
                     <span class="wishlistCount">{{$wishlistCount}}</span>
               </a>
            @else
               <a onclick="showLoginPopup()">
                     <i class="fa-regular fa-heart"></i>
                     <span id=""> 0</span>
               </a>
            @endif
         </div>

         {{-- 🛒 Cart --}}
         <div class="cart">
            @if($isUser)
               <a href="{{ url('user/cart-data') }}">
                     <i class="bi bi-cart"></i>
                     <span class="cartCount">{{$cartCount}}</span>
               </a>
            @else
               <a onclick="showLoginPopup()">
                     <i class="bi bi-cart"></i>
                     <span id="">0</span>
               </a>
            @endif
         </div>

         {{-- 👤 Profile --}}
         @if($isUser)
            <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#profileModal">
               <i class="fa-regular fa-circle-user profile-btn" id="mobile-togle"></i>
            </button>
         @else
            <button type="button" onclick="showLoginPopup()" class="btn">
               <i class="fa-regular fa-circle-user profile-btn"></i>
            </button>
         @endif

          </div>
      </div>
</div>
<div class="mobile-nav">
   
</div>


<!-- Modal -->
<div class="modal fade" id="profileModal" tabindex="-1" role="dialog" aria-labelledby="profileModalLabel" aria-hidden="true">
  <div class="modal-dialog  modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
       <h5 class="modal-title" id="profileModalLabel">My Profile</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         @if(Auth::check() && strtolower(Auth::user()->user_type) == 'user')
               <div class="profile-header d-flex align-items-center mb-3">
               <img 
                  src="{{ Auth::user()->user_profile 
                     ? asset('/' . Auth::user()->user_profile) 
                     : asset('uploads/images/autar.avif') }}" 
                  alt="Profile" 
                  class="rounded-circle me-3"
                  width="60" height="60">
               
               <div class="profile-img">
                  <h6 class="mb-0">{{ ucwords(Auth::user()->name) }}</h6>
                  <small class="text-muted">{{ ucwords(Auth::user()->email) }}</small>
               </div>
               </div>

               <!-- Items -->
               <a class="dropdown-item d-block mb-2" href="{{route('user.dashboard')}}">
               <i class="bi bi-person"></i> My Account
               </a>
               
               <div class="dropdown-divider"></div>
               <a class="dropdown-item text-danger" href="{{ route('user.logout') }}"
               onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
               <i class="bi bi-box-arrow-right"></i> Log out
               </a>

               <form id="logout-form" action="{{ route('user.logout') }}" method="POST" style="display: none;">
               @csrf
               </form>
               @endif
      </div>
     
    </div>
  </div>
</div>















<!-- OR jQuery (official CDN) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
   let searchSuggestions="{{ route('search.suggestions') }}";
</script>
<script>
   // Agar bahar click kare to suggestion box hide
   $(document).on('click', function (e) {
       if (!$(e.target).closest('#global-search, #search-suggestions').length) {
           $('#search-suggestions').hide();
       }
   });
   
   const toggleBtn = document.getElementById("profileToggle");
   const dropdown = document.getElementById("profileDropdown");
   // Toggle on click 
   toggleBtn.addEventListener("click", () => {
     dropdown.style.display = dropdown.style.display === "flex" ? "none" : "flex";
   });
   
   // Close if clicked outside
   window.addEventListener("click", (e) => {
     if (!toggleBtn.contains(e.target) && !dropdown.contains(e.target)) {
       dropdown.style.display = "none";
     }
   });
   
   $(document).ready(function () {
    $(".has-submenu > a").on("click", function (e) {
        e.preventDefault();

        let parentLi = $(this).parent(".has-submenu");

        // agar already open hai to close kar do
        if (parentLi.hasClass("active")) {
            parentLi.removeClass("active");
            parentLi.find(".submenu").first().slideUp();
        } else {
            // sabse pehle dusre submenu band kar do
            $(".has-submenu").removeClass("active").find(".submenu").slideUp();

            // current wala open karo
            parentLi.addClass("active");
            parentLi.find(".submenu").first().slideDown();
        }
    });
});
</script>