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

<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 classrooms</p>
          <h4 class="mb-0">{{ $num_of_classroom }}</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-StudentScheduleCard />
  </div>
  <div class="col-lg-6 col-md-6">
    <x-StudentExamCard />
  </div>
</div>
