{{-- SIDEBAR --}}
<aside class="sidebar bg-ink-soft border-end d-flex flex-column">

    <div class="d-flex align-items-center gap-2 px-3 py-3 border-bottom">
        <div class="d-flex align-items-center justify-content-center rounded-1 bg-gold flex-shrink-0"
            style="width:34px;height:34px;background:var(--gold);color:var(--ink);font-family:var(--font-display);font-weight:700;">
            V
        </div>
        <span class="sidebar-brand-name font-display fs-5 text-gold">Vortex</span>
    </div>

    <nav class="nav flex-column py-2 flex-grow-1">

        <div class="sidebar-section-label text-uppercase small text-secondary px-3 pt-2 pb-1">
            Overview
        </div>

        <a href="{{ route('user.dashboard') }}"
            class="nav-link d-flex align-items-center gap-2 px-3 py-2 @if(Route::is('user.dashboard')) active @endif">
            <i class="ti ti-layout-dashboard"></i>
            <span class="nav-label">Dashboard</span>
        </a>

        <a href="{{ route('user.referral') }}"
            class="nav-link @if(Route::is('user.referral')) active @endif d-flex align-items-center gap-2 px-3 py-2">
            <i class="ti ti-users"></i>
            <span class="nav-label">Refer & Earn</span>
        </a>

        <a href="{{ route('user.online_transfer') }}"
            class="nav-link @if(Route::is('user.offline_transfer') || Route::is('user.online_transfer')) active @endif d-flex align-items-center gap-2 px-3 py-2">
            <i class="ti ti-wallet"></i>
            <span class="nav-label">Wallet Deposit</span>
        </a>

        <a href="{{ route('user.purchase_package') }}"
            class="nav-link d-flex @if(Route::is('user.my_purchases') || Route::is('user.purchase_package') || Route::is('edit_package')) active @endif align-items-center gap-2 px-3 py-2">
            <i class="ti ti-package"></i>
            <span class="nav-label">Package</span>
        </a>

        <div class="sidebar-section-label text-uppercase small text-secondary px-3 pt-3 pb-1">
            Income
        </div>

        <a href="{{ route('user.level_income') }}"
            class="nav-link @if(Route::is('user.level_income')) active @endif d-flex align-items-center gap-2 px-3 py-2">
            <i class="ti ti-trending-up"></i>
            <span class="nav-label">Level Income</span>
        </a>
<a href="{{ route('user.rank_income') }}"
            class="nav-link d-flex align-items-center gap-2 px-3 py-2 @if(Route::is('user.rank_income')||Route::is('user.get_rank')) active @endif">
            <i class="ti ti-chart-bar"></i>
            <span class="nav-label">Rank Income</span>
        </a>
<div class="sidebar-section-label text-uppercase small text-secondary px-3 pt-3 pb-1">
            Team
        </div>
        <a href="{{ route('user.tree') }}"
            class="nav-link d-flex align-items-center gap-2 px-3 py-2 @if(Route::is('user.tree')) active @endif">
            <i class="ti ti-hierarchy-2"></i>
            <span class="nav-label">Geneology Tree</span>
        </a>

        <a href="{{ route('user.level_team') }}"
            class="nav-link d-flex align-items-center gap-2 px-3 py-2 @if(Route::is('user.level_team')) active @endif">
            <i class="ti ti-network"></i>
            <span class="nav-label">Level Team</span>
        </a>

        <a href="{{ route('user.direct_team') }}"
            class="nav-link d-flex align-items-center gap-2 px-3 py-2 @if(Route::is('user.direct_team')) active @endif">
            <i class="ti ti-user-share"></i>
            <span class="nav-label">Direct Team</span>
        </a>
  <div class="sidebar-section-label text-uppercase small text-secondary px-3 pt-3 pb-1">
            Others
        </div>
        <a href="{{ route('user.withdraw') }}"
            class="nav-link d-flex align-items-center gap-2 px-3 py-2 @if(Route::is('user.withdraw') || Route::is('user.withdrawals')) active @endif">
            <i class="ti ti-cash"></i>
            <span class="nav-label">Withdraw</span>
        </a>

        <a href="{{ route('user.complaint') }}"
            class="nav-link d-flex align-items-center gap-2 px-3 py-2 @if(Route::is('user.complaint')) active @endif">
            <i class="ti ti-headset"></i>
            <span class="nav-label">Support</span>
        </a>

    </nav>
</aside>

{{-- MOBILE BOTTOM BAR --}}
<nav class="mobile-bottom-bar">
    <a href="{{ route('user.dashboard') }}"
        class="mobile-nav-item @if(Route::is('user.dashboard')) active @endif">
        <i class="ti ti-layout-dashboard"></i>
        <span>Home</span>
    </a>

    <a href="{{ route('user.referral') }}"
        class="mobile-nav-item @if(Route::is('user.referral')) active @endif">
        <i class="ti ti-users"></i>
        <span>Refer</span>
    </a>

    <a href="{{ route('user.purchase_package') }}"
        class="mobile-nav-item @if(Route::is('user.purchase_package') || Route::is('user.my_purchases')) active @endif">
        <i class="ti ti-package"></i>
        <span>Package</span>
    </a>

    <a href="{{ route('user.withdraw') }}"
        class="mobile-nav-item @if(Route::is('user.withdraw') || Route::is('user.withdrawals')) active @endif">
        <i class="ti ti-cash"></i>
        <span>Withdraw</span>
    </a>

    <a href="{{ route('user.complaint') }}"
        class="mobile-nav-item @if(Route::is('user.complaint')) active @endif">
        <i class="ti ti-headset"></i>
        <span>Support</span>
    </a>
</nav>

{{-- MOBILE SIDEBAR BACKDROP --}}
<div class="sidebar-backdrop" id="sidebarBackdrop"></div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const sidebar = document.querySelector(".sidebar");
        const activeLink = sidebar?.querySelector(".nav-link.active");

        if (!sidebar || !activeLink) return;

        function scrollToActiveLink() {
            const sidebarRect = sidebar.getBoundingClientRect();
            const linkRect = activeLink.getBoundingClientRect();

            const linkTop = sidebar.scrollTop + linkRect.top - sidebarRect.top;
            const targetPosition = sidebar.clientHeight * 0.6;

            sidebar.scrollTop = Math.max(
                0,
                Math.min(
                    linkTop - targetPosition,
                    sidebar.scrollHeight - sidebar.clientHeight
                )
            );
        }

        requestAnimationFrame(scrollToActiveLink);
    });
</script>