@props(['activePage', 'teacherId'])

<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('teacherShowDashboard') }} "
    >
      <span class="font-weight-bold ms-2 text-white">
        Teacher 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 == 'show_dashboard' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teacherShowDashboard') }}"
        >
          <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 == 'teacher_info' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teacherInfo') }}"
        >
          <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">Teacher Info</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'students' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teachersListStudent') }}"
        >
          <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_list_subject' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teacherShowSubject') }}"
        >
          <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 == 'show_classrooms' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teacherShowClassrooms') }}"
        >
          <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 == 'show_schedules' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teachersListSchedule') }}"
        >
          <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 == 'teachers_apply_subject' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teacherShowApplySubjects') }}"
        >
          <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">Apply schedules</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'show_applicable_schedules' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teacherShowApplicableSchedules') }}"
        >
          <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">Applicable schedules</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'exams' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teacherShowExams') }}"
        >
          <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('teacherShowExamResult', [$teacherId]) }}"
        >
          <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"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'attendances' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teacherShowAttendances') }}"
        >
          <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 == 'notices' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teacherShowNotices') }}"
        >
          <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">Notices</span>

          @if ($activePage == 'notices')
            <div></div>
          @else
            <div class="ps-1">
              <span class="badge bg-secondary">
                <div id="noticeUnreadCount">0</div>
              </span>
            </div>
          @endif
        </a>
      </li>

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

</aside>

@push('js')
  <script>
    @if ($activePage == 'notices')
      console.debug('notice page is active ')
    @else
      window.addEventListener('DOMContentLoaded', () => {
        console.debug('notices is not active ');
        console.log('teacherId: {{ $teacherId }}');
        fetch("{{ route('getTeacherUnreadNoticesCount', $teacherId) }}")
          .then(res => res.json())
          .then(res_json => {
            unread_count = res_json['unread'] || 0;
            document.querySelector('#noticeUnreadCount').innerHTML =
              unread_count;

          })
          .catch(err => console.error(err));
      })
    @endif
  </script>
@endpush
