{{-- <div class="tagline bg-slate-100 dark:bg-slate-800">
   <div class="container relative">
     <div class="grid grid-cols-1">
       <div class="flex justify-center">
         <span class="text-[16px]">Inform the best course offers with discounts up to 60%, <a
             class="font-semibold hover:text-violet-600"
             href="#"
           >get it now</a> 🔥</span>
       </div>
     </div>
   </div>
 </div> --}}

<nav
  class="defaultscroll is-sticky tagline-height"
  id="topnav"
>
  <div class="container relative">
    <a
      class="logo"
      title="{{ $web->domain_name }}"
      :href="route('landing.home.index')"
    >
      <span class="inline-block dark:hidden">
        <img
          class="l-dark"
          src="{{ $web->logo_dark_url }}"
          alt="logo-dark"
          style="width: 150px; height: 26px; object-fit: cover;"
        >
        <img
          class="l-light"
          src="{{ $web->logo_light_url }}"
          alt="logo-light"
          style="width: 150px; height: 26px; object-fit: cover;"
        >
      </span>
      <img
        class="hidden dark:inline-block"
        src="{{ $web->logo_light_url }}"
        alt="logo-light"
        style="width: 150px; height: 26px; object-fit: cover;"
      >
    </a>

    <div class="menu-extras">
      <div class="menu-item">
        <a
          class="navbar-toggle"
          id="isToggle"
          onclick="toggleMenu()"
        >
          <div class="lines">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </a>
      </div>
    </div>

    <ul class="buy-button mb-0 list-none">
      <li class="relative me-5 inline-block">
        <button
          class="text-[20px]"
          type="button"
          onclick="navbarSearch.showModal()"
        >
          <i class="iconoir-search login-btn-primary align-middle"></i>
          <i class="iconoir-search login-btn-light align-middle text-white"></i>
        </button>
      </li>

      @auth
        <li class="dropdown relative me-5 inline-block">
          <button
            class="dropdown-toggle items-center"
            data-dropdown-toggle="dropdown"
            type="button"
          >
            <span
              class="inline-flex size-8 items-center justify-center rounded-full border border-violet-600 bg-violet-600 text-center align-middle text-base tracking-wide text-white duration-500"
            ><img
                class="size-[30px] rounded-full"
                src="{{ asset('landing/images') }}/team/2.jpg"
                alt=""
              ></span>
          </button>
          <!-- Dropdown menu -->
          <div
            class="dropdown-menu absolute end-0 z-10 m-0 mt-4 hidden w-44 overflow-hidden rounded-md bg-white shadow-sm dark:bg-slate-900 dark:shadow-gray-700"
            onclick="event.stopPropagation();"
          >
            <ul class="py-2 text-start">
              <li>
                <a
                  class="flex items-center px-4 py-2 font-medium hover:text-violet-600 dark:text-white/70 dark:hover:text-white"
                  href="{{ route('landing.profile.index') }}"
                ><i
                    class="me-2 size-4"
                    data-feather="user"
                  ></i>Profile</a>
              </li>
              <li class="my-2 border-t border-gray-100 dark:border-gray-800"></li>
              <li>
                <a
                  class="flex items-center px-4 py-2 font-medium hover:text-violet-600 dark:text-white/70 dark:hover:text-white"
                  href="#"
                ><i
                    class="me-2 size-4"
                    data-feather="log-out"
                  ></i>Logout</a>
              </li>
            </ul>
          </div>
        </li>
      @endauth

      @guest
        <a
          class="inline-flex h-10 items-center justify-center rounded-md bg-violet-600 px-4 font-medium tracking-wide text-white"
          :href="route('landing.auth.login')"
        > Masuk</a>
      @endguest
    </ul>

    <div
      id="navigation"
      x-data="menuHeader"
    >
      <!-- Loading indicator -->
      <div
        class="py-4 text-center"
        x-show="loading"
      >
        <span>Memuat menu...</span>
      </div>

      <!-- Menu list -->
      <ul
        class="navigation-menu nav-light justify-start"
        x-show="!loading"
      >
        <template
          x-for="menu in menus"
          :key="menu.id"
        >
          <li :class="menu.has_children ? 'has-submenu parent-parent-menu-item' : ''">
            <!-- Level 1 Menu -->
            <a
              :href="menu.url"
              :class="menu.has_children ? '' : 'sub-menu-item'"
              :target="menu.open_in_new_tab ? '_blank' : '_self'"
              x-text="menu.name"
            ></a>

            <!-- Menu Arrow untuk submenu level 1 -->
            <span
              class="menu-arrow"
              x-show="menu.has_children"
            ></span>

            <!-- Submenu Level 1 -->
            <ul
              class="submenu"
              x-show="menu.has_children"
            >
              <template
                x-for="child in menu.children"
                :key="child.id"
              >
                <li :class="child.has_children ? 'has-submenu parent-menu-item' : ''">
                  <!-- Level 2 Menu -->
                  <a
                    class="sub-menu-item"
                    :href="child.url"
                    :target="child.open_in_new_tab ? '_blank' : '_self'"
                    x-text="child.name"
                  ></a>

                  <!-- Menu Arrow untuk submenu level 2 -->
                  <span
                    class="submenu-arrow"
                    x-show="child.has_children"
                  ></span>

                  <!-- Submenu Level 2 -->
                  <ul
                    class="submenu megamenu"
                    x-show="child.has_children"
                  >
                    <template
                      x-for="grandChild in child.children"
                      :key="grandChild.id"
                    >
                      <li>
                        <!-- Level 3 Menu -->
                        <a
                          class="sub-menu-item"
                          :href="grandChild.url"
                          :target="grandChild.open_in_new_tab ? '_blank' : '_self'"
                          x-text="grandChild.name"
                        ></a>
                      </li>
                    </template>
                  </ul>
                </li>
              </template>
            </ul>
          </li>
        </template>
      </ul>
    </div>

  </div>
</nav>

<dialog
  class="modal mt-20 w-11/12 max-w-5xl rounded-md bg-white text-slate-900 shadow-sm md:mt-32 dark:bg-slate-900 dark:text-white dark:shadow-gray-800"
  id="navbarSearch"
>
  <div class="relative h-auto w-full">
    <form
      class="modal-backdrop"
      method="dialog"
    >
      <button class="btn-ghost absolute end-0 top-0 flex size-5 items-center justify-center rounded-md"><i
          class="size-4"
          data-feather="x"
        ></i></button>
    </form>
    <div class="p-6 text-center">
      <form class="relative">
        <i class="iconoir-search absolute end-0 top-2.5 text-lg"></i>
        <input
          class="h-10 w-full rounded-md bg-transparent px-3 py-2 pe-6 focus:outline-none"
          id="searchItem"
          name="s"
          type="text"
          placeholder="Search..."
        >
      </form>
    </div>
  </div>
</dialog>