<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
    <div class="app-brand demo">
        <a href="{{ route('dashboard') }}" class="app-brand-link">
            <span class="app-brand-logo demo">
                <img src="{{ asset('backend/assets/img/logo/logo_ametative.png') }}" alt="AMetative HLE" style="width: 65px; height: auto;">
            </span>
            <span class="app-brand-text demo menu-text fw-bolder ms-2" style="text-transform: none; font-size: 20px;">AMetative HLE</span>
        </a>
        <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
            <i class="bx bx-chevron-left bx-sm align-middle"></i>
        </a>
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px;">
        <div style="width: 120px; height: 120px; background: #D9D9D9; display: flex; justify-content: center; align-items: center; border-radius: 50%;">
            <img 
                style="width: 90px; height: 90px; border-radius: 50%;" 
                src="{{ optional(auth()->user())->foto_profil ? (str_contains(optional(auth()->user())->foto_profil, 'googleusercontent.com') ? optional(auth()->user())->foto_profil : asset('storage/' . optional(auth()->user())->foto_profil)) : asset('frontend/assets/img/avatars/1.png') }}" 
                alt="Profile Picture" 
            />
        </div>
        <div style="text-align: center; color: #666666; font-size: 16px; font-family: 'Noto Sans', sans-serif; font-weight: 500; line-height: 24px; letter-spacing: 0.19px; margin-top: 10px;">
            {{ auth()->user()->nama_lengkap ?? 'Tamu' }}
        </div>
        <div style="text-align: center; color: #666666; font-size: 14px; font-family: 'Noto Sans', sans-serif; font-weight: 500; line-height: 21px; letter-spacing: 0.17px;">
            {{ auth()->user()->nim ?? 'E41200000' }}
        </div>
    </div>

    <ul class="menu-inner py-1">
        <li class="menu-item @if(Route::is('dashboard')) active @endif">
            <a href="{{ route('dashboard') }}" class="menu-link">
                <i class="menu-icon tf-icons bx bx-home-circle"></i>
                <div data-i18n="Analytics">Dashboard</div>
            </a>
        </li>
        <li class="menu-item @if(Route::is('kuesioner')) active @endif">
            <a href="{{ route('kuesioner') }}" class="menu-link">
                <i class="menu-icon tf-icons bx bx-pencil"></i>
                <div data-i18n="Analytics">Kuesioner</div>
            </a>
        </li>
        @if( auth()->user()->category_meta != 0)
        <li class="menu-item @if(Route::is('materi-kinesthetic')) active @endif">
            <a href="{{ route('materi-kinesthetic') }}" class="menu-link">
                <i class="menu-icon tf-icons bx bx-copy"></i>
                <div data-i18n="Analytics">Materi</div>
            </a>
        </li>
        @endif
        <!-- <li class="menu-item">
            <a href="javascript:void(0)" class="menu-link menu-toggle">
                <i class="menu-icon tf-icons bx bx-copy"></i>
                <div data-i18n="Extended UI">Materi Pembelajaran</div>
            </a>
            <ul class="menu-sub">
                <li class="menu-item @if(Route::is('learning')) active @endif">
                    <a href="{{ route('dashboard') }}" class="menu-link">
                        <div data-i18n="Perfect Scrollbar">Kinesthetic</div>
                    </a>
                </li>
            </ul>
        </li> -->
        <li class="menu-item @if(Route::is('profil')) active @endif">
            <a href="{{ route('profil') }}" class="menu-link">
                <i class="menu-icon tf-icons bx bx-history"></i>
                <div data-i18n="Analytics">Profile</div>
            </a>
        </li>
	<li class="menu-item @if(Route::is('logout')) active @endif">
            <a href="{{ route('logout') }}" class="menu-link">
                <i class="menu-icon tf-icons bx bx-history"></i>
                <div data-i18n="Analytics">Keluar</div>
            </a>
        </li>
    </ul>
</aside>