@php
      $sidebarItems = json_decode(file_get_contents(resource_path('views/partials/sidenav.json')), true);
      $authUser = auth()->user();
      // Nếu user là cổ đông (role_id == 2) chỉ hiển thị menu có label = 'Daily'
      if ($authUser && $authUser->role_id == 2) {
          $sidebarItems = array_values(
              array_filter($sidebarItems, function ($it) {
                  return isset($it['label']) && $it['label'] === 'Daily';
              }),
          );
      }
  @endphp
  <nav class="nav-container">
      <ul class="nav-menu">
          @foreach ($sidebarItems as $item)
              @php
                  $hasChildren = isset($item['children']) && count($item['children']) > 0;
                  // Nếu route tồn tại thì dùng route(), nếu không dùng '#'
                  $route = isset($item['route']) ? route($item['route']) : '#';
                  $icon = $item['icon'] ?? '';
              @endphp

              <li class="nav-item {{ $hasChildren ? 'has-dropdown' : '' }}">
                  <a href="{{ $route }}"
                      class="nav-link {{ isset($item['route']) && request()->routeIs($item['route']) ? 'active' : '' }}">
                      @if ($icon)
                          <span class="nav-icon"><i class="{{ $icon }}"></i></span>
                      @endif
                      {{ $item['label'] }}
                      @if ($hasChildren)
                          <span class="dropdown-arrow"><i class="fa fa-chevron-down"></i> </span>
                      @endif
                  </a>

                  @if ($hasChildren)
                      <div class="dropdown-menu">
                          @foreach ($item['children'] as $child)
                              @php
                                  $childRoute = isset($child['route']) ? route($child['route']) : '#';
                              @endphp
                              @if (in_array($child['label'], ['Danh mục người dùng', 'Vai trò']))
                                  @if(Auth::user()->role_id == 1)
                                      <a href="{{ $childRoute }}"
                                          class="dropdown-item {{ isset($child['route']) && request()->routeIs($child['route']) ? 'active' : '' }}">
                                          @if (isset($child['icon']))
                                              <i class="{{ $child['icon'] }}"></i>
                                          @endif
                                          {{ $child['label'] }}
                                      </a>
                                  @endif
                              @else
                                  <a href="{{ $childRoute }}"
                                      class="dropdown-item {{ isset($child['route']) && request()->routeIs($child['route']) ? 'active' : '' }}">
                                      @if (isset($child['icon']))
                                          <i class="{{ $child['icon'] }}"></i>
                                      @endif
                                      {{ $child['label'] }}
                                  </a>
                              @endif
                          @endforeach
                      </div>
                  @endif
              </li>
          @endforeach
      </ul>
  </nav>
  <style scoped>
      .nav-container {
          background: white;
          border-bottom: 1px solid #e5e7eb;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .nav-menu {
          display: flex;
          list-style: none;
          /* padding: 0 24px; */
          margin: 0;
      }

      .nav-item {
          position: relative;
      }

      .nav-link {
          font-size: 14px;
          display: flex;
          align-items: center;
          padding: 16px 20px;
          text-decoration: none;
          color: #374151;
          font-weight: 500;
          transition: all 0.2s ease;
          border-bottom: 3px solid transparent;
      }

      .nav-link:hover {
          color: #6366f1;
          background-color: #f8fafc;
          border-bottom-color: #6366f1;
      }

      .nav-link.active {
          color: #6366f1;
          border-bottom-color: #6366f1;
          background-color: #f8fafc;
      }

      .nav-icon {
          margin-right: 8px;
          font-size: 16px;
      }

      /*  Added dropdown menu styles */
      .dropdown-arrow {
          margin-left: 8px;
          font-size: 12px;
          transition: transform 0.2s ease;
      }

      .dropdown-menu {
          position: absolute;
          top: 100%;
          /* ngay dưới menu item */
          left: 0;
          background: white;
          min-width: 200px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          border-radius: 8px;
          border: 1px solid #e5e7eb;
          opacity: 0;
          visibility: hidden;
          transform: translateY(10px);
          transition: all 0.2s ease;
          z-index: 1000;
          display: flex;
          flex-direction: column;
      }


      .nav-item:hover .dropdown-menu {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
      }

      .nav-item:hover .dropdown-arrow {
          transform: rotate(180deg);
      }

      .dropdown-item {
          display: block;
          padding: 12px 16px;
          color: #374151;
          text-decoration: none;
          transition: background-color 0.2s ease;
          border-bottom: 1px solid #f3f4f6;
      }

      .dropdown-item:last-child {
          border-bottom: none;
      }

      .dropdown-item:hover {
          /* background-color: #f8fafc; */
          color: #6366f1;
      }

      .dropdown-item:first-child {
          border-radius: 8px 8px 0 0;
      }

      .dropdown-item:last-child {
          border-radius: 0 0 8px 8px;
      }

      @media (max-width: 767px) {
          .dropdown-menu {
              display: none;
          }

          .dropdown-menu.show {
              display: flex;
              flex-direction: column;
          }

          .nav-menu {
              display: none;
              /* ẩn mặc định */
              flex-direction: column;
              position: absolute;
              top: 64px;
              /* chiều cao header nếu có */
              left: 0;
              width: 100%;
              background: white;
              border-top: 1px solid #e5e7eb;
              z-index: 999;
          }

          .nav-menu.show {
              display: flex;
              /* hiện khi nhấn hamburger */
          }

          .nav-item {
              left: -16px;
          }

          .dropdown-menu-config {
              left: 13px !important;
          }

          .dropdown-menu {
              position: static;
              /* menu con dạng cột */
              box-shadow: none;
              border: none;
              opacity: 1;
              visibility: visible;
              transform: none;
          }

          .nav-item:hover .dropdown-menu {
              display: block;
              /* hover không cần nữa, dùng click */
          }
      }
  </style>
  <script>
      document.addEventListener('DOMContentLoaded', function() {
          const toggle = document.querySelector('.nav-toggle');
          const menu = document.querySelector('.nav-menu');

          toggle.addEventListener('click', function() {
              menu.classList.toggle('show');
          });
      });
      document.querySelectorAll('.nav-item.has-dropdown > .nav-link').forEach(link => {
          link.addEventListener('click', function(e) {
              if (window.innerWidth < 768) {
                  e.preventDefault();
                  const dropdown = this.nextElementSibling;
                  dropdown.classList.toggle('show');
              }
          });
      });
  </script>