<nav class="navbar navbar-expand-lg main-navbar">
  <form class="form-inline mr-auto">
    <ul class="navbar-nav mr-3">
      <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
      <li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
    </ul>
    <div class="search-element">
      <input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="250">
      <button class="btn" type="submit"><i class="fas fa-search"></i></button>
      <div class="search-backdrop"></div>
      <div class="search-result">
        <div class="search-header">
          Histories
        </div>
        <div class="search-item">
          <a href="{{route("dashboard")}}">Dashboard</a>
          <a href="#" class="search-close"><i class="fas fa-times"></i></a>
        </div>
        <div class="search-item">
          <a href="{{route("user.index")}}">Pengguna</a>
          <a href="#" class="search-close"><i class="fas fa-times"></i></a>
        </div>
        <div class="search-item">
          <a href="{{route("student.index")}}">Data Siswa/i</a>
          <a href="#" class="search-close"><i class="fas fa-times"></i></a>
        </div>
        <div class="search-item">
          <a href="{{route("teacher.index")}}">Guru/i</a>
          <a href="#" class="search-close"><i class="fas fa-times"></i></a>
        </div>
        <div class="search-item">
          <a href="{{route("mapel.index")}}">Mapel</a>
          <a href="#" class="search-close"><i class="fas fa-times"></i></a>
        </div>
        <div class="search-item">
          <a href="{{route("pembelajaran.index")}}">Pembelajaran</a>
          <a href="#" class="search-close"><i class="fas fa-times"></i></a>
        </div>
      </div>
    </div>
  </form>
  <ul class="navbar-nav navbar-right">
    
    {{-- Pesan Pengguna --}}
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="far fa-envelope"></i>
          @if(isset($messages) && $messages->count() > 0)
              <span class="badge badge-danger">{{ $messages->count() }}</span>
          @endif
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="messageDropdown" style="width: 400px;">
          @if(isset($messages) && $messages->count() > 0)
              @foreach($messages as $message)
                  <div class="dropdown-item" style="white-space: normal; word-wrap: break-word;">
                      <strong>{{ $message->name }}</strong><br>
                      <small class="text-muted">{{ $message->email }}</small><br>
                      <p class="m-0">{{ $message->message }}</p>
                      <small class="text-muted d-block">{{ $message->created_at->diffForHumans() }}</small>
                  </div>
                  <div class="dropdown-divider"></div>
              @endforeach
          @else
              <a class="dropdown-item text-center">Tidak ada pesan</a>
          @endif
      </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="{{asset("assets/img/avatar/avatar-1.png")}}" class="rounded-circle mr-2">
      <div class="d-sm-none d-lg-inline-block">Hi. {{Auth::user()->name}}</div></a>
      <div class="dropdown-menu dropdown-menu-right">
        <div class="dropdown-divider"></div>
        <form action="{{route("logout")}}" method="post">
          @csrf
            <button type="submit" class="dropdown-item has-icon text-danger d-flex align-items-center">
              <i class="fas fa-sign-out-alt"></i> Logout
            </button>
        </form>
      </div>
    </li>
  </ul>
</nav>