@include('admin.common-layout.header')
  <div class="dashboard-main-body">
    <div class="breadcrumb d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
      <div class="">
        <h6 class="fw-semibold mb-0">Dashboard</h6>
        <!-- <p class="text-neutral-600 mt-4 mb-0">School -> Manage your school, track attendance, expense, and net worth.</p> -->
      </div>
    </div>

    <div class="mt-24">
      <div class="row gy-4">
        <div class="col-xxl-8">
          <div class="row gy-4">
            <div class="col-xxl-4 col-sm-6">
              <div class="card shadow-1 radius-8 gradient-bg-end-1 h-100">
                <div class="card-body p-20">
                  <div class="d-flex flex-wrap align-items-center gap-3 mb-16">
                    <div
                      class="w-44-px h-44-px bg-warning-600 rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/icons/dashboard-icon1.png') }}" alt="Icon">
                    </div>
                    <p class="fw-medium text-primary-light mb-1">Total Students</p>
                  </div>
                  <h6 class="mb-0">{{ $totalStudents }}</h6>
                  <!-- <p class="fw-medium text-sm text-primary-light mt-12 mb-0 d-flex align-items-center gap-2">
                    <span class="d-inline-flex align-items-center gap-1 text-primary-600 text-sm fw-semibold">
                      10%
                      <iconify-icon icon="bxs:up-arrow" class="text-xs"></iconify-icon>
                    </span>
                    +5 This Month
                  </p> -->
                </div>
              </div>
            </div>
            <div class="col-xxl-4 col-sm-6">
              <div class="card shadow-1 radius-8 gradient-bg-end-2 h-100">
                <div class="card-body p-20">
                  <div class="d-flex flex-wrap align-items-center gap-3 mb-16">
                    <div
                      class="w-44-px h-44-px bg-blue-600 rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/icons/dashboard-icon2.png') }}" alt="Icon">
                    </div>
                    <p class="fw-medium text-primary-light mb-1">Total Teachers</p>
                  </div>
                  <h6 class="mb-0">{{ $totalTeachers }}</h6>
                  <!-- <p class="fw-medium text-sm text-primary-light mt-12 mb-0 d-flex align-items-center gap-2">
                    <span class="d-inline-flex align-items-center gap-1 text-primary-600 text-sm fw-semibold">
                      10%
                      <iconify-icon icon="bxs:up-arrow" class="text-xs"></iconify-icon>
                    </span>
                    +5 This Month
                  </p> -->
                </div>
              </div>
            </div>
            <div class="col-xxl-4 col-sm-6">
              <div class="card shadow-1 radius-8 gradient-bg-end-3 h-100">
                <div class="card-body p-20">
                  <div class="d-flex flex-wrap align-items-center gap-3 mb-16">
                    <div
                      class="w-44-px h-44-px bg-purple-600 rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/icons/dashboard-icon3.png') }}" alt="Icon">
                    </div>
                    <p class="fw-medium text-primary-light mb-1">Total Boards</p>
                  </div>
                  <h6 class="mb-0">{{ $totalBoards }}</h6>
                  <!-- <p class="fw-medium text-sm text-primary-light mt-12 mb-0 d-flex align-items-center gap-2">
                    <span class="d-inline-flex align-items-center gap-1 text-primary-600 text-sm fw-semibold">
                      10%
                      <iconify-icon icon="bxs:up-arrow" class="text-xs"></iconify-icon>
                    </span>
                    +5 This Month
                  </p> -->
                </div>
              </div>
            </div>
            <div class="col-xxl-4 col-sm-6">
              <div class="card shadow-1 radius-8 gradient-bg-end-4 h-100">
                <div class="card-body p-20">
                  <div class="d-flex flex-wrap align-items-center gap-3 mb-16">
                    <div
                      class="w-44-px h-44-px bg-primary-600 rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/icons/dashboard-icon4.png') }}" alt="Icon">
                    </div>
                    <p class="fw-medium text-primary-light mb-1">Total Classes</p>
                  </div>
                  <h6 class="mb-0">{{ $totalClasses }}</h6>
                  <!-- <p class="fw-medium text-sm text-primary-light mt-12 mb-0 d-flex align-items-center gap-2">
                    <span class="d-inline-flex align-items-center gap-1 text-primary-600 text-sm fw-semibold">
                      10%
                      <iconify-icon icon="bxs:up-arrow" class="text-xs"></iconify-icon>
                    </span>
                    +5 This Month
                  </p> -->
                </div>
              </div>
            </div>
            <div class="col-xxl-4 col-sm-6">
              <div class="card shadow-1 radius-8 gradient-bg-end-5 h-100">
                <div class="card-body p-20">
                  <div class="d-flex flex-wrap align-items-center gap-3 mb-16">
                    <div
                      class="w-44-px h-44-px bg-success-600 rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/icons/dashboard-icon5.png') }}" alt="Icon">
                    </div>
                    <p class="fw-medium text-primary-light mb-1">Total Subjects</p>
                  </div>
                  <h6 class="mb-0">{{ $totalSubjects }}</h6>
                  <!-- <p class="fw-medium text-sm text-primary-light mt-12 mb-0 d-flex align-items-center gap-2">
                    <span class="d-inline-flex align-items-center gap-1 text-primary-600 text-sm fw-semibold">
                      10%
                      <iconify-icon icon="bxs:up-arrow" class="text-xs"></iconify-icon>
                    </span>
                    +5 This Month
                  </p> -->
                </div>
              </div>
            </div>
            <!--<div class="col-xxl-4 col-sm-6">
              <div class="card shadow-1 radius-8 gradient-bg-end-6 h-100">
                <div class="card-body p-20">
                  <div class="d-flex flex-wrap align-items-center gap-3 mb-16">
                    <div
                      class="w-44-px h-44-px bg-cyan-600 rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/icons/dashboard-icon6.png') }}" alt="Icon">
                    </div>
                    <p class="fw-medium text-primary-light mb-1">Total Student</p>
                  </div>
                  <h6 class="mb-0">20,000</h6>
                  <p class="fw-medium text-sm text-primary-light mt-12 mb-0 d-flex align-items-center gap-2">
                    <span class="d-inline-flex align-items-center gap-1 text-primary-600 text-sm fw-semibold">
                      10%
                      <iconify-icon icon="bxs:up-arrow" class="text-xs"></iconify-icon>
                    </span>
                    +5 This Month
                  </p>
                </div>
              </div>
            </div>!-->
          </div>
        </div>
        <!--<div class="col-xxl-4">
          <div class="card h-100">
            <div class="card-body p-0">
              <div
                class="d-flex flex-wrap align-items-center justify-content-between px-20 py-16 border-bottom border-neutral-200">
                <h6 class="text-lg mb-0">Student Attendance</h6>
              </div>
              <div class="p-20">
                <div class="d-flex gap-6">
                  <div class="h-44-px bg-primary-600 rounded" style="width: 87%;"></div>
                  <div class="h-44-px bg-warning-600 rounded" style="width: 40%;"></div>
                  <div class="h-44-px bg-purple-600 rounded" style="width: 20%;"></div>
                  <div class="h-44-px bg-success-600 rounded" style="width: 20%;"></div>
                </div>
                <div class="mt-32 d-flex flex-column gap-24">
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-2">
                      <span class="w-12-px h-12-px radius-2 bg-primary-600"></span>
                      <span class="text-neutral-600">Present </span>
                    </div>
                    <span class="fw-semibold text-primary-light">87%</span>
                  </div>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-2">
                      <span class="w-12-px h-12-px radius-2 bg-warning-600"></span>
                      <span class="text-neutral-600">Absent: </span>
                    </div>
                    <span class="fw-semibold text-primary-light">40%</span>
                  </div>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-2">
                      <span class="w-12-px h-12-px radius-2 bg-purple-600"></span>
                      <span class="text-neutral-600">Late </span>
                    </div>
                    <span class="fw-semibold text-primary-light">20%</span>
                  </div>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-2">
                      <span class="w-12-px h-12-px radius-2 bg-success-600"></span>
                      <span class="text-neutral-600">Half day </span>
                    </div>
                    <span class="fw-semibold text-primary-light">20%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row gy-4">
            <div class="col-xxl-8">
              <div class="row gy-4">
                <div class="col-12">
                  <div class="card h-100">
                    <div class="card-body p-0">
                      <div
                        class="d-flex flex-wrap align-items-center justify-content-between px-20 py-16 border-bottom border-neutral-200">
                        <h6 class="text-lg mb-0">Revenue Statistic</h6>
                      </div>
                      <div class="p-20">
                        <ul class="d-flex flex-wrap align-items-center justify-content-center mb-16 gap-3">
                          <li class="d-flex align-items-center gap-8">
                            <span class="w-12-px h-12-px radius-2 rotate-45-deg bg-primary-600"></span>
                            <span class="text-secondary-light text-sm fw-semibold">
                              Total Fee:
                              <span class="text-primary-light fw-bold">$500</span>
                            </span>
                          </li>
                          <li class="d-flex align-items-center gap-8">
                            <span class="w-12-px h-12-px radius-2 rotate-45-deg bg-warning-600"></span>
                            <span class="text-secondary-light text-sm font-semibold">
                              Collected Fee:
                              <span class="text-primary-light fw-bold"> $300</span>
                            </span>
                          </li>
                        </ul>
                        <div id="revenueStatistic"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card h-100">
                    <div class="card-body p-0">
                      <div
                        class="d-flex flex-wrap align-items-center justify-content-between px-20 py-16 border-bottom border-neutral-200">
                        <h6 class="text-lg mb-0">Notice Board</h6>
                        <div class="dropdown">
                          <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <iconify-icon icon="entypo:dots-three-vertical"
                              class="icon text-secondary-light"></iconify-icon>
                          </button>
                          <ul class="dropdown-menu p-12 border bg-base shadow">
                            <li>
                              <button type="button"
                                class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                                data-bs-toggle="modal" data-bs-target="#exampleModalView">
                                <iconify-icon icon="hugeicons:view" class="icon text-lg line-height-1"></iconify-icon>
                                View
                              </button>
                            </li>
                            <li>
                              <button type="button"
                                class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                                data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                                <iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
                                Edit
                              </button>
                            </li>
                            <li>
                              <button type="button"
                                class="delete-item dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10"
                                data-bs-toggle="modal" data-bs-target="#exampleModalDelete">
                                <iconify-icon icon="fluent:delete-24-regular"
                                  class="icon text-lg line-height-1"></iconify-icon>
                                Delete
                              </button>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="ps-20 pt-20 pb-20">
                        <div class="pe-20 d-flex flex-column gap-20 max-h-462-px overflow-y-auto scroll-sm">
                          <div class="d-flex align-items-start gap-16">
                            <img src="{{ asset('assets/images/thumbs/notice-board-img1.png') }}" alt="Thumbnail"
                              class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                            <div class="">
                              <h6 class="mb-4 text-lg">Admin</h6>
                              <p class="text-secondary-light text-sm mb-0">Lorem Ipsum is simply dummy text of the
                                printing and typesetti</p>
                              <span class="text-secondary-light text-sm mb-0 mt-4">25 Jan 2024</span>
                            </div>
                          </div>
                          <div class="d-flex align-items-start gap-16">
                            <img src="{{ asset('assets/images/thumbs/notice-board-img2.png') }}" alt="Thumbnail"
                              class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                            <div class="">
                              <h6 class="mb-4 text-lg">Kathryn Murphy</h6>
                              <p class="text-secondary-light text-sm mb-0">Lorem Ipsum is simply dummy text of the
                                printing and typesett ing industry Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry.</p>
                              <span class="text-secondary-light text-sm mb-0 mt-4">25 Jan 2024</span>
                            </div>
                          </div>
                          <div class="d-flex align-items-start gap-16">
                            <img src="{{ asset('assets/images/thumbs/notice-board-img3.png') }}" alt="Thumbnail"
                              class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                            <div class="">
                              <h6 class="mb-4 text-lg">Admin</h6>
                              <p class="text-secondary-light text-sm mb-0">Lorem Ipsum is simply dummy text of the
                                printing and typesetti</p>
                              <span class="text-secondary-light text-sm mb-0 mt-4">25 Jan 2024</span>
                            </div>
                          </div>
                          <div class="d-flex align-items-start gap-16">
                            <img src="{{ asset('assets/images/thumbs/notice-board-img2.png') }}" alt="Thumbnail"
                              class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                            <div class="">
                              <h6 class="mb-4 text-lg">John Doe</h6>
                              <p class="text-secondary-light text-sm mb-0">Lorem ipsum dolor sit amet consectetur
                                adipisicing elit. Laborum voluptas corporis qui dolore est odit officia fuga?</p>
                              <span class="text-secondary-light text-sm mb-0 mt-4">25 Jan 2024</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card h-100">
                    <div class="card-body p-0">
                      <div
                        class="d-flex flex-wrap align-items-center justify-content-between px-20 py-16 border-bottom border-neutral-200">
                        <h6 class="text-lg mb-0">Leave Requests</h6>
                        <div class="dropdown">
                          <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <iconify-icon icon="entypo:dots-three-vertical"
                              class="icon text-secondary-light"></iconify-icon>
                          </button>
                          <ul class="dropdown-menu p-12 border bg-base shadow">
                            <li>
                              <button type="button"
                                class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                                data-bs-toggle="modal" data-bs-target="#exampleModalView">
                                <iconify-icon icon="hugeicons:view" class="icon text-lg line-height-1"></iconify-icon>
                                View
                              </button>
                            </li>
                            <li>
                              <button type="button"
                                class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                                data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                                <iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
                                Edit
                              </button>
                            </li>
                            <li>
                              <button type="button"
                                class="delete-item dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10"
                                data-bs-toggle="modal" data-bs-target="#exampleModalDelete">
                                <iconify-icon icon="fluent:delete-24-regular"
                                  class="icon text-lg line-height-1"></iconify-icon>
                                Delete
                              </button>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="ps-20 pt-20 pb-20">
                        <div class="pe-20 d-flex flex-column gap-28 max-h-462-px overflow-y-auto scroll-sm">
                          <div class="d-flex align-items-center justify-content-between gap-16">
                            <div class="d-flex align-items-start gap-16">
                              <img src="{{ asset('assets/images/thumbs/leave-request-img1.png') }}" alt="Thumbnail"
                                class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                              <div class="">
                                <h6 class="mb-0 text-lg">Darlene Robertson</h6>
                                <span class="text-secondary-light text-sm mb-0">English Teacher</span>
                              </div>
                            </div>
                            <div class="text-end">
                              <span class="d-block fw-bold text-primary-light">3 Days</span>
                              <p class="text-secondary-light text-sm mb-0">Apply on: 10 April</p>
                            </div>
                          </div>
                          <div class="d-flex align-items-center justify-content-between gap-16">
                            <div class="d-flex align-items-start gap-16">
                              <img src="{{ asset('assets/images/thumbs/leave-request-img2.png') }}" alt="Thumbnail"
                                class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                              <div class="">
                                <h6 class="mb-0 text-lg">Esther Howard</h6>
                                <span class="text-secondary-light text-sm mb-0">English Teacher</span>
                              </div>
                            </div>
                            <div class="text-end">
                              <span class="d-block fw-bold text-primary-light">3 Days</span>
                              <p class="text-secondary-light text-sm mb-0">Apply on: 10 April</p>
                            </div>
                          </div>
                          <div class="d-flex align-items-center justify-content-between gap-16">
                            <div class="d-flex align-items-start gap-16">
                              <img src="{{ asset('assets/images/thumbs/leave-request-img3.png') }}" alt="Thumbnail"
                                class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                              <div class="">
                                <h6 class="mb-0 text-lg">Kristin Watson</h6>
                                <span class="text-secondary-light text-sm mb-0">English Teacher</span>
                              </div>
                            </div>
                            <div class="text-end">
                              <span class="d-block fw-bold text-primary-light">3 Days</span>
                              <p class="text-secondary-light text-sm mb-0">Apply on: 10 April</p>
                            </div>
                          </div>
                          <div class="d-flex align-items-center justify-content-between gap-16">
                            <div class="d-flex align-items-start gap-16">
                              <img src="{{ asset('assets/images/thumbs/leave-request-img4.png') }}" alt="Thumbnail"
                                class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                              <div class="">
                                <h6 class="mb-0 text-lg">Leslie Alexander</h6>
                                <span class="text-secondary-light text-sm mb-0">English Teacher</span>
                              </div>
                            </div>
                            <div class="text-end">
                              <span class="d-block fw-bold text-primary-light">3 Days</span>
                              <p class="text-secondary-light text-sm mb-0">Apply on: 10 April</p>
                            </div>
                          </div>
                          <div class="d-flex align-items-center justify-content-between gap-16">
                            <div class="d-flex align-items-start gap-16">
                              <img src="{{ asset('assets/images/thumbs/leave-request-img5.png') }}" alt="Thumbnail"
                                class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                              <div class="">
                                <h6 class="mb-0 text-lg">Dianne Russell</h6>
                                <span class="text-secondary-light text-sm mb-0">English Teacher</span>
                              </div>
                            </div>
                            <div class="text-end">
                              <span class="d-block fw-bold text-primary-light">3 Days</span>
                              <p class="text-secondary-light text-sm mb-0">Apply on: 10 April</p>
                            </div>
                          </div>
                          <div class="d-flex align-items-center justify-content-between gap-16">
                            <div class="d-flex align-items-start gap-16">
                              <img src="{{ asset('assets/images/thumbs/leave-request-img3.png') }}" alt="Thumbnail"
                                class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                              <div class="">
                                <h6 class="mb-0 text-lg">Kristin Watson</h6>
                                <span class="text-secondary-light text-sm mb-0">English Teacher</span>
                              </div>
                            </div>
                            <div class="text-end">
                              <span class="d-block fw-bold text-primary-light">3 Days</span>
                              <p class="text-secondary-light text-sm mb-0">Apply on: 10 April</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xxl-4">
              <div class="card h-100">
                <div class="card-body p-0">
                  <div
                    class="d-flex flex-wrap align-items-center justify-content-between px-20 py-16 border-bottom border-neutral-200">
                    <h6 class="text-lg mb-0">Calendar</h6>
                  </div>

                  <div class="p-20">
                    <div class="calendar">
                      <div class="calendar__header">
                        <button type="button" class="calendar__arrow left">
                          <i class="ri-arrow-left-s-line"></i>
                        </button>
                        <p class="display text-md text-secondary-light fw-semibold mb-0">""</p>
                        <button type="button" class="calendar__arrow right">
                          <i class="ri-arrow-right-s-line"></i>
                        </button>
                      </div>

                      <div class="calendar__week week">
                        <div class="calendar__week-text">Su</div>
                        <div class="calendar__week-text">Mo</div>
                        <div class="calendar__week-text">Tu</div>
                        <div class="calendar__week-text">We</div>
                        <div class="calendar__week-text">Th</div>
                        <div class="calendar__week-text">Fr</div>
                        <div class="calendar__week-text">Sa</div>
                      </div>
                      <div class="days"></div>
                    </div>
                  </div>

                  <div class="ps-20 pt-20 pb-20 border-top border-neutral-200">
                    <h6 class="text-lg mb-20">Upcoming Events</h6>
                    <div class="pe-20 d-flex flex-column gap-32 overflow-y-auto max-h-500-px scroll-sm">
                      <div class="d-flex align-items-center justify-content-between gap-16">
                        <div class="ps-10 border-start-width-3-px border-purple-600">
                          <div class="d-flex align-items-end gap-6">
                            <h6 class="text-lg fw-normal mb-0">09:00 - 09:45</h6>
                            <span class="text-xs text-secondary-light line-height-1 mb-2">AM</span>
                          </div>
                          <p class="text-secondary-light mt-4 mb-2 text-sm">Marketing Strategy Kickoff</p>
                          <p class="text-xs text-secondary-light mb-0">Lead by <a href="javascript:void(0)"
                              class="text-primary-600 hover-underline">Robert Fox</a></p>
                        </div>
                        <div>
                          <a href="javascript:void(0)"
                            class="py-6 px-16 radius-4 bg-neutral-100 text-secondary-light fw-semibold bg-hover-primary-600 hover-text-white">View</a>
                        </div>
                      </div>
                      <div class="d-flex align-items-center justify-content-between gap-16">
                        <div class="ps-10 border-start-width-3-px border-warning-600">
                          <div class="d-flex align-items-end gap-6">
                            <h6 class="text-lg fw-normal mb-0">11:15 - 12:00</h6>
                            <span class="text-xs text-secondary-light line-height-1 mb-2">AM</span>
                          </div>
                          <p class="text-secondary-light mt-4 mb-2 text-sm">Product Design Brainstorm</p>
                          <p class="text-xs text-secondary-light mb-0">Lead by <a href="javascript:void(0)"
                              class="text-primary-600 hover-underline">Leslie Alexander</a></p>
                        </div>
                        <div>
                          <a href="javascript:void(0)"
                            class="py-6 px-16 radius-4 bg-neutral-100 text-secondary-light fw-semibold bg-hover-primary-600 hover-text-white">View</a>
                        </div>
                      </div>
                      <div class="d-flex align-items-center justify-content-between gap-16">
                        <div class="ps-10 border-start-width-3-px border-blue-600">
                          <div class="d-flex align-items-end gap-6">
                            <h6 class="text-lg fw-normal mb-0">02:00 - 03:00</h6>
                            <span class="text-xs text-secondary-light line-height-1 mb-2">PM</span>
                          </div>
                          <p class="text-secondary-light mt-4 mb-2 text-sm">Client Feedback Review</p>
                          <p class="text-xs text-secondary-light mb-0">Lead by <a href="javascript:void(0)"
                              class="text-primary-600 hover-underline">Courtney Henry</a></p>
                        </div>
                        <div>
                          <a href="javascript:void(0)"
                            class="py-6 px-16 radius-4 bg-neutral-100 text-secondary-light fw-semibold bg-hover-primary-600 hover-text-white">View</a>
                        </div>
                      </div>
                      <div class="d-flex align-items-center justify-content-between gap-16">
                        <div class="ps-10 border-start-width-3-px border-success-600">
                          <div class="d-flex align-items-end gap-6">
                            <h6 class="text-lg fw-normal mb-0">04:15 - 05:00</h6>
                            <span class="text-xs text-secondary-light line-height-1 mb-2">PM</span>
                          </div>
                          <p class="text-secondary-light mt-4 mb-2 text-sm">Sprint Planning & Task Allocation</p>
                          <p class="text-xs text-secondary-light mb-0">Lead by <a href="javascript:void(0)"
                              class="text-primary-600 hover-underline">Eleanor Pena</a></p>
                        </div>
                        <div>
                          <a href="javascript:void(0)"
                            class="py-6 px-16 radius-4 bg-neutral-100 text-secondary-light fw-semibold bg-hover-primary-600 hover-text-white">View</a>
                        </div>
                      </div>
                      <div class="d-flex align-items-center justify-content-between gap-16">
                        <div class="ps-10 border-start-width-3-px border-primary-600">
                          <div class="d-flex align-items-end gap-6">
                            <h6 class="text-lg fw-normal mb-0">01:15 - 02:00</h6>
                            <span class="text-xs text-secondary-light line-height-1 mb-2">PM</span>
                          </div>
                          <p class="text-secondary-light mt-4 mb-2 text-sm">Client Feedback Review</p>
                          <p class="text-xs text-secondary-light mb-0">Lead by <a href="javascript:void(0)"
                              class="text-primary-600 hover-underline">John</a></p>
                        </div>
                        <div>
                          <a href="javascript:void(0)"
                            class="py-6 px-16 radius-4 bg-neutral-100 text-secondary-light fw-semibold bg-hover-primary-600 hover-text-white">View</a>
                        </div>
                      </div>
                      <div class="d-flex align-items-center justify-content-between gap-16">
                        <div class="ps-10 border-start-width-3-px border-warning-600">
                          <div class="d-flex align-items-end gap-6">
                            <h6 class="text-lg fw-normal mb-0">11:15 - 12:00</h6>
                            <span class="text-xs text-secondary-light line-height-1 mb-2">AM</span>
                          </div>
                          <p class="text-secondary-light mt-4 mb-2 text-sm">Product Design Brainstorm</p>
                          <p class="text-xs text-secondary-light mb-0">Lead by <a href="javascript:void(0)"
                              class="text-primary-600 hover-underline">Leslie Alexander</a></p>
                        </div>
                        <div>
                          <a href="javascript:void(0)"
                            class="py-6 px-16 radius-4 bg-neutral-100 text-secondary-light fw-semibold bg-hover-primary-600 hover-text-white">View</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xxl-4 col-lg-6">
          <div class="card h-100">
            <div class="card-body p-0">
              <div
                class="d-flex flex-wrap align-items-center justify-content-between px-20 py-16 border-bottom border-neutral-200">
                <h6 class="text-lg mb-0">User Overview</h6>
                <div class="dropdown">
                  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <iconify-icon icon="entypo:dots-three-vertical" class="icon text-secondary-light"></iconify-icon>
                  </button>
                  <ul class="dropdown-menu p-12 border bg-base shadow">
                    <li>
                      <button type="button"
                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalView">
                        <iconify-icon icon="hugeicons:view" class="icon text-lg line-height-1"></iconify-icon>
                        View
                      </button>
                    </li>
                    <li>
                      <button type="button"
                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                        <iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
                        Edit
                      </button>
                    </li>
                    <li>
                      <button type="button"
                        class="delete-item dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalDelete">
                        <iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
                        Delete
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="p-20">
                <div>
                  <div class="mt-40 mb-24 pe-110 position-relative max-w-288-px mx-auto">
                    <div
                      class="w-170-px h-170-px rounded-circle z-1 position-relative d-inline-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/icons/radial-bg1.png') }}" alt="Image"
                        class="position-absolute top-0 start-0 z-n1 w-100 h-100 object-fit-cover">
                      <h5 class="text-white"> 60% </h5>
                    </div>
                    <div
                      class="w-144-px h-144-px rounded-circle z-1 position-relative d-inline-flex justify-content-center align-items-center position-absolute top-0 end-0 mt--36">
                      <img src="{{ asset('assets/images/icons/radial-bg2.png') }}" alt="Image"
                        class="position-absolute top-0 start-0 z-n1 w-100 h-100 object-fit-cover">
                      <h5 class="text-white"> 30% </h5>
                    </div>
                    <div
                      class="w-110-px h-110-px rounded-circle z-1 position-relative d-inline-flex justify-content-center align-items-center position-absolute bottom-0 start-50 translate-middle-x ms-48">
                      <img src="{{ asset('assets/images/icons/radial-bg3.png')}}" alt="Image"
                        class="position-absolute top-0 start-0 z-n1 w-100 h-100 object-fit-cover">
                      <h5 class="text-white"> 10% </h5>
                    </div>
                  </div>

                  <div class="d-flex align-items-center flex-wrap gap-24 justify-content-evenly">
                    <div class="d-flex flex-column align-items-start">
                      <div class="d-flex align-items-center gap-2">
                        <span class="w-12-px h-12-px rounded-pill bg-success-600"></span>
                        <span class="text-secondary-light text-sm fw-normal">Student</span>
                      </div>
                      <h6 class="text-primary-light fw-semibold mb-0 mt-4 text-lg">750</h6>
                    </div>
                    <div class="d-flex flex-column align-items-start">
                      <div class="d-flex align-items-center gap-2">
                        <span class="w-12-px h-12-px rounded-pill bg-warning-600"></span>
                        <span class="text-secondary-light text-sm fw-normal">Teacher</span>
                      </div>
                      <h6 class="text-primary-light fw-semibold mb-0 mt-4 text-lg">56</h6>
                    </div>
                    <div class="d-flex flex-column align-items-start">
                      <div class="d-flex align-items-center gap-2">
                        <span class="w-12-px h-12-px rounded-pill bg-blue-600"></span>
                        <span class="text-secondary-light text-sm fw-normal">Staffs </span>
                      </div>
                      <h6 class="text-primary-light fw-semibold mb-0 mt-4 text-lg">15</h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xxl-8 col-lg-6">
          <div class="card h-100">
            <div class="card-body p-0">
              <div
                class="d-flex flex-wrap align-items-center justify-content-between px-20 py-16 border-bottom border-neutral-200">
                <h6 class="text-lg mb-0">Income Vs Expense </h6>
                <div class="dropdown">
                  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <iconify-icon icon="entypo:dots-three-vertical" class="icon text-secondary-light"></iconify-icon>
                  </button>
                  <ul class="dropdown-menu p-12 border bg-base shadow">
                    <li>
                      <button type="button"
                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalView">
                        <iconify-icon icon="hugeicons:view" class="icon text-lg line-height-1"></iconify-icon>
                        View
                      </button>
                    </li>
                    <li>
                      <button type="button"
                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                        <iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
                        Edit
                      </button>
                    </li>
                    <li>
                      <button type="button"
                        class="delete-item dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalDelete">
                        <iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
                        Delete
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="p-20">
                <ul class="d-flex flex-wrap align-items-center justify-content-center mb-16 gap-3">
                  <li class="d-flex align-items-center gap-8">
                    <span class="w-12-px h-12-px rounded-circle bg-primary-600"></span>
                    <span class="text-secondary-light text-sm fw-semibold">
                      Income:
                      <span class="text-primary-light fw-bold">$500</span>
                    </span>
                  </li>
                  <li class="d-flex align-items-center gap-8">
                    <span class="w-12-px h-12-px rounded-circle bg-warning-600"></span>
                    <span class="text-secondary-light text-sm font-semibold">
                      Expense:
                      <span class="text-primary-light fw-bold"> $300</span>
                    </span>
                  </li>
                </ul>
                <div id="incomeExpense" class="apexcharts-tooltip-style-1"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xxl-4 col-lg-6">
          <div class="card h-100">
            <div class="card-body p-0">
              <div
                class="d-flex flex-wrap align-items-center justify-content-between px-20 py-16 border-bottom border-neutral-200">
                <h6 class="text-lg mb-0">Top Teachers</h6>
                <div class="dropdown">
                  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <iconify-icon icon="entypo:dots-three-vertical" class="icon text-secondary-light"></iconify-icon>
                  </button>
                  <ul class="dropdown-menu p-12 border bg-base shadow">
                    <li>
                      <button type="button"
                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalView">
                        <iconify-icon icon="hugeicons:view" class="icon text-lg line-height-1"></iconify-icon>
                        View
                      </button>
                    </li>
                    <li>
                      <button type="button"
                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                        <iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
                        Edit
                      </button>
                    </li>
                    <li>
                      <button type="button"
                        class="delete-item dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalDelete">
                        <iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
                        Delete
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="ps-20 pt-20 pb-20">
                <div class="pe-20 d-flex flex-column gap-20 max-h-462-px overflow-y-auto scroll-sm">
                  <div class="d-flex align-items-center justify-content-between gap-16">
                    <div class="d-flex align-items-start gap-16">
                      <img src="{{ asset('assets/images/thumbs/top-teacher-img1.png') }}" alt="Thumbnail"
                        class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                      <div class="">
                        <h6 class="mb-0 text-lg">Theresa Webb</h6>
                        <span class="text-secondary-light text-sm mb-0">example@gmail.com</span>
                      </div>
                    </div>
                    <div class="text-end">
                      <span class="d-block fw-semibold text-primary-light">Mathematics</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between gap-16">
                    <div class="d-flex align-items-start gap-16">
                      <img src="{{ asset('assets/images/thumbs/top-teacher-img2.png') }}" alt="Thumbnail"
                        class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                      <div class="">
                        <h6 class="mb-0 text-lg">Darrell Steward</h6>
                        <span class="text-secondary-light text-sm mb-0">example@gmail.com</span>
                      </div>
                    </div>
                    <div class="text-end">
                      <span class="d-block fw-semibold text-primary-light">Physics</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between gap-16">
                    <div class="d-flex align-items-start gap-16">
                      <img src="{{ asset('assets/images/thumbs/top-teacher-img3.png') }}" alt="Thumbnail"
                        class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                      <div class="">
                        <h6 class="mb-0 text-lg">Jane Cooper</h6>
                        <span class="text-secondary-light text-sm mb-0">example@gmail.com</span>
                      </div>
                    </div>
                    <div class="text-end">
                      <span class="d-block fw-semibold text-primary-light">Biology</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between gap-16">
                    <div class="d-flex align-items-start gap-16">
                      <img src="{{ asset('assets/images/thumbs/top-teacher-img4.png') }}" alt="Thumbnail"
                        class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                      <div class="">
                        <h6 class="mb-0 text-lg">Savannah Nguyen</h6>
                        <span class="text-secondary-light text-sm mb-0">example@gmail.com</span>
                      </div>
                    </div>
                    <div class="text-end">
                      <span class="d-block fw-semibold text-primary-light">English</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between gap-16">
                    <div class="d-flex align-items-start gap-16">
                      <img src="{{ asset('assets/images/thumbs/top-teacher-img5.png') }}" alt="Thumbnail"
                        class="w-40-px h-40-px rounded-circle object-fit-cover flex-shrink-0">
                      <div class="">
                        <h6 class="mb-0 text-lg">Eleanor Pena</h6>
                        <span class="text-secondary-light text-sm mb-0">example@gmail.com</span>
                      </div>
                    </div>
                    <div class="text-end">
                      <span class="d-block fw-semibold text-primary-light">Math</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xxl-4 col-lg-6">
          <div class="card h-100">
            <div class="card-body p-0">
              <div
                class="d-flex flex-wrap align-items-center justify-content-between px-20 py-16 border-bottom border-neutral-200">
                <h6 class="text-lg mb-0">New Admissions</h6>
                <div class="dropdown">
                  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <iconify-icon icon="entypo:dots-three-vertical" class="icon text-secondary-light"></iconify-icon>
                  </button>
                  <ul class="dropdown-menu p-12 border bg-base shadow">
                    <li>
                      <button type="button"
                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalView">
                        <iconify-icon icon="hugeicons:view" class="icon text-lg line-height-1"></iconify-icon>
                        View
                      </button>
                    </li>
                    <li>
                      <button type="button"
                        class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                        <iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
                        Edit
                      </button>
                    </li>
                    <li>
                      <button type="button"
                        class="delete-item dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10"
                        data-bs-toggle="modal" data-bs-target="#exampleModalDelete">
                        <iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
                        Delete
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="p-20">
                <div class="position-relative text-center">
                  <div id="newAdmissions" class="y-value-left apexcharts-tooltip-z-none"></div>
                  <div class="text-center position-absolute top-50 start-50 translate-middle">
                    <h5 class="mb-4">50</h5>
                    <span class="text-secondary-light">Total Admissions</span>
                  </div>
                </div>
                <ul class="d-flex flex-wrap align-items-center justify-content-center mt-48 gap-24">
                  <li class="d-flex align-items-center gap-2">
                    <span class="w-12-px h-12-px radius-2 bg-success-600 rotate-45-deg"></span>
                    <div class="">
                      <span class="text-secondary-light fw-medium">
                        English:
                        <span class="fw-bold text-primary-light">15</span>
                      </span>
                    </div>
                  </li>
                  <li class="d-flex align-items-center gap-2">
                    <span class="w-12-px h-12-px radius-2 bg-blue-600 rotate-45-deg"></span>
                    <div class="">
                      <span class="text-secondary-light fw-medium">
                        Math:
                        <span class="fw-bold text-primary-light">15</span>
                      </span>
                    </div>
                  </li>
                  <li class="d-flex align-items-center gap-2">
                    <span class="w-12-px h-12-px radius-2 bg-warning-600 rotate-45-deg"></span>
                    <div class="">
                      <span class="text-secondary-light fw-medium">
                        Biology:
                        <span class="fw-bold text-primary-light">5</span>
                      </span>
                    </div>
                  </li>
                  <li class="d-flex align-items-center gap-2">
                    <span class="w-12-px h-12-px radius-2 bg-primary-600 rotate-45-deg"></span>
                    <div class="">
                      <span class="text-secondary-light fw-medium">
                        Physics:
                        <span class="fw-bold text-primary-light">10</span>
                      </span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xxl-4">
          <div class="card radius-12 border-0 h-100">
            <div
              class="d-flex align-items-center flex-wrap gap-2 justify-content-between py-12 px-20 border-bottom border-neutral-200">
              <h6 class="mb-2 fw-bold text-lg">Top Student</h6>
              <div class="dropdown">
                <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <iconify-icon icon="entypo:dots-three-vertical" class="icon text-secondary-light"></iconify-icon>
                </button>
                <ul class="dropdown-menu p-12 border bg-base shadow">
                  <li>
                    <button type="button"
                      class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                      data-bs-toggle="modal" data-bs-target="#exampleModalView">
                      <iconify-icon icon="hugeicons:view" class="icon text-lg line-height-1"></iconify-icon>
                      View
                    </button>
                  </li>
                  <li>
                    <button type="button"
                      class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10"
                      data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                      <iconify-icon icon="lucide:edit" class="icon text-lg line-height-1"></iconify-icon>
                      Edit
                    </button>
                  </li>
                  <li>
                    <button type="button"
                      class="delete-item dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-danger-100 text-hover-danger-600 d-flex align-items-center gap-10"
                      data-bs-toggle="modal" data-bs-target="#exampleModalDelete">
                      <iconify-icon icon="fluent:delete-24-regular" class="icon text-lg line-height-1"></iconify-icon>
                      Delete
                    </button>
                  </li>
                </ul>
              </div>
            </div>
            <div class="card-body">
              <div class="d-flex flex-column gap-28">
                <div class="d-flex align-items-center justify-content-between gap-10">
                  <div class="d-flex align-items-center gap-12">
                    <span class="w-44-px h-44-px rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/thumbs/avatar-img1.png') }}"
                        class="w-44-px h-44-px object-fit-cover rounded-circle" alt="Icon">
                    </span>
                    <div class="">
                      <h6 class="text-sm mb-2">Brooklyn Simmons</h6>
                      <span class="text-xs text-secondary-light">Class: Six</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center gap-8">
                    <span class="text-sm text-secondary-light">Marks</span>
                    <span class="text-primary-light text-sm d-block text-end">
                      <svg class="radial-progress w-44-px" data-percentage="20" viewBox="0 0 80 80">
                        <circle class="incomplete stroke-8-px opacity-02 stroke-blue" cx="40" cy="40" r="35"></circle>
                        <circle class="complete stroke-8-px stroke-blue" cx="40" cy="40" r="35">
                        </circle>
                        <text class="percentage fill-black" x="50%" y="57%"
                          transform="matrix(0, 1, -1, 0, 80, 0)">20</text>
                      </svg>
                    </span>
                  </div>
                </div>

                <div class="d-flex align-items-center justify-content-between gap-10">
                  <div class="d-flex align-items-center gap-12">
                    <span class="w-44-px h-44-px rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/thumbs/avatar-img2.png') }}"
                        class="w-44-px h-44-px object-fit-cover rounded-circle" alt="Icon">
                    </span>
                    <div class="">
                      <h6 class="text-sm mb-2">Floyd Miles</h6>
                      <span class="text-xs text-secondary-light">Class: Seven</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center gap-8">
                    <span class="text-sm text-secondary-light">Marks</span>
                    <span class="text-primary-light text-sm d-block text-end">
                      <svg class="radial-progress w-44-px" data-percentage="35" viewBox="0 0 80 80">
                        <circle class="incomplete stroke-8-px opacity-02 stroke-red" cx="40" cy="40" r="35"></circle>
                        <circle class="complete stroke-8-px stroke-red" cx="40" cy="40" r="35">
                        </circle>
                        <text class="percentage fill-black" x="50%" y="57%"
                          transform="matrix(0, 1, -1, 0, 80, 0)">35</text>
                      </svg>
                    </span>
                  </div>
                </div>

                <div class="d-flex align-items-center justify-content-between gap-10">
                  <div class="d-flex align-items-center gap-12">
                    <span class="w-44-px h-44-px rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/thumbs/avatar-img2.png') }}"
                        class="w-44-px h-44-px object-fit-cover rounded-circle" alt="Icon">
                    </span>
                    <div class="">
                      <h6 class="text-sm mb-2">Courtney Henry</h6>
                      <span class="text-xs text-secondary-light">Class: Eight</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center gap-8">
                    <span class="text-sm text-secondary-light">Marks</span>
                    <span class="text-primary-light text-sm d-block text-end">
                      <svg class="radial-progress w-44-px" data-percentage="45" viewBox="0 0 80 80">
                        <circle class="incomplete stroke-8-px opacity-02 stroke-warning" cx="40" cy="40" r="35">
                        </circle>
                        <circle class="complete stroke-8-px stroke-warning" cx="40" cy="40" r="35">
                        </circle>
                        <text class="percentage fill-black" x="50%" y="57%"
                          transform="matrix(0, 1, -1, 0, 80, 0)">45</text>
                      </svg>
                    </span>
                  </div>
                </div>

                <div class="d-flex align-items-center justify-content-between gap-10">
                  <div class="d-flex align-items-center gap-12">
                    <span class="w-44-px h-44-px rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/thumbs/avatar-img4.png') }}"
                        class="w-44-px h-44-px object-fit-cover rounded-circle" alt="Icon">
                    </span>
                    <div class="">
                      <h6 class="text-sm mb-2">Kathryn Murphy</h6>
                      <span class="text-xs text-secondary-light">Class: Nine</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center gap-8">
                    <span class="text-sm text-secondary-light">Marks</span>
                    <span class="text-primary-light text-sm d-block text-end">
                      <svg class="radial-progress w-44-px" data-percentage="65" viewBox="0 0 80 80">
                        <circle class="incomplete stroke-8-px opacity-02 stroke-green" cx="40" cy="40" r="35"></circle>
                        <circle class="complete stroke-8-px stroke-green" cx="40" cy="40" r="35">
                        </circle>
                        <text class="percentage fill-black" x="50%" y="57%"
                          transform="matrix(0, 1, -1, 0, 80, 0)">65</text>
                      </svg>
                    </span>
                  </div>
                </div>

                <div class="d-flex align-items-center justify-content-between gap-10">
                  <div class="d-flex align-items-center gap-12">
                    <span class="w-44-px h-44-px rounded-circle d-flex justify-content-center align-items-center">
                      <img src="{{ asset('assets/images/thumbs/avatar-img5.png') }}"
                        class="w-44-px h-44-px object-fit-cover rounded-circle" alt="Icon">
                    </span>
                    <div class="">
                      <h6 class="text-sm mb-2">Annette Black</h6>
                      <span class="text-xs text-secondary-light">Class: Ten</span>
                    </div>
                  </div>
                  <div class="d-flex align-items-center gap-8">
                    <span class="text-sm text-secondary-light">Marks</span>
                    <span class="text-primary-light text-sm d-block text-end">
                      <svg class="radial-progress w-44-px" data-percentage="65" viewBox="0 0 80 80">
                        <circle class="incomplete stroke-8-px opacity-02 stroke-blue" cx="40" cy="40" r="35"></circle>
                        <circle class="complete stroke-8-px stroke-blue" cx="40" cy="40" r="35">
                        </circle>
                        <text class="percentage fill-black" x="50%" y="57%"
                          transform="matrix(0, 1, -1, 0, 80, 0)">65</text>
                      </svg>
                    </span>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>!-->
      </div>
    </div>
  </div>
  @include('admin.common-layout.footer')