209 lines
8.9 KiB
PHP
209 lines
8.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">
|
|
|
|
<!-- Tom Select -->
|
|
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
|
|
<style>
|
|
input[type=number]::-webkit-outer-spin-button,
|
|
input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
</style>
|
|
</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">
|
|
@if (session('error'))
|
|
<div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
|
|
<i class="bi bi-exclamation-octagon-fill me-2"></i>
|
|
<strong>DITOLAK!</strong> {{ session('error') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
{{ $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'] === 'denda_active') {
|
|
$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/2.0.0/js/dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/2.0.0/js/dataTables.bootstrap5.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/3.0.0/js/responsive.bootstrap5.min.js"></script>
|
|
|
|
<!-- Tom Select -->
|
|
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
const modernSwal = Swal.mixin({
|
|
customClass: {
|
|
popup: 'rounded-4 border-0 shadow-lg',
|
|
title: 'fw-bold text-dark fs-4',
|
|
html: 'text-muted',
|
|
confirmButton: 'btn btn-primary rounded-pill px-4 py-2 fw-bold ms-2',
|
|
cancelButton: 'btn btn-light text-muted rounded-pill px-4 py-2 fw-bold'
|
|
},
|
|
buttonsStyling: false,
|
|
reverseButtons: true,
|
|
padding: '2rem',
|
|
});
|
|
|
|
// Preset untuk Notifikasi Sukses
|
|
const Toast = Swal.mixin({
|
|
toast: true,
|
|
position: 'top-end',
|
|
showConfirmButton: false,
|
|
timer: 3000,
|
|
timerProgressBar: true,
|
|
customClass: {
|
|
popup: 'rounded-3 shadow-sm border-0 bg-white'
|
|
},
|
|
didOpen: (toast) => {
|
|
toast.addEventListener('mouseenter', Swal.stopTimer)
|
|
toast.addEventListener('mouseleave', Swal.resumeTimer)
|
|
}
|
|
});
|
|
</script>
|
|
|
|
@stack('scripts')
|
|
|
|
</body>
|
|
|
|
</html> |