{{-- NAVBAR --}}
<nav class="navbar navbar-expand-lg main-navbar sticky">
  <div class="form-inline mr-auto">
      <ul class="navbar-nav mr-3">
          <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg collapse-btn"> 
              <i data-feather="menu"></i>
          </a></li>
          {{-- <li>
              <form class="form-inline mr-auto">
                  <div class="search-element">
                      <input class="form-control" type="search" placeholder="{{ __('messages.navbar.search') }}" aria-label="{{ __('messages.navbar.search') }}" data-width="200">
                      <button class="btn" type="submit">
                          <i class="fas fa-search"></i>
                      </button>
                  </div>
              </form>
          </li> --}}
      </ul>
  </div>
  <ul class="navbar-nav navbar-right">
      {{-- LANGUAGE DROPDOWN --}}
      <li class="dropdown">
          <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg">
              @php
                  $locale = app()->getLocale();
                  $flag = $locale === 'ar' ? 'arabic.png' : 'english.png';
                  $language = $locale === 'ar' ? __('messages.navbar.arabic') : __('messages.navbar.english');
              @endphp
              <img src="{{ asset('assets/img/flags/' . $flag) }}" alt="{{ $language }}" class="flag-icon">
              <span class="d-sm-none d-lg-inline-block">{{ $language }}</span>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
              <a href="{{ route('lang.switch', 'en') }}" class="dropdown-item">
                  <img src="{{ asset('assets/img/flags/english.png') }}" alt="{{ __('messages.navbar.english') }}" class="flag-icon">
                  {{ __('messages.navbar.english') }}
              </a>
              <a href="{{ route('lang.switch', 'ar') }}" class="dropdown-item">
                  <img src="{{ asset('assets/img/flags/arabic.png') }}" alt="{{ __('messages.navbar.arabic') }}" class="flag-icon">
                  {{ __('messages.navbar.arabic') }}
              </a>
          </div>
      </li>

      {{-- TRANSLATE --}}
      {{-- <li class="nav-item">
          <div id="google_translate_element" style="padding-top: 8px;"></div>
      </li> --}}

      <li><a href="#" class="nav-link nav-link-lg fullscreen-btn">
          <i data-feather="maximize"></i>
      </a></li>

      {{-- <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown"
          class="nav-link nav-link-lg message-toggle"><i data-feather="mail" class="mailAnim"></i>
          <span class="badge headerBadge1">
          </span> </a>
          <div class="dropdown-menu dropdown-list dropdown-menu-right pullDown">
              <div class="dropdown-header">
                  {{ __('messages.navbar.notifications') }}
                  <div class="float-right">
                      <a href="#">{{ __('messages.navbar.view_all') }}</a>
                  </div>
              </div>
              <div class="dropdown-list-content dropdown-list-message">
                  <a href="#" class="dropdown-item"> 
                      <span class="dropdown-item-avatar text-white"> 
                          <img alt="image" src="assets/img/users/user-1.png" class="rounded-circle">
                      </span> 
                      <span class="dropdown-item-desc"> 
                          <span class="message-user">John Deo</span>
                          <span class="time messege-text">Please check your mail !!</span>
                          <span class="time">2 Min Ago</span>
                      </span>
                  </a> 
                  <a href="#" class="dropdown-item"> 
                      <span class="dropdown-item-avatar text-white">
                          <img alt="image" src="assets/img/users/user-2.png" class="rounded-circle">
                      </span> 
                      <span class="dropdown-item-desc"> 
                          <span class="message-user">Sarah Smith</span> 
                          <span class="time messege-text">Request for leave application</span>
                          <span class="time">5 Min Ago</span>
                      </span>
                  </a> 
                  <a href="#" class="dropdown-item"> 
                      <span class="dropdown-item-avatar text-white">
                          <img alt="image" src="assets/img/users/user-5.png" class="rounded-circle">
                      </span> 
                      <span class="dropdown-item-desc"> 
                          <span class="message-user">Jacob Ryan</span> 
                          <span class="time messege-text">Your payment invoice is generated.</span> 
                          <span class="time">12 Min Ago</span>
                      </span>
                  </a> 
                  <a href="#" class="dropdown-item"> 
                      <span class="dropdown-item-avatar text-white">
                          <img alt="image" src="assets/img/users/user-4.png" class="rounded-circle">
                      </span> 
                      <span class="dropdown-item-desc"> 
                          <span class="message-user">Lina Smith</span> 
                          <span class="time messege-text">hii John, I have upload doc related to task.</span> 
                          <span class="time">30 Min Ago</span>
                      </span>
                  </a> 
                  <a href="#" class="dropdown-item"> 
                      <span class="dropdown-item-avatar text-white">
                          <img alt="image" src="assets/img/users/user-3.png" class="rounded-circle">
                      </span> 
                      <span class="dropdown-item-desc"> 
                          <span class="message-user">Jalpa Joshi</span> 
                          <span class="time messege-text">Please do as specify. Let me know if you have any query.</span> 
                          <span class="time">1 Days Ago</span>
                      </span>
                  </a> 
                  <a href="#" class="dropdown-item"> 
                      <span class="dropdown-item-avatar text-white">
                          <img alt="image" src="assets/img/users/user-2.png" class="rounded-circle">
                      </span> 
                      <span class="dropdown-item-desc"> 
                          <span class="message-user">Sarah Smith</span> 
                          <span class="time messege-text">Client Requirements</span>
                          <span class="time">2 Days Ago</span>
                      </span>
                  </a>
              </div>
              <div class="dropdown-footer text-center">
                  <a href="#">{{ __('messages.navbar.view_all') }} <i class="fas fa-chevron-right"></i></a>
              </div>
          </div>
      </li> --}}

      <li class="dropdown dropdown-list-toggle">
          <a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg">
              <i data-feather="bell"></i>
          </a>
          <div class="dropdown-menu dropdown-list dropdown-menu-right pullDown">
              <div class="dropdown-header">
                  {{ __('messages.navbar.notifications') }}
                  <div class="float-right">
                      <a href="#">{{ __('messages.navbar.view_all') }}</a>
                  </div>
              </div>
              <div class="dropdown-list-content dropdown-list-icons">
                  <a href="#" class="dropdown-item dropdown-item-unread"> 
                      <span class="dropdown-item-icon l-bg-orange text-white"> 
                          <i class="far fa-envelope"></i>
                      </span> 
                      <span class="dropdown-item-desc"> 
                          You got new mail, please check. 
                          <span class="time">2 Min Ago</span>
                      </span>
                  </a> 
                  <a href="#" class="dropdown-item"> 
                      <span class="dropdown-item-icon l-bg-purple text-white"> 
                          <i class="fas fa-bell"></i>
                      </span> 
                      <span class="dropdown-item-desc"> 
                          Meeting with <b>John Deo</b> and <b>Sarah Smith</b> at 10:30 am 
                          <span class="time">10 Hours Ago</span>
                      </span>
                  </a>
              </div>
              <div class="dropdown-footer text-center">
                  <a href="#">{{ __('messages.navbar.view_all') }} <i class="fas fa-chevron-right"></i></a>
              </div>
          </div>
      </li>

      <li class="dropdown">
          <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user"> 
              <img alt="image" src="{{ auth('employee')->user()->image }}" class="user-img-radious-style"> 
              <span class="d-sm-none d-lg-inline-block"></span>
          </a>
          <div class="dropdown-menu dropdown-menu-right pullDown">
              <div class="dropdown-title">{{ __('messages.navbar.salam') }} {{ auth('employee')->user()->fname . ' ' . auth('employee')->user()->lname }}</div>
              <a href="{{ route('employee.profile') }}" class="dropdown-item has-icon">
                  <i class="far fa-user"></i> {{ __('messages.navbar.profile') }}
              </a>
              <div class="dropdown-divider"></div>
              <a href="{{ route('employee.logout') }}" class="dropdown-item has-icon text-danger"> 
                  <i class="fas fa-sign-out-alt"></i> {{ __('messages.navbar.logout') }}
              </a>
          </div>
      </li>
  </ul>
</nav>