<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <title><?= $title ?? 'SIM System' ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?= csrf_hash() ?>">

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

    <?= $this->renderSection('css') ?>

    <style>
        :root {
            --sidebar-w: 240px;
            --bg-page: #f8fafc;
            --bg-side: #ffffff;
            --border: rgba(0, 0, 0, .08);
            --accent: #3b82f6;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --muted: #64748b;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        body {
            background: var(--bg-page);
            color: var(--text-main);
            font-family: 'Inter', system-ui, sans-serif;
            min-height: 100vh;
            /* Kunci utama: body sendiri tidak scroll — biarkan main-content yang scroll */
            overflow: hidden;
        }

        /* ── SIDEBAR ── */
        .sidebar {
            width: var(--sidebar-w);
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background: var(--bg-side);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            z-index: 100;
            transition: transform .3s ease;
            /* Sidebar tidak boleh scroll secara keseluruhan */
            overflow: hidden;
        }

        .sidebar-brand {
            padding: 20px 20px 16px;
            border-bottom: 1px solid var(--border);
            /* Tidak boleh shrink — selalu terlihat di atas */
            flex-shrink: 0;
        }

        .sidebar-brand .brand-logo {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #4f8ef7, #7c5cfc);
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-bottom: 8px;
        }

        .sidebar-brand h5 {
            color: var(--accent);
            font-size: .9rem;
            font-weight: 700;
            margin: 0;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .sidebar-brand small {
            color: var(--text-muted);
            font-size: .72rem;
        }

        /* KUNCI FIX: nav area scroll sendiri, tidak mempengaruhi halaman */
        .sidebar-nav {
            flex: 1 1 0;          /* ambil sisa ruang, bisa shrink */
            min-height: 0;        /* wajib agar flex child bisa scroll */
            padding: 12px 12px;
            overflow-y: auto;     /* scroll hanya di dalam sidebar-nav */
            overflow-x: hidden;
            /* Sembunyikan scrollbar tapi tetap bisa scroll */
            scrollbar-width: thin;
            scrollbar-color: #e2e8f0 transparent;
        }

        .sidebar-nav::-webkit-scrollbar {
            width: 4px;
        }
        .sidebar-nav::-webkit-scrollbar-track {
            background: transparent;
        }
        .sidebar-nav::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 10px;
        }
        .sidebar-nav::-webkit-scrollbar-thumb:hover {
            background: #cbd5e1;
        }

        .nav-label {
            font-size: .65rem;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: #334155;
            padding: 10px 8px 4px;
            font-weight: 600;
        }

        .sidebar-nav a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            color: var(--text-muted);
            text-decoration: none;
            border-radius: 8px;
            margin-bottom: 2px;
            font-size: .875rem;
            transition: background .15s, color .15s;
            position: relative;
        }

        .sidebar-nav a .nav-icon {
            font-size: 1rem;
            width: 20px;
            text-align: center;
            flex-shrink: 0;
        }

        .sidebar-nav a:hover {
            background: #f1f5f9;
            color: var(--accent);
        }

        .sidebar-nav a.active {
            background: rgba(59, 130, 246, .08);
            color: var(--accent);
            border: 1px solid rgba(59, 130, 246, .15);
            font-weight: 600;
        }

        .sidebar-nav a.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 20%;
            bottom: 20%;
            width: 3px;
            background: linear-gradient(#4f8ef7, #7c5cfc);
            border-radius: 0 3px 3px 0;
        }

        /* Footer selalu nempel di bawah sidebar */
        .sidebar-footer {
            flex-shrink: 0;       /* tidak boleh shrink */
            padding: 14px 20px;
            border-top: 1px solid var(--border);
            font-size: .72rem;
            color: var(--text-muted);
            background: var(--bg-side);
        }

        /* ── TOPBAR (mobile) ── */
        .topbar {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background: var(--bg-side);
            border-bottom: 1px solid var(--border);
            align-items: center;
            padding: 0 16px;
            gap: 12px;
            z-index: 200;
        }

        .topbar-brand {
            font-weight: 700;
            font-size: .95rem;
            color: var(--accent);
            flex: 1;
        }

        .btn-menu {
            background: none;
            border: none;
            color: var(--text-main);
            font-size: 1.4rem;
            cursor: pointer;
            padding: 4px;
        }

        /* ── OVERLAY (mobile) ── */
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .6);
            z-index: 99;
        }

        .sidebar-overlay.show {
            display: block;
        }

        /* ── MAIN CONTENT — ini yang scroll, bukan body ── */
        .main-content {
            margin-left: var(--sidebar-w);
            height: 100vh;
            overflow-y: auto;     /* halaman scroll di sini */
            overflow-x: hidden;
            padding: 28px 24px;
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 768px) {
            body {
                overflow: hidden;
            }

            .topbar {
                display: flex;
            }

            .sidebar {
                transform: translateX(-100%);
                top: 0;
                z-index: 150;
            }

            .sidebar.open {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0;
                height: 100vh;
                padding: 72px 16px 20px;
            }
        }
    </style>
