Files
expense/resources/views/layouts/app.blade.php
T
2025-01-17 16:17:53 +07:00

227 lines
11 KiB
PHP

<!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">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
</ul>
<div class="navbar-center text-white m-auto">
<span id="date-time" class="font-weight-bold"></span>
</div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" data-widget="notification">
<i class="fas fa-bell"></i>
</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 -->
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<!-- Profile Section -->
<li class="nav-item dropdown" title="Account Profile">
<a class="nav-link" data-toggle="dropdown" href="#">
{{ Auth::guard('admin')->user()->name }} <i class="far fa-user"></i>
</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%;">
<div class="user-panel mt-3 pb-3 mb-3 d-flex align-items-center">
<div class="image">
<img src="{{ Avatar::create(Auth::guard('admin')->user()->name)->toBase64() }}"
class="img-circle" alt="User Image">
</div>
<div class="info">
<a class="d-block">{{ Auth::guard('admin')->user()->name }}</a>
<a class="d-block font-weight-bold" style="font-size: 11px;">
{{ Auth::guard('admin')->user()->getRoleNames()[0] }}
</a>
@if(auth()->user()->getMyCabangAndRegion()['cabang'] != '-' && Auth::guard('admin')->user()->getRoleNames()[0] == 'Medical Representatif')
<a class="d-block" style="font-size: 14px;">
<span class="badge badge-primary">
{{ auth()->user()->getMyCabangAndRegion()['cabang'] }}
</span>
</a>
@elseif(Auth::guard('admin')->user()->getRoleNames()[0] != 'superadmin')
<a class="d-block" style="font-size: 14px;">
<span class="badge badge-primary">
Head Office
</span>
</a>
@endif
</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>
<script>
function updateDateTime() {
const dateTimeElement = document.getElementById('date-time');
const now = new Date();
const options = {
timeZone: 'Asia/Jakarta',
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: false // Use 24-hour format
};
dateTimeElement.textContent = new Intl.DateTimeFormat('id-ID', options).format(now);
}
// Update the clock every second
setInterval(updateDateTime, 1000);
// Initialize the clock on page load
updateDateTime();
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
data.forEach(notification => {
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');
});
});
</script>