<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= esc($title ?? 'Pakdema ERP') ?></title>
    <?php $faviconUrl = is_object($company_profile ?? null) ? ($company_profile->favicon_url ?? null) : null; ?>
    <?php if (! empty($faviconUrl)): ?>
        <link rel="icon" href="<?= esc(base_url($faviconUrl)) ?>">
    <?php endif; ?>
    <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.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root { --sidebar-width: 272px; --sidebar-mini-width: 76px; --ink: #172033; --muted: #68758a; --line: #e7ebf1; --canvas: #f5f7fb; --brand: #2563eb; }
        * { box-sizing: border-box; }
        body { margin: 0; background: var(--canvas); color: var(--ink); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }
        .app-shell { min-height: 100vh; }
        .app-sidebar { background: #101827; color: #d8e0eb; height: 100vh; left: 0; position: fixed; top: 0; transition: width .22s ease, transform .22s ease; width: var(--sidebar-width); z-index: 1045; }
        .app-main { margin-left: var(--sidebar-width); min-height: 100vh; transition: margin-left .22s ease; }
        .topbar { align-items: center; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); display: flex; min-height: 72px; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1035; backdrop-filter: blur(12px); }
        .content-wrapper { margin: 0 auto; max-width: 1600px; padding: 1.75rem 1.5rem 2.5rem; width: 100%; }
        .content-wrapper > .card, .content-wrapper > .container > .card { border-radius: .5rem; }
        .sidebar-backdrop { background: rgba(15, 23, 42, .48); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .22s ease; z-index: 1040; }
        .btn-icon { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: .45rem; color: var(--ink); display: inline-flex; height: 40px; justify-content: center; padding: 0; width: 40px; }
        .btn-icon:hover, .btn-icon:focus { background: #eff6ff; border-color: #bfdbfe; color: var(--brand); box-shadow: none; }
        .app-shell.is-collapsed .app-sidebar { width: var(--sidebar-mini-width); }
        .app-shell.is-collapsed .app-main { margin-left: var(--sidebar-mini-width); }
        .app-shell.is-collapsed .sidebar-brand-copy, .app-shell.is-collapsed .sidebar-profile-copy, .app-shell.is-collapsed .sidebar-search, .app-shell.is-collapsed .nav-label, .app-shell.is-collapsed .nav-heading, .app-shell.is-collapsed .nav-badge { display: none; }
        .app-shell.is-collapsed .sidebar-brand, .app-shell.is-collapsed .sidebar-profile, .app-shell.is-collapsed .sidebar-link { justify-content: center; }
        .app-shell.is-collapsed .sidebar-link { padding-left: .75rem; padding-right: .75rem; }
        .app-shell.is-collapsed .sidebar-link i { margin: 0; }
        @media (max-width: 991.98px) {
            .app-sidebar { box-shadow: 12px 0 32px rgba(15,23,42,.22); transform: translateX(-100%); width: min(84vw, 310px); }
            .app-main, .app-shell.is-collapsed .app-main { margin-left: 0; }
            .app-shell.is-sidebar-open .app-sidebar { transform: translateX(0); }
            .app-shell.is-sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
            .app-shell.is-collapsed .app-sidebar { width: min(84vw, 310px); }
            .app-shell.is-collapsed .sidebar-brand-copy, .app-shell.is-collapsed .sidebar-profile-copy, .app-shell.is-collapsed .sidebar-search, .app-shell.is-collapsed .nav-label, .app-shell.is-collapsed .nav-heading, .app-shell.is-collapsed .nav-badge { display: initial; }
            .app-shell.is-collapsed .sidebar-brand, .app-shell.is-collapsed .sidebar-profile, .app-shell.is-collapsed .sidebar-link { justify-content: flex-start; }
            .app-shell.is-collapsed .sidebar-link { padding-left: 1rem; padding-right: 1rem; }
            .topbar { min-height: 64px; padding: 0 .9rem; }
            .content-wrapper { padding: 1.25rem 1rem 2rem; }
            .page-context { display: none; }
        }
        @media (max-width: 575.98px) { .profile-copy { display: none; } .topbar { padding: 0 .75rem; } }
    </style>
</head>
<body>
    <div class="app-shell" id="appShell">
        <?= $this->include('layouts/sidebar') ?>
        <div class="sidebar-backdrop" id="sidebarBackdrop"></div>
        <div class="app-main">
            <?= $this->include('layouts/navbar') ?>
            <main class="content-wrapper">
                <?php if (session()->getFlashdata('success')): ?>
                    <div class="alert alert-success alert-dismissible fade show shadow-sm mb-4" role="alert"><?= esc(session()->getFlashdata('success')) ?><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Tutup"></button></div>
                <?php endif; ?>
                <?php if (session()->getFlashdata('error')): ?>
                    <div class="alert alert-danger alert-dismissible fade show shadow-sm mb-4" role="alert"><?= esc(session()->getFlashdata('error')) ?><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Tutup"></button></div>
                <?php endif; ?>
                <?= $this->renderSection('content') ?>
            </main>
            <?= $this->include('layouts/footer') ?>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        (() => {
            const shell = document.getElementById('appShell');
            const sidebar = document.getElementById('appSidebar');
            const backdrop = document.getElementById('sidebarBackdrop');
            const toggle = document.getElementById('sidebarToggle');
            const close = () => shell.classList.remove('is-sidebar-open');
            const isMobile = () => window.matchMedia('(max-width: 991.98px)').matches;
            const setToggleIcon = () => {
                const icon = toggle?.querySelector('i');
                if (icon) icon.className = shell.classList.contains('is-sidebar-open') || (!isMobile() && !shell.classList.contains('is-collapsed')) ? 'bi bi-layout-sidebar-inset' : 'bi bi-list';
            };
            if (!isMobile() && localStorage.getItem('pakdema-sidebar') === 'collapsed') shell.classList.add('is-collapsed');
            setToggleIcon();
            toggle?.addEventListener('click', () => {
                if (isMobile()) shell.classList.toggle('is-sidebar-open');
                else { shell.classList.toggle('is-collapsed'); localStorage.setItem('pakdema-sidebar', shell.classList.contains('is-collapsed') ? 'collapsed' : 'expanded'); }
                setToggleIcon();
            });
            backdrop?.addEventListener('click', close);
            document.addEventListener('keydown', event => { if (event.key === 'Escape') close(); });
            sidebar?.querySelectorAll('a').forEach(link => link.addEventListener('click', () => { if (isMobile()) close(); }));
            window.addEventListener('resize', () => { close(); setToggleIcon(); });
        })();
    </script>
</body>
</html>
