<!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>
