Aplikasi_Rekber/resources/views/layouts/header.blade.php

<?php
use App\Models\NotificationReceiver;

$new = NotificationReceiver::where('receiver', auth()->user()->email)
    ->where('status', 'unread')
    ->count();
?>
<div class="navbar-bg"></div>
<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>
    </form>
    <ul class="navbar-nav navbar-right">
        @if (auth()->user()->role != 'Admin')
            <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown"
                    class="nav-link notification-toggle nav-link-lg {{ $new > 0 ? 'beep' : '' }}" id="notifBtn"><i
                        class="far fa-bell"></i></a>
                <div class="dropdown-menu dropdown-list dropdown-menu-right">
                    <div class="dropdown-header">Notifikasi
                        <div class="float-right">
                            <a href="javascript: void(0);" id="markAllAsRead">Tandai semua telah dibaca</a>
                        </div>
                    </div>
                    <div class="dropdown-list-content dropdown-list-icons" id="notifContent">

                    </div>
                    <div class="dropdown-footer text-center">
                        <a href="{{ route('user-notification.index') }}">Lihat semua<i
                                class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </li>
        @endif
        <li class="dropdown"><a href="#" data-toggle="dropdown"
                class="nav-link dropdown-toggle nav-link-lg nav-link-user">
                <img alt="image"
                    src="{{ Auth::user()->foto_profile == null ? asset('assets/img/avatar/avatar-1.png') : asset('storage/foto-profile/' . auth()->user()->foto_profile) }}"
                    class="rounded-circle mr-1">
                <div class="d-sm-none d-lg-inline-block">Hi, {{ Auth::user()->nama_depan }}</div>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <div class="dropdown-title">Logged in 5 min ago</div>
                <a href="{{ route('profile.index') }}" class="dropdown-item has-icon">
                    <i class="far fa-user"></i> Profile
                </a>
                <div class="dropdown-divider"></div>
                <a href="{{ route('logout') }}" class="dropdown-item has-icon text-danger">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </a>
            </div>
        </li>
    </ul>
</nav>
@section('js-header')
    <script>
        $(document).ready(function() {
            var notifBtn = $('#notifBtn');

            function updateNotif() {
                notifBtn.addClass("beep");
            }

            function removeNotif() {
                notifBtn.removeClass("beep");
            }

            $('#notifBtn').on('click', function() {
                const csrfToken = $('meta[name="csrf-token"]').attr('content');
                var notifContent = $('#notifContent');
                var activitiesHtml = '';

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }
                });

                $.ajax({
                    url: "{{ route('user-notification.latest-notification') }}",
                    type: 'GET',
                    success: function(response) {
                        var notifications = response.notifications;
                        if (notifications.length > 0) {
                            notifications.forEach(element => {
                                var url =
                                    "{{ route('user-notifiaction.detail-notification', ':id') }}"
                                    .replace(':id', element.id);

                                var date = new Date(element.updated_at);
                                var day = date.getDate();
                                var month = date.toLocaleString('id-ID', {
                                    month: 'short'
                                });
                                var year = date.getFullYear();
                                var hours = date.getHours();
                                var minutes = date.getMinutes();

                                var formattedDate = day + ' ' + month + ' ' + year +
                                    " | " + hours + ":" + +(minutes < 10 ? '0' :
                                        '') +
                                    minutes;

                                activitiesHtml += `
                                <a href="${url}" class="dropdown-item dropdown-item-unread">
                                    <div class="dropdown-item-icon bg-primary text-white">
                                        <i class="fas fa-code"></i>
                                    </div>
                                    <div class="dropdown-item-desc">
                                        <h6>${element.title}</h6>
                                        ${element.teaser}
                                        <div class="time text-primary">${formattedDate}</div>
                                    </div>
                                </a>
                            `;
                            });
                        } else {
                            activitiesHtml += `
                            <a class="dropdown-item dropdown-item-unread">
                                <div class="dropdown-item-icon bg-primary text-white">
                                    <i class="fas fa-code"></i>
                                </div>
                                <div class="dropdown-item-desc">
                                    Tidak ada notifikasi baru
                                    <div class="time text-primary">--:--</div>
                                </div>
                            </a>
                        `;
                        }
                        notifContent.html(activitiesHtml);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });

            });

            $('#markAllAsRead').on('click', function() {
                const csrfToken = $('meta[name="csrf-token"]').attr('content');

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }
                });

                $.ajax({
                    url: "{{ route('user.notification.mark-all-as-read') }}",
                    type: 'GET',
                    success: function(response) {
                        if (response.status) {
                            removeNotif();
                        } else {
                            console.log(response);
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });

            // Pusher.logToConsole = true;
            var pusher = new Pusher('3e5bdc20dddd7fbc655e', {
                cluster: 'ap1'
            });

            var channel = pusher.subscribe('chanel-update-notifikasi');

            channel.bind('event-update-notifikasi', function(data) {
                let receivers = data.receivers;
                let userEmail = "{{ auth()->user()->email }}";
                if (Array.isArray(receivers)) {
                    receivers.forEach(email => {
                        if (email == userEmail) {
                            updateNotif();
                        }
                    });
                } else {
                    if (receivers == userEmail) {
                        updateNotif();
                    }
                }
                console.log(data);
            });
        });
    </script>
@endsection