<style>
    /* Variabel Warna Kustom Sidebar Bintang 5 */
    :root {
        --sb-bg: linear-gradient(185deg, #090d16 0%, #0f172a 100%); /* Deep Dark Cosmic Space */
        --sb-active-glow: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); /* Blue Violet Electric Gradient */
        --sb-hover-bg: rgba(255, 255, 255, 0.04);
        --sb-text-muted: #94a3b8;
        --sb-text-active: #ffffff;
        --sb-border: rgba(255, 255, 255, 0.06);
        --transition-premium: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Container Utama Sidebar */
    .premium-sidebar {
        background: var(--sb-bg);
        color: #ffffff;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--sb-border);
        box-shadow: 12px 0 35px rgba(9, 13, 22, 0.3);
        overflow: hidden;
    }

    /* Brand Header */
    .sb-brand {
        padding: 1.85rem 1.5rem;
        border-bottom: 1px solid var(--sb-border);
        display: flex;
        align-items: center;
        gap: 0.85rem;
    }

    .sb-brand-logo {
        width: 40px;
        height: 40px;
        background: var(--sb-active-glow);
        border-radius: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
        position: relative;
    }

    .sb-brand-logo::after {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 0.95rem;
        background: var(--sb-active-glow);
        z-index: -1;
        opacity: 0.4;
        filter: blur(4px);
    }

    .sb-brand-logo i {
        font-size: 1.2rem;
        color: #ffffff;
        animation: rotateGear 10s linear infinite;
    }

    .sb-brand-text {
        font-weight: 800;
        font-size: 1.25rem;
        letter-spacing: 0.08em;
        background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* User Profile Card */
    .sb-profile-card {
        padding: 1.15rem;
        margin: 1.25rem 1.25rem 0.75rem 1.25rem;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-radius: 1.15rem;
        display: flex;
        align-items: center;
        gap: 0.85rem;
        transition: var(--transition-premium);
        position: relative;
    }

    .sb-profile-card:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(99, 102, 241, 0.2);
        transform: translateY(-2px);
    }

    .sb-avatar-container {
        position: relative;
    }

    .sb-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #0f172a;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid rgba(99, 102, 241, 0.4);
        color: #60a5fa;
    }

    .sb-avatar i {
        font-size: 1.2rem;
    }

    /* Online Pulsating Dot */
    .sb-status-dot {
        position: absolute;
        bottom: 1px;
        right: 1px;
        width: 11px;
        height: 11px;
        background-color: #10b981;
        border: 2px solid #090d16;
        border-radius: 50%;
        z-index: 2;
    }

    .sb-status-dot::after {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 50%;
        border: 2px solid #10b981;
        animation: pulse-green 1.8s infinite ease-in-out;
    }

    .sb-profile-info {
        overflow: hidden;
    }

    .sb-profile-name {
        font-size: 0.85rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 0.15rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .sb-role-badge {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 0.15rem 0.6rem;
        border-radius: 2rem;
        letter-spacing: 0.05em;
        display: inline-block;
    }

    .role-superadmin { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }
    .role-owner { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
    .role-admin { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.2); }

    /* Instant Menu Search Filter */
    .sb-search-wrapper {
        padding: 0.5rem 1.25rem 0.85rem 1.25rem;
        position: relative;
    }

    .sb-search-inner {
        position: relative;
        width: 100%;
    }

    .sb-search-input {
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 0.75rem;
        padding: 0.55rem 1rem 0.55rem 2.25rem;
        font-size: 0.8rem;
        color: #ffffff;
        transition: var(--transition-premium);
    }

    .sb-search-input:focus {
        outline: none;
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(99, 102, 241, 0.5);
        box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
    }

    .sb-search-icon {
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.75rem;
        color: var(--sb-text-muted);
        pointer-events: none;
        transition: var(--transition-premium);
    }

    .sb-search-input:focus + .sb-search-icon {
        color: #60a5fa;
    }

    /* Navigation Container */
    .sb-navigation {
        flex: 1;
        padding: 0 1rem 1.5rem 1rem;
        overflow-y: auto;
    }

    /* List Menu */
    .sb-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .sb-menu-header {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #475569;
        padding: 1.2rem 0.75rem 0.5rem 0.75rem;
        transition: var(--transition-premium);
    }

    /* Menu Link */
    .sb-menu-link {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.8rem 1rem;
        color: var(--sb-text-muted);
        text-decoration: none !important;
        font-size: 0.88rem;
        font-weight: 500;
        border-radius: 0.75rem;
        transition: var(--transition-premium);
        position: relative;
    }

    .sb-menu-link i {
        font-size: 1.05rem;
        width: 24px;
        text-align: center;
        transition: var(--transition-premium);
    }

    /* State Hover */
    .sb-menu-link:hover {
        color: #ffffff;
        background: var(--sb-hover-bg);
    }

    .sb-menu-link:hover i {
        transform: scale(1.15) rotate(5deg);
        color: #60a5fa;
    }

    /* State Active dengan Glassmorphism & Accent Glow */
    .sb-menu-link.active {
        background: var(--sb-active-glow);
        color: var(--sb-text-active);
        font-weight: 600;
        box-shadow: 0 4px 18px rgba(99, 102, 241, 0.3);
    }

    .sb-menu-link.active i {
        color: #ffffff !important;
        transform: scale(1.1) rotate(0deg);
    }

    /* Menu Indicator (Active Accent) */
    .sb-menu-link.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 25%;
        height: 50%;
        width: 4px;
        background: #ffffff;
        border-radius: 0 4px 4px 0;
    }

    /* Sidebar Badges Premium */
    .sb-badge {
        margin-left: auto;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 0.15rem 0.5rem;
        border-radius: 0.5rem;
        letter-spacing: 0.02em;
    }

    .sb-badge-live {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.25);
        animation: glowPulseRed 2s infinite alternate;
    }

    .sb-badge-new {
        background: rgba(59, 130, 246, 0.15);
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.25);
    }

    .sb-badge-secure {
        background: rgba(16, 185, 129, 0.15);
        color: #10b981;
        border: 1px solid rgba(16, 185, 129, 0.25);
    }

    /* Divider */
    .sb-divider {
        height: 1px;
        background: var(--sb-border);
        margin: 1.2rem 0;
    }

    /* Keluar / Logout Menu */
    .sb-logout-link {
        color: #f87171 !important;
    }

    .sb-logout-link:hover {
        background: rgba(239, 68, 68, 0.08) !important;
        color: #ef4444 !important;
    }

    .sb-logout-link:hover i {
        color: #ef4444 !important;
        transform: translateX(-4px) !important;
    }

    /* Keyframes Animations */
    @keyframes rotateGear {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes pulse-green {
        0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
        70% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
        100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    @keyframes glowPulseRed {
        0% { box-shadow: 0 0 2px rgba(239, 68, 68, 0.2); }
        100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
    }

    /* Custom Scrollbar untuk Navigation */
    .sb-navigation::-webkit-scrollbar {
        width: 4px;
    }
    .sb-navigation::-webkit-scrollbar-track {
        background: transparent;
    }
    .sb-navigation::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 10px;
    }
    .sb-navigation::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.18);
    }
