@if (auth()->user()->hasRole(1))
  <!-- Sidebar Menu -->
  <nav class="mt-2" style="max-height: 90vh; overflow-y: auto;">
  <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">  
    <!-- Add icons to the links using the .nav-icon class
         with font-awesome or any other icon font library -->
      <li class="nav-item">
          <a href="{{ route('dashboard.index') }}" class="nav-link d-flex align-items-center {{ request()->is('dashboard') ? 'active' : '' }}">
              <i class="nav-icon fas fa-th"></i>
              <p style="font-size: 14px">
                  Dashboard
                  {{-- <span class="right badge badge-danger">New</span> --}}
              </p>
          </a>
      </li>    

      <li class="nav-item">
          <a href="{{ route('client.index') }}" class="nav-link d-flex align-items-center {{ request()->is('client*') ? 'active' : '' }}">
              <i class="nav-icon fas fa-address-card"></i>
               <p style="font-size: 14px">
                  Client Management
              </p>
          </a>
      </li>    

      <li class="nav-item">
        <a href="{{ route('users.index') }}" class="nav-link d-flex align-items-center {{ request()->is('users*') ? 'active' : '' }}">
            <i class="nav-icon fas fa-users"></i>
            <p style="font-size: 14px">
                User Management
            </p>
        </a>
    </li>    

    <br>
    <li class="nav-header" style="color: #AAAAAA">Whatsapp API</li>
    <li class="nav-item">
      <a href="{{ route('phoneListWhatsapp.index') }}" class="nav-link d-flex align-items-center {{ request()->is('phoneListWhatsapp') ? 'active' : '' }}">
            <i class="nav-icon fab fa-whatsapp"></i>
              <p style="font-size: 14px">
                Phone Number
            </p>
        </a>
    </li>    

    <br>
    <li class="nav-header"  style="color: #AAAAAA">SelfV</li>
    <li class="nav-item">
      <a href="{{ route('selfv.index') }}" class="nav-link d-flex align-items-center {{ request()->is('selfv') ? 'active' : '' }}">
          <i class="nav-icon fas fa-hand-peace"></i>
          <p style="font-size: 14px">
              SelfV Management
          </p>
      </a>
    </li>    
    <li class="nav-item">
      <a href="{{ route('selfvTemplate.index') }}" class="nav-link d-flex align-items-center {{ request()->is('selfvTemplate') ? 'active' : '' }}">
        <i class="nav-icon fas fa-envelope"></i>
          <p style="font-size: 14px">
              Template Management
          </p>
      </a>
    </li>  
    <li class="nav-item">
      <a href="{{ route('selfvMonitoring.index') }}" class="nav-link d-flex align-items-center {{ request()->is('selfvMonitoring') ? 'active' : '' }}">
        <i class="nav-icon fas fa-desktop"></i>
          <p style="font-size: 14px">
              Api Monitoring
          </p>
      </a>
    </li>  
    {{-- <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-tachometer-alt"></i>
         <p style="font-size: 14px">
          Dashboard
          <i class="right fas fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../../index.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Dashboard v1</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../../index2.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Dashboard v2</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../../index3.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Dashboard v3</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="../widgets.html" class="nav-link">
        <i class="nav-icon fas fa-th"></i>
         <p style="font-size: 14px">
          Widgets
          <span class="right badge badge-danger">New</span>
        </p>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-copy"></i>
         <p style="font-size: 14px">
          Layout Options
          <i class="fas fa-angle-left right"></i>
          <span class="badge badge-info right">6</span>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../layout/top-nav.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Top Navigation</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../layout/top-nav-sidebar.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Top Navigation + Sidebar</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../layout/boxed.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Boxed</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../layout/fixed-sidebar.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Fixed Sidebar</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../layout/fixed-sidebar-custom.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Fixed Sidebar <small>+ Custom Area</small></p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../layout/fixed-topnav.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Fixed Navbar</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../layout/fixed-footer.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Fixed Footer</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../layout/collapsed-sidebar.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Collapsed Sidebar</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-chart-pie"></i>
         <p style="font-size: 14px">
          Charts
          <i class="right fas fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../charts/chartjs.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">ChartJS</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../charts/flot.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Flot</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../charts/inline.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Inline</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../charts/uplot.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">uPlot</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-tree"></i>
         <p style="font-size: 14px">
          UI Elements
          <i class="fas fa-angle-left right"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../UI/general.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">General</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../UI/icons.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Icons</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../UI/buttons.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Buttons</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../UI/sliders.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Sliders</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../UI/modals.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Modals & Alerts</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../UI/navbar.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Navbar & Tabs</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../UI/timeline.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Timeline</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../UI/ribbons.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Ribbons</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-edit"></i>
         <p style="font-size: 14px">
          Forms
          <i class="fas fa-angle-left right"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../forms/general.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">General Elements</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../forms/advanced.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Advanced Elements</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../forms/editors.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Editors</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../forms/validation.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Validation</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item menu-open">
      <a href="#" class="nav-link active">
        <i class="nav-icon fas fa-table"></i>
         <p style="font-size: 14px">
          Tables
          <i class="fas fa-angle-left right"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../tables/simple.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Simple Tables</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../tables/data.html" class="nav-link active">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">DataTables</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../tables/jsgrid.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">jsGrid</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-header">EXAMPLES</li>
    <li class="nav-item">
      <a href="../calendar.html" class="nav-link">
        <i class="nav-icon far fa-calendar-alt"></i>
         <p style="font-size: 14px">
          Calendar
          <span class="badge badge-info right">2</span>
        </p>
      </a>
    </li>
    <li class="nav-item">
      <a href="../gallery.html" class="nav-link">
        <i class="nav-icon far fa-image"></i>
         <p style="font-size: 14px">
          Gallery
        </p>
      </a>
    </li>
    <li class="nav-item">
      <a href="../kanban.html" class="nav-link">
        <i class="nav-icon fas fa-columns"></i>
         <p style="font-size: 14px">
          Kanban Board
        </p>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon far fa-envelope"></i>
         <p style="font-size: 14px">
          Mailbox
          <i class="fas fa-angle-left right"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../mailbox/mailbox.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Inbox</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../mailbox/compose.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Compose</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../mailbox/read-mail.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Read</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-book"></i>
         <p style="font-size: 14px">
          Pages
          <i class="fas fa-angle-left right"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../examples/invoice.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Invoice</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/profile.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Profile</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/e-commerce.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">E-commerce</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/projects.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Projects</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/project-add.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Project Add</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/project-edit.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Project Edit</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/project-detail.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Project Detail</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/contacts.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Contacts</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/faq.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">FAQ</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/contact-us.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Contact us</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon far fa-plus-square"></i>
         <p style="font-size: 14px">
          Extras
          <i class="fas fa-angle-left right"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">
              Login & Register v1
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="../examples/login.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                 <p style="font-size: 14px">Login v1</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="../examples/register.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                 <p style="font-size: 14px">Register v1</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="../examples/forgot-password.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                 <p style="font-size: 14px">Forgot Password v1</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="../examples/recover-password.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                 <p style="font-size: 14px">Recover Password v1</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">
              Login & Register v2
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="../examples/login-v2.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                 <p style="font-size: 14px">Login v2</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="../examples/register-v2.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                 <p style="font-size: 14px">Register v2</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="../examples/forgot-password-v2.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                 <p style="font-size: 14px">Forgot Password v2</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="../examples/recover-password-v2.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                 <p style="font-size: 14px">Recover Password v2</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="../examples/lockscreen.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Lockscreen</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/legacy-user-menu.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Legacy User Menu</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/language-menu.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Language Menu</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/404.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Error 404</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/500.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Error 500</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/pace.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Pace</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../examples/blank.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Blank Page</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../../starter.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Starter Page</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-search"></i>
         <p style="font-size: 14px">
          Search
          <i class="fas fa-angle-left right"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="../search/simple.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Simple Search</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="../search/enhanced.html" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Enhanced</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-header">MISCELLANEOUS</li>
    <li class="nav-item">
      <a href="../../iframe.html" class="nav-link">
        <i class="nav-icon fas fa-ellipsis-h"></i>
         <p style="font-size: 14px">Tabbed IFrame Plugin</p>
      </a>
    </li>
    <li class="nav-item">
      <a href="https://adminlte.io/docs/3.1/" class="nav-link">
        <i class="nav-icon fas fa-file"></i>
         <p style="font-size: 14px">Documentation</p>
      </a>
    </li>
    <li class="nav-header">MULTI LEVEL EXAMPLE</li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="fas fa-circle nav-icon"></i>
         <p style="font-size: 14px">Level 1</p>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-circle"></i>
         <p style="font-size: 14px">
          Level 1
          <i class="right fas fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Level 2</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">
              Level 2
              <i class="right fas fa-angle-left"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="#" class="nav-link">
                <i class="far fa-dot-circle nav-icon"></i>
                 <p style="font-size: 14px">Level 3</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">
                <i class="far fa-dot-circle nav-icon"></i>
                 <p style="font-size: 14px">Level 3</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">
                <i class="far fa-dot-circle nav-icon"></i>
                 <p style="font-size: 14px">Level 3</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
             <p style="font-size: 14px">Level 2</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="fas fa-circle nav-icon"></i>
         <p style="font-size: 14px">Level 1</p>
      </a>
    </li>
    <li class="nav-header">LABELS</li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon far fa-circle text-danger"></i>
        <p class="text">Important</p>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon far fa-circle text-warning"></i>
         <p style="font-size: 14px">Warning</p>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon far fa-circle text-info"></i>
         <p style="font-size: 14px">Informational</p>
      </a>
    </li> --}}
  </ul>
</nav>
<!-- /.sidebar-menu -->
@else
@include('layouts.sidebars.client_sidebar')
@endif