@props(['num_of_student', 'num_of_teacher', 'num_of_exam', 'num_of_schedule', 'student'])

<x-layout bodyClass="g-sidenav-show bg-gray-200">

  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="show_dashboard"
    teacher_id="{{ $current_teacher->id }}"
  >
  </x-navbars.sidebar_triage>

  <main
    class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
  >

    <!-- Navbar -->
    <x-navbars.navs.auth
      titlePage="Teacher"
      role="{{ $request->user()->role }}"
      firstName="{{ $current_teacher->firstName }}"
      last_name="{{ $current_teacher->lastName }}"
    >
    </x-navbars.navs.auth>
    <!-- End Navbar -->

    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-header p-3 pt-2">
              <div
                class="icon icon-lg icon-shape bg-gradient-dark shadow-dark border-radius-xl mt-n4 position-absolute text-center"
              >
                <i class="material-icons opacity-10">weekend</i>
              </div>
              <div class="pt-1 text-end">
                <p class="text-capitalize mb-0 text-sm">Total students</p>
                <h4 class="mb-0">{{ $num_of_student }}</h4>
              </div>
            </div>
            <hr class="horizontal dark my-0">
            <div class="card-footer p-3">
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-header p-3 pt-2">
              <div
                class="icon icon-lg icon-shape bg-gradient-primary shadow-primary border-radius-xl mt-n4 position-absolute text-center"
              >
                <i class="material-icons opacity-10">person</i>
              </div>
              <div class="pt-1 text-end">
                <p class="text-capitalize mb-0 text-sm">Total teachers</p>
                <h4 class="mb-0">{{ $num_of_teacher }}</h4>
              </div>
            </div>
            <hr class="horizontal dark my-0">
            <div class="card-footer p-3">
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-header p-3 pt-2">
              <div
                class="icon icon-lg icon-shape bg-gradient-success shadow-success border-radius-xl mt-n4 position-absolute text-center"
              >
                <i class="material-icons opacity-10">person</i>
              </div>
              <div class="pt-1 text-end">
                <p class="text-capitalize mb-0 text-sm">Total exam</p>
                <h4 class="mb-0">{{ $num_of_exam }}</h4>
              </div>
            </div>
            <hr class="horizontal dark my-0">
            <div class="card-footer p-3">
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6">
          <div class="card">
            <div class="card-header p-3 pt-2">
              <div
                class="icon icon-lg icon-shape bg-gradient-info shadow-info border-radius-xl mt-n4 position-absolute text-center"
              >
                <i class="material-icons opacity-10">weekend</i>
              </div>
              <div class="pt-1 text-end">
                <p class="text-capitalize mb-0 text-sm">Total schedules</p>
                <h4 class="mb-0">{{ $num_of_schedule }}</h4>
              </div>
            </div>
            <hr class="horizontal dark my-0">
            <div class="card-footer p-3">
            </div>
          </div>
        </div>
      </div>

      <div class="row mt-4">
      </div>

      <div class="row mb-4">
        <div class="col-lg-6 col-md-6 mb-md-0 mb-4">
          <!-- <x-ProjectCard /> -->
          <x-TeacherScheduleCard teacher_id="{{ 1 }}" />
        </div>
        <div class="col-lg-6 col-md-6">
          <x-TeacherExamCard teacher_id="{{ 1 }}" />
        </div>
      </div>

      <x-footers.auth></x-footers.auth>
    </div>
  </main>

</x-layout>
