@props(['activePage'])

<aside
  class="sidenav navbar navbar-vertical navbar-expand-xs border-radius-xl fixed-start bg-gradient-dark my-3 ms-3 border-0"
  id="sidenav-main"
>

  <div class="sidenav-header">
    <i
      class="fas fa-times position-absolute d-none d-xl-none end-0 top-0 cursor-pointer p-3 text-white opacity-5"
      id="iconSidenav"
      aria-hidden="true"
    ></i>

    <a
      class="navbar-brand d-flex text-wrap align-items-center m-0"
      href=" {{ route('dashboard') }} "
    >
      <span class="font-weight-bold ms-2 text-white">
        Admin management panel
      </span>
    </a>
  </div>

  <hr class="horizontal light mb-2 mt-0">

  <div
    class="navbar-collapse max-height-vh-100 collapse w-auto"
    id="sidenav-collapse-main"
    style="height: unset;"
  >

    <ul class="navbar-nav">

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'dashboard' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('dashboard') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">dashboard</i>
          </div>
          <span class="nav-link-text ms-1">
            Dashboard
          </span>
        </a>
      </li>

      <li class="nav-item mt-3">
        <h6
          class="text-uppercase font-weight-bolder opacity-8 ms-2 ps-4 text-xs text-white"
        >
          Pages</h6>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'students' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('students.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">Students</span>

        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'teachers' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teachers.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">Teachers</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'admins' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('admins.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">Admins</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'subjects' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('subjects.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">Subjects</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'classrooms' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('classrooms.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">Class rooms</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'schedules' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('schedules.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">Schedules</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'attendances' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('attendances.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">notifications</i>
          </div>
          <span class="nav-link-text ms-1">Attendances</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'exams' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('exams.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">notifications</i>
          </div>
          <span class="nav-link-text ms-1">Exam</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'exam_results' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('exam_results.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">notifications</i>
          </div>
          <span class="nav-link-text ms-1">Exam Results</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'payments' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('adminShowPayments') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">notifications</i>
          </div>
          <span class="nav-link-text ms-1">Payments / Receipts</span>
        </a>
      </li>

      <li
        class="nav-item"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'tables' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('tables') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">Tables</span>
        </a>
      </li>

      <li
        class="nav-item"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'billing' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('billing') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">receipt_long</i>
          </div>
          <span class="nav-link-text ms-1">Billing</span>
        </a>
      </li>

      <li
        class="nav-item"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'virtual-reality' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('virtual-reality') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">view_in_ar</i>
          </div>
          <span class="nav-link-text ms-1">Virtual Reality</span>
        </a>
      </li>

      <li
        class="nav-item"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'rtl' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('rtl') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i
              class="material-icons opacity-10">format_textdirection_r_to_l</i>
          </div>
          <span class="nav-link-text ms-1">RTL</span>
        </a>
      </li>

      <li
        class="nav-item"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'notifications' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('notifications') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">notifications</i>
          </div>
          <span class="nav-link-text ms-1">Notifications</span>
        </a>
      </li>

    </ul>
  </div>
  <div class="sidenav-footer position-absolute w-100 bottom-0">

    <div style="display: none">
      <div class="mx-3">
        <a
          class="btn bg-gradient-primary w-100"
          href="../../documentation/getting-started/installation.html"
          target="_blank"
        >
          View documentation
        </a>
      </div>

      <div class="mx-3">
        <a
          class="btn bg-gradient-primary w-100"
          type="button"
          href="//www.vtc.edu.hk"
          target="_blank"
        >
          <i class="material-icons">link</i> FYP
        </a>
      </div>
    </div>

</aside>
