<?php
defined('BASEPATH') OR exit('No direct script access allowed');

/**
 * Mobile Bottom Navigation — Permission-Aware
 * Menggunakan is_menu_visible() dari app_helper.php
 * Menu tampil/sembunyi sesuai tabel menu_permissions (sama dengan sidebar)
 */

$_unread_saran     = isset($unread_saran)     ? (int)$unread_saran     : 0;
$_unread_pengaduan = isset($unread_pengaduan) ? (int)$unread_pengaduan : 0;
$_pending          = (isset($total_pembayaran_pending)  ? (int)$total_pembayaran_pending           : 0)
                   + (isset($pembayaran_iuran_pending)  ? count($pembayaran_iuran_pending)         : 0);
$_count_polling    = isset($count_polling_aktif)   ? (int)$count_polling_aktif   : 0;
$_count_berita     = isset($count_berita_baru)     ? (int)$count_berita_baru     : 0;
$_notif            = $_unread_saran + $_unread_pengaduan + $_pending;

$_foto_mbn      = $this->session->userdata('foto');
$_foto_path_mbn = 'uploads/foto_profil/' . $_foto_mbn;
$_has_foto_mbn  = !empty($_foto_mbn) && file_exists(FCPATH . $_foto_path_mbn);
$_role          = $this->session->userdata('role');

$_seg1 = $this->uri->segment(1);
$_seg2 = $this->uri->segment(2);

// Slugs yang masuk kategori "Lainnya" untuk deteksi active state tombol More
$_more_segs = [
    'profil','iuran','pinjaman','surat','pengaduan','inventaris',
    'peminjaman-inventaris','pengumuman','tabungan','kas','umkm',
    'bansos','arisan','jadwal','kegiatan','polling','struktur-rt',
    'kalender','video','berita','kartu-keluarga','notulen','pengaturan',
    'saran','tamu',
];
?>
<style>
/* ── Bottom Nav ── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1050;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
    padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 991.98px) {
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: 70px; }
}
.mbn-inner { display: flex; width: 100%; }
.mbn-item {
    flex: 1 1 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8px 4px 6px;
    text-decoration: none !important;
    color: #9ca3af;
    position: relative;
    transition: color .15s;
    cursor: pointer;
    background: none; border: none; min-width: 0;
}
.mbn-item.active { color: #14a897; }
.mbn-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 24px; height: 3px;
    background: #14a897;
    border-radius: 0 0 4px 4px;
}
.mbn-icon {
    width: 36px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px; position: relative; transition: background .15s;
}
.mbn-item.active .mbn-icon { background: rgba(20,168,151,0.12); }
.mbn-icon i { font-size: 1.2rem; }
.mbn-label { font-size: 0.7rem; font-weight: 500; white-space: nowrap; margin-top: 2px; }
.mbn-badge {
    position: absolute; top: -2px; right: -2px;
    background: #ef4444; color: #fff;
    font-size: 0.48rem; font-weight: 700;
    min-width: 13px; height: 13px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 1.5px solid #fff;
}

/* ── Overlay ── */
.mbn-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 1055;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.mbn-overlay.show { display: block; animation: overlayIn .2s ease; }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }

