155 lines
6.9 KiB
PHP
155 lines
6.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ config('app.name', 'Digipus.go') }}</title>
|
|
|
|
{{-- Fonts & Icons --}}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
|
|
|
|
{{-- Flatpickr --}}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
|
<script src="https://npmcdn.com/flatpickr/dist/l10n/id.js"></script>
|
|
|
|
<!-- DataTables CSS -->
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="d-flex">
|
|
@include('layouts.sidebar')
|
|
<div id="overlay" class="overlay"></div>
|
|
|
|
<div class="main-wrapper flex-grow-1">
|
|
@include('layouts.navigation')
|
|
<main class="container-fluid py-4 px-4">
|
|
{{ $slot }}
|
|
</main>
|
|
<footer class="footer text-center py-3">
|
|
<span class="text-muted small">Copyright © {{ date('Y') }}
|
|
{{ config('app.name', 'Perpus') }}.</span>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="semuaNotifikasiModal" tabindex="-1" aria-labelledby="semuaNotifikasiModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
|
<div class="modal-content border-0 shadow rounded-3">
|
|
<div class="modal-header border-0">
|
|
<h5 class="modal-title fw-bold text-dark" id="semuaNotifikasiModalLabel">
|
|
<i class="bi bi-bell-fill text-primary me-2"></i>Semua Notifikasi
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body pt-0">
|
|
<div class="notification-list px-2">
|
|
@forelse ($notifikasi as $item)
|
|
@php
|
|
$url = '#';
|
|
|
|
if (isset($item['type'])) {
|
|
if ($item['type'] === 'riwayat_peminjaman') {
|
|
$url = route('riwayat.offline');
|
|
} elseif ($item['type'] === 'rekomendasi' && isset($item['link_id'])) {
|
|
$url = route('rekomendasi.show', $item['link_id']);
|
|
} elseif ($item['type'] === 'katalog_kategori' && isset($item['link_id'])) {
|
|
$url = route('katalog.index', ['kategori' => $item['link_id']]);
|
|
}
|
|
}
|
|
@endphp
|
|
|
|
<a href="{{ $url }}"
|
|
class="notification-item d-flex my-1 rounded-3 text-body text-decoration-none @if (!$item['read']) unread @endif">
|
|
<div class="notification-icon bg-{{ $item['color'] }}-subtle">
|
|
<i class="bi {{ $item['icon'] }} text-{{ $item['color'] }}-emphasis"></i>
|
|
</div>
|
|
<div class="notification-content">
|
|
<p class="mb-0">{{ $item['title'] }}</p>
|
|
<small>{{ $item['time'] }}</small>
|
|
</div>
|
|
@if (!$item['read'])
|
|
<div class="unread-dot"></div>
|
|
@endif
|
|
</a>
|
|
@empty
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-bell-slash fs-2 text-muted"></i>
|
|
<p class="text-muted small mt-2 mb-0">Anda belum memiliki notifikasi.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DataTables JS -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.js" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const mainWrapper = document.querySelector('.main-wrapper');
|
|
const overlay = document.getElementById('overlay');
|
|
const sidebarToggle = document.getElementById('sidebarToggle');
|
|
const closeSidebarMobile = document.getElementById('closeSidebarMobile');
|
|
const isDesktop = () => window.innerWidth >= 992;
|
|
|
|
function toggleMobileSidebar() {
|
|
sidebar.classList.toggle('active');
|
|
overlay.classList.toggle('active');
|
|
}
|
|
|
|
function toggleDesktopSidebar() {
|
|
sidebar.classList.toggle('minimized');
|
|
mainWrapper.classList.toggle('sidebar-minimized');
|
|
}
|
|
|
|
sidebarToggle.addEventListener('click', function() {
|
|
if (isDesktop()) {
|
|
toggleDesktopSidebar();
|
|
} else {
|
|
toggleMobileSidebar();
|
|
}
|
|
});
|
|
|
|
const closeButtons = [overlay, closeSidebarMobile];
|
|
closeButtons.forEach(el => {
|
|
if (el) {
|
|
el.addEventListener('click', function() {
|
|
if (!isDesktop()) {
|
|
toggleMobileSidebar();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
const dropdownToggles = document.querySelectorAll('.sidebar .nav-link[data-bs-toggle="collapse"]');
|
|
dropdownToggles.forEach(function(toggle) {
|
|
toggle.addEventListener('click', function() {
|
|
if (isDesktop() && sidebar.classList.contains('minimized')) {
|
|
toggleDesktopSidebar();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@stack('scripts')
|
|
|
|
</body>
|
|
|
|
</html>
|