<!DOCTYPE html>
<html lang="zxx">
    <?php require __DIR__ . '/includes/head.php'; ?>

    <body class="bg-body-bg"><?php require __DIR__ . '/includes/loading.php'; ?><?php require __DIR__ . '/includes/sidebar.php'; ?>


        <!-- Start Main Content Area -->
        <div class="container-fluid">
            <div class="main-content d-flex flex-column">
                <?php require __DIR__ . '/includes/topbar.php'; ?>


                <div class="main-content-container overflow-hidden">
                    <div class="row">
                        <div class="col-xxl-6 col-xxxl-12">
                            <div class="card rounded-10 border-0 mb-4 bg-img zinnia-card" style="background-image: url(assets/images/welcome-bg.png); padding: 54px 50px;">
                                <div class="row align-items-center">
                                    <div class="col-sm-6 col-lg-7">
                                        <h2 class="fs-26 fw-normal text-white mb-10">Hello <span class="fw-900">Mateo!</span></h2>
                                        <p class="fs-20 hospital-content" style="color: #CCE1FF; margin-bottom: 60px;">Welcome To Your Virtual Hospital!</p>
                                        <span class="fs-16 fw-semibold d-block" style="color: #CCE1FF; margin-bottom: 18px;">Check out today’s Schedule:</span>
                                        <div class="d-flex flex-wrap gap-3">
                                            <div class="bg-white d-flex rounded-1" style="padding: 9px 12px; width: 140px;">
                                                <i class="ri-shield-user-fill fs-18 text-center rounded-circle" style="background-color: #C5CBFF; color: #382C83; width: 36px; height: 36px; line-height: 36px;"></i>
                                                <div class="ms-10">
                                                    <span class="fs-15">Patients</span>
                                                    <h2 class="fs-20 mb-0 lh-1" style="color: #475569;">146</h2>
                                                </div>
                                            </div>
                                            <div class="bg-white d-flex rounded-1" style="padding: 9px 12px; width: 140px;">
                                                <i class="ri-scissors-2-fill fs-18 text-center rounded-circle" style="background-color: #C5CBFF; color: #382C83; width: 36px; height: 36px; line-height: 36px;"></i>
                                                <div class="ms-10">
                                                    <span class="fs-15">Surgeries</span>
                                                    <h2 class="fs-20 mb-0 lh-1" style="color: #475569;">12</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-5">
                                        <div class="text-center text-sm-end mt-4 mt-sm-0" style="margin-right: -20px;">
                                            <img src="assets/images/medibox.png" alt="medibox">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xxxl-12">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="card bg-white p-20 py-30 rounded-10 border border-white mb-4 position-relative z-1">
                                        <div class="d-flex">
                                            <div class="flex-grow-1">
                                                <h3 class="mb-10 lh-1 fs-14 text-body">Appointment</h3>
                                                <h2 class="fs-26 fw-bold mb-10 lh-1">176</h2>
                                                <div class="d-inline-block" style="margin-bottom: 1px;">
                                                    <span class="d-flex align-content-center gap-1 bg-success-70 border-white rounded-1" style="padding: 3px 5px;">
                                                        <i class="material-symbols-outlined fs-14 text-white">trending_up</i>
                                                        <span class="lh-1 fs-14 text-white">4.11%</span>
                                                    </span>
                                                </div>
                                                <p class="mb-0 fs-14">Increases this week</p>
                                            </div>
                                            <div class="flex-shrink-0 ms-3 position-relative" style="width: 64px;">
                                                <div class="w-100 position-absolute top-50 translate-middle-y">
                                                    <img src="assets/images/calendar-3d.png" alt="calendar-3d">
                                                    <span class="position-absolute bottom-0 start-0 rounded-circle z-n1 d-inline-block" style="background-color: #EFF3F9; width: 54px; height: 54px; bottom: -19px !important; left: -19px !important;"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="card bg-white p-20 py-30 rounded-10 border border-white mb-4 position-relative z-1">
                                        <div class="d-flex">
                                            <div class="flex-grow-1">
                                                <h3 class="mb-10 lh-1 fs-14 text-body">Total Patient</h3>
                                                <h2 class="fs-26 fw-bold mb-10 lh-1">1024K</h2>
                                                <div class="d-inline-block" style="margin-bottom: 1px;">
                                                    <span class="d-flex align-content-center gap-1 bg-danger border-white rounded-1" style="padding: 3px 5px;">
                                                        <i class="material-symbols-outlined fs-14 text-white">trending_down</i>
                                                        <span class="lh-1 fs-14 text-white">1.25%</span>
                                                    </span>
                                                </div>
                                                <p class="mb-0 fs-14">Increases this week</p>
                                            </div>
                                            <div class="flex-shrink-0 ms-3 position-relative" style="width: 64px;">
                                                <div class="w-100 position-absolute top-50 translate-middle-y">
                                                    <img src="assets/images/patient.png" alt="patient">
                                                    <span class="position-absolute bottom-0 start-0 rounded-circle z-n1 d-inline-block" style="background-color: #EFF3F9; width: 54px; height: 54px; bottom: -19px !important; left: -19px !important;"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="card bg-white p-20 py-30 rounded-10 border border-white mb-4 position-relative z-1">
                                        <div class="d-flex">
                                            <div class="flex-grow-1">
                                                <h3 class="mb-10 lh-1 fs-14 text-body">Doctors</h3>
                                                <h2 class="fs-26 fw-bold mb-10 lh-1">64</h2>
                                                <div class="d-inline-block" style="margin-bottom: 1px;">
                                                    <span class="d-flex align-content-center gap-1 bg-danger border-white rounded-1" style="padding: 3px 5px;">
                                                        <i class="material-symbols-outlined fs-14 text-white">trending_down</i>
                                                        <span class="lh-1 fs-14 text-white">0.31%</span>
                                                    </span>
                                                </div>
                                                <p class="mb-0 fs-14">Increases this week</p>
                                            </div>
                                            <div class="flex-shrink-0 ms-3 position-relative" style="width: 64px;">
                                                <div class="w-100 position-absolute top-50 translate-middle-y">
                                                    <img src="assets/images/consultation.png" alt="consultation">
                                                    <span class="position-absolute bottom-0 start-0 rounded-circle z-n1 d-inline-block" style="background-color: #EFF3F9; width: 54px; height: 54px; bottom: -19px !important; left: -19px !important;"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="card bg-white p-20 py-30 rounded-10 border border-white mb-4 position-relative z-1">
                                        <div class="d-flex">
                                            <div class="flex-grow-1">
                                                <h3 class="mb-10 lh-1 fs-14 text-body">Earnings</h3>
                                                <h2 class="fs-26 fw-bold mb-10 lh-1">$124K</h2>
                                                <div class="d-inline-block" style="margin-bottom: 1px;">
                                                    <span class="d-flex align-content-center gap-1 bg-success-70 border-white rounded-1" style="padding: 3px 5px;">
                                                        <i class="material-symbols-outlined fs-14 text-white">trending_up</i>
                                                        <span class="lh-1 fs-14 text-white">3.11%</span>
                                                    </span>
                                                </div>
                                                <p class="mb-0 fs-14">Increases this week</p>
                                            </div>
                                            <div class="flex-shrink-0 ms-3 position-relative" style="width: 64px;">
                                                <div class="w-100 position-absolute top-50 translate-middle-y">
                                                    <img src="assets/images/burn.png" alt="burn">
                                                    <span class="position-absolute bottom-0 start-0 rounded-circle z-n1 d-inline-block" style="background-color: #EFF3F9; width: 54px; height: 54px; bottom: -19px !important; left: -19px !important;"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-8 col-xxxl-12">
                            <div class="row">
                                <div class="col-lg-5">
                                    <div class="card bg-white rounded-10 border border-white mb-4 p-20">
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                            <h3>Patients Summary</h3>
            
                                            <div class="dropdown select-dropdown without-border ms-1">
                                                <button class="dropdown-toggle bg-transparent text-secondary fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                                    This Week
                                                </button>
                                            
                                                <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Day</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Week</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Month</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Year</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div style="margin: -18px 0 0 0;">
                                            <div id="patients_summary_chart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <div class="card bg-white rounded-10 border border-white mb-4 p-20">
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                            <h3>Patients Statistics</h3>
            
                                            <div class="dropdown select-dropdown without-border ms-1">
                                                <button class="dropdown-toggle bg-transparent text-secondary fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                                    This Week
                                                </button>
                                            
                                                <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Day</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Week</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Month</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Year</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div style="margin: -29px -20px -14px -17px;">
                                            <div id="patients_statistics_chart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-9">
                                    <div class="card bg-white rounded-10 border border-white mb-4 p-20">
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                            <h3>Revenue</h3>
            
                                            <div class="dropdown select-dropdown without-border ms-1">
                                                <button class="dropdown-toggle bg-transparent text-secondary fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                                    This Week
                                                </button>
                                            
                                                <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Day</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Week</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Month</button>
                                                    </li>
                                                    <li>
                                                        <button class="dropdown-item text-secondary">This Year</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div style="margin: -24px -10px -14px -17px;">
                                            <div id="revenue_chart_2"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="card bg-white rounded-10 border border-white mb-4 p-20 text-center" style="border-radius: 10px; background: linear-gradient(180deg, #526786 0%, #273F60 100%); line-height: 32px;">
                                        <h3 class="fs-24 text-white fw-900">Schedule An Appointment</h3>
                                        <div class="py-4 mt-2">
                                            <img src="assets/images/upgrade2.png" alt="upgrade2">
                                        </div>
                                        <p class="fs-15 lh-1-8 mb-4" style="color: #CCE1FF;">Quickly book an appointment for a patient Online.</p>
                                        <div class="">
                                            <a href="book-appointments.html" class="btn btn-primary text-white fs-14 fw-medium" style="padding: 9px 20px;">
                                                Book Now
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-4 col-xxxl-12">
                            <div class="card bg-white rounded-10 border border-white mb-4 p-20">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <h3>All Schedule</h3>
    
                                    <div class="dropdown select-dropdown without-border ms-1">
                                        <button class="dropdown-toggle bg-transparent text-secondary fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                            Show All
                                        </button>
                                    
                                        <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                            <li>
                                                <button class="dropdown-item text-secondary">Appointment</button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item text-secondary">Surgery</button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item text-secondary">Show All</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <ul class="nav nav-tabs schedule-tabs justify-content-sm-between border-border-color-60 gap-1" style="border-bottom: 1px dashed;" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="sat-tab" data-bs-toggle="tab" data-bs-target="#sat-tab-pane" type="button" role="tab" aria-controls="sat-tab-pane" aria-selected="true">
                                            <span class="d-block fs-14 fw-medium text-body-color-50">Sat</span>
                                            <span class="d-block fs-14 fw-medium text-secondary">04</span>
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="sun-tab" data-bs-toggle="tab" data-bs-target="#sun-tab-pane" type="button" role="tab" aria-controls="sun-tab-pane" aria-selected="false">
                                            <span class="d-block fs-14 fw-medium text-body-color-50">Sun</span>
                                            <span class="d-block fs-14 fw-medium text-secondary">05</span>
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="mon-tab" data-bs-toggle="tab" data-bs-target="#mon-tab-pane" type="button" role="tab" aria-controls="mon-tab-pane" aria-selected="false">
                                            <span class="d-block fs-14 fw-medium text-body-color-50">Mon</span>
                                            <span class="d-block fs-14 fw-medium text-secondary">06</span>
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="tue-tab" data-bs-toggle="tab" data-bs-target="#tue-tab-pane" type="button" role="tab" aria-controls="tue-tab-pane" aria-selected="false">
                                            <span class="d-block fs-14 fw-medium text-body-color-50">Tue</span>
                                            <span class="d-block fs-14 fw-medium text-secondary">07</span>
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="wed-tab" data-bs-toggle="tab" data-bs-target="#wed-tab-pane" type="button" role="tab" aria-controls="wed-tab-pane" aria-selected="false">
                                            <span class="d-block fs-14 fw-medium text-body-color-50">Wed</span>
                                            <span class="d-block fs-14 fw-medium text-secondary">08</span>
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="thu-tab" data-bs-toggle="tab" data-bs-target="#thu-tab-pane" type="button" role="tab" aria-controls="thu-tab-pane" aria-selected="false">
                                            <span class="d-block fs-14 fw-medium text-body-color-50">Thu</span>
                                            <span class="d-block fs-14 fw-medium text-secondary">09</span>
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="fri-tab" data-bs-toggle="tab" data-bs-target="#fri-tab-pane" type="button" role="tab" aria-controls="fri-tab-pane" aria-selected="false">
                                            <span class="d-block fs-14 fw-medium text-body-color-50">Fri</span>
                                            <span class="d-block fs-14 fw-medium text-secondary">10</span>
                                        </button>
                                    </li>
                                </ul>

                                <div class="tab-content schedule-card-for-dark" id="myTabContent">
                                    <div class="tab-pane fade show active" id="sat-tab-pane" role="tabpanel" aria-labelledby="sat-tab" tabindex="0">
                                        <h3 class="mb-2">Todays Schedule</h3>
                                        <ul class="p-0 mb-20 list-unstyled d-flex flex-wrap gap-4">
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-primary-50 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">28</span> Appointments</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-success-80 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">12</span> Surgery</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-info rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">12</span> Surgery</p>
                                            </li>
                                        </ul>

                                        <div style="max-height: 617.42px;" data-simplebar>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-primary-50 rounded-circle text-white text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <button class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;" data-bs-toggle="modal" data-bs-target="#exampleModal3">View Details</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-info mb-10" style="background-color: #F3F7F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-info text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-info">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-primary-50 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10 mb-0" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-primary-50 rounded-circle text-white text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-info mb-10" style="background-color: #F3F7F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-info text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-info">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-primary-50 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10 mb-0" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Modal Schedule Details -->
                                        <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModal3Label" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered rounded-10" style="max-width: 900px;">
                                                <form class="modal-content bg-white">
                                                    <div class="modal-header border-border-color-40 p-20">
                                                        <h1 class="modal-title fs-18 fw-medium mb-0" id="exampleModal3Label">Schedule Details</h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body p-20 pb-0">
                                                        <div class="mb-30">
                                                            <span class="fs-18 text-secondary d-block d-flex align-items-center gap-1">10:00 - 11:00 <span class="fs-12 fw-medium">AM</span></span>
                                                            <span class="fs-16 text-secondary d-block mb-1">Cardio Patient Appointment</span>
                                                            <span class="fs-12 fw-medium d-block">Lead by <span class="text-primary">John Harry</span></span>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                                <div class="card p-20 bg-body-bg border-0 rounded-10 mb-4">
                                                                    <h3 class="mb-3">Schedule Details</h3>

                                                                    <ul class="p-0 mb-0 list-unstyled last-child-none">
                                                                        <li class="mb-10">
                                                                            <span class="fs-16">Patient ID: <span class="text-secondary">#P3214</span></span>
                                                                        </li>
                                                                        <li class="mb-10">
                                                                            <span class="fs-16">Full Name: <span class="text-secondary">Micheal collins</span></span>
                                                                        </li>
                                                                        <li class="mb-10">
                                                                            <span class="fs-16">Occupation: <span class="text-secondary">Teacher</span></span>
                                                                        </li>
                                                                        <li class="mb-10">
                                                                            <span class="fs-16">Age: <span class="text-secondary">65 Years</span></span>
                                                                        </li>
                                                                        <li class="mb-10">
                                                                            <span class="fs-16">Admitted On: <span class="text-secondary">21 October, 2025</span></span>
                                                                        </li>
                                                                        <li class="mb-10">
                                                                            <span class="fs-16">Bed No: <span class="text-secondary">L2 - 205</span></span>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="card p-20 bg-body-bg border-0 rounded-10 mb-4">
                                                                    <h3 class="mb-3">Appointment link:</h3>

                                                                    <a href="#" class="fs-16 text-primary text-decoration-none d-block" style="margin-bottom: 120px;">https://meet.google.com/dxy-wvne-tec</a>

                                                                    <a href="#" class="btn btn-primary text-white fs-16 fw-normal" style="padding: 16px 10px;">Start Online Appointment</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer justify-content-end border-0 gap-3 p-20 pt-0">
                                                        <button type="button" class="bg-transparent p-0 border-0 text-danger fw-normal fs-16" data-bs-dismiss="modal">Cancel Schedule</button>
                                                        <button type="button" class="bg-transparent p-0 border-0 text-primary fw-normal">Edit Schedule</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="sun-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                        <h3 class="mb-2">Todays Schedule</h3>
                                        <ul class="p-0 mb-20 list-unstyled d-flex flex-wrap gap-4">
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-primary-50 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">21</span> Appointments</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-success-80 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">13</span> Surgery</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-info rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">15</span> Surgery</p>
                                            </li>
                                        </ul>

                                        <div style="max-height: 617.42px;" data-simplebar>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-primary-50 rounded-circle text-white text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-info mb-10" style="background-color: #F3F7F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-info text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-info">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-primary-50 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10 mb-0" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="mon-tab-pane" role="tabpanel" aria-labelledby="mon-tab" tabindex="0">
                                        <h3 class="mb-2">Todays Schedule</h3>
                                        <ul class="p-0 mb-20 list-unstyled d-flex flex-wrap gap-4">
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-primary-50 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">15</span> Appointments</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-success-80 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">07</span> Surgery</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-info rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">09</span> Surgery</p>
                                            </li>
                                        </ul>

                                        <div style="max-height: 617.42px;" data-simplebar>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-primary-50 rounded-circle text-white text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-info mb-10" style="background-color: #F3F7F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-info text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-info">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-primary-50 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10 mb-0" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="tue-tab-pane" role="tabpanel" aria-labelledby="tue-tab" tabindex="0">
                                        <h3 class="mb-2">Todays Schedule</h3>
                                        <ul class="p-0 mb-20 list-unstyled d-flex flex-wrap gap-4">
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-primary-50 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">25</span> Appointments</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-success-80 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">10</span> Surgery</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-info rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">07</span> Surgery</p>
                                            </li>
                                        </ul>

                                        <div style="max-height: 617.42px;" data-simplebar>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-primary-50 rounded-circle text-white text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-info mb-10" style="background-color: #F3F7F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-info text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-info">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-primary-50 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10 mb-0" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="wed-tab-pane" role="tabpanel" aria-labelledby="wed-tab" tabindex="0">
                                        <h3 class="mb-2">Todays Schedule</h3>
                                        <ul class="p-0 mb-20 list-unstyled d-flex flex-wrap gap-4">
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-primary-50 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">23</span> Appointments</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-success-80 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">13</span> Surgery</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-info rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">10</span> Surgery</p>
                                            </li>
                                        </ul>

                                        <div style="max-height: 617.42px;" data-simplebar>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-primary-50 rounded-circle text-white text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-info mb-10" style="background-color: #F3F7F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-info text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-info">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-primary-50 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10 mb-0" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="thu-tab-pane" role="tabpanel" aria-labelledby="thu-tab" tabindex="0">
                                        <h3 class="mb-2">Todays Schedule</h3>
                                        <ul class="p-0 mb-20 list-unstyled d-flex flex-wrap gap-4">
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-primary-50 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">19</span> Appointments</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-success-80 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">25</span> Surgery</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-info rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">17</span> Surgery</p>
                                            </li>
                                        </ul>

                                        <div style="max-height: 617.42px;" data-simplebar>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-primary-50 rounded-circle text-white text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-info mb-10" style="background-color: #F3F7F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-info text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-info">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-primary-50 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10 mb-0" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="fri-tab-pane" role="tabpanel" aria-labelledby="fri-tab" tabindex="0">
                                        <h3 class="mb-2">Todays Schedule</h3>
                                        <ul class="p-0 mb-20 list-unstyled d-flex flex-wrap gap-4">
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-primary-50 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">21</span> Appointments</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-success-80 rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">14</span> Surgery</p>
                                            </li>
                                            <li class="d-flex align-items-center gap-1">
                                                <span class="d-block bg-info rounded-circle" style="width: 10px; height: 10px;"></span>
                                                <p class="fw-medium fs-14"><span class="fw-bold text-secondary">10</span> Surgery</p>
                                            </li>
                                        </ul>

                                        <div style="max-height: 617.42px;" data-simplebar>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-primary-50 rounded-circle text-white text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-info mb-10" style="background-color: #F3F7F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-info text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-info">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-primary-50 mb-10" style="background-color: #F2F1F9; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-primary-50 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-primary-50">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="p-20 border-success-80 mb-10 mb-0" style="background-color: #ECF3F2; border-left: 4px solid; padding-top: 19.6px; padding-bottom: 19.6px;">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-6">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <span class="fs-18 text-secondary-50">10:00 - 11:00</span>
                                                            <span class="fs-12 fw-medium ms-1 text-body-color-60">AM</span>
                                                            <i class="ri-notification-2-line ms-12 bg-white rounded-circle text-success-80 text-center fs-16" style="width: 28px; height: 28px; line-height: 28px;"></i>
                                                        </div>
                                                        <h3 class="fs-16 fw-normal text-secondary mb-1">Cardio Patient Appointment</h3>
                                                        <div class="text-body-color-60 fw-medium">Lead by <span class="text-success-80">John Harry</span></div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="text-end me-md-4">
                                                            <a href="#" class="btn fs-14 fw-medium bg-white hover-bg" style="padding: 9px 10px;">View Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-8 col-lg-7">
                            <div class="card bg-white rounded-10 border border-white mb-4">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 p-20">
                                    <h3>Patient Appointments</h3>
        
                                    <div class="dropdown select-dropdown without-border ms-1">
                                        <button class="dropdown-toggle bg-transparent text-secondary fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                            This Week
                                        </button>
                                    
                                        <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                            <li>
                                                <button class="dropdown-item text-secondary">This Day</button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item text-secondary">This Week</button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item text-secondary">This Month</button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item text-secondary">This Year</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="default-table-area mx-minus-1 style-two table-patient-appointments for-border-color1">
                                    <div class="table-responsive">
                                        <table class="table align-middle">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Patient Name</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Date</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Time</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Assigned Doctor</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Department</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14 text-center">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user46.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user46">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Jane Ronan</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Oct 24, 2025</td> 
                                                    <td class="text-secondary fw-medium fs-14">11:32 AM</td> 
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user52.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user52">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">David Watson</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Cardiology</td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Confirmed</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user47.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user47">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">David Karleton</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Oct 24, 2025</td> 
                                                    <td class="text-secondary fw-medium fs-14">10:30 AM</td> 
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user53.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user52">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Jessy Pinkman</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Orthopedics</td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-danger bg-danger bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-danger">Canceled</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user48.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user48">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Brad Traversy</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Oct 23, 2025</td> 
                                                    <td class="text-secondary fw-medium fs-14">11:45 AM</td> 
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user54.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user54">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Mr. Timer</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Pediatrics</td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Confirmed</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user49.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user49">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Jonathon Ronan</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Oct 22, 2025</td> 
                                                    <td class="text-secondary fw-medium fs-14">11:49 AM</td> 
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user55.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user55">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Viktor James</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Dermatology</td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Confirmed</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user50.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user50">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Anderson Clerk</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Oct 21, 2025</td> 
                                                    <td class="text-secondary fw-medium fs-14">12:05 PM</td> 
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user56.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user56">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Jonathon Smith</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Surgery</td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-primary-50 bg-primary-50 bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-primary-50">Pending</span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user51.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user51">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Peril Lora</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Oct 20, 2025</td> 
                                                    <td class="text-secondary fw-medium fs-14">1:32 P M</td> 
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/user57.jpg" class="rounded-circle" style="width: 24px; height: 24px;" alt="user57">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Skyler White</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td class="text-secondary fw-medium fs-14">Cardiology</td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-success bg-success bg-opacity-10 fs-15 fw-normal d-inline-block default-badge style-two border border-success">Confirmed</span>
                                                    </td> 
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
        
                                    <div class="d-flex justify-content-center justify-content-sm-between align-items-center text-center flex-wrap gap-2 showing-wrap p-20" style="padding-top: 12px;">
                                        <span class="fs-15">Showing 1 to 6 of 24 entries</span>
        
                                        <nav class="custom-pagination" aria-label="Page navigation example">
                                            <ul class="pagination mb-0 justify-content-center">
                                                <li class="page-item">
                                                    <button class="page-link icon" aria-label="Previous">
                                                        <i class="material-symbols-outlined">west</i>
                                                    </button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link active">1</button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link">2</button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link">3</button>
                                                </li>
                                                <li class="page-item">
                                                    <button class="page-link icon" aria-label="Next">
                                                        <i class="material-symbols-outlined">east</i>
                                                    </button>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-4 col-lg-5">
                            <div class="card bg-white rounded-10 border border-white mb-4">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 p-20">
                                    <h3>Report</h3>
        
                                    <div class="dropdown select-dropdown without-border ms-1">
                                        <button class="dropdown-toggle bg-transparent text-secondary fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                                            This Week
                                        </button>
                                    
                                        <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                            <li>
                                                <button class="dropdown-item text-secondary">This Day</button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item text-secondary">This Week</button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item text-secondary">This Month</button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item text-secondary">This Year</button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <ul class="p-20 pt-0 mb-0 list-unstyled last-child-none for-dark-mode-report" style="max-height: 459.5px;" data-simplebar>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-home-6-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-primary" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">10:30 AM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">Watson Clerk successfully discharged from the room 311 after recovered properly.</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-building-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-success" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">11:45 AM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">Jennelia Adversy succeccfully admitted in the hospital at room no 345.</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-scissors-2-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-primary-50" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">10:50 AM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">Major cardio surgery of Jonathon Ronan completed successfylly at ICU-32</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-archive-drawer-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-warning-50" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">12:30 PM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">ICU-46 is equipped with all necessary equipment</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-home-6-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-primary" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">12:50 PM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">Skyler White succeccfully discharged from the room 325 after recovered properly.</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-home-6-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-primary" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">10:30 AM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">Watson Clerk successfully discharged from the room 311 after recovered properly.</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-building-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-success" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">11:45 AM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">Jennelia Adversy succeccfully admitted in the hospital at room no 345.</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-scissors-2-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-primary-50" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">10:50 AM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">Major cardio surgery of Jonathon Ronan completed successfylly at ICU-32</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-archive-drawer-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-warning-50" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">12:30 PM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">ICU-46 is equipped with all necessary equipment</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="border-light-50" style="border-bottom: 1px dashed; margin-bottom: 10px; padding-bottom: 10px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0">
                                                <i class="ri-home-6-fill rounded-1 d-flex justify-content-center align-items-center fs-24 text-primary" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-10">
                                                <span class="text-body-color-60 fs-12 fw-medium d-block mb-1">12:50 PM</span>
                                                <p class="fs-16 lh-1-7 text-secondary">Skyler White succeccfully discharged from the room 325 after recovered properly.</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="card rounded-10 border-0 available-bg p-20 pb-0" style="background-color: transparent !important;">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                            <h3 class="text-white">Available Doctors</h3>

                            <div class="dropdown select-dropdown without-border ms-1">
                                <button class="dropdown-toggle bg-transparent text-secondary fs-15 text-white" data-bs-toggle="dropdown" aria-expanded="false">
                                    This Week
                                </button>
                            
                                <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                                    <li>
                                        <button class="dropdown-item text-secondary">This Day</button>
                                    </li>
                                    <li>
                                        <button class="dropdown-item text-secondary">This Week</button>
                                    </li>
                                    <li>
                                        <button class="dropdown-item text-secondary">This Month</button>
                                    </li>
                                    <li>
                                        <button class="dropdown-item text-secondary">This Year</button>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xxl-2 col-sm-6 col-md-4 col-xxxl-4">
                                <div class="card bg-white rounded-10 border border-white mb-4 p-20 text-center">
                                    <div class="rounded-circle mb-3">
                                        <img src="assets/images/doctor1.jpg" class="rounded-circle" style="border: 3px solid #AFD4FF; padding: 6px;" alt="doctor1">
                                    </div>
                                    <h3 class="fs-18 text-secondary" style="margin-bottom: 6px;">David Watson</h3>
                                    <span class="fs-14 fw-medium d-block mb-10">Cardiologist</span>
                                    <span class="text-success fs-14 fw-medium mb-3">MON-FRI <span class="px-3">-</span> 6:00-8:00</span>
                                    <div>
                                        <a href="book-appointments.html" class="btn btn-primary text-white fs-14 fw-medium" style="padding: 9px 20px;">Book Now</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-2 col-sm-6 col-md-4 col-xxxl-4">
                                <div class="card bg-white rounded-10 border border-white mb-4 p-20 text-center">
                                    <div class="rounded-circle mb-3">
                                        <img src="assets/images/doctor2.jpg" class="rounded-circle" style="border: 3px solid #AFD4FF; padding: 6px;" alt="doctor2">
                                    </div>
                                    <h3 class="fs-18 text-secondary" style="margin-bottom: 6px;">Brad Traversy</h3>
                                    <span class="fs-14 fw-medium d-block mb-10">Cancer Specialist</span>
                                    <span class="text-success fs-14 fw-medium mb-3">MON-FRI <span class="px-3">-</span> 6:00-8:00</span>
                                    <div>
                                        <a href="book-appointments.html" class="btn btn-primary text-white fs-14 fw-medium" style="padding: 9px 20px;">Book Now</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-2 col-sm-6 col-md-4 col-xxxl-4">
                                <div class="card bg-white rounded-10 border border-white mb-4 p-20 text-center">
                                    <div class="rounded-circle mb-3">
                                        <img src="assets/images/doctor3.jpg" class="rounded-circle" style="border: 3px solid #AFD4FF; padding: 6px;" alt="doctor3">
                                    </div>
                                    <h3 class="fs-18 text-secondary" style="margin-bottom: 6px;">Ander White</h3>
                                    <span class="fs-14 fw-medium d-block mb-10">Pediatrics</span>
                                    <span class="text-success fs-14 fw-medium mb-3">MON-FRI <span class="px-3">-</span> 6:00-8:00</span>
                                    <div>
                                        <a href="book-appointments.html" class="btn btn-primary text-white fs-14 fw-medium" style="padding: 9px 20px;">Book Now</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-2 col-sm-6 col-md-4 col-xxxl-4">
                                <div class="card bg-white rounded-10 border border-white mb-4 p-20 text-center">
                                    <div class="rounded-circle mb-3">
                                        <img src="assets/images/doctor4.jpg" class="rounded-circle" style="border: 3px solid #AFD4FF; padding: 6px;" alt="doctor4">
                                    </div>
                                    <h3 class="fs-18 text-secondary" style="margin-bottom: 6px;">Walter Harry</h3>
                                    <span class="fs-14 fw-medium d-block mb-10">Cardiologist</span>
                                    <span class="text-success fs-14 fw-medium mb-3">MON-FRI <span class="px-3">-</span> 6:00-8:00</span>
                                    <div>
                                        <a href="book-appointments.html" class="btn btn-primary text-white fs-14 fw-medium" style="padding: 9px 20px;">Book Now</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-2 col-sm-6 col-md-4 col-xxxl-4">
                                <div class="card bg-white rounded-10 border border-white mb-4 p-20 text-center">
                                    <div class="rounded-circle mb-3">
                                        <img src="assets/images/doctor5.jpg" class="rounded-circle" style="border: 3px solid #AFD4FF; padding: 6px;" alt="doctor5">
                                    </div>
                                    <h3 class="fs-18 text-secondary" style="margin-bottom: 6px;">Angela Carter</h3>
                                    <span class="fs-14 fw-medium d-block mb-10">Gynocologist</span>
                                    <span class="text-success fs-14 fw-medium mb-3">MON-FRI <span class="px-3">-</span> 6:00-8:00</span>
                                    <div>
                                        <a href="book-appointments.html" class="btn btn-primary text-white fs-14 fw-medium" style="padding: 9px 20px;">Book Now</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-2 col-sm-6 col-md-4 col-xxxl-4">
                                <div class="card bg-white rounded-10 border border-white mb-4 p-20 text-center">
                                    <div class="rounded-circle mb-3">
                                        <img src="assets/images/doctor6.jpg" class="rounded-circle" style="border: 3px solid #AFD4FF; padding: 6px;" alt="doctor6">
                                    </div>
                                    <h3 class="fs-18 text-secondary" style="margin-bottom: 6px;">John Loren</h3>
                                    <span class="fs-14 fw-medium d-block mb-10">Surgeon</span>
                                    <span class="text-success fs-14 fw-medium mb-3">MON-FRI <span class="px-3">-</span> 6:00-8:00</span>
                                    <div>
                                        <a href="book-appointments.html" class="btn btn-primary text-white fs-14 fw-medium" style="padding: 9px 20px;">Book Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex-grow-1"></div>

                <?php require __DIR__ . '/includes/footer.php'; ?>

            </div>
        </div>
        <!-- Start Main Content Area -->

        <!-- Start Theme Setting Area -->
        <button class="btn btn-primary theme-settings-btn p-0 position-fixed z-2 text-center rounded-circle" style="bottom: 24px; right: 24px; width: 56px; height: 56px; line-height: 54px;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">
            <i class="text-white ri-settings-3-fill fs-28" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Click On Theme Settings"></i>
        </button>

        <!-- Start Theme Setting Area -->
        <div class="offcanvas offcanvas-end bg-white border-0" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel" style="box-shadow: 0 4px 20px #2f8fe812 !important; max-width: 300px;">
            <div class="offcanvas-header bg-light p-20">
                <h5 class="offcanvas-title fs-18 fw-medium" id="offcanvasScrollingLabel">Configuration Panel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body p-0 overflow-hidden">
                <div class="last-child-none" style="max-height: 858px;" data-simplebar>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">RTL Mode</h4>
                        <div class="rtl-btn">
                            <label id="switch">
                                <input type="checkbox" onchange="toggleTheme()" class="toggle-switch rtl-switch" id="slider">
                            </label>
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Sidebar Dark</h4>
                        <div class="sidebar-light-dark" id="sidebar-light-dark">
                            <input type="checkbox" class="toggle-switch sidebar-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Only Header Dark</h4>
                        <div class="header-light-dark" id="header-light-dark">
                            <input type="checkbox" class="toggle-switch header-dark-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Right Sidebar</h4>
                        <div class="right-sidebar" id="right-sidebar">
                            <input type="checkbox" class="toggle-switch right-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Hide Sidebar</h4>
                        <div class="icon-sidebar" id="icon-sidebar">
                            <input type="checkbox" class="toggle-switch icon-sidebar-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Bordered Card</h4>
                        <div class="card-border" id="card-border">
                            <input type="checkbox" class="toggle-switch border-switch">
                        </div>
                    </div>
                    <div class="p-20 border-bottom child">
                        <h4 class="fs-15 fw-medium mb-12">Card Border Radius</h4>
                        <div class="card-radius-square" id="card-radius-square">
                            <input type="checkbox" class="toggle-switch border-radius-switch">
                        </div>
                    </div>
                    
                    <div class="p-20 border-bottom child">
                        <a href="#" class="btn btn-primary text-white">
                            Buy Fila
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Theme Setting Area -->
     
        <!-- Link Of JS File -->
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/sidebar-menu.js"></script>
        <script src="assets/js/quill.min.js"></script>
        <script src="assets/js/data-table.js"></script>
        <script src="assets/js/prism.js"></script>
        <script src="assets/js/clipboard.min.js"></script>
        <script src="assets/js/simplebar.min.js"></script>
        <script src="assets/js/apexcharts.min.js"></script>
        <script src="assets/js/echarts.min.js"></script>
        <script src="assets/js/swiper-bundle.min.js"></script>
        <script src="assets/js/fullcalendar.main.js"></script>
        <script src="assets/js/jsvectormap.min.js"></script>
        <script src="assets/js/world-merc.js"></script>
        <script src="assets/js/custom/apexcharts.js"></script>
        <script src="assets/js/custom/echarts.js"></script>
        <script src="assets/js/custom/maps.js"></script>
        <script src="assets/js/custom/custom.js"></script>
    </body>
</html>