<!DOCTYPE html>
<html lang="en" class="light-style layout-menu-fixed" dir="ltr" data-theme="theme-default"
  data-assets-path="../assets/" data-template="vertical-menu-template-free">
  
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>Dashboard - AMetative HLE</title>
    <meta name="description" content="" />

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ asset('publicc/backend/assets/img/logo/logo_ametative.png') }}" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet" />

    <!-- Icons -->
    <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/fonts/boxicons.css') }}" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Core CSS -->
    <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/css/core.css') }}"
      class="template-customizer-core-css" />
    <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/css/theme-default.css') }}"
      class="template-customizer-theme-css" />
    <link rel="stylesheet" href="{{ asset('publicc/backend/assets/css/demo.css') }}" />

    <!-- Vendors CSS -->
    <link rel="stylesheet"
      href="{{ asset('publicc/backend/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />
    <link rel="stylesheet" href="{{ asset('publicc/backend/assets/vendor/libs/apex-charts/apex-charts.css') }}" />

    <!-- Helpers -->
    <script src="{{ asset('publicc/backend/assets/vendor/js/helpers.js') }}"></script>
    <script src="{{ asset('publicc/backend/assets/js/config.js') }}"></script>
  </head>

  <body>
    <!-- Layout wrapper -->
    <div class="layout-wrapper layout-content-navbar">
      <div class="layout-container">
        <!-- Sidebar Menu -->
        <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
          <div class="app-brand demo">
            <a href="dashboard" class="app-brand-link">
              <span class="app-brand-logo demo">
                <img src="{{ asset('publicc/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>

          <!-- Profil -->
          <div class="text-center p-3">
          <div style="width: 120px; height: 120px; background: #D9D9D9; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin: auto;">
            <img style="width: 90px; height: 90px; border-radius: 50%;" src="{{ asset('storage/' . Auth::user()->foto) }}"
              alt="Profile Picture" />
          </div>
          <div class="mt-2" style="color: #666; font-size: 16px; font-weight: 500;">
            {{ Auth::user()->nama_lengkap }}
          </div>
          <div style="color: #666; font-size: 14px;">
            {{ Auth::user()->nim }}
          </div>
        </div>


          <!-- Menu Navigasi -->
          <ul class="menu-inner py-1">
            <li class="menu-item active">
              <a href="" 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">
              <a href="{{ route('user.questionnaire.check')}}" class="menu-link">
                <i class="menu-icon tf-icons bx bx-pencil"></i>
                <div data-i18n="Analytics">Kuesioner</div>
              </a>
            </li>

            <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">
                  <a href="" class="menu-link">
                    <div data-i18n="Perfect Scrollbar">Kinesthetic</div>
                  </a>
                </li>
              </ul>
            </li>

            <li class="menu-item">
              <a href="" class="menu-link">
                <i class="menu-icon tf-icons bx bx-history"></i>
                <div data-i18n="Analytics">History</div>
              </a>
            </li>
          </ul>
        </aside>

        <!-- Layout Page Start -->
        <div class="layout-page">

        <nav
            class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
            id="layout-navbar"
          >
            <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
              <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                <i class="bx bx-menu bx-sm"></i>
              </a>
            </div>

            <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
              <!-- Search -->
              <!-- <div class="navbar-nav align-items-center">
                <div class="nav-item d-flex align-items-center">
                  <i class="bx bx-search fs-4 lh-0"></i>
                  <input
                    type="text"
                    class="form-control border-0 shadow-none"
                    placeholder="Search..."
                    aria-label="Search..."
                  />
                </div>
              </div> -->
              <!-- /Search -->

              <ul class="navbar-nav flex-row align-items-center ms-auto">
                <!-- Notifikasi -->
            
                <!-- User -->
                <li class="nav-item navbar-dropdown dropdown-user dropdown">
                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                  <div class="avatar avatar-online">
                    <img src="{{ asset('storage/' . Auth::user()->foto) }}" 
                        alt="Profile" 
                        class="rounded-circle" 
                        style="width: 40px; height: 40px; object-fit: cover;" />
                  </div>
                </a>

                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                    <a class="dropdown-item" href="">
                      <div class="d-flex">
                        <div class="flex-shrink-0 me-3">
                          <div class="avatar avatar-online">
                            <img src="{{ asset('storage/' . Auth::user()->foto) }}" alt="Profile Picture" class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;" />
                          </div>
                        </div>
                        <div class="flex-grow-1">
                          <span class="fw-semibold d-block">{{ Auth::user()->nama_lengkap }}</span>
                          <small class="text-muted">{{ Auth::user()->nim }}</small>
                        </div>
                      </div>
                    </a>

                    </li>
                    <li>
                      <div class="dropdown-divider"></div>
                    </li>
                    <li>
                      <a class="dropdown-item" href="/profile">
                        <i class="bx bx-user me-2"></i>
                        <span class="align-middle">My Profile</span>
                      </a>
                    </li>
                    <li>
                      <!-- <a class="dropdown-item" href="#">
                        <i class="bx bx-cog me-2"></i>
                        <span class="align-middle">Settings</span>
                      </a> -->
                    </li>
                    <li>
                      <div class="dropdown-divider"></div>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#confirmlogout">
                          <i class="bx bx-power-off me-2"></i>
                          <span class="align-middle">Log Out</span>
                      </a>
                  </li>
                  </ul>
                </li>
                <!--/ User -->
              </ul>
            </div>
          </nav>

          <!-- Modal Konfirmasi -->
          <div class="modal fade" id="confirmlogout" tabindex="-1" aria-labelledby="confirmlogoutLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="confirmlogoutLabel">Konfirmasi Logout</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                Apakah Anda yakin ingin logout?
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tidak</button>
                <!-- Form logout yang di-submit ketika user klik "Ya" -->
                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                  @csrf
                </form>
                <button type="button" class="btn btn-primary" onclick="document.getElementById('logout-form').submit();">Ya, Logout</button>
              </div>
            </div>
          </div>
        </div>
