@php
$user = auth()->user();
@endphp

<style>
.icon24 {
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.notification-icon {
  background: url({{url('assets/img/')}}/notification-solid.svg);
}

.notification-empty-icon {
  position: relative;
  background: url({{url('assets/img/')}}/notification-solid-empty.svg);
}


.notification-label {
  position: absolute;
  background-color: var(--red);
  border: 1px solid var(--primary);
  font-size: 10px;
  border-radius: 16px;
  /* padding: 6px; */
  padding-right: 7px;
  padding-left: 7px;
  font-weight: 500;
  /* right: -12px; */
  top: -14px;
  margin-left: 25px;
  color:white;
}

.notification-item {
  cursor: pointer;
  border-bottom: 2px solid var(--gray);
  padding: 8px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.notification-item:hover,
.notification-item--active {
  background-color: #f0f3ff;
}

.notification-item img {
  width: 40px;
  height: 40px;
  border-radius: 24px;
  border: 2px solid var(--primary);
}

.title-icon {
  background-color: var(--primary);
  border-radius: 4px;
}

.flex {
  display: flex;
}
.gap {
  gap: 1em;
}
.modal--section {
  align-items: center;
  margin-bottom: 16px;
}

.modal--section:last-child {
  margin-bottom: 0;
}
.mail-arrow-down-icon--active {
  background: url(http://inoffis.pilar.web.id/assets/icons/mail-arrow-down-active.svg);
}

.modal--title {
  font-size: 0.9em;
  margin-bottom: 4px;
  font-weight: 600;
}

.modal--text,
.modal--url {
  font-size: 0.8em;
}

.modal--icon {
  min-width: 16px;
  margin-right: 16px;
}
</style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>

<div class="navbar-bg"></div>
<nav class="navbar navbar-expand-lg main-navbar" id='contentNotif'>
    <form class="form-inline mr-auto">
        <ul class="navbar-nav mr-3">
            <li><a href="#" data-turbolinks="false" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
        </ul>
        <h1 class="font-weight-bold text-2xl text-white">LISTRIK ONE</h1>
    </form>
    <ul class="navbar-nav navbar-right">
        @php 
          if(!isset($notifications)){
            $notifications = array();
          }
        @endphp

        <li class="dropdown"><a href="#" data-turbolinks="false" ' data-toggle="dropdown" >
            <div id="notification" class="icon24 notification-empty-icon" style='margin-right:10px;padding-right:30px;'>
                <span class="notification-label">{{sizeof($notifications)}}</span>  
            </div>
            <div class="dropdown-menu dropdown-menu-right"  style='min-width:400px;'>
                @foreach($notifications as $notification)
                    <div onclick=notifClicked('{{ $notification['url'] }}') class="modal--section flex gap notification-item">
                        <div class="icon24 mail-arrow-down-icon--active"></div>
                        <div>
                            <p class="modal--title">{{$notification['nama_produk']}}	</p>
                            <p class="modal--text">
                                {{$notification['nomor_invoice']}} menunggu approval
                            </p>
                            <p class="modal--text">
                                {{$notification['tanggal_permohonan']}}
                            </p>
                        </div>
                    </div>

                @endforeach
                
            </div>
        </li>
        <li class="dropdown"><a href="#" data-turbolinks="false" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
            @if (!is_null($user))
                <div class="d-sm-none d-lg-inline-block">Hi, {{ $user->name }}</div></a>
            @else
                <div class="d-sm-none d-lg-inline-block">Hi, Welcome</div></a>
            @endif
            <div class="dropdown-menu dropdown-menu-right">
                <a href="/user/profile" class="dropdown-item has-icon">
                    <i class="far fa-user"></i> Profile
                </a>
                @if (request()->get('is_admin'))
                <a href="/setting" class="dropdown-item has-icon">
                    <i class="fas fa-cog"></i> Setting
                </a>
                @endif
                <div class="dropdown-divider"></div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf

                    <a href="{{ route('logout') }}" class="dropdown-item has-icon text-danger" onclick="event.preventDefault();this.closest('form').submit();">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </a>
                </form>
            </div>
        </li>
    </ul>
</nav>
<script>
  function notifClicked(url){
      window.open(url,"_self");
  }
  $(document).ready(function() {
    setInterval(function() {
      $.ajax({
            type:'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            url: "{{ route('dashboard.refresh_notif') }}",
            success: function(response) {
               $("#contentNotif").html(response);
            }
      });
    }, 10000); 
  });
</script>