<!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 p-0 mx-auto" style="max-width: 1608px;">
                <?php require __DIR__ . '/includes/topbar.php'; ?>


                <div class="main-content-container overflow-hidden">
                    <div class="row">
                        <div class="col-lg-8">
                            <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>Website Traffic</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 Year
                                        </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 id="website_traffic_chart" style="height: 531px;"></div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="row">
                                <div class="col-md-6 col-lg-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>Conversion Rate</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 Year
                                                </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 id="conversion_rate_chart" style="height: 211px;"></div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-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>Lead Generation</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 Year
                                                </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 -9px -15px -14px;">
                                            <div id="lead_generation_chart"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-6 col-xxxl-12">
                            <div class="card bg-light-70 rounded-10 border border-light-70 mb-4 p-20 pb-0 dark-circles">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                    <h3>Email Marketing Performance</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 Year
                                        </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-lg-6">
                                        <div class="card bg-white p-20 rounded-10 border border-white mb-20">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <h3 class="mb-10">Open Rate</h3>
                                                    <h2 class="fs-26 mb-0 lh-1 fw-medium">2,800</h2>
                                                    <p class="d-flex align-items-center gap-1" style="margin-top: 33px;"><i class="material-symbols-outlined fs-14 text-success position-relative top-1">trending_up</i> <span class="text-success">60%</span> open rate</p>
                                                </div>
                                                <div class="flex-shrink-0 ms-3">
                                                    <div class="for-dark1" style=" 
                                                        position: relative; 
                                                        width: 100px; 
                                                        height: 100px; 
                                                        border-radius: 50%; 
                                                        display: flex; 
                                                        align-items: center; 
                                                        justify-content: center; 
                                                        background: conic-gradient(#1CDFF4 60%, #F4F6FC 60%);"
                                                    >
                                                        <div class="for-dark" style="
                                                            position: absolute; 
                                                            width: 80%; 
                                                            height: 80%; 
                                                            background-color: #ffffff; 
                                                            border-radius: 50%; 
                                                            display: flex; 
                                                            align-items: center; 
                                                            justify-content: center;"
                                                        > 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="card bg-white p-20 rounded-10 border border-white mb-20">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <h3 class="mb-10">Click-Through Rate</h3>
                                                    <h2 class="fs-26 mb-0 lh-1 fw-medium">784</h2>
                                                    <p class="d-flex align-items-center gap-1" style="margin-top: 33px;"><i class="material-symbols-outlined fs-14 text-success position-relative top-1">trending_up</i> <span class="text-success">28%</span> click through rate</p>
                                                </div>
                                                <div class="flex-shrink-0 ms-3">
                                                    <div class="for-dark2" style=" 
                                                        position: relative; 
                                                        width: 100px; 
                                                        height: 100px; 
                                                        border-radius: 50%; 
                                                        display: flex; 
                                                        align-items: center; 
                                                        justify-content: center; 
                                                        background: conic-gradient(#FC7013 28%, #F4F6FC 28%);"
                                                    >
                                                        <div class="for-dark" style="
                                                            position: absolute; 
                                                            width: 80%; 
                                                            height: 80%; 
                                                            background-color: #ffffff; 
                                                            border-radius: 50%; 
                                                            display: flex; 
                                                            align-items: center; 
                                                            justify-content: center;"
                                                        > 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="card bg-white p-20 rounded-10 border border-white mb-20">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <h3 class="mb-10">Conversion Rate</h3>
                                                    <h2 class="fs-26 mb-0 lh-1 fw-medium">280</h2>
                                                    <p class="d-flex align-items-center gap-1" style="margin-top: 33px;"><i class="material-symbols-outlined fs-14 text-success position-relative top-1">trending_up</i> <span class="text-success">10%</span> conversion rate</p>
                                                </div>
                                                <div class="flex-shrink-0 ms-3">
                                                    <div class="for-dark2" style=" 
                                                        position: relative; 
                                                        width: 100px; 
                                                        height: 100px; 
                                                        border-radius: 50%; 
                                                        display: flex; 
                                                        align-items: center; 
                                                        justify-content: center; 
                                                        background: conic-gradient(#2ECC71 10%, #F4F6FC 10%);"
                                                    >
                                                        <div class="for-dark" style="
                                                            position: absolute; 
                                                            width: 80%; 
                                                            height: 80%; 
                                                            background-color: #ffffff; 
                                                            border-radius: 50%; 
                                                            display: flex; 
                                                            align-items: center; 
                                                            justify-content: center;"
                                                        > 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="card bg-white p-20 rounded-10 border border-white mb-20">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <h3 class="mb-10">Bounce Rate</h3>
                                                    <h2 class="fs-26 mb-0 lh-1 fw-medium">56</h2>
                                                    <p class="d-flex align-items-center gap-1" style="margin-top: 33px;"><i class="material-symbols-outlined fs-14 text-success position-relative top-1">trending_up</i> <span class="text-success">2%</span>  bounce rate</p>
                                                </div>
                                                <div class="flex-shrink-0 ms-3">
                                                    <div class="for-dark4" style=" 
                                                        position: relative; 
                                                        width: 100px; 
                                                        height: 100px; 
                                                        border-radius: 50%; 
                                                        display: flex; 
                                                        align-items: center; 
                                                        justify-content: center; 
                                                        background: conic-gradient(#E74C3C 2%, #F4F6FC 2%);"
                                                    >
                                                        <div class="for-dark" style="
                                                            position: absolute; 
                                                            width: 80%; 
                                                            height: 80%; 
                                                            background-color: #ffffff; 
                                                            border-radius: 50%; 
                                                            display: flex; 
                                                            align-items: center; 
                                                            justify-content: center;"
                                                        > 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xxxl-12">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card bg-white p-20 rounded-10 border border-white mb-20">
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                            <h3>Camping Performance</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-28">more_horiz</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 id="camping_performance_chart" style="height: 314px;"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card bg-white p-20 rounded-10 border border-white mb-20">
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
                                            <h3>Social Media Engagement</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-28">more_horiz</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="last-child-none">
                                            <div class="d-flex justify-content-between align-items-center border-border-color-50 child" style="border-bottom: 1px dashed; padding-bottom: 18.8px; margin-bottom: 18.8px;">
                                                <div class="d-flex align-items-center">
                                                    <i class="ri-facebook-fill d-inline-block rounded-circle text-center fs-18 text-white" style="width: 50px; height: 50px; line-height: 50px; background-color: #1877F2;"></i>
                                                    <span class="fs-18 text-secondary ms-3 d-none d-sm-block">Facebook</span>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 ms-12">
                                                        <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 10px; width: 130px;">
                                                            <div class="progress-bar rounded-0" style="width: 80%; height: 10px; background-color: #1877F2;"></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-12">
                                                        <span class="fs-14 text-body text-start d-block">80%</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center border-border-color-50 child" style="border-bottom: 1px dashed; padding-bottom: 18.8px; margin-bottom: 18.8px;">
                                                <div class="d-flex align-items-center">
                                                    <i class="ri-instagram-fill d-inline-block rounded-circle text-center fs-18 text-white" style="width: 50px; height: 50px; line-height: 50px; background-color: #E1306C;"></i>
                                                    <span class="fs-18 text-secondary ms-3 d-none d-sm-block">Instagram</span>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 ms-12">
                                                        <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 10px; width: 130px;">
                                                            <div class="progress-bar rounded-0" style="width: 75%; height: 10px; background-color: #E1306C;"></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-12">
                                                        <span class="fs-14 text-body text-start d-block">75%</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center border-border-color-50 child" style="border-bottom: 1px dashed; padding-bottom: 18.8px; margin-bottom: 18.8px;">
                                                <div class="d-flex align-items-center">
                                                    <i class="ri-twitter-fill d-inline-block rounded-circle text-center fs-18 text-white" style="width: 50px; height: 50px; line-height: 50px; background-color: #14171A;"></i>
                                                    <span class="fs-18 text-secondary ms-3 d-none d-sm-block">Twitter</span>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 ms-12">
                                                        <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="height: 10px; width: 130px;">
                                                            <div class="progress-bar rounded-0" style="width: 55%; height: 10px; background-color: #14171A;"></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-12">
                                                        <span class="fs-14 text-body text-start d-block">55%</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center border-border-color-50 child" style="border-bottom: 1px dashed; padding-bottom: 18.8px; margin-bottom: 18.8px;">
                                                <div class="d-flex align-items-center">
                                                    <i class="ri-linkedin-fill d-inline-block rounded-circle text-center fs-18 text-white" style="width: 50px; height: 50px; line-height: 50px; background-color: #0A66C2;"></i>
                                                    <span class="fs-18 text-secondary ms-3 d-none d-sm-block">LinkedIn</span>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1 ms-12">
                                                        <div class="progress bg-light rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 10px; width: 130px;">
                                                            <div class="progress-bar rounded-0" style="width: 60%; height: 10px; background-color: #0A66C2;"></div>
                                                        </div>
                                                    </div>
                                                    <div class="flex-shrink-0 ms-12">
                                                        <span class="fs-14 text-body text-start d-block">60%</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-4 col-md-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-3 mb-3">
                                    <div class="d-flex align-items-center gap-1">
                                        <h3>Facebook Campaign</h3>
                                        <div class="border-success border rounded-1 d-flex align-items-center bg-success bg-opacity-10 text-success ms-10" style="padding: .5px 8px;">
                                            <span style="width: 5px; height: 5px; margin-inline-end: 5px;" class="bg-success rounded-circle d-block"></span>
                                            <span class="fs-12 lh-1">Live</span>
                                        </div>
                                    </div>

                                    <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-28">more_horiz</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="d-flex flex-wrap gap-4 mb-4">
                                    <div>
                                        <span class="d-block fs-16 mb-1">Camping Budget</span>
                                        <h3 class="fs-26">$5,000</h3>
                                    </div>
                                    <div>
                                        <span class="d-block fs-16 mb-1">Followers Goal</span>
                                        <h3 class="fs-26">250,000</h3>
                                    </div>
                                </div>
                                
                                <div style="margin: -24px -9px -28px -16px;">
                                    <div id="facebook_campaign_chart"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-4 col-md-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-3 mb-3">
                                    <h3>Sales and Revenue</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-28">more_horiz</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 id="sales_and_revenue_chart" style="height: 237px;"></div>
                            </div>
                        </div>
                        <div class="col-xxl-4 col-md-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>SEO Performance</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 Month
                                        </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 -31px -14px -16px;">
                                    <div id="seo_performance_chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-8">
                            <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>Customer Lifetime Value</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-28">more_horiz</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="default-table-area mx-minus-1 style-two table-customer-lifetime-value">
                                    <div class="table-responsive">
                                        <table class="table align-middle">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="fw-medium pe-0">
                                                        <div class="form-check position-relative" style="top: -14px;">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault1">
                                                        </div>
                                                    </th>
                                                    <th scope="col" class="fw-medium ps-0">Customer <br> Segment/ID</th>
                                                    <th scope="col" class="fw-medium">Average <br> Purchase Value</th>
                                                    <th scope="col" class="fw-medium ps-0">Purchase <br> Frequency</th>
                                                    <th scope="col" class="fw-medium">Customer <br> Lifespan</th>
                                                    <th scope="col" class="fw-medium">
                                                        <span class="position-relative" style="top: -10px;">CLV</span>
                                                    </th>
                                                    <th scope="col" class="fw-medium">Customer <br> Retention Rate</th>
                                                    <th scope="col" class="fw-medium">Profit <br> Margin</th>
                                                    <th scope="col" class="fw-medium text-start">
                                                        <span class="position-relative" style="top: -10px;">Action</span>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check position-relative" style="top: -2px;">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault2">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">Loyal <br> Customers</td> 
                                                    <td class="text-body">$120</td> 
                                                    <td class="text-body">4 times/year</td> 
                                                    <td class="text-body">5 years</td> 
                                                    <td class="text-body">$2,400</td> 
                                                    <td class="text-body">85%</td> 
                                                    <td class="text-body">$1,440</td>
                                                    <td>
                                                        <div class="d-flex justify-content-start" style="gap: 12px;">
                                                            <button class="bg-transparent p-0 border-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-primary">visibility</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">drive_file_rename_outline</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check position-relative" style="top: -2px;">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault3">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">Occasional <br> Customers</td> 
                                                    <td class="text-body">$60</td> 
                                                    <td class="text-body">2 times/year</td> 
                                                    <td class="text-body">3 years</td> 
                                                    <td class="text-body">$360</td> 
                                                    <td class="text-body">50%</td> 
                                                    <td class="text-body">$180</td>
                                                    <td>
                                                        <div class="d-flex justify-content-start" style="gap: 12px;">
                                                            <button class="bg-transparent p-0 border-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-primary">visibility</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">drive_file_rename_outline</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check position-relative" style="top: -2px;">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault4">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">High-Value <br> Customers</td> 
                                                    <td class="text-body">$150</td> 
                                                    <td class="text-body">6 times/year</td> 
                                                    <td class="text-body">6 years</td> 
                                                    <td class="text-body">$5,400</td> 
                                                    <td class="text-body">90%</td> 
                                                    <td class="text-body">$3,510</td>
                                                    <td>
                                                        <div class="d-flex justify-content-start" style="gap: 12px;">
                                                            <button class="bg-transparent p-0 border-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-primary">visibility</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">drive_file_rename_outline</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check position-relative" style="top: -2px;">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault5">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">New <br> Customers</td> 
                                                    <td class="text-body">$50</td> 
                                                    <td class="text-body">1 times/year</td> 
                                                    <td class="text-body">1 years</td> 
                                                    <td class="text-body">$50</td> 
                                                    <td class="text-body">30%</td> 
                                                    <td class="text-body">$20</td>
                                                    <td>
                                                        <div class="d-flex justify-content-start" style="gap: 12px;">
                                                            <button class="bg-transparent p-0 border-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-primary">visibility</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">drive_file_rename_outline</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </td> 
                                                </tr>
                                                <tr>
                                                    <td class="text-body pe-0" style="width: 62px;">
                                                        <div class="form-check position-relative" style="top: -2px;">
                                                            <input class="form-check-input" type="checkbox" id="flexCheckDefault6">
                                                        </div>
                                                    </td>
                                                    <td class="text-body ps-0">Segment X</td> 
                                                    <td class="text-body">$85</td> 
                                                    <td class="text-body">4 times/year</td> 
                                                    <td class="text-body">3 times/year</td> 
                                                    <td class="text-body">4 years</td> 
                                                    <td class="text-body">$1,020</td> 
                                                    <td class="text-body">$561</td>
                                                    <td>
                                                        <div class="d-flex justify-content-start" style="gap: 12px;">
                                                            <button class="bg-transparent p-0 border-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-primary">visibility</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">drive_file_rename_outline</i>
                                                            </button>
                                                            <button class="bg-transparent p-0 border-0 hover-text-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                                                <i class="material-symbols-outlined fs-16 fw-normal text-body">delete</i>
                                                            </button>
                                                        </div>
                                                    </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 pt-15 p-20">
                                        <span class="fs-15">Showing 1 to 5 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-lg-4">
                            <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>Channel Performance</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 Month
                                        </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 -10px -33px -12px;">
                                    <div id="channel_performance_chart" style="height: 300px;"></div>
                                </div>
                            </div>
                            <div class="card gradient-bg-4 rounded-10 border-0 mb-4 p-20 position-relative z-1 py-4">
                                <div class="text-center">
                                    <span class="fs-16 text-white">Have You Given</span>
                                    <h3 class="fs-26 text-white" style="margin-bottom: 50px;">Any New Mobile Apps a Try?</h3>
                                    <div class="text-end">
                                        <button class="btn btn-warning text-white fw-normal">Download Mobile App</button>
                                    </div>
                                </div>
                                <img src="assets/images/shape7.png" class="position-absolute bottom-0 start-0 z-n1" style="padding-left: 20px;" alt="shape7">
                            </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>