</style>

<?php
// Logika Role PHP
$idRole = (int) session()->get('id_role');
$role = match ($idRole) {
    1 => 'superadmin',
    2 => 'owner',
    3 => 'admin',
    default => '',
};

// Daftar Menu terintegrasi dengan Label Badge Premium
$menus = [
    'superadmin' => [
        ['url' => 'superadmin/dashboard', 'icon' => 'bi bi-house-door-fill', 'label' => 'Dashboard'],
        ['url' => 'superadmin/user', 'icon' => 'bi bi-people-fill', 'label' => 'Manajemen User', 'badge' => 'Mgt', 'badgeClass' => 'new'],
        // ['url' => 'superadmin/role', 'icon' => 'bi bi-person-badge', 'label' => 'Role'],
        ['url' => 'superadmin/activity', 'icon' => 'bi bi-clock-history', 'label' => 'Activity Log'],
        ['url' => 'superadmin/loginlog', 'icon' => 'bi bi-door-open', 'label' => 'Login Log'],
        ['url' => 'superadmin/backup', 'icon' => 'bi bi-database-fill', 'label' => 'Backup', 'badge' => 'Secure', 'badgeClass' => 'secure'],
    ],
    'owner' => [
        ['url' => 'owner/dashboard', 'icon' => 'bi bi-house-door-fill', 'label' => 'Dashboard'],
        ['url' => 'owner/product', 'icon' => 'bi bi-box-seam', 'label' => 'Barang Center'],
        ['url' => 'owner/category', 'icon' => 'bi bi-tags-fill', 'label' => 'Kategori Barang'],
        ['url' => 'owner/payments', 'icon' => 'bi bi-wallet2', 'label' => 'Monitoring Pembayaran', 'badge' => 'Live', 'badgeClass' => 'live'],
        ['url' => 'owner/material', 'icon' => 'bi bi-truck', 'label' => 'Belanja Material'],
        ['url' => 'owner/payroll', 'icon' => 'bi bi-cash-stack', 'label' => 'Penggajian'],
        ['url' => 'owner/report', 'icon' => 'bi bi-bar-chart-line-fill', 'label' => 'Laporan'],
        ['url' => 'owner/setting', 'icon' => 'bi bi-gear-fill', 'label' => 'Pengaturan'],
    ],
    'admin' => [
        ['url' => 'admin/dashboard', 'icon' => 'bi bi-house-door-fill', 'label' => 'Dashboard'],
        ['url' => 'admin/orders', 'icon' => 'bi bi-cart-fill', 'label' => 'Semua Order'],
        ['url' => 'admin/payments', 'icon' => 'bi bi-credit-card-2-back-fill', 'label' => 'Pembayaran'],
        ['url' => 'admin/production', 'icon' => 'bi bi-gear-fill', 'label' => 'Produksi'],
    ]
];
?>

