  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-dark navbar-gray">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button" ><i class="fas fa-bars  pt-1"></i></a>
        
      </li>
      <li class="nav-item">
        <a type="button" class="nav-link" href="{{url()->previous()}}" data-toggle="tooltip" data-placement="bottom" title="Go Back">
          <i class="fas fa-arrow-circle-left mr-1 pt-1"></i>
        </a>
      </li>
      <li class="nav-item nav-link d-sm-inline-block" style="padding:0px;">
          {{-- Render Global Search Vue Component --}}
          <router-view class="global_search"></router-view>
      </li>
      <li class="nav-item dropdown">
        <a id="dropdownSubMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Quick Add</a>
        <ul aria-labelledby="dropdownSubMenu1" class="dropdown-menu border-0 shadow  bg-light-gray" style="left: 0px; right: inherit;">
          <li><a href="{{url('lead/create')}}" class="dropdown-item">Lead</a></li>
          <li><a href="{{url('customer/create')}}" class="dropdown-item">Customer</a></li>
          <li><a href="{{url('proposal/create')}}" class="dropdown-item">Proposal</a></li>
          <li><a href="{{url('estimate/create')}}" class="dropdown-item">Estimate</a></li>
          <li><a href="{{url('invoice/create')}}" class="dropdown-item">Invoice</a></li>
          <li><a href="{{url('media')}}" class="dropdown-item">Media</a></li>
          <li><a href="{{url('task')}}" class="dropdown-item">Task</a></li>
          <li><a href="{{url('reminder')}}" class="dropdown-item">Reminder</a></li>
        </ul>
      </li>

    </ul>
    
    <ul class="navbar-nav ml-auto">


      {{-- Language Selector --}}

      <li class="nav-item nav-link  d-sm-inline-block" >
        <form action="{{url('lang')}}" method="get">
          @csrf
          @php
              $langs = config('constants.LOCALES');
          @endphp
          <select name="lang_code" onchange='this.form.submit()' 
          style="
          color: rgb(0, 0, 0);
          font-weight: bold;
          border: 2px solid white;
          border-radius: 10%;
          padding-left:3px;
          ">
            @foreach ($langs as $lang)
                @if ($lang == session('applocale'))
                  <option value="{{$lang}}" selected>{{$lang}}</option>
                @else
                  <option value="{{$lang}}">{{$lang}}</option>
                @endif
            @endforeach
          </select>
          <noscript><input type="submit" value="Submit"></noscript>
        </form>
      </li>


      <!-- Notifications Dropdown Menu -->
      @if(Session::get('reminders') != null)
          @php
              $reminder_count = json_decode(Session::get('reminders'))->todays_reminders_count;
              $reminders = json_decode(Session::get('reminders'))->todays_reminders;
          @endphp    
      @else 
          @php
              $reminder_count = 0;
              $reminders = null;
          @endphp    
      @endif

      <li class="nav-item dropdown">
        
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-bell pt-1"></i>
          <span class="badge badge-primary navbar-badge text-white text-bold">
            {{$reminder_count}}
          </span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <span class="dropdown-item dropdown-header">{{$reminder_count}} Notifications</span>
          <div class="dropdown-divider"></div>
          @if ($reminders != null)
            @foreach ($reminders as $reminder)
              <a href="{{url('/reminder')}}" class="dropdown-item">
                {{ Str::limit($reminder->description, 28, '...') }}
                <span class="float-right text-muted text-sm">{{ $reminder->time }}</span>
              </a>                
            @endforeach 
          @endif
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
        </div>
      </li>
      
      <li  class="nav-item dropdown pt-2 ml-3">
        <a href="{{url('/refresh')}}">
          <i class="fa fa-sync-alt text-white"  data-toggle="tooltip" data-placement="top" title="Refresh Notifications"></i>
        </a>
      </li>
            {{-- Username and ID --}}
      <li class="nav-item nav-link d-none d-sm-inline-block">
          {{Str::upper(__('user id'))}} - {{Auth::user()->id}}
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="{{url('/user/profile')}}" class="nav-link">
          {{Auth::user()->name}}
        </a>
      </li>

 

      {{-- Settings Dropdown --}}
      <li class="nav-item">
          <a class="nav-link" data-toggle="dropdown" href="#">
            <i class="fa fa-users-cog pt-1" href="#"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
            <span class="dropdown-item dropdown-header" >
              {{ ucwords(__('user settings')) }}
              <span class="float-right pt-1">
                <a href="https://docs.devpremier.com" target="_blank" 
                data-toggle="tooltip"
                data-placement="bottom"
                title="CRM Documentation"
                >
                  <i class="fas fa-external-link-alt"></i>
                </a>
              </span>
            </span>
            
            <div class="dropdown-divider"></div>
            <a href="{{url('/user/profile')}}" class="dropdown-item">
              <i class="fas fa-user"></i> {{ ucwords(__('user profile')) }}
            </a>

            <div class="dropdown-divider"></div>
            <a href="#"  class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                <i class="fas fa-sign-out-alt"></i> {{ Str::ucfirst(__('logout')) }}
            </a>
            <form id="logout-form" action="{{ route('logout') }}" class="d-hide" method="POST">
                @csrf
            </form>
          </div>
      </li>



    </ul>
  </nav>