</head>

<body>

    <!-- Mobile Topbar -->
    <div class="topbar">
        <button class="btn-menu" id="btnMenu"><i class="bi bi-list"></i></button>
        <span class="topbar-brand">SIM Dashboard</span>
    </div>

    <!-- Overlay -->
    <div class="sidebar-overlay" id="overlay"></div>

    <!-- SIDEBAR -->
    <div class="sidebar" id="sidebar">

        <div class="sidebar-brand">
            <div class="brand-logo">📊</div>
            <h5>SIM Dashboard</h5>
            <small>Sales Information Management</small>
        </div>

        <nav class="sidebar-nav" id="sidebarNav">

            <!-- ── DATA MASTER ── -->
            <div class="nav-label">Data Master</div>

            <a href="<?= base_url('hrd/karyawan') ?>"
                class="<?= str_contains(uri_string(), 'hrd/karyawan') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-person-fill"></i></span>
                Karyawan
            </a>

            <a href="<?= base_url('bahan') ?>"
                class="<?= str_contains(uri_string(), 'bahan') && !str_contains(uri_string(), 'pembelian-bahan') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-basket2-fill"></i></span>
                Bahan
            </a>

            <a href="<?= base_url('produk') ?>"
                class="<?= str_contains(uri_string(), 'produk') && !str_contains(uri_string(), 'rekap-produk') && !str_contains(uri_string(), 'produksi') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-bag-fill"></i></span>
                Produk
            </a>

            <a href="<?= base_url('resep') ?>"
                class="<?= str_contains(uri_string(), 'resep') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-journal-text"></i></span>
                Resep
            </a>

            <a href="<?= base_url('master/marketplace') ?>"
                class="<?= str_contains(uri_string(), 'master/marketplace') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-cart-fill"></i></span>
                Marketplace
            </a>

            <a href="<?= base_url('master/maklon') ?>"
                class="<?= str_contains(uri_string(), 'master/maklon') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-building-fill"></i></span>
                Mitra Maklon
            </a>

            <a href="<?= base_url('master/reseller') ?>"
                class="<?= str_contains(uri_string(), 'master/reseller') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-people-fill"></i></span>
                Reseller
            </a>

            <!-- ── TRANSAKSI ── -->
            <div class="nav-label">Transaksi</div>

            <a href="<?= base_url('pembelian-bahan') ?>"
                class="<?= str_contains(uri_string(), 'pembelian-bahan') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-receipt-cutoff"></i></span>
                Pembelian Bahan
            </a>

            <a href="<?= base_url('produksi') ?>"
                class="<?= str_contains(uri_string(), 'produksi') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-gear-fill"></i></span>
                Produksi
            </a>

            <a href="<?= base_url('penjualan') ?>"
                class="<?= str_contains(uri_string(), 'penjualan') && !str_contains(uri_string(), 'laporan-penjualan') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-shop"></i></span>
                Penjualan
            </a>

            <a href="<?= base_url('hrd/absensi') ?>"
                class="<?= str_contains(uri_string(), 'hrd/absensi') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-calendar-check-fill"></i></span>
                Absensi
            </a>

            <a href="<?= base_url('hrd/penggajian') ?>"
                class="<?= str_contains(uri_string(), 'hrd/penggajian') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-cash-coin"></i></span>
                Penggajian
            </a>

            <a href="<?= base_url('finance/pengeluaran') ?>"
                class="<?= str_contains(uri_string(), 'finance/pengeluaran') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-wallet2"></i></span>
                Pengeluaran
            </a>

            <a href="<?= base_url('import') ?>"
                class="<?= str_contains(uri_string(), 'import') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-cloud-upload-fill"></i></span>
                Import TikTok
            </a>

            <a href="<?= base_url('finance/buku-besar') ?>"
                class="<?= str_contains(uri_string(), 'finance/buku-besar') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-journal-bookmark-fill"></i></span>
                Buku Besar
            </a>

            <!-- ── LAPORAN ── -->
            <div class="nav-label">Laporan</div>

            <a href="<?= base_url('hrd/laporan-absensi') ?>"
                class="<?= str_contains(uri_string(), 'laporan-absensi') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-clipboard-data"></i></span>
                Rekap Absensi
            </a>

            <a href="<?= base_url('hrd/laporan-penggajian') ?>"
                class="<?= str_contains(uri_string(), 'laporan-penggajian') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-cash-stack"></i></span>
                Rekap Penggajian
            </a>

            <a href="<?= base_url('laporan/produksi') ?>"
                class="<?= str_contains(uri_string(), 'laporan/produksi') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-clipboard-data-fill"></i></span>
                Laporan Produksi
            </a>

            <a href="<?= base_url('laporan-penjualan') ?>"
                class="<?= str_contains(uri_string(), 'laporan-penjualan') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-bar-chart-line-fill"></i></span>
                Laporan Penjualan
            </a>

            <a href="<?= base_url('finance/laporan-keuangan') ?>"
                class="<?= str_contains(uri_string(), 'finance/laporan-keuangan') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-graph-up-arrow"></i></span>
                Laporan Keuangan
            </a>

            <a href="<?= base_url('withdrawal') ?>"
                class="<?= str_contains(uri_string(), 'withdrawal') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-bank"></i></span>
                Withdrawal
            </a>

            <a href="<?= base_url('rekap-produk') ?>"
                class="<?= str_contains(uri_string(), 'rekap-produk') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-clipboard-data-fill"></i></span>
                Rekap Produk
            </a>

            <a href="<?= base_url('analytics') ?>"
                class="<?= str_contains(uri_string(), 'analytics') ? 'active' : '' ?>">
                <span class="nav-icon"><i class="bi bi-bar-chart-fill"></i></span>
                Analytics
            </a>

        </nav>

        <div class="sidebar-footer">
            SIM System &copy; <?= date('Y') ?>
        </div>

    </div>

    <!-- MAIN CONTENT -->
    <div class="main-content" id="mainContent">
        <?= $this->renderSection('content') ?>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const sidebar  = document.getElementById('sidebar');
        const overlay  = document.getElementById('overlay');
        const btnMenu  = document.getElementById('btnMenu');
        const sidebarNav = document.getElementById('sidebarNav');

        // ── Buka/tutup sidebar (mobile) ──────────────────────────────
        btnMenu.addEventListener('click', () => {
            sidebar.classList.toggle('open');
            overlay.classList.toggle('show');
        });

        overlay.addEventListener('click', () => {
            sidebar.classList.remove('open');
            overlay.classList.remove('show');
        });

        // ── Scroll sidebar ke link yang aktif saat halaman load ──────
        // Ini yang memperbaiki: klik link bawah → halaman baru load →
        // sidebar-nav di-scroll ke posisi link aktif secara halus
        window.addEventListener('DOMContentLoaded', () => {
            const activeLink = sidebarNav.querySelector('a.active');
            if (activeLink) {
                // Delay kecil agar layout sudah settle
                setTimeout(() => {
                    activeLink.scrollIntoView({
                        block: 'nearest',   // tidak over-scroll jika sudah terlihat
                        behavior: 'smooth',
                    });
                }, 80);
            }
        });
    </script>

    <?= $this->renderSection('js') ?>

</body>

</html>