<aside class="app-sidebar premium-sidebar" id="appSidebar">
    <!-- Brand Logo & Name -->
    <div class="sb-brand sidebar-brand">
        <div class="sb-brand-logo">
            <i class="bi bi-gear-fill"></i>
        </div>
        <span class="sb-brand-text sidebar-brand-copy">CNC SYSTEM</span>
    </div>

    <!-- User Profile Dynamic Panel -->
    <div class="sb-profile-card sidebar-profile">
        <div class="sb-avatar-container">
            <div class="sb-avatar">
                <i class="bi bi-person-gear"></i>
            </div>
            <!-- Dynamic Status pulse green -->
            <div class="sb-status-dot"></div>
        </div>
        <div class="sb-profile-info sidebar-profile-copy">
            <div class="sb-profile-name"><?= esc(session()->get('nama') ?? 'Operator CNC') ?></div>
            <span class="sb-role-badge role-<?= esc($role) ?>">
                <?= esc($role === 'superadmin' ? 'Super Admin' : ucfirst($role)) ?>
            </span>
        </div>
    </div>

    <!-- Instant Live Search Bar -->
    <div class="sb-search-wrapper sidebar-search">
        <div class="sb-search-inner">
            <input type="text" id="sbMenuSearch" class="sb-search-input" placeholder="Cari menu...">
            <i class="fas fa-search sb-search-icon"></i>
        </div>
    </div>

    <!-- Navigation List -->
    <div class="sb-navigation">
        <div class="sb-menu-header nav-heading" id="menuHeaderMain">Menu Utama</div>
        <ul class="sb-menu-list" id="sidebarMenuList">
            <?php if (isset($menus[$role])): ?>
                <?php foreach ($menus[$role] as $m): ?>
                    <li class="sb-menu-item">
                        <a href="<?= base_url($m['url']) ?>" class="sb-menu-link sidebar-link <?= (url_is($m['url'] . '*')) ? 'active' : '' ?>">
                            <i class="<?= $m['icon'] ?>"></i>
                            <span class="nav-label"><?= $m['label'] ?></span>
                            <!-- Dynamic Badge rendering -->
                            <?php if (isset($m['badge'])): ?>
                                <span class="sb-badge nav-badge sb-badge-<?= $m['badgeClass'] ?>"><?= $m['badge'] ?></span>
                            <?php endif; ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            <?php else: ?>
                <li class="sb-menu-item">
                    <div class="p-3 text-center text-warning fs-8">
                        <i class="fas fa-exclamation-triangle mb-1 d-block fs-5"></i>
                        Role tidak terdaftar
                    </div>
                </li>
            <?php endif; ?>

            <li class="sb-divider" id="menuDividerLogout"></li>

            <li class="sb-menu-item">
                <a href="<?= base_url('logout') ?>" class="sb-menu-link sidebar-link sb-logout-link">
                    <i class="fas fa-sign-out-alt"></i>
                    <span class="nav-label">Keluar</span>
                </a>
            </li>
        </ul>
    </div>
</aside>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('sbMenuSearch');
        const menuItems = document.querySelectorAll('#sidebarMenuList .sb-menu-item');
        const menuHeader = document.getElementById('menuHeaderMain');
        const menuDivider = document.getElementById('menuDividerLogout');

        if (searchInput) {
            searchInput.addEventListener('keyup', function() {
                const filter = searchInput.value.toLowerCase().trim();
                let hasVisibleItems = false;

                menuItems.forEach(function(item) {
                    // Kecualikan tombol logout dari proses pencarian
                    if (item.querySelector('.sb-logout-link')) {
                        return;
                    }

                    const textSpan = item.querySelector('span');
                    if (textSpan) {
                        const textValue = textSpan.textContent || textSpan.innerText;
                        if (textValue.toLowerCase().indexOf(filter) > -1) {
                            item.style.display = "";
                            hasVisibleItems = true;
                        } else {
                            item.style.display = "none";
                        }
                    }
                });

                // Menyesuaikan tampilan header menu dan pembatas jika filter sedang aktif
                if (filter !== '') {
                    menuHeader.style.opacity = '0.3';
                } else {
                    menuHeader.style.opacity = '1';
                    menuHeader.style.display = '';
                    menuDivider.style.display = '';
                }
            });
        }
    });
</script>
