@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
  <ul class="navbar-nav bg-gradient-primary-config sidebar sidebar-dark accordion" id="accordionSidebar">

      <!-- Sidebar - Brand -->
      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="{{ route('daily.index_month') }}">
          {{-- SVG logo (hidden by default, shown when sidebar is collapsed) --}}
          <img src="{{ asset('img/logo_white.png') }}" alt="LVT" class="sidebar-brand-icon" />
          <div class="sidebar-brand-text mx-3"> <img src="{{ asset('img/logo_white.png') }}" alt=""  height="40px"></div>
      </a>

      <!-- Divider -->
      <hr class="sidebar-divider my-0">

      <!-- Nav Item - Dashboard -->
      {{-- <li class="nav-item active">
          <a class="nav-link" href="index.html">
              <i class="fas fa-fw fa-tachometer-alt"></i>
              <span>Dashboard</span></a>
      </li> --}}


      <!-- Nav Item - Pages Collapse Menu -->
      {{-- <li class="nav-item">
          <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
              aria-expanded="true" aria-controls="collapseTwo">
              <i class="fas fa-fw fa-cog"></i>
              <span>Components</span>
          </a>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
              <div class="bg-white py-2 collapse-inner rounded">
                  <h6 class="collapse-header">Custom Components:</h6>
                  <a class="collapse-item" href="buttons.html">Buttons</a>
                  <a class="collapse-item" href="cards.html">Cards</a>
              </div>
          </div>
      </li> --}}

      <!-- Nav Item - Utilities Collapse Menu -->
      {{-- <li class="nav-item">
          <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
              aria-expanded="true" aria-controls="collapseUtilities">
              <span>Utilities</span>
          </a>
          <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
              data-parent="#accordionSidebar">
              <div class=" py-2 collapse-inner rounded">
                  <a class="collapse-item text-white" href="utilities-color.html">Colors</a>
                  <a class="collapse-item text-white" href="utilities-border.html">Borders</a>
                  <a class="collapse-item text-white" href="utilities-animation.html">Animations</a>
                  <a class="collapse-item text-white" href="utilities-other.html">Other</a>
              </div>
          </div>
      </li> --}}

      <!-- Divider -->
      {{-- <hr class="sidebar-divider">

      <!-- Heading -->
      <div class="sidebar-heading">
          Addons
      </div>

      <!-- Nav Item - Pages Collapse Menu -->
      <li class="nav-item">
          <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
              aria-expanded="true" aria-controls="collapsePages">
              <i class="fas fa-fw fa-folder"></i>
              <span>Pages</span>
          </a>
          <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
              <div class="bg-white py-2 collapse-inner rounded">
                  <h6 class="collapse-header">Login Screens:</h6>
                  <a class="collapse-item" href="login.html">Login</a>
                  <a class="collapse-item" href="register.html">Register</a>
                  <a class="collapse-item" href="forgot-password.html">Forgot Password</a>
                  <div class="collapse-divider"></div>
                  <h6 class="collapse-header">Other Pages:</h6>
                  <a class="collapse-item" href="404.html">404 Page</a>
                  <a class="collapse-item" href="blank.html">Blank Page</a>
              </div>
          </div>
      </li>

      <!-- Nav Item - Charts -->
      <li class="nav-item">
          <a class="nav-link" href="charts.html">
              <i class="fas fa-fw fa-chart-area"></i>
              <span>Charts</span></a>
      </li> --}}

      <!-- Nav Item - Tables -->
      @foreach ($sidebarItems as $item)
          @if (isset($item['children']))
              {{-- Menu nhóm có collapse --}}
              <li class="nav-item">
                  <a class="nav-link collapsed" href="#" data-toggle="collapse"
                      data-target="#collapse-{{ Str::slug($item['label']) }}">
                      <span>
                          @if (isset($item['icon']))
                              <i class="{{ $item['icon'] }} mr-2"></i>
                          @endif
                          {{ $item['label'] }}
                      </span>
                  </a>
                  <div id="collapse-{{ Str::slug($item['label']) }}" class="collapse" data-parent="#accordionSidebar">
                      <div class="collapse-inner bg-main-mobi rounded">
                          @foreach ($item['children'] as $child)
                              @if (in_array($child['label'], ['Danh mục người dùng', 'Vai trò']))
                                  @if(Auth::user()->role_id == 1)
                                      <a class="collapse-item {{ request()->routeIs($child['route']) ? 'active' : '' }}"
                                          href="{{ route($child['route']) }}">
                                          @if (isset($child['icon']))
                                              <i class="{{ $child['icon'] }} mr-2"></i>
                                          @endif {{ $child['label'] }}
                                      </a>
                                  @endif
                              @else
                                  <a class="collapse-item {{ request()->routeIs($child['route']) ? 'active' : '' }}"
                                      href="{{ route($child['route']) }}">
                                      @if (isset($child['icon']))
                                          <i class="{{ $child['icon'] }} mr-2"></i>
                                      @endif{{ $child['label'] }}
                                  </a>
                              @endif
                          @endforeach
                      </div>
                  </div>
              </li>
              <hr class="sidebar-divider my-0">
          @else
              {{-- Menu thường --}}
              @if ($item['label'] === 'Vai trò')
                  @if(Auth::user()->role_id == 1)
                      <li class="nav-item {{ request()->routeIs($item['route']) ? 'active' : '' }}">
                          <a class="nav-link" href="{{ route($item['route']) }}">
                              <span>
                                  @if (isset($item['icon']))
                                      <i class="{{ $item['icon'] }} mr-2"></i>
                                  @endif
                                  {{ $item['label'] }}
                              </span>
                          </a>
                      </li>
                  @endif
              @else
                  <li class="nav-item {{ request()->routeIs($item['route']) ? 'active' : '' }}">
                      <a class="nav-link" href="{{ route($item['route']) }}">
                          <span>
                              @if (isset($item['icon']))
                                  <i class="{{ $item['icon'] }} mr-2"></i>
                              @endif
                              {{ $item['label'] }}
                          </span>
                      </a>
                  </li>
              @endif
              <hr class="sidebar-divider my-0">
          @endif
      @endforeach

      <!-- Divider -->

      <!-- Sidebar Toggler (Sidebar) -->
      <div class="text-center d-none d-md-inline mt-4">
          <button class="rounded-circle border-0" id="sidebarToggle"></button>
      </div>

      <!-- Sidebar Message -->
      {{-- <div class="sidebar-card d-none d-lg-flex">
          <img class="sidebar-card-illustration mb-2" src="img/undraw_rocket.svg" alt="...">
          <p class="text-center mb-2"><strong>SB Admin Pro</strong> is packed with premium features, components, and
              more!</p>
          <a class="btn btn-success btn-sm" href="https://startbootstrap.com/theme/sb-admin-pro">Upgrade to Pro!</a>
      </div> --}}

  </ul>
  <style scoped>
      .sidebar.toggled .nav-item .nav-link {
          text-align: start !important;
          padding: 0.75rem 1rem;
          width: 6.5rem;
      }

      .sidebar .sidebar-brand .sidebar-brand-text {
          display: block;
      }

      .sidebar-brand-icon {
          width: 40px;
          height: auto;
          display: none;
          margin-right: 0.5rem;
      }

      /* Ensure the icon shows whenever the sidebar is toggled, regardless of viewport width */
      .sidebar.toggled .sidebar-brand .sidebar-brand-text {
          display: none !important;
      }
      .sidebar.toggled .sidebar-brand .sidebar-brand-icon {
          display: inline-block !important;
      }

      .bg-gradient-primary-config {
          width: 300px !important;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
      .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
          background: none !important;
      }

      .sidebar .nav-item .collapse .collapse-inner .collapse-item,
      .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
          color: rgba(255, 255, 255, .8) !important;
      }

      .sidebar .nav-item .collapse .collapse-inner .collapse-item,
      .sidebar .nav-item .collapsing .collapse-inner .collapse-item .active {
          color: white !important;
      }

      @media (max-width: 767.98px) {
          .bg-main-mobi {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
      }

      @media (min-width: 768px) {
          .sidebar.toggled .nav-item .collapse .collapse-inner {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          .sidebar.toggled .nav-item .nav-link {
              text-align: start !important;
              padding: 0.75rem 1rem;
              width: 6.5rem;
          }
      }
  </style>
  <script>
    //   $("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
    //       $("body").toggleClass("sidebar-toggled");
    //       $(".sidebar").toggleClass("toggled");
    //       if ($(".sidebar").hasClass("toggled")) {
    //           $('.sidebar .collapse').collapse('hide');
    //       };
    //   });
  </script>