<style>
    /* .layout-menu-collapsed .app-brand-logo {
        display: none !important;
    } */
</style>
<aside id="layout-menu" class="layout-menu menu-vertical menu">
    <div class="app-brand demo mt-3">
             <a href="#" class="app-brand-link">
            <span class="app-brand-logo demo">
                <span class="text-center w-100">
                    <img src="{{ asset('/assets/image') }}/side-bar.png" height="100px" alt="Logo">
                </span>
            </span>
        </a>

        <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
            <i class="icon-base ti menu-toggle-icon d-none d-xl-block"></i>
            <i class="icon-base ti tabler-x d-block d-xl-none"></i>
        </a>
    </div>

    <div class="menu-inner-shadow"></div>

    <ul class="menu-inner py-1">

        <li class="menu-item @if (Route::is('user.dashboard')) active @endif">
            <a href="{{ route('user.dashboard') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-smart-home"></i>
                <div data-i18n="Dashboard">Dashboard</div>
            </a>
        </li>

         <li class="menu-item @if (Route::is('user.gold_dashboard')||Route::is('user.gold_deposit')||Route::is('user.gold_roi_income_report')) active @endif">
            <a href="{{ route('user.gold_dashboard') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-crown"></i>
                <div data-i18n="Gold">Gold</div>
            </a>
        </li>
         <li class="menu-item @if (Route::is('user.silver_dashboard')||Route::is('user.silver_deposit')||Route::is('user.silver_roi_income_report')) active @endif">
            <a href="{{ route('user.silver_dashboard') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-star"></i>
                <div data-i18n="Silver">Silver</div>
            </a>
        </li>
         <li class="menu-item @if (Route::is('user.diamond_dashboard')||Route::is('user.diamond_deposit')||Route::is('user.diamond_roi_income_report')||Route::is('user.diamond_level_income')||Route::is('user.direct_team')||Route::is('user.level_team')) active @endif">
            <a href="{{ route('user.diamond_dashboard') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-diamond"></i>
                <div data-i18n="Diamond">Diamond</div>
            </a>
        </li>
         <li class="menu-item @if (Route::is('user.product_wallet')) active @endif">
            <a href="{{ route('user.product_wallet') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-wallet"></i>
                <div data-i18n="Product Wallet">Product Wallet</div>
            </a>
        </li>
<li class="menu-item sidebar-glow @if (Route::is('user.og24_dashboard')) active @endif">
    <a href="{{ route('user.og24_dashboard') }}" class="menu-link text-warning fw-bold">
        <i class="menu-icon icon-base ti tabler-premium-rights"></i>
        <div data-i18n="OG24">OG24</div>
    </a>
</li>

<li class="menu-item sidebar-glow @if (Route::is('user.vip_dashboard')) active @endif">
    <a href="{{ route('user.vip_dashboard') }}" class="menu-link text-warning fw-bold">
        <i class="menu-icon icon-base ti tabler-premium-rights"></i>
        <div data-i18n="Omiga VIP">Omiga VIP</div>
    </a>
</li>

<li class="menu-item sidebar-glow @if (Route::is('user.og3_dashboard')) active @endif">
    <a href="{{ route('user.og3_dashboard') }}" class="menu-link text-warning fw-bold">
        <i class="menu-icon icon-base ti tabler-premium-rights"></i>
        <div data-i18n="OG3">OG3</div>
    </a>
</li>
<style>
    /* Attention Sidebar Animation */
.sidebar-glow {
    position: relative;
    margin-bottom: 8px;
    border-radius: 12px;
    overflow: hidden;
    animation: floatPulse 2s infinite ease-in-out;
}


.sidebar-glow .menu-link:hover {
    transform: translateX(8px) scale(1.03);
    box-shadow: 0 0 18px rgba(255, 193, 7, 0.45);
}

.sidebar-glow .menu-icon,
.sidebar-glow .menu-link div {
    animation: blinkGold 1.8s infinite alternate;
}


/* Floating Pulse */
@keyframes floatPulse {
    0%,100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Gold Blink */
@keyframes blinkGold {
    0% {
        color: #ffc107;
        text-shadow: 0 0 5px rgba(255,193,7,0.3);
    }
    100% {
        color: #fff3cd;
        text-shadow: 0 0 12px rgba(255,193,7,0.8);
    }
}

/* Shine Move */
@keyframes shineMove {
    0% {
        left: -120%;
    }
    100% {
        left: 150%;
    }
}

/* Active Menu Strong Highlight */
.sidebar-glow.active .menu-link {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255,193,7,0.6);
}
</style>
        <li class="menu-item @if (Route::is('user.reset_password')) active @endif">
            <a href="{{ route('user.reset_password') }}" class="menu-link">
                <i class="menu-icon icon-base ti tabler-lock"></i>
                <div data-i18n="Reset Password">Reset Password</div>
            </a>
        </li>

        <li class="menu-item">
            <a href="#" class="menu-link" data-bs-toggle="modal" data-bs-target="#logout">
                <i class="menu-icon icon-base ti tabler-logout"></i>
                <div data-i18n="Logout">Logout</div>
            </a>
        </li>
    </ul>
</aside>

<div class="menu-mobile-toggler d-xl-none rounded-1">
    <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large text-bg-secondary p-2 rounded-1">
        <i class="ti tabler-menu icon-base"></i>
        <i class="ti tabler-chevron-right icon-base"></i>
    </a>
</div>

<div class="modal fade" id="logout" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to logout?</p>

            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                <form action="{{ route('user.logout_form') }}" method="GET" id="logoutForm">


                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" class="btn btn-danger p-3 fw-semibold" id="logout_btn">
                        Yes, Sure
                    </button>
                </form>

            </div>
        </div>
    </div>
</div>
<script>
    document.getElementById('logout_btn').addEventListener('click', function() {
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('logoutForm').submit();
    });
</script>
