107 lines
7.1 KiB
PHP
107 lines
7.1 KiB
PHP
<!doctype html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>@yield('title', 'Admin') - Explore Lumajang</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.css" rel="stylesheet">
|
|
<style>
|
|
:root { --ocean:#0f4c81; --ocean-dark:#083a63; --ocean-soft:#d9eef8; --aqua:#14b8c4; --mist:#f4f8fb; --line:#d7e7f1; --ink:#0b1f33; }
|
|
body { background: var(--mist); color:var(--ink); }
|
|
.admin-shell { min-height:100vh; }
|
|
.sidebar { width:280px; background:linear-gradient(180deg, var(--ocean-dark), var(--ocean)); color:#fff; position:fixed; inset:0 auto 0 0; z-index:1030; box-shadow:18px 0 46px rgba(8,58,99,.16); }
|
|
.brand-card { padding:.8rem; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.08); }
|
|
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.14); box-shadow:0 12px 24px rgba(0,0,0,.12); }
|
|
.brand-mark img { width:100%; height:100%; object-fit:cover; display:block; }
|
|
.sidebar .nav-link { color:rgba(255,255,255,.78); border-radius:14px; padding:.82rem .95rem; font-weight:600; }
|
|
.sidebar .nav-link i { width:1.2rem; text-align:center; }
|
|
.sidebar .nav-link.active, .sidebar .nav-link:hover { color:#fff; background:rgba(255,255,255,.14); }
|
|
.main { margin-left:280px; min-height:100vh; }
|
|
.topbar { background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1020; box-shadow:0 10px 30px rgba(15,76,129,.06); }
|
|
.content { padding:28px; }
|
|
.soft-card { border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 30px rgba(15,76,129,.08); }
|
|
.stat-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:var(--ocean-soft); color:var(--ocean); }
|
|
.table > :not(caption) > * > * { vertical-align:middle; }
|
|
.object-thumb { width:72px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
|
|
.btn-nature, .btn-ocean { --bs-btn-bg:var(--ocean); --bs-btn-border-color:var(--ocean); --bs-btn-hover-bg:var(--ocean-dark); --bs-btn-hover-border-color:var(--ocean-dark); --bs-btn-active-bg:var(--ocean-dark); --bs-btn-active-border-color:var(--ocean-dark); color:#fff; box-shadow:0 12px 24px rgba(15,76,129,.16); }
|
|
.btn-outline-ocean { --bs-btn-color:var(--ocean); --bs-btn-border-color:var(--ocean); --bs-btn-hover-bg:var(--ocean); --bs-btn-hover-border-color:var(--ocean); --bs-btn-hover-color:#fff; --bs-btn-active-bg:var(--ocean-dark); --bs-btn-active-border-color:var(--ocean-dark); --bs-btn-active-color:#fff; }
|
|
.badge-ocean, .text-bg-ocean { color:#fff !important; background-color:var(--ocean) !important; }
|
|
.form-control:focus, .form-select:focus { border-color:rgba(15,76,129,.62); box-shadow:0 0 0 .25rem rgba(15,76,129,.12); }
|
|
.form-check-input:checked { background-color:var(--ocean); border-color:var(--ocean); }
|
|
@media (max-width: 991.98px) {
|
|
.sidebar { transform:translateX(-100%); transition:.2s ease; }
|
|
.sidebar.show { transform:translateX(0); }
|
|
.main { margin-left:0; }
|
|
.content { padding:18px; }
|
|
}
|
|
</style>
|
|
@stack('styles')
|
|
</head>
|
|
<body>
|
|
<div class="admin-shell">
|
|
<aside class="sidebar p-3" id="sidebar">
|
|
<div class="brand-card d-flex align-items-center gap-3 mb-4">
|
|
<div class="brand-mark">
|
|
<img src="{{ asset('images/explore-lumajang-logo.png') }}" alt="Explore Lumajang">
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">Explore Lumajang</div>
|
|
<small class="text-white-50">Admin Wisata</small>
|
|
</div>
|
|
</div>
|
|
<nav class="nav flex-column gap-1">
|
|
<a class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}" href="{{ route('admin.dashboard') }}"><i class="bi bi-speedometer2 me-2"></i>Dashboard</a>
|
|
<a class="nav-link {{ request()->routeIs('admin.wisata.*') ? 'active' : '' }}" href="{{ route('admin.wisata.index') }}"><i class="bi bi-map me-2"></i>Data Wisata</a>
|
|
<a class="nav-link {{ request()->routeIs('admin.kategori.*') ? 'active' : '' }}" href="{{ route('admin.kategori.index') }}"><i class="bi bi-tags me-2"></i>Kategori</a>
|
|
<a class="nav-link {{ request()->routeIs('admin.users.*') ? 'active' : '' }}" href="{{ route('admin.users.index') }}"><i class="bi bi-people me-2"></i>User Aplikasi</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<div class="topbar px-3 px-lg-4 py-3 d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<button class="btn btn-outline-ocean d-lg-none" id="sidebarToggle" type="button"><i class="bi bi-list"></i></button>
|
|
<div>
|
|
<h1 class="h5 mb-0">@yield('page_title', 'Dashboard')</h1>
|
|
<small class="text-muted">@yield('page_subtitle', 'Kelola pariwisata Lumajang')</small>
|
|
</div>
|
|
</div>
|
|
<form action="{{ route('admin.logout') }}" method="POST">
|
|
@csrf
|
|
<button class="btn btn-outline-danger btn-sm" type="submit"><i class="bi bi-box-arrow-right me-1"></i>Logout</button>
|
|
</form>
|
|
</div>
|
|
<div class="content">
|
|
@yield('content')
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
|
|
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
document.getElementById('sidebarToggle')?.addEventListener('click', () => document.getElementById('sidebar').classList.toggle('show'));
|
|
document.querySelectorAll('form[data-confirm]').forEach((form) => {
|
|
form.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
Swal.fire({title:'Konfirmasi', text:form.dataset.confirm, icon:'warning', showCancelButton:true, confirmButtonColor:'#0f4c81', cancelButtonText:'Batal', confirmButtonText:'Ya, lanjut'}).then((result) => {
|
|
if (result.isConfirmed) form.submit();
|
|
});
|
|
});
|
|
});
|
|
@if(session('success'))
|
|
Swal.fire({toast:true, position:'top-end', icon:'success', title:@json(session('success')), showConfirmButton:false, timer:2400});
|
|
@endif
|
|
@if(session('error'))
|
|
Swal.fire({toast:true, position:'top-end', icon:'error', title:@json(session('error')), showConfirmButton:false, timer:3000});
|
|
@endif
|
|
</script>
|
|
@stack('scripts')
|
|
</body>
|
|
</html>
|