<!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-xxxxxl-12">
                            <div class="card rounded-10 border-0 mb-4 bg-img zinnia-card" style="background: linear-gradient(101deg, #5040F4 55.73%, #796DF6 99.52%); padding: 30.5px 40px;">
                                <div class="row align-items-center">
                                    <div class="col-sm-6 col-lg-7">
                                        <h2 class="fs-26 fw-normal text-white mb-3">Welcome <span class="fw-900">Mateo!</span></h2>
                                        <p class="fs-16 lh-1-8 hospital-content" style="color: #CBC7FF; margin-bottom: 40px;">Here’s your today’s website analytics. Your total conversion rate increased by 32.5% today.</p>
                                        <div class="d-flex flex-wrap gap-3">
                                            <div class="d-flex rounded-1" style="padding: 9px 12px; background: rgba(255, 255, 255, 0.16);">
                                                <div class="flex-shrink-0">
                                                    <i class="ri-cursor-line fs-18 text-center rounded-circle d-inline-block" style="background-color: #C5CBFF; color: #382C83; width: 36px; height: 36px; line-height: 36px;"></i>
                                                </div>
                                                
                                                <div class="flex-grow-1 ms-10">
                                                    <span class="fs-15" style="color: #CBC7FF;">Clicks</span>
                                                    <div class="d-flex align-items-center">
                                                        <h2 class="fs-16 mb-0 lh-1" style="color: #fff;">4500</h2>
                                                        <span class="d-flex align-content-center gap-1 bg-danger border-white rounded-1 ms-10" style="padding: 3px 5px;">
                                                            <i class="material-symbols-outlined fs-12 text-white">trending_down</i>
                                                            <span class="lh-1 fs-12 text-white">1.25%</span>
                                                        </span>
                                                    </div>
                                                </div> 
                                            </div>
                                            <div class="d-flex rounded-1" style="padding: 9px 12px; background: rgba(255, 255, 255, 0.16);">
                                                <div class="flex-shrink-0">
                                                    <i class="ri-eye-2-line fs-18 text-center rounded-circle d-inline-block" style="background-color: #C5CBFF; color: #382C83; width: 36px; height: 36px; line-height: 36px;"></i>
                                                </div>
                                                
                                                <div class="flex-grow-1 ms-10">
                                                    <span class="fs-15" style="color: #CBC7FF;">Impressions</span>
                                                    <div class="d-flex align-items-center">
                                                        <h2 class="fs-16 mb-0 lh-1" style="color: #fff;">12,000</h2>
                                                        <span class="d-flex align-content-center gap-1 bg-success-70 border-white rounded-1 ms-10" style="padding: 3px 5px;">
                                                            <i class="material-symbols-outlined fs-12 text-white">trending_up</i>
                                                            <span class="lh-1 fs-12 text-white">4.11%</span>
                                                        </span>
                                                    </div>
                                                </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: 30px;">
                                            <img src="assets/images/welcome2.png" alt="welcome2">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-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">
                                                <i class="ri-pie-chart-2-fill rounded-1 d-flex justify-content-center align-items-center fs-28 text-primary mb-3" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                                <h3 class="mb-12 lh-1 fs-14 text-body">Visit By Day</h3>
                                                <div class="d-flex align-items-center">
                                                    <h2 class="fs-26 fw-bold mb-0 lh-1">1,850</h2>
                                                    <i class="material-symbols-outlined fs-14 text-success ms-1">trending_up</i>
                                                    <span class="lh-1 fs-14 text-success">4.11%</span>
                                                </div>
                                            </div>
                                            <div class="flex-shrink-0 ms-3 position-relative" style="width: 200px;">
                                                <div class="w-100 position-absolute top-50 translate-middle-y" style="right: -8px;">
                                                    <div id="visit_by_day_chart"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-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">
                                                <i class="ri-money-dollar-circle-fill rounded-1 d-flex justify-content-center align-items-center fs-28 text-primary mb-3" style="width: 50px; height: 50px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                                <h3 class="mb-12 lh-1 fs-14 text-body">Net Income</h3>
                                                <div class="d-flex align-items-center">
                                                    <h2 class="fs-26 fw-bold mb-0 lh-1">$31.5K</h2>
                                                    <i class="material-symbols-outlined fs-14 text-success ms-1">trending_up</i>
                                                    <span class="lh-1 fs-14 text-success">4.11%</span>
                                                </div>
                                            </div>
                                            <div class="flex-shrink-0 ms-3 position-relative" style="width: 200px;">
                                                <div class="w-100 position-absolute top-50 translate-middle-y" style="right: -8px;">
                                                    <div id="net_income_chart"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xxxxxl-12">
                            <div class="card bg-white p-40 rounded-10 border-0 mb-4 position-relative z-1 quick-view-bg" style="padding-top: 29px;">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <h3 class="text-white fs-26">Quick View</h3>
        
                                    <div class="dropdown action-opt text-center">
                                        <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="material-symbols-outlined fs-20 text-white">more_vert</i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow">
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Day
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Week
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Month
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Year
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card bg-white rounded-10 border-0" style="box-shadow: 0px 4px 54px 0px rgba(215, 231, 223, 0.40);">
                                    <div class="row g-0">
                                        <div class="col-sm-6 border-bottom border-border-color-90">
                                            <div class="card bg-white p-40 rounded-10 border border-white mb-0 position-relative z-1">
                                                <div class="d-flex">
                                                    <div class="flex-grow-1">
                                                        <h3 class="mb-10 lh-1 fs-14 text-body fw-medium">Users</h3>
                                                        <h2 class="fs-26 fw-bold mb-10 lh-1">25.6K</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-12 text-white position-relative top-1">4.11%</span>
                                                            </span>
                                                        </div>
                                                        <p class="mb-0 fs-14">Increases this month</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">
                                                            <i class="ri-user-3-fill d-flex justify-content-center align-items-center bg-primary-50 bg-opacity-10 fs-36 text-primary-50 rounded-1" style="width: 70px; height: 70px;"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 border-bottom border-start border-border-color-90">
                                            <div class="card bg-white p-40 rounded-10 border border-white mb-0 position-relative z-1">
                                                <div class="d-flex">
                                                    <div class="flex-grow-1">
                                                        <h3 class="mb-10 lh-1 fs-14 text-body fw-medium">Sessions</h3>
                                                        <h2 class="fs-26 fw-bold mb-10 lh-1">56.17K</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-12 text-white position-relative top-1">1.25%</span>
                                                            </span>
                                                        </div>
                                                        <p class="mb-0 fs-14">Decreases this month</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">
                                                            <i class="ri-flip-vertical-fill d-flex justify-content-center align-items-center bg-info-50 bg-opacity-10 fs-36 text-info-50 rounded-1" style="width: 70px; height: 70px;"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="card bg-white p-40 rounded-10 border border-white mb-0 position-relative z-1">
                                                <div class="d-flex">
                                                    <div class="flex-grow-1">
                                                        <h3 class="mb-10 lh-1 fs-14 text-body fw-medium">Avg. Visit Duration</h3>
                                                        <h2 class="fs-26 fw-bold mb-10 lh-1">2m 12s</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-12 text-white position-relative top-1">0.35%</span>
                                                            </span>
                                                        </div>
                                                        <p class="mb-0 fs-14">Decreases this month</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">
                                                            <i class="ri-timer-flash-fill d-flex justify-content-center align-items-center bg-warning-60 bg-opacity-10 fs-36 text-warning-60 rounded-1" style="width: 70px; height: 70px;"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 border-start border-border-color-90">
                                            <div class="card bg-white p-40 rounded-10 border border-white mb-0 position-relative z-1">
                                                <div class="d-flex">
                                                    <div class="flex-grow-1">
                                                        <h3 class="mb-10 lh-1 fs-14 text-body fw-medium">Bounce Rate</h3>
                                                        <h2 class="fs-26 fw-bold mb-10 lh-1">15.33%</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-12 text-white position-relative top-1">1.14%</span>
                                                            </span>
                                                        </div>
                                                        <p class="mb-0 fs-14">Increases this month</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">
                                                            <i class="ri-basketball-fill d-flex justify-content-center align-items-center bg-success-90 bg-opacity-10 fs-36 text-success-90 rounded-1" style="width: 70px; height: 70px;"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-3 col-xxxl-6">
                            <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>Visit By Source</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" data-simplebar="" style="max-height: 390px; margin-top: 3.5px;">
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-focus-3-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-primary-50" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Direct Source</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">90,954</h3>
                                            <span class="fs-14 fw-medium text-success-60">+2.3%</span>
                                        </div>
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-instagram-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-info-50" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Social Networks</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">2,312</h3>
                                            <span class="fs-14 fw-medium text-success-60">+14%</span>
                                        </div>
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-mail-unread-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-success" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Email Newsletter</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">90,954</h3>
                                            <span class="fs-14 fw-medium text-danger">-0.35%</span>
                                        </div>
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-restart-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-danger" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Referrals</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">15,312</h3>
                                            <span class="fs-14 fw-medium text-success-60">+32%</span>
                                        </div>
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-message-3-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-warning-60" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Other</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">1,325</h3>
                                            <span class="fs-14 fw-medium text-danger">-2.14%</span>
                                        </div>
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-focus-3-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-primary-50" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Direct Source</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">90,954</h3>
                                            <span class="fs-14 fw-medium text-success-60">+2.3%</span>
                                        </div>
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-instagram-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-info-50" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Social Networks</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">2,312</h3>
                                            <span class="fs-14 fw-medium text-success-60">+14%</span>
                                        </div>
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-mail-unread-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-success" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Email Newsletter</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">90,954</h3>
                                            <span class="fs-14 fw-medium text-danger">-0.35%</span>
                                        </div>
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-restart-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-danger" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Referrals</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">15,312</h3>
                                            <span class="fs-14 fw-medium text-success-60">+32%</span>
                                        </div>
                                    </li>
                                    <li class="d-flex justify-content-between align-items-center border-border-color-50" style="border-bottom: 1px dashed; padding-bottom: 18px; margin-bottom: 18px;">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 position-relative top-3">
                                                <i class="ri-message-3-fill d-flex justify-content-center align-items-center fs-18 rounded-1 text-warning-60" style="width: 32px; height: 32px; box-shadow: 0px 4px 20px 0px rgba(232, 231, 244, 0.70);"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <span class="fs-16 text-secondary d-block">Other</span>
                                                <span class="fs-14">15 Nov 2023 - 11:40am</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="fs-16">1,325</h3>
                                            <span class="fs-14 fw-medium text-danger">-2.14%</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xxxl-6">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-4">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <h3>Daily Visit Insights</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: -30px -20px -15px -20px;">
                                    <div id="daily_visit_insights_chart"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xxxl-12">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-4">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <h3>User By Device</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: -30px -20px -15px -20px;">
                                    <div id="user_by_device_chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-6 col-xxxl-6">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-4">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <h3>Audience Overview</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: -25px -12px -15px -14px;"> 
                                    <div id="audience_overview_chart"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xxxl-6">
                            <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>Browser Used & Traffic Reports</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-browser-used 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">Browser</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Users</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Transactions</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Change %</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/mozilla-firefox.png" class="rounded-circle" style="width: 24px; height: 24px;" alt="mozilla-firefox">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Mozilla Firefox</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex justify-content-center align-items-center gap-3">
                                                            <span class="text-secondary fs-14 fw-medium">1250</span>
                                                            <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 4px; width: 112px;">
                                                                <div class="progress-bar rounded-0" style="width: 80%; height: 4px; background-color: #1877F2;"></div>
                                                            </div>
                                                            <span class="text-body fs-14 fw-medium">18%</span>
                                                        </div> 
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex align-items-center gap-1">
                                                            <span class="text-secondary fw-medium">3456</span>
                                                            <span class="text-body fs-14 fw-normal position-relative top-1">23%</span>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-success bg-success bg-opacity-10 fs-14 fw-normal d-inline-block default-badge style-two border border-success d-flex align-items-center justify-content-center gap-1">
                                                            <i class="material-symbols-outlined fs-16 text-success lh-1">trending_up</i>
                                                            3.15%
                                                        </span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/microsoft-edge.png" class="rounded-circle" style="width: 24px; height: 24px;" alt="mozilla-firefox">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Microsoft Edge</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex justify-content-center align-items-center gap-3">
                                                            <span class="text-secondary fs-14 fw-medium">3251</span>
                                                            <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="height: 4px; width: 112px;">
                                                                <div class="progress-bar rounded-0" style="width: 22%; height: 4px; background-color: #1877F2;"></div>
                                                            </div>
                                                            <span class="text-body fs-14 fw-medium">22%</span>
                                                        </div> 
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex align-items-center gap-1">
                                                            <span class="text-secondary fw-medium">3549</span>
                                                            <span class="text-body fs-14 fw-normal position-relative top-1">21%</span>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-danger bg-danger bg-opacity-10 fs-14 fw-normal d-inline-block default-badge style-two border border-danger d-flex align-items-center justify-content-center gap-1">
                                                            <i class="material-symbols-outlined fs-16 text-danger lh-1">trending_down</i>
                                                            0.05%
                                                        </span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/safari.png" class="rounded-circle" style="width: 24px; height: 24px;" alt="safari">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Safari</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex justify-content-center align-items-center gap-3">
                                                            <span class="text-secondary fs-14 fw-medium">4624</span>
                                                            <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100" style="height: 4px; width: 112px;">
                                                                <div class="progress-bar rounded-0" style="width: 27%; height: 4px; background-color: #1877F2;"></div>
                                                            </div>
                                                            <span class="text-body fs-14 fw-medium">27%</span>
                                                        </div> 
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex align-items-center gap-1">
                                                            <span class="text-secondary fw-medium">2475</span>
                                                            <span class="text-body fs-14 fw-normal position-relative top-1">20%</span>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-success bg-success bg-opacity-10 fs-14 fw-normal d-inline-block default-badge style-two border border-success d-flex align-items-center justify-content-center gap-1">
                                                            <i class="material-symbols-outlined fs-16 text-success lh-1">trending_up</i>
                                                            1.21%
                                                        </span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/google-chrome.png" class="google-chrome" style="width: 24px; height: 24px;" alt="mozilla-firefox">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Google Chrome</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex justify-content-center align-items-center gap-3">
                                                            <span class="text-secondary fs-14 fw-medium">7215</span>
                                                            <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="height: 4px; width: 112px;">
                                                                <div class="progress-bar rounded-0" style="width: 65%; height: 4px; background-color: #1877F2;"></div>
                                                            </div>
                                                            <span class="text-body fs-14 fw-medium">18%</span>
                                                        </div> 
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex align-items-center gap-1">
                                                            <span class="text-secondary fw-medium">5342</span>
                                                            <span class="text-body fs-14 fw-normal position-relative top-1">51%</span>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-danger bg-danger bg-opacity-10 fs-14 fw-normal d-inline-block default-badge style-two border border-danger d-flex align-items-center justify-content-center gap-1">
                                                            <i class="material-symbols-outlined fs-16 text-danger lh-1">trending_down</i>
                                                            1.11%
                                                        </span>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/opera-mini.png" class="rounded-circle" style="width: 24px; height: 24px;" alt="opera-mini">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Opera Mini</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex justify-content-center align-items-center gap-3">
                                                            <span class="text-secondary fs-14 fw-medium">12407</span>
                                                            <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="height: 4px; width: 112px;">
                                                                <div class="progress-bar rounded-0" style="width: 90%; height: 4px; background-color: #1877F2;"></div>
                                                            </div>
                                                            <span class="text-body fs-14 fw-medium">90%</span>
                                                        </div> 
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex align-items-center gap-1">
                                                            <span class="text-secondary fw-medium">7321</span>
                                                            <span class="text-body fs-14 fw-normal position-relative top-1">70%</span>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-success bg-success bg-opacity-10 fs-14 fw-normal d-inline-block default-badge style-two border border-success d-flex align-items-center justify-content-center gap-1">
                                                            <i class="material-symbols-outlined fs-16 text-success lh-1">trending_up</i>
                                                            5.21%
                                                        </span>
                                                    </td> 
                                                </tr>
                                                <tr class="last-child-border-none">
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <img src="assets/images/others.png" class="rounded-circle" style="width: 24px; height: 24px;" alt="others">
                                                            </div>
                                                            <div class="flex-grow-1 ms-12 position-relative top-2">
                                                                <h3 class="fw-normal mb-0 fs-16 text-secondary">Others</h3>
                                                            </div>
                                                        </div>
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex justify-content-center align-items-center gap-3">
                                                            <span class="text-secondary fs-14 fw-medium">2678</span>
                                                            <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="height: 4px; width: 112px;">
                                                                <div class="progress-bar rounded-0" style="width: 5%; height: 4px; background-color: #1877F2;"></div>
                                                            </div>
                                                            <span class="text-body fs-14 fw-medium">5%</span>
                                                        </div> 
                                                    </td> 
                                                    <td>
                                                        <div class="d-flex align-items-center gap-1">
                                                            <span class="text-secondary fw-medium">1467</span>
                                                            <span class="text-body fs-14 fw-normal position-relative top-1">5%</span>
                                                        </div>
                                                    </td> 
                                                    <td class="text-body text-center">
                                                        <span class="text-danger bg-danger bg-opacity-10 fs-14 fw-normal d-inline-block default-badge style-two border border-danger d-flex align-items-center justify-content-center gap-1">
                                                            <i class="material-symbols-outlined fs-16 text-danger lh-1">trending_down</i>
                                                            1.25%
                                                        </span>
                                                    </td> 
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-4">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-0 rounded-bottom-0">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <h3>Top Browsing Pages Per Minute</h3>
        
                                    <div class="dropdown action-opt text-center">
                                        <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="material-symbols-outlined fs-20">more_vert</i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow">
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Day
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Week
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Month
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Year
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div style="margin: -29px -15px -26px -21px;">
                                    <div id="top_browsing_pages_per_minute_chart"></div>
                                </div>
                            </div>

                            <div class="card bg-white rounded-10 border border-white p-0 mb-4 rounded-top">
                                <div class="default-table-area mx-minus-1 style-two table-browser-used for-width for-border-color1">
                                    <div class="table-responsive">
                                        <table class="table align-middle w-100">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Page</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Views</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Bounce Rate</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-primary fs-16">/dashboard-overview</td> 
                                                    <td class="text-secondary fs-16">25</td>
                                                    <td class="text-secondary fs-16">83.9%</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-primary fs-16">/dashboard/products</td> 
                                                    <td class="text-secondary fs-16">113</td>
                                                    <td class="text-secondary fs-16">90.15%</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-primary fs-16">/dashboard/users</td> 
                                                    <td class="text-secondary fs-16">75</td>
                                                    <td class="text-secondary fs-16">25.3%</td>
                                                </tr>
                                                <tr class="last-child-border-none">
                                                    <td class="text-primary fs-16">/dashboard/performance</td> 
                                                    <td class="text-secondary fs-16">29</td>
                                                    <td class="text-secondary fs-16">17.2%</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-8">
                            <div class="card bg-white rounded-10 border border-white p-20 mb-4">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <h3>Visits By Country</h3>
        
                                    <div class="dropdown action-opt text-center">
                                        <button class="btn bg-transparent p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="material-symbols-outlined fs-20">more_vert</i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow">
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Day
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Week
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Month
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="javascript:;">
                                                    Last Year
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="bg-body-bg p-30 rounded-10 for-dark-bg-body-bg">
                                            <div id="visits_by_country" style="height: 351px;"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div>
                                            <div id="visits_by_country_chart" style="height: 351px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-3 col-xxxl-6">
                            <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-1 mb-20">
                                    <h3>Users By Device</h3>
    
                                    <div class="dropdown select-dropdown without-border">
                                        <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 -9px 0;">
                                    <div id="users_by_device_chart"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xxxl-6">
                            <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-1 mb-20">
                                    <h3>Performance Overview</h3>
    
                                    <div class="dropdown select-dropdown without-border">
                                        <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 -9px -26px -16px;">
                                    <div id="performance_overview_chart"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xxxl-12">
                            <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-1 p-20">
                                    <h3>Engagement Overview</h3>
        
                                    <div class="dropdown select-dropdown without-border">
                                        <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-engagement-overview 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">Duration (Secs)</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Sessions</th>
                                                    <th scope="col" class="fw-normal text-body-color-40 fs-14">Views</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-secondary fs-16">0-10</td>
                                                    <td class="text-secondary fs-16">2,150</td>
                                                    <td class="text-secondary fs-16">3,251</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-secondary fs-16">10-20</td>
                                                    <td class="text-secondary fs-16">1,215</td>
                                                    <td class="text-secondary fs-16">2,321</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-secondary fs-16">20-30</td>
                                                    <td class="text-secondary fs-16">1,050</td>
                                                    <td class="text-secondary fs-16">2,105</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-secondary fs-16">30-40</td>
                                                    <td class="text-secondary fs-16">1,021</td>
                                                    <td class="text-secondary fs-16">2,019</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-secondary fs-16">40-50</td>
                                                    <td class="text-secondary fs-16">921</td>
                                                    <td class="text-secondary fs-16">1,216</td>
                                                </tr>
                                                <tr class="last-child-border-none">
                                                    <td class="text-secondary fs-16">50-60</td>
                                                    <td class="text-secondary fs-16">800</td>
                                                    <td class="text-secondary fs-16">1,129</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </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>