2024-12-02 01:18:34 +07:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en" style="height: auto;" class="">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<link rel="icon" type="image/x-icon" href="{{ asset('templates/dist/img/logo.ico') }}">
|
|
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="{{ asset('templates/dist/img/logo.ico') }}">
|
|
|
|
|
<title>{{ config('app.app_name') }} - @yield('title')</title>
|
|
|
|
|
@include('layouts.partials.styles')
|
|
|
|
|
@yield('styles')
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<body class="sidebar-mini layout-fixed layout-navbar-fixed" style="height: auto;">
|
|
|
|
|
<div class="wrapper">
|
|
|
|
|
|
|
|
|
|
<div class="preloader flex-column justify-content-center align-items-center" style="height: 0px;">
|
|
|
|
|
<img class="animation__shake" src="{{ asset('templates/dist/img/small-logo.png') }}" alt="Logo"
|
|
|
|
|
height="60" width="60" style="display: none;">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<nav class="main-header navbar navbar-expand navbar-dark bg-primary">
|
|
|
|
|
<ul class="navbar-nav">
|
|
|
|
|
<li class="nav-item">
|
2025-01-15 14:50:53 +07:00
|
|
|
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
|
2024-12-02 01:18:34 +07:00
|
|
|
</li>
|
2025-01-19 15:11:21 +07:00
|
|
|
<li class="nav-item">
|
|
|
|
|
{{-- periode --}}
|
|
|
|
|
<a class="nav-link" href="{{ route('dashboard.index') }}" role="button">
|
2025-01-19 18:59:14 +07:00
|
|
|
<span class="ml-2 text-white">Periode: <span id="periode"></span></span>
|
2025-01-19 15:11:21 +07:00
|
|
|
</a>
|
|
|
|
|
</li>
|
2024-12-02 01:18:34 +07:00
|
|
|
</ul>
|
|
|
|
|
|
2025-01-15 14:50:53 +07:00
|
|
|
<div class="navbar-center text-white m-auto">
|
2025-01-19 18:57:38 +07:00
|
|
|
{{-- <span id="date-time" class="font-weight-bold"></span> --}}
|
2025-01-15 14:50:53 +07:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ul class="navbar-nav">
|
2025-01-17 16:17:53 +07:00
|
|
|
<li class="nav-item dropdown">
|
|
|
|
|
<a class="nav-link" data-toggle="dropdown" href="#" role="button" data-widget="notification">
|
|
|
|
|
<i class="fas fa-bell"></i>
|
2025-01-19 15:22:17 +07:00
|
|
|
<span id="notification-dot" class="badge badge-danger" style="display: none; position: absolute; top: 8px; right: 10px; font-size: 0.6rem;"></span>
|
2025-01-17 16:17:53 +07:00
|
|
|
</a>
|
|
|
|
|
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-right">
|
|
|
|
|
<div id="notification">
|
|
|
|
|
<span class="dropdown-item dropdown-header" id="notification_title">Notifications</span>
|
|
|
|
|
<div id="loading-bar" style="text-align: center; padding: 10px; display: none;">
|
|
|
|
|
<div class="spinner-border text-primary" style="width: 2rem; height: 2rem;" role="status">
|
|
|
|
|
<span class="sr-only">Loading...</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="notification-list"></div>
|
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
|
<form action="{{ route('dashboard.mark_read') }}" method="POST">
|
|
|
|
|
@csrf
|
|
|
|
|
@include('backend.layouts.partials.messages')
|
|
|
|
|
<button type="submit" class="dropdown-item dropdown-footer" id="notification_mark">Mark all as read</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<!-- Fullscreen Icon -->
|
2024-12-02 01:18:34 +07:00
|
|
|
<li class="nav-item">
|
|
|
|
|
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
|
|
|
|
|
<i class="fas fa-expand-arrows-alt"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
2025-01-17 16:17:53 +07:00
|
|
|
<!-- Profile Section -->
|
2024-12-02 01:18:34 +07:00
|
|
|
<li class="nav-item dropdown" title="Account Profile">
|
|
|
|
|
<a class="nav-link" data-toggle="dropdown" href="#">
|
2025-01-15 14:50:53 +07:00
|
|
|
{{ Auth::guard('admin')->user()->name }} <i class="far fa-user"></i>
|
2024-12-02 01:18:34 +07:00
|
|
|
</a>
|
|
|
|
|
@include('layouts.partials.logout')
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<aside class="main-sidebar elevation-1 sidebar-light-danger">
|
|
|
|
|
|
|
|
|
|
<a href="#" class="brand-link bg-light">
|
|
|
|
|
<img src="{{ asset('templates/dist/img/logo-app.png') }}" alt="App Logo Text" class="brand-text brand-image">
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
class="sidebar os-host os-host-overflow os-host-overflow-y os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-transition os-theme-dark">
|
|
|
|
|
<div class="os-resize-observer-host observed">
|
|
|
|
|
<div class="os-resize-observer" style="left: 0px; right: auto;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="os-size-auto-observer observed" style="height: calc(100% + 1px); float: left;">
|
|
|
|
|
<div class="os-resize-observer"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="os-content-glue" style="margin: 0px -8px; width: 249px; height: 676px;"></div>
|
|
|
|
|
<div class="os-padding">
|
|
|
|
|
<div class="os-viewport os-viewport-native-scrollbars-invisible" style="overflow-y: scroll;">
|
|
|
|
|
<div class="os-content" style="padding: 0px 8px; height: 100%; width: 100%;">
|
2024-12-27 13:03:19 +07:00
|
|
|
<div class="user-panel mt-3 pb-3 mb-3 d-flex align-items-center">
|
2024-12-02 01:18:34 +07:00
|
|
|
<div class="image">
|
2024-12-27 13:03:19 +07:00
|
|
|
<img src="{{ Avatar::create(Auth::guard('admin')->user()->name)->toBase64() }}"
|
2024-12-02 01:18:34 +07:00
|
|
|
class="img-circle" alt="User Image">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info">
|
|
|
|
|
<a class="d-block">{{ Auth::guard('admin')->user()->name }}</a>
|
2024-12-27 13:03:19 +07:00
|
|
|
<a class="d-block font-weight-bold" style="font-size: 11px;">
|
|
|
|
|
{{ Auth::guard('admin')->user()->getRoleNames()[0] }}
|
|
|
|
|
</a>
|
2025-01-19 14:57:01 +07:00
|
|
|
@if(
|
|
|
|
|
auth()->user()->getMyCabangAndRegion()['cabang'] != '-' &&
|
|
|
|
|
in_array(Auth::guard('admin')->user()->getRoleNames()[0], ['Medical Representatif', 'Area Manager Cabang'])
|
|
|
|
|
)
|
2025-01-07 17:23:42 +07:00
|
|
|
<a class="d-block" style="font-size: 14px;">
|
|
|
|
|
<span class="badge badge-primary">
|
|
|
|
|
{{ auth()->user()->getMyCabangAndRegion()['cabang'] }}
|
|
|
|
|
</span>
|
|
|
|
|
</a>
|
2025-01-19 18:57:38 +07:00
|
|
|
@elseif(Auth::guard('admin')->user()->getRoleNames()[0] != 'Superadmin')
|
2025-01-15 14:50:53 +07:00
|
|
|
<a class="d-block" style="font-size: 14px;">
|
|
|
|
|
<span class="badge badge-primary">
|
|
|
|
|
Head Office
|
|
|
|
|
</span>
|
|
|
|
|
</a>
|
2025-01-07 17:23:42 +07:00
|
|
|
@endif
|
2025-01-19 18:57:38 +07:00
|
|
|
<span id="date-time" class="font-weight-bold" style="font-size: 12px;"></span>
|
2024-12-02 01:18:34 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@include('layouts.partials.sidebar')
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable os-scrollbar-auto-hidden">
|
|
|
|
|
<div class="os-scrollbar-track">
|
|
|
|
|
<div class="os-scrollbar-handle" style="width: 100%; transform: translate(0px, 0px);"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="os-scrollbar os-scrollbar-vertical os-scrollbar-auto-hidden">
|
|
|
|
|
<div class="os-scrollbar-track">
|
|
|
|
|
<div class="os-scrollbar-handle" style="height: 57.5686%; transform: translate(0px, 0px);">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="os-scrollbar-corner"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
<div class="content-wrapper" style="min-height: 677.4px;">
|
|
|
|
|
@yield('admin-content')
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@include('layouts.partials.footer')
|
|
|
|
|
@include('layouts.partials.scripts')
|
|
|
|
|
@yield('scripts')
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
2025-01-15 14:50:53 +07:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function updateDateTime() {
|
|
|
|
|
const dateTimeElement = document.getElementById('date-time');
|
|
|
|
|
const now = new Date();
|
|
|
|
|
|
|
|
|
|
const options = {
|
|
|
|
|
timeZone: 'Asia/Jakarta',
|
|
|
|
|
year: 'numeric',
|
2025-01-19 18:51:59 +07:00
|
|
|
month: 'short',
|
2025-01-15 14:50:53 +07:00
|
|
|
day: 'numeric',
|
|
|
|
|
hour: '2-digit',
|
|
|
|
|
minute: '2-digit',
|
|
|
|
|
hour12: false // Use 24-hour format
|
|
|
|
|
};
|
|
|
|
|
|
2025-01-19 18:51:59 +07:00
|
|
|
dateTimeElement.textContent = new Intl.DateTimeFormat('en-US', options).format(now) + ' WIB';
|
2025-01-15 14:50:53 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Update the clock every second
|
|
|
|
|
setInterval(updateDateTime, 1000);
|
|
|
|
|
|
|
|
|
|
// Initialize the clock on page load
|
|
|
|
|
updateDateTime();
|
2025-01-17 16:17:53 +07:00
|
|
|
|
|
|
|
|
document.querySelector('[data-widget="notification"]').addEventListener('click', function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
|
|
const loadingBar = document.getElementById('loading-bar');
|
|
|
|
|
const notificationList = document.getElementById('notification-list');
|
|
|
|
|
|
|
|
|
|
// Show loading bar and hide notification list
|
|
|
|
|
loadingBar.style.display = 'block';
|
|
|
|
|
notificationList.classList.add('d-none');
|
|
|
|
|
|
|
|
|
|
fetch('/api/notifications')
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
notificationList.innerHTML = ''; // Clear existing notifications
|
|
|
|
|
|
2025-01-19 15:22:17 +07:00
|
|
|
data.data.forEach(notification => {
|
2025-01-17 16:17:53 +07:00
|
|
|
const item = document.createElement('a');
|
|
|
|
|
item.href = notification.link || '#';
|
|
|
|
|
item.classList.add('dropdown-item');
|
|
|
|
|
item.innerHTML = `
|
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
|
|
|
<div style="display: flex; align-items: center;">
|
|
|
|
|
<i class="fas fa-bell" style="font-size: 16px; margin-right: 5px;"></i>
|
|
|
|
|
<strong style="font-size: 12px;">${notification.title}</strong>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-muted text-sm" style="font-size: 12px !important;">
|
|
|
|
|
${new Date(notification.created_at).toLocaleDateString('en-US', {
|
|
|
|
|
year: 'numeric',
|
|
|
|
|
month: 'short',
|
|
|
|
|
day: 'numeric',
|
|
|
|
|
hour: '2-digit',
|
|
|
|
|
minute: '2-digit',
|
|
|
|
|
})}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-muted text-sm" style="font-size: 12px !important;">${notification.content || ''}</span>
|
|
|
|
|
`;
|
|
|
|
|
notificationList.appendChild(item);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Hide loading bar and show notification list
|
|
|
|
|
loadingBar.style.display = 'none';
|
|
|
|
|
notificationList.classList.remove('d-none');
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error fetching notifications:', error);
|
|
|
|
|
loadingBar.style.display = 'none';
|
|
|
|
|
notificationList.innerHTML = '<span class="dropdown-item text-danger">Failed to load notifications.</span>';
|
|
|
|
|
notificationList.classList.remove('d-none');
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2025-01-19 15:22:17 +07:00
|
|
|
fetch('/api/notifications')
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
const notificationDot = document.getElementById('notification-dot');
|
|
|
|
|
|
|
|
|
|
if (data.count > 0) {
|
|
|
|
|
// Show red dot if there are notifications
|
|
|
|
|
// show the number of notifications
|
|
|
|
|
notificationDot.textContent = data.count;
|
|
|
|
|
notificationDot.style.display = 'block';
|
|
|
|
|
} else {
|
|
|
|
|
// Hide red dot if there are no notifications
|
|
|
|
|
notificationDot.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error checking notifications:', error);
|
|
|
|
|
});
|
2025-01-19 15:11:21 +07:00
|
|
|
|
|
|
|
|
const periode = document.getElementById('periode');
|
|
|
|
|
const date = new Date();
|
|
|
|
|
|
|
|
|
|
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
|
|
|
const month = months[date.getMonth()]; // Get the current month's short name
|
|
|
|
|
const nextMonth = months[(date.getMonth() + 1) % 12]; // Get the next month's short name, wrapping around if necessary
|
|
|
|
|
const year = date.getFullYear();
|
|
|
|
|
|
|
|
|
|
periode.textContent = `${month} (12 ${month} - 10 ${nextMonth} ${year})`;
|
2025-01-15 14:50:53 +07:00
|
|
|
</script>
|