/* ── Bottom Sheet ── */
.mbn-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 1060; background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 0 0 calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    max-height: 85vh; overflow-y: auto;
}
.mbn-sheet.show { transform: translateY(0); }
.mbn-sheet-handle {
    width: 36px; height: 4px; background: #e5e7eb;
    border-radius: 2px; margin: 12px auto 0;
}
.mbn-sheet-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px 12px; border-bottom: 1px solid #f1f5f9;
}
.mbn-sheet-avatar {
    width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, #14a897, #0e7b6e);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #e9ecef; flex-shrink: 0;
}
.mbn-sheet-avatar img  { width:100%; height:100%; object-fit:cover; }
.mbn-sheet-userinfo .name { font-weight:600; font-size:.9rem; color:#1e293b; line-height:1.3; }
.mbn-sheet-userinfo .role { font-size:.72rem; color:#14a897; text-transform:uppercase; letter-spacing:.5px; }
.mbn-sheet-section {
    font-size:.62rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.07em; color:#94a3b8; padding:12px 16px 6px;
}
.mbn-sheet-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; padding: 4px 16px 8px;
}
.mbn-sheet-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 14px 8px; border-radius: 12px;
    background: #f8f9fa; text-decoration: none !important;
    color: #374151; font-size: .75rem; font-weight: 500;
    text-align: center; border: 1.5px solid transparent;
    transition: all .15s; position: relative;
}
.mbn-sheet-item:active,
.mbn-sheet-item.active        { background:#f0fdfb; border-color:#14a897; color:#14a897; }
.mbn-sheet-item.active-purple { background:#f5f3ff; border-color:#7c3aed; color:#7c3aed; }
.mbn-sheet-item.active-blue   { background:#eff6ff; border-color:#3b82f6; color:#1d4ed8; }
.mbn-sheet-item i { font-size: 1.4rem; }
.mbn-sheet-badge {
    position:absolute; top:8px; right:8px;
    background:#ef4444; color:#fff;
    font-size:.5rem; font-weight:700;
    min-width:14px; height:14px; border-radius:7px;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.mbn-sheet-badge-teal {
    position:absolute; top:8px; right:8px;
    background:#0d9488; color:#fff;
    font-size:.5rem; font-weight:700;
    min-width:14px; height:14px; border-radius:7px;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.mbn-sheet-divider { height:1px; background:#f1f5f9; margin:4px 16px 0; }
.mbn-sheet-logout {
    display:flex; align-items:center; gap:10px;
    margin:12px 16px 0; padding:12px 16px; border-radius:12px;
    background:#fff5f5; color:#ef4444; font-size:.85rem; font-weight:600;
    text-decoration:none !important; border:1.5px solid #fee2e2; transition:background .15s;
}
.mbn-sheet-logout:active { background:#fee2e2; color:#dc2626; }
</style>

<!-- ── Bottom Nav Bar ── -->
<nav class="mobile-bottom-nav">
    <div class="mbn-inner">

        <!-- Dashboard (selalu tampil) -->
        <a href="<?= base_url('dashboard') ?>"
           class="mbn-item <?= ($_seg1=='dashboard'||$_seg1=='') ? 'active' : '' ?>">
            <div class="mbn-icon"><i class="bi bi-speedometer2"></i></div>
            <span class="mbn-label">Dashboard</span>
        </a>

        <!-- Warga (ikut permission) -->
        <?php if (is_menu_visible('warga')): ?>
        <a href="<?= base_url('warga') ?>"
           class="mbn-item <?= ($_seg1=='warga' && $_seg2!='pemilih') ? 'active' : '' ?>">
            <div class="mbn-icon"><i class="bi bi-people-fill"></i></div>
            <span class="mbn-label">Warga</span>
        </a>
        <?php endif; ?>

        <!-- E-Visitor (ikut permission) -->
        <?php if (is_menu_visible('tamu')): ?>
        <a href="<?= base_url('tamu') ?>"
           class="mbn-item <?= $_seg1=='tamu' ? 'active' : '' ?>">
            <div class="mbn-icon"><i class="bi bi-person-badge-fill"></i></div>
            <span class="mbn-label">E-Visitor</span>
        </a>
        <?php endif; ?>

        <!-- More -->
        <button type="button"
                class="mbn-item <?= in_array($_seg1, $_more_segs) ? 'active' : '' ?>"
                id="mbnMoreBtn">
            <div class="mbn-icon">
                <i class="bi bi-grid-3x3-gap-fill"></i>
                <?php if ($_notif > 0): ?>
                <span class="mbn-badge"><?= $_notif > 9 ? '9+' : $_notif ?></span>
                <?php endif; ?>
            </div>
            <span class="mbn-label">Lainnya</span>
        </button>

    </div>
</nav>

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

<!-- Bottom Sheet -->
<div class="mbn-sheet" id="mbnSheet">
    <div class="mbn-sheet-handle"></div>

    <!-- Info user -->
    <div class="mbn-sheet-header">
        <div class="mbn-sheet-avatar">
            <?php if ($_has_foto_mbn): ?>
                <img src="<?= base_url($_foto_path_mbn).'?v='.filemtime(FCPATH.$_foto_path_mbn) ?>" alt="Foto">
            <?php else: ?>
                <i class="bi bi-person-fill" style="color:#fff; font-size:1.2rem;"></i>
            <?php endif; ?>
        </div>
        <div class="mbn-sheet-userinfo">
            <div class="name"><?= htmlspecialchars($this->session->userdata('nama')) ?></div>
            <div class="role"><?= ucfirst($_role) ?></div>
        </div>
    </div>

    <?php
    // ================================================================
    // HELPER LOKAL — render satu item grid, hanya jika menu visible
    // ================================================================
    function _mbn_item($slug, $seg1, $icon, $color, $label, $badge_html = '', $active_class = 'active') {
        if (!is_menu_visible($slug)) return;
        $is_active = ($seg1 === $slug) ? $active_class : '';
        echo '<a href="' . base_url($slug) . '" class="mbn-sheet-item ' . $is_active . '">';
        if ($badge_html) echo $badge_html;
        echo '<i class="' . $icon . '" style="color:' . $color . ';"></i>' . htmlspecialchars($label);
        echo '</a>';
    }
    ?>

    <!-- ═══ KEPENDUDUKAN ═══ -->
    <?php
    $show_kep = is_menu_visible('warga') || is_menu_visible('kartu-keluarga') || is_menu_visible('warga/pemilih');
    if ($show_kep): ?>
    <div class="mbn-sheet-section">Kependudukan</div>
    <div class="mbn-sheet-grid">
        <?php if (is_menu_visible('warga')): ?>
        <a href="<?= base_url('warga') ?>"
           class="mbn-sheet-item <?= ($_seg1=='warga'&&$_seg2!='pemilih')?'active':'' ?>">
            <i class="bi bi-people-fill" style="color:#0d9488;"></i>Data Warga
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('warga/pemilih')): ?>
        <a href="<?= base_url('warga/pemilih') ?>"
           class="mbn-sheet-item <?= ($_seg1=='warga'&&$_seg2=='pemilih')?'active-blue':'' ?>">
            <i class="bi bi-person-vcard-fill" style="color:#3b82f6;"></i>Pemilih
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('kartu-keluarga')): ?>
        <a href="<?= base_url('kartu-keluarga') ?>"
           class="mbn-sheet-item <?= $_seg1=='kartu-keluarga'?'active':'' ?>">
            <i class="bi bi-house-fill" style="color:#f59e0b;"></i>Kartu KK
        </a>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ═══ KEUANGAN ═══ -->
    <?php
    $show_keu = is_menu_visible('iuran') || is_menu_visible('kas') || is_menu_visible('tabungan')
             || is_menu_visible('pinjaman') || is_menu_visible('arisan');
    if ($show_keu): ?>
    <div class="mbn-sheet-divider"></div>
    <div class="mbn-sheet-section">Keuangan</div>
    <div class="mbn-sheet-grid">
        <?php if (is_menu_visible('kas')): ?>
        <a href="<?= base_url('kas') ?>"
           class="mbn-sheet-item <?= $_seg1=='kas'?'active':'' ?>">
            <i class="bi bi-bank2" style="color:#0891b2;"></i>
            <?= $_role=='warga' ? 'Kas RT' : 'Kas RT' ?>
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('iuran')): ?>
        <a href="<?= base_url('iuran') ?>"
           class="mbn-sheet-item <?= $_seg1=='iuran'?'active':'' ?>">
            <?php if ($_pending > 0): ?>
            <span class="mbn-sheet-badge"><?= $_pending > 9 ? '9+' : $_pending ?></span>
            <?php endif; ?>
            <i class="bi bi-cash-stack" style="color:#16a34a;"></i>
            <?= $_role=='warga' ? 'Iuran Saya' : 'Iuran' ?>
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('tabungan')): ?>
        <a href="<?= base_url('tabungan') ?>"
           class="mbn-sheet-item <?= $_seg1=='tabungan'?'active':'' ?>">
            <i class="bi bi-piggy-bank-fill" style="color:#0d9488;"></i>
            <?= $_role=='warga' ? 'Tabungan Saya' : 'Tabungan' ?>
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('pinjaman')): ?>
        <a href="<?= base_url('pinjaman') ?>"
           class="mbn-sheet-item <?= $_seg1=='pinjaman'?'active':'' ?>">
            <i class="bi bi-cash-coin" style="color:#f59e0b;"></i>
            <?= $_role=='warga' ? 'Pinjaman Saya' : 'Pinjaman' ?>
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('arisan')): ?>
        <a href="<?= base_url('arisan') ?>"
           class="mbn-sheet-item <?= $_seg1=='arisan'?'active':'' ?>">
            <i class="bi bi-gift-fill" style="color:#8b5cf6;"></i>Arisan
        </a>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ═══ INVENTARIS ═══ -->
    <?php
    $show_inv = is_menu_visible('inventaris') || is_menu_visible('peminjaman-inventaris');
    if ($show_inv): ?>
    <div class="mbn-sheet-divider"></div>
    <div class="mbn-sheet-section">Inventaris</div>
    <div class="mbn-sheet-grid">
        <?php if (is_menu_visible('inventaris')): ?>
        <a href="<?= base_url('inventaris') ?>"
           class="mbn-sheet-item <?= $_seg1=='inventaris'?'active':'' ?>">
            <i class="bi bi-box-seam-fill" style="color:#8b5cf6;"></i>Data Barang
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('peminjaman-inventaris')): ?>
        <a href="<?= base_url('peminjaman-inventaris') ?>"
           class="mbn-sheet-item <?= $_seg1=='peminjaman-inventaris'?'active-purple':'' ?>">
            <i class="bi bi-arrow-left-right" style="color:#7c3aed;"></i>Peminjaman
        </a>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ═══ LAYANAN WARGA ═══ -->
    <?php
    $show_lay = is_menu_visible('umkm') || is_menu_visible('bansos')
             || is_menu_visible('tamu') || is_menu_visible('surat');
    if ($show_lay): ?>
    <div class="mbn-sheet-divider"></div>
    <div class="mbn-sheet-section">Layanan Warga</div>
    <div class="mbn-sheet-grid">
        <?php if (is_menu_visible('surat')): ?>
        <a href="<?= base_url('surat') ?>"
           class="mbn-sheet-item <?= $_seg1=='surat'?'active':'' ?>">
            <i class="bi bi-file-earmark-text-fill" style="color:#7c3aed;"></i>
            <?= $_role=='warga' ? 'Pengajuan Surat' : 'Surat' ?>
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('umkm')): ?>
        <a href="<?= base_url('umkm') ?>"
           class="mbn-sheet-item <?= $_seg1=='umkm'?'active':'' ?>">
            <i class="bi bi-shop-window" style="color:#f59e0b;"></i>UMKM
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('bansos')): ?>
        <a href="<?= base_url('bansos') ?>"
           class="mbn-sheet-item <?= $_seg1=='bansos'?'active':'' ?>">
            <i class="bi bi-heart-pulse-fill" style="color:#ef4444;"></i>Bansos
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('tamu')): ?>
        <a href="<?= base_url('tamu') ?>"
           class="mbn-sheet-item <?= $_seg1=='tamu'?'active':'' ?>">
            <i class="bi bi-person-badge-fill" style="color:#0891b2;"></i>
            <?= $_role=='warga' ? 'E-Visitor' : 'E-Visitor' ?>
        </a>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ═══ KEGIATAN & INFO ═══ -->
    <?php
    $show_keg = is_menu_visible('pengumuman') || is_menu_visible('kalender')
             || is_menu_visible('jadwal')     || is_menu_visible('kegiatan')
             || is_menu_visible('notulen')    || is_menu_visible('struktur-rt');
    if ($show_keg): ?>
    <div class="mbn-sheet-divider"></div>
    <div class="mbn-sheet-section">Kegiatan &amp; Info</div>
    <div class="mbn-sheet-grid">
        <?php if (is_menu_visible('kegiatan')): ?>
        <a href="<?= base_url('kegiatan') ?>"
           class="mbn-sheet-item <?= $_seg1=='kegiatan'?'active':'' ?>">
            <i class="bi bi-calendar-event-fill" style="color:#0891b2;"></i>Kegiatan
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('pengumuman')): ?>
        <a href="<?= base_url('pengumuman') ?>"
           class="mbn-sheet-item <?= $_seg1=='pengumuman'?'active':'' ?>">
            <i class="bi bi-megaphone-fill" style="color:#ea580c;"></i>Pengumuman
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('jadwal')): ?>
        <a href="<?= base_url('jadwal') ?>"
           class="mbn-sheet-item <?= $_seg1=='jadwal'?'active':'' ?>">
            <i class="bi bi-calendar-check-fill" style="color:#0891b2;"></i>Jadwal
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('notulen')): ?>
        <a href="<?= base_url('notulen') ?>"
           class="mbn-sheet-item <?= $_seg1=='notulen'?'active':'' ?>">
            <i class="bi bi-journal-text" style="color:#0d9488;"></i>Notulen
            <?php if ($_role=='warga'): ?>
            <span style="font-size:.6rem;color:#64748b;">(View)</span>
            <?php endif; ?>
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('struktur-rt')): ?>
        <a href="<?= base_url('struktur-rt') ?>"
           class="mbn-sheet-item <?= $_seg1=='struktur-rt'?'active':'' ?>">
            <i class="bi bi-diagram-3-fill" style="color:#6366f1;"></i>Struktur RT
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('kalender')): ?>
        <a href="<?= base_url('kalender') ?>"
           class="mbn-sheet-item <?= $_seg1=='kalender'?'active':'' ?>">
            <i class="bi bi-calendar3" style="color:#06b6d4;"></i>Kalender
        </a>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ═══ ASPIRASI & PARTISIPASI ═══ -->
    <?php
    $show_asp = is_menu_visible('saran') || is_menu_visible('pengaduan') || is_menu_visible('polling');
    if ($show_asp): ?>
    <div class="mbn-sheet-divider"></div>
    <div class="mbn-sheet-section">Aspirasi &amp; Partisipasi</div>
    <div class="mbn-sheet-grid">
        <?php if (is_menu_visible('saran')): ?>
        <a href="<?= base_url('saran') ?>"
           class="mbn-sheet-item <?= $_seg1=='saran'?'active':'' ?>">
            <?php if ($_role==='admin' && $_unread_saran > 0): ?>
            <span class="mbn-sheet-badge"><?= $_unread_saran > 9 ? '9+' : $_unread_saran ?></span>
            <?php endif; ?>
            <i class="bi bi-chat-dots-fill" style="color:#0d9488;"></i>Saran &amp; Kritik
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('pengaduan')): ?>
        <a href="<?= base_url('pengaduan') ?>"
           class="mbn-sheet-item <?= $_seg1=='pengaduan'?'active':'' ?>">
            <?php if ($_role==='admin' && $_unread_pengaduan > 0): ?>
            <span class="mbn-sheet-badge"><?= $_unread_pengaduan > 9 ? '9+' : $_unread_pengaduan ?></span>
            <?php endif; ?>
            <i class="bi bi-exclamation-circle-fill" style="color:#e11d48;"></i>Pengaduan
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('polling')): ?>
        <a href="<?= base_url('polling') ?>"
           class="mbn-sheet-item <?= $_seg1=='polling'?'active':'' ?>">
            <?php if ($_count_polling > 0): ?>
            <span class="mbn-sheet-badge-teal"><?= $_count_polling > 9 ? '9+' : $_count_polling ?></span>
            <?php endif; ?>
            <i class="bi bi-bar-chart-fill" style="color:#0d9488;"></i>Polling
        </a>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ═══ MEDIA ═══ -->
    <?php
    $show_media = is_menu_visible('video') || is_menu_visible('berita');
    if ($show_media): ?>
    <div class="mbn-sheet-divider"></div>
    <div class="mbn-sheet-section">Media</div>
    <div class="mbn-sheet-grid">
        <?php if (is_menu_visible('video')): ?>
        <a href="<?= base_url('video') ?>"
           class="mbn-sheet-item <?= $_seg1=='video'?'active':'' ?>">
            <i class="bi bi-camera-video-fill" style="color:#dc2626;"></i>Video
        </a>
        <?php endif; ?>
        <?php if (is_menu_visible('berita')): ?>
        <a href="<?= base_url('berita') ?>"
           class="mbn-sheet-item <?= $_seg1=='berita'?'active':'' ?>">
            <?php if ($_count_berita > 0): ?>
            <span class="mbn-sheet-badge-teal"><?= $_count_berita > 9 ? '9+' : $_count_berita ?></span>
            <?php endif; ?>
            <i class="bi bi-newspaper" style="color:#2563eb;"></i>Berita
        </a>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ═══ AKUN & PENGATURAN ═══ -->
    <div class="mbn-sheet-divider"></div>
    <div class="mbn-sheet-section">Akun</div>
    <div class="mbn-sheet-grid">
        <!-- Profil selalu tampil -->
        <a href="<?= base_url('profil') ?>"
           class="mbn-sheet-item <?= $_seg1=='profil'?'active':'' ?>">
            <i class="bi bi-person-circle" style="color:#14a897;"></i>Profil
        </a>
        <?php if ($_role === 'admin'): ?>
        <a href="<?= base_url('pengaturan') ?>"
           class="mbn-sheet-item <?= $_seg1=='pengaturan'?'active':'' ?>">
            <i class="bi bi-gear-fill" style="color:#64748b;"></i>Pengaturan
        </a>
        <a href="<?= base_url('menu-management') ?>"
           class="mbn-sheet-item <?= $_seg1=='menu-management'?'active':'' ?>">
            <i class="bi bi-shield-lock-fill" style="color:#7c3aed;"></i>Menu &amp; Akses
        </a>
        <?php endif; ?>
    </div>

    <!-- Logout -->
    <div class="mbn-sheet-divider"></div>
    <a href="<?= base_url('auth/logout') ?>" class="mbn-sheet-logout">
        <i class="bi bi-box-arrow-right"></i>Keluar dari Akun
    </a>
</div>

<script>
(function () {
    var btn     = document.getElementById('mbnMoreBtn');
    var sheet   = document.getElementById('mbnSheet');
    var overlay = document.getElementById('mbnOverlay');

    function openSheet()  {
        overlay.classList.add('show');
        sheet.classList.add('show');
        document.body.style.overflow = 'hidden';
    }
    function closeSheet() {
        sheet.classList.remove('show');
        overlay.classList.remove('show');
        document.body.style.overflow = '';
    }

    if (btn)     btn.addEventListener('click', openSheet);
    if (overlay) overlay.addEventListener('click', closeSheet);

    var startY = 0;
    sheet.addEventListener('touchstart', function (e) {
        startY = e.touches[0].clientY;
    }, { passive: true });
    sheet.addEventListener('touchend', function (e) {
        if (e.changedTouches[0].clientY - startY > 60) closeSheet();
    }, { passive: true });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeSheet();
    });
})();
</script>