126 lines
5.8 KiB
PHP
126 lines
5.8 KiB
PHP
<div class="flex justify-between">
|
|
<div>
|
|
<h1 class="text-gray-400 font-bold text-xl">{{ strtoupper($data['title']) }}</h1>
|
|
</div>
|
|
<div class="px-10">
|
|
<button id="notificationButton" class="relative focus:outline-none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
|
|
</svg>
|
|
<span class="mynotif absolute top-0 right-0 mt-[-10px] w-full hidden">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
|
|
</span>
|
|
</button>
|
|
<div id="notificationDropdown" class="hidden absolute right-10 mt-2 w-64 bg-white rounded-lg shadow-lg z-50">
|
|
<ul id="notificationList">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const notificationButton = document.getElementById('notificationButton');
|
|
const notificationDropdown = document.getElementById('notificationDropdown');
|
|
const notificationList = document.getElementById('notificationList');
|
|
const redDot = document.getElementById('redDot');
|
|
|
|
notificationButton.addEventListener('click', function() {
|
|
notificationDropdown.classList.toggle('hidden');
|
|
|
|
// Remove the pulse animation and hide the red dot when the dropdown is opened
|
|
if (!notificationDropdown.classList.contains('hidden')) {
|
|
notificationButton.classList.remove('animate-pulse');
|
|
redDot.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
fetchNotifications();
|
|
|
|
function fetchNotifications() {
|
|
fetch('{{ route('notification')}}')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.notifications) {
|
|
|
|
// Check if there are unread notifications
|
|
// const unreadNotifications = data.notifications.filter(notification => notification.read !== '1');
|
|
if (data.notifications.length > 0) {
|
|
// Add the pulse animation to the notification button and show the red dot
|
|
displayNotifications(data.notifications);
|
|
// notificationButton.classList.add('animate-pulse');
|
|
// redDot.classList.remove('hidden');
|
|
$(".mynotif").removeClass('hidden');
|
|
}else{
|
|
$(".mynotif").addClass('hidden');
|
|
redDot.classList.add('hidden');
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching notifications:', error);
|
|
});
|
|
}
|
|
|
|
function displayNotifications(notifications) {
|
|
notificationList.innerHTML = ''; // Clear previous notifications
|
|
// notifications.forEach(notification => {
|
|
const listItem = document.createElement('li');
|
|
listItem.className = 'px-4 py-2 border-b border-gray-200 flex items-center cursor-pointer';
|
|
listItem.innerHTML = `
|
|
<div class="flex items-center">
|
|
<div class="bg-red-500 text-white rounded-full flex items-center justify-center w-10 h-10 mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<span class="font-bold">Ada Barang Harus Order Lagi</span> <br>
|
|
<span class="text-sm text-gray-600">Sebanyak ${notifications.length} barang</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
listItem.addEventListener('click', function() {
|
|
// Mark the notification as read visually
|
|
// listItem.style.opacity = '0.5'; // or any other style to indicate it's read
|
|
|
|
// Send an AJAX request to mark the notification as read in the database
|
|
// markNotificationAsRead(notification.id);
|
|
window.open(
|
|
"{{route('dashboard.cetak')}}",
|
|
'_blank' // <- This is what makes it open in a new window.
|
|
);
|
|
|
|
|
|
// Optionally, you can fade out the notification after a short delay
|
|
});
|
|
notificationList.appendChild(listItem);
|
|
// });
|
|
}
|
|
|
|
function markNotificationAsRead(notificationId) {
|
|
fetch(`dashboard/notification/${notificationId}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}' // Assuming you're using Laravel's CSRF protection
|
|
},
|
|
body: JSON.stringify({ read: '1' }) // Send data to update notification status
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Failed to mark notification as read');
|
|
}
|
|
// Notification marked as read successfully
|
|
})
|
|
.catch(error => {
|
|
console.error('Error marking notification as read:', error);
|
|
// Handle error
|
|
});
|
|
}
|
|
});
|
|
|
|
</script>
|