@php
    $menus_top = $menus['menus_top'];
    $menus_icon = $menus['menus_icon'];
    $array_icons_only = array('info', 'paelo_upd', 'logout');
@endphp
<!--  Header Start -->
<header class="topbar">
  <div class="with-vertical">
    <!-- ---------------------------------- -->
    <!-- Start Vertical Layout Header -->
    <!-- ---------------------------------- -->
    <nav class="navbar navbar-expand-lg p-0">
      <ul class="navbar-nav" id='navbar'>
        <li class="nav-item nav-icon-hover-bg dark rounded-circle d-flex">
          <a class="nav-link sidebartoggler" id="headerCollapse" href="javascript:void(0)">
            <iconify-icon icon="solar:hamburger-menu-line-duotone" class="fs-6"></iconify-icon>
          </a>
        </li>
      </ul>

      <div class="d-block d-lg-none py-4 py-xl-0">
        <img src="{{ url('assets/images/logos/light-logo.svg') }}" alt="Logo" height="35px"/>
      </div>
      <ul class="navbar-nav navbar-toggler p-0 border-0">
        <li class="nav-item nav-icon-hover-bg dark rounded-circle d-flex">
          <a class="nav-link rounded-circle" href="javascript:void(0)" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <iconify-icon icon="solar:menu-dots-bold-duotone" class="fs-6"></iconify-icon>
          </a>
        </li>
      </ul>

      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <div class="d-flex align-items-center justify-content-between">
          <ul class="navbar-nav flex-row ms-auto align-items-center justify-content-center">
            <li class="nav-item search-box d-none d-xl-flex align-items-center">
              <div class="nav-link">
                <form class="app-search position-relative">
                  <input type="text" class="form-control rounded-pill border-0 shadow-none" placeholder="{{ __('layouts.search_for') }}..." />
                  <a href="javascript:void(0)" class="srh-btn">
                    <iconify-icon icon="solar:magnifer-linear" class="position-absolute top-50 end-0 translate-middle-y me-2 fs-5"></iconify-icon>
                  </a>
                </form>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link moon dark-layout nav-icon-hover-bg dark rounded-circle" href="javascript:save_setting('theme', 'dark')" id='modesombre'>
                <iconify-icon icon="solar:moon-line-duotone" class="moon fs-6"></iconify-icon>
              </a>
              <a class="nav-link sun light-layout nav-icon-hover-bg dark rounded-circle" href="javascript:save_setting('theme', 'light')" style="display: none">
                <iconify-icon icon="solar:sun-2-line-duotone" class="sun fs-6"></iconify-icon>
              </a>
            </li>
            <li class="nav-item">
              <a id="tuto" onclick="resetIntro()" class="nav-link nav-icon-hover-bg rounded-circle" href="#">
                <iconify-icon icon="solar:play-line-duotone" class="fs-6"></iconify-icon>
              </a>
            </li>
            @foreach ($array_icons_only as $val)
              @if (array_key_exists($val, $menus_top) && $val != 'logout')
                <li class="nav-item nav-icon-hover-bg dark rounded-circle">
                  <a href="{{ $menus_top[$val] }}" class="nav-link rounded-circle" title="{{ __('menus.'.$val) }}">
                    <iconify-icon icon="{{ $menus_icon[$val] }}" class="fs-6"></iconify-icon>
                  </a>
                </li>
              @endif
            @endforeach
            <!-- ------------------------------- -->
            <!-- start language Dropdown -->
            <!-- ------------------------------- -->
            <li class="nav-item dropdown nav-icon-hover-bg dark rounded-circle">
              <a class="nav-link" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="{{ url('assets/images/flag/icon-flag-'.$locale.'.svg') }}" alt="monster-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
                <div class="message-body">
                  @foreach ($langs as $lang)
                    <a href="{{ url('/'.$lang->code.$uri) }}" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
                      <div class="position-relative">
                        <img src="{{ url('assets/images/flag/icon-flag-'.$lang->code.'.svg') }}" alt="monster-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
                      </div>
                      <p class="mb-0 fs-3">{{ __($lang->name) }}</p>
                    </a>
                  @endforeach
                </div>
              </div>
            </li>
            <!-- ------------------------------- -->
            <!-- end language Dropdown -->
            <!-- ------------------------------- -->

            <!-- ------------------------------- -->
            <!-- start profile Dropdown -->
            <!-- ------------------------------- -->
            <li class="nav-item dropdown">
              <a class="nav-link" href="javascript:void(0)" id="drop1" aria-expanded="false">
                <div class="d-flex align-items-center lh-base">
                  <img src="{{ $user->avatar ? Storage::url($user->avatar) : url('assets/images/profile/user-1.jpg') }}" class="rounded-circle" width="35" height="35" alt="monster-img" />
                </div>
              </a>
              <div class="dropdown-menu content-dd dropdown-menu-end animated flipInY" aria-labelledby="drop1">
                <div class="profile-dropdown position-relative" data-simplebar>
                  <div class="py-3 px-7 pb-0">
                    <h5 class="mb-0 fs-5">{{ __("menus.user_profile") }}</h5>
                  </div>
                  <div class="d-flex align-items-center py-9 mx-7 border-bottom">
                    <img src="{{ $user->avatar ? Storage::url($user->avatar) : url('assets/images/profile/user-1.jpg') }}" class="rounded-circle" width="80" height="80" alt="" />
                    <div class="ms-3">
                      <h5 class="mb-1 fs-4">{{ Auth::user()->lname }} {{ Auth::user()->fname }}</h5>
                      <span class="mb-1 d-block">{{ optional(optional(Auth::user())->role)->name }} {{ optional(Auth::user()->work)->name }}</span>
                      <p class="mb-0 d-flex align-items-center gap-2">
                        <i class="ti ti-mail fs-4"></i> {{ Auth::user()->email }}
                      </p>
                    </div>
                  </div>
                  <div class="message-body">
                    @foreach ($menus_top as $key => $val)
                      @if (!in_array($key, $array_icons_only))
                        <a href="{{ $val }}" class="py-8 px-7 mt-8 d-flex align-items-center">
                          <span class="d-flex align-items-center justify-content-center bg-info-subtle rounded p-6 fs-7 text-info">
                            <iconify-icon icon="$menus_icon[$key]"></iconify-icon>
                          </span>
                          <div class="w-75 d-inline-block v-middle ps-3">
                            <h6 class="mb-1 fs-3 lh-base">{{ __("menus.".$key) }}</h6>
                            <span class="fs-2 d-block text-body-secondary">{{ __("menus.user_account") }}</span>
                          </div>
                        </a>
                      @endif
                    @endforeach
                  </div>
                  <div class="d-grid py-4 px-7 pt-8">
                    <a href="{{ $menus_top['logout'] }}" class="btn btn-info">{{ __("menus.logout") }}</a>
                  </div>
                </div>
              </div>
            </li>
            <!-- ------------------------------- -->
            <!-- end profile Dropdown -->
            <!-- ------------------------------- -->
          </ul>
        </div>
      </div>
    </nav>
    <!-- ---------------------------------- -->
    <!-- End Vertical Layout Header -->
    <!-- ---------------------------------- -->

    <!-- ------------------------------- -->
    <!-- apps Dropdown in Small screen -->
    <!-- ------------------------------- -->
    <!--  Mobilenavbar -->
    <div class="offcanvas offcanvas-start pt-0" data-bs-scroll="true" tabindex="-1" id="mobilenavbar" aria-labelledby="offcanvasWithBothOptionsLabel">
      <nav class="sidebar-nav scroll-sidebar">
        <div class="offcanvas-header justify-content-between ps-0 pt-0">
          <div class="brand-logo d-flex align-items-center">
            <a href="./main/index.html" class="text-nowrap logo-img">
              <img src="{{ url('assets/images/logos/dark-logo.svg') }}" alt="Logo" class="dark-logo" />
              <img src="{{ url('assets/images/logos/light-logo.svg') }}" alt="Logo" class="light-logo" />
            </a>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body pt-0" data-simplebar style="height: calc(100vh - 80px)">
          
        </div>
      </nav>
    </div>
  </div>
  <div class="app-header with-horizontal">
    <nav class="navbar navbar-expand-xl container-fluid p-0">
      <ul class="navbar-nav align-items-center">
        <li class="nav-item d-flex d-xl-none">
          <a class="nav-link sidebartoggler nav-icon-hover-bg rounded-circle" id="sidebarCollapse" href="javascript:void(0)">
            <iconify-icon icon="solar:hamburger-menu-line-duotone" class="fs-7"></iconify-icon>
          </a>
        </li>
        <li class="nav-item d-none d-xl-flex align-items-center">
            <a href="{{ route('admin.dashboard', $locale) }}" class="text-nowrap nav-link">
              <img src="{{ url('assets/images/logos/light-logo.svg') }}" alt="Logo" height="50px"/>
            </a>
          </li>
      </ul>
      <ul class="navbar-nav navbar-toggler p-0 border-0">
        <li class="nav-item nav-icon-hover-bg dark rounded-circle d-flex">
          <a class="nav-link rounded-circle" href="javascript:void(0)" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <iconify-icon icon="solar:menu-dots-bold-duotone" class="fs-6"></iconify-icon>
          </a>
        </li>
      </ul>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <div class="d-flex align-items-center justify-content-between px-0 px-xl-8">
          <ul class="navbar-nav flex-row mx-auto ms-lg-auto align-items-center justify-content-center">
            <li class="nav-item search-box d-none d-xl-flex align-items-center">
              <div class="nav-link">
                <form class="app-search position-relative">
                  <input type="text" class="form-control rounded-pill border-0 shadow-none" placeholder="{{ __('layouts.search_for') }}..." />
                  <a href="javascript:void(0)" class="srh-btn">
                    <iconify-icon icon="solar:magnifer-linear" class="position-absolute top-50 end-0 translate-middle-y me-2 fs-5"></iconify-icon>
                  </a>
                </form>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-icon-hover-bg rounded-circle moon dark-layout" href="javascript:save_setting('theme', 'dark');">
                <iconify-icon icon="solar:moon-line-duotone" class="moon fs-6"></iconify-icon>
              </a>
              <a class="nav-link nav-icon-hover-bg rounded-circle sun light-layout" href="javascript:save_setting('theme', 'light');" style="display: none">
                <iconify-icon icon="solar:sun-2-line-duotone" class="sun fs-6"></iconify-icon>
              </a>
            </li>

            @foreach ($array_icons_only as $val)
              @if (array_key_exists($val, $menus_top) && $val != 'logout')
                <li class="nav-item nav-icon-hover-bg dark rounded-circle">
                  <a href="{{ $menus_top[$val] }}" class="nav-link rounded-circle" title="{{ __('menus.'.$val) }}">
                    <iconify-icon icon="{{ $menus_icon[$val] }}" class="fs-6"></iconify-icon>
                  </a>
                </li>
              @endif
            @endforeach
            <!-- ------------------------------- -->
            <!-- start language Dropdown -->
            <!-- ------------------------------- -->
            <li class="nav-item dropdown nav-icon-hover-bg dark rounded-circle">
              <a class="nav-link" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="{{ url('assets/images/flag/icon-flag-'.$locale.'.svg') }}" alt="monster-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
                <div class="message-body">
                  @foreach ($langs as $lang)
                    <a href="{{ url('/'.$lang->code.$uri) }}" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
                      <div class="position-relative">
                        <img src="{{ url('assets/images/flag/icon-flag-'.$lang->code.'.svg') }}" alt="monster-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
                      </div>
                      <p class="mb-0 fs-3">{{ __($lang->name) }}</p>
                    </a>
                  @endforeach
                </div>
              </div>
            </li>
            <!-- ------------------------------- -->
            <!-- end language Dropdown -->
            <!-- ------------------------------- -->

            <!-- ------------------------------- -->
            <!-- start profile Dropdown -->
            <!-- ------------------------------- -->
            <li class="nav-item dropdown">
              <a class="nav-link" href="javascript:void(0)" id="drop1" aria-expanded="false">
                <div class="d-flex align-items-center lh-base">
                  <img src="{{ url('assets/images/profile/user-1.jpg') }}" class="rounded-circle" width="35" height="35" alt="monster-img" />
                </div>
              </a>
              <div class="dropdown-menu content-dd dropdown-menu-end animated flipInY" aria-labelledby="drop1">
                <div class="profile-dropdown position-relative" data-simplebar>
                  <div class="py-3 px-7 pb-0">
                    <h5 class="mb-0 fs-5">{{ __("menus.user_profile") }}</h5>
                  </div>
                  <div class="d-flex align-items-center py-9 mx-7 border-bottom">
                    <img src="{{ url('assets/images/profile/user-1.jpg') }}" class="rounded-circle" width="80" height="80" alt="" />
                    <div class="ms-3">
                      <h5 class="mb-1 fs-4">{{ Auth::user()->lname }} {{ Auth::user()->fname }}</h5>
                      <span class="mb-1 d-block">{{ optional(optional(Auth::user())->role)->name }} {{ optional(Auth::user()->work)->name }}</span>
                      <p class="mb-0 d-flex align-items-center gap-2">
                        <i class="ti ti-mail fs-4"></i> {{ Auth::user()->email }}
                      </p>
                    </div>
                  </div>
                  <div class="message-body">
                    @foreach ($menus_top as $key => $val)
                      @if (!in_array($key, $array_icons_only))
                        <a href="{{ $val }}" class="py-8 px-7 mt-8 d-flex align-items-center">
                          <span class="d-flex align-items-center justify-content-center bg-info-subtle rounded p-6 fs-7 text-info">
                            <iconify-icon icon="$menus_icon[$key]"></iconify-icon>
                          </span>
                          <div class="w-75 d-inline-block v-middle ps-3">
                            <h6 class="mb-1 fs-3 lh-base">{{ __("menus.".$key) }}</h6>
                            <span class="fs-2 d-block text-body-secondary">{{ __("menus.user_account") }}</span>
                          </div>
                        </a>
                      @endif
                    @endforeach
                  </div>
                  <div class="d-grid py-4 px-7 pt-8">
                    <a href="{{ $menus_top['logout'] }}" class="btn btn-info">{{ __("menus.logout") }}</a>
                  </div>
                </div>
              </div>
            </li>
            <!-- ------------------------------- -->
            <!-- end profile Dropdown -->
            <!-- ------------------------------- -->
          </ul>
        </div>
      </div>
    </nav>

  </div>
</header>
<!--  Header End -->