<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= esc($this->renderSection('title') ?: 'Admin') ?> — BIJ</title>
    <link rel="icon" type="image/png" href="<?= base_url('assets/images/bij_logo.png') ?>">
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
    <link rel="stylesheet" href="<?= base_url('assets/tailadmin/fa-7.1.0-web/css/all.min.css') ?>">
    <style>
        .custom-scrollbar {
            scrollbar-width: thin;
            scrollbar-color: #d1d5db transparent;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: #d1d5db;
            border-radius: 9999px;
        }
        /* Shell: mobile drawer + desktop sidebar width (TailAdmin-style) */
        #admin-sidebar {
            transition: transform 0.2s ease, width 0.2s ease;
        }
        @media (max-width: 1023px) {
            #admin-sidebar {
                transform: translateX(-100%);
            }
            #admin-shell.mobile-sidebar-open #admin-sidebar {
                transform: translateX(0);
            }
        }
        @media (min-width: 1024px) {
            #admin-sidebar {
                transform: none !important;
            }
            #sidebar-overlay {
                display: none !important;
            }
        }
        @media (min-width: 1024px) {
            #admin-shell.sidebar-narrow #admin-sidebar {
                width: 90px !important;
                min-width: 90px;
            }
            #admin-shell.sidebar-narrow #admin-sidebar .sidebar-text,
            #admin-shell.sidebar-narrow #admin-sidebar .nav-section-label {
                display: none !important;
            }
            #admin-shell.sidebar-narrow #admin-sidebar details > summary .fa-chevron-down {
                display: none;
            }
            #admin-shell.sidebar-narrow #admin-sidebar .sidebar-brand {
                justify-content: center;
            }
            #admin-shell.sidebar-narrow #admin-sidebar .sidebar-logo-expanded {
                display: none !important;
            }
            #admin-shell.sidebar-narrow #admin-sidebar .sidebar-logo-collapsed {
                display: block !important;
                background: none !important;
                background-color: transparent !important;
                box-shadow: none !important;
                border: 0 !important;
                border-radius: 0 !important;
                outline: none !important;
                -webkit-box-shadow: none !important;
            }
        }
    </style>
</head>
<body class="min-h-screen bg-gray-50 font-sans text-gray-900 antialiased">
<?php helper('rbac'); ?>
<div id="admin-shell" class="flex h-screen w-full overflow-hidden">
    <div id="sidebar-overlay" class="fixed inset-0 z-40 hidden bg-black/50 lg:hidden" aria-hidden="true"></div>
    <?= $this->include('layouts/sidebar') ?>
    <div class="flex min-w-0 flex-1 flex-col overflow-hidden bg-gray-50">
        <?= $this->include('layouts/header') ?>
        <main class="custom-scrollbar relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
            <div class="mx-auto w-full max-w-screen-2xl flex-1 p-4 pb-10 md:p-6 md:pb-12 2xl:p-8 2xl:pb-14">
                <?= $this->renderSection('content') ?>
            </div>
            <?= $this->include('layouts/footer') ?>
        </main>
    </div>
</div>
<script>
(function () {
    var shell = document.getElementById('admin-shell');
    var overlay = document.getElementById('sidebar-overlay');
    var btnMobile = document.getElementById('btn-mobile-sidebar');
    var btnDesktop = document.getElementById('btn-desktop-sidebar-toggle');
    function openMobile() {
        if (!shell) return;
        shell.classList.add('mobile-sidebar-open');
        if (overlay) overlay.classList.remove('hidden');
    }
    function closeMobile() {
        if (!shell) return;
        shell.classList.remove('mobile-sidebar-open');
        if (overlay) overlay.classList.add('hidden');
    }
    if (btnMobile) btnMobile.addEventListener('click', function () {
        if (shell && shell.classList.contains('mobile-sidebar-open')) closeMobile(); else openMobile();
    });
    if (overlay) overlay.addEventListener('click', closeMobile);
    window.addEventListener('resize', function () {
        if (window.matchMedia('(min-width: 1024px)').matches) closeMobile();
    });
    if (btnDesktop && shell) {
        btnDesktop.addEventListener('click', function () {
            shell.classList.toggle('sidebar-narrow');
            try {
                localStorage.setItem('adminSidebarNarrow', shell.classList.contains('sidebar-narrow') ? '1' : '0');
            } catch (e) {}
        });
        try {
            if (localStorage.getItem('adminSidebarNarrow') === '1') {
                shell.classList.add('sidebar-narrow');
            }
        } catch (e) {}
    }
})();
</script>
</body>
</html>
