<?php include 'header.php'; ?>

<style>
.container{padding-right:10px;padding-left:10px}@media (min-width:1200px){.container{width:1220px}}.panel-footer{background-color:#ffffff21}.panel-heading{padding:12px}.panel{border:1px solid #ddd}
/* Column styling */
.container .col-lg-3:nth-child(10),
.container .col-lg-3:nth-child(6),
.container .col-lg-3:nth-child(9),
.container .col-lg-3:nth-child(8) {
 
}

/* Font import */
@import url("//fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap");

/* Font family for the dashboard */
body, .container .panel-body .row, .container .col-lg-3 .panel {
    font-family: 'Inter', sans-serif;
}

/* Light theme background and panel styles */
body {
    background-color: #f0f4f8 !important;
}

.container .col-lg-3 .panel, .container .col-lg-12 .panel {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lighter shadow for light theme */
}

/* Panel heading */
.container .panel .panel-heading {
    background-color: #f7f9fc !important;
    border-bottom-style: none;
    color: #2c3e50;
}

/* Panel footer for links */
.container a .panel-footer {
    background: linear-gradient(<?= $pd ?>, <?= $pc_1 ?>, <?= $pc_2 ?>); /* Light gradient */
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow */
    transition: background 0.3s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.container a .panel-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(<?= $pd ?>, <?= $pc_1 ?>, <?= $pc_2 ?>);
    transition: left 0.4s ease-in-out;
    z-index: -1;
    opacity: 0.8;
}

.container a .panel-footer:hover {
    transform: translateY(-2px);
}

.container a .panel-footer:hover::before {
    left: 0;
}


.pull-left{
    color: white !important;
}
/* Panel border styles */
.container .col-lg-3 .panel {
    border: none;
}

/* Icon styling */
.container .panel .col-xs-3 {
    color: #5d6d7e;
}

/* Modal styles for light theme */
.modal-body, .modal-content, .modal-header {
    background-color: #ffffff;
    color: #2c3e50;
}

/* Adjust header and footer text */
.container .panel .text-right, .panel-footer {
    color: #5d6d7e;
}
/* Column 9/12 */
.container .panel .text-right{
 top:5px;
}
/* Chart container styling */
.chart-container {
    position: relative;
    width: 100%;
    height: 400px;
}

@media (max-width: 768px) {
    .chart-container {
        height: 300px;
    }
}

@media (max-width: 576px) {
    .chart-container {
        height: 250px;
    }
}


.toggle-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.toggle-buttons button {
    background-color:  <?= $pc_1 ?>;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-buttons button.active {
    background-color: <?= $pc_2 ?>;
}

.toggle-buttons button:hover {
    background-color: <?= $ph ?>;
}
/* Row */
.container .panel-body .row{
 min-height:530px;
}

@media (max-width:767px){

 /* Accordion Content */
 .container .col-lg-12 .panel .panel-body{
  height:430px !important;
 }
 
}

@media (max-width:576px){

 /* Accordion Content */
 .container .panel .panel-body{
  transform:translatex(0px) translatey(0px);
 }
 
 /* Accordion Content */
 .container .col-lg-12 .panel .panel-body{
  height:400px !important;
 }
 
}



@media (max-width:500px){

 /* Toggle buttons */
 .panel-body div .toggle-buttons{
  width:60%;
  position:relative;
  left:80px;
 }
 
}

/* Side menu */
#sideMenuBtn{
 background-color:#eaeaea;
 color:#5a5a5a;
}

/* Chart header */
.panel-body .chart-header{
 padding-left:10px;
 padding-right:10px;
}

/* Side menu content */
#sideMenuContent{
 right:29px;
}

/* Monthly */
#monthlyBtn{
 background-color:#ffffff;
 color:#5a5a5a;
}

/* Dropdown toggle */
.navbar-left-block li .dropdown-toggle{
 color:#5a5a5a;
}

/* Link */
.navbar-left-block .active a{
    background: linear-gradient(<?= $pd ?>, <?= $pc_1 ?>, <?= $pc_2 ?>);

}

/* Daily */
#dailyBtn{
 background-image:none;
 background-color:#ffffff;
 color:#5a5a5a;
}

/* Analytics */
.toggle-buttons button.active {
    background: linear-gradient(<?= $pd ?>, <?= $pc_1 ?>, <?= $pc_2 ?>)    !important;
 color:#ffffff;
}
/* Analytics */
.toggle-buttons button:hover {
    background-color: <?= $ph ?>
!important;
 color:#ffffff !important;
 transform: translateY(-2px);
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/* Summary */
.toggle-buttons button {
 background-color:#eaeaea;
 color:#5a5a5a;
}

@media (max-width:767px){

 /* Accordion Content */
 .container #analyticsSection .col-lg-12 .panel .panel-body{
  height:400px !important;
 }
 
 /* Panel */
 .container #analyticsSection .col-lg-12 .panel{
  height:400px !important;
 }
 
}

@media (max-width:576px){

 /* Accordion Content */
 #analyticsSection .panel .panel-body{
  transform:translatex(0px) translatey(0px);
 }
 
 /* Panel */
 .container #analyticsSection .col-lg-12 .panel{
  height:300px !important;
 }
 
}

@media (min-width:768px){

 /* Accordion Content */
 #analyticsSection .panel .panel-body{
  height:500px;
 }
 
}
</style>

  <script src="https://cdn.lordicon.com/fudrjiwc.js"></script>
<div class="container">
    <div class="toggle-buttons">
        <button id="summaryBtn" class="active">Summary</button>
        <button id="analyticsBtn">Analytics</button>
    </div>

    <div id="summarySection">

    <div class="col-lg-3 col-md-6" style="border-radius: 19px;" >
        
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/dqxvvqzi.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"clients"]);?></div> </h4>
</div>
 <div>
<h5 >Total Users</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/clients">
<div class="panel-footer" >
<span class="pull-left">See In Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
	
	
	
<div class="col-lg-3 col-md-6" style="border-radius: 19px;" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/cllunfud.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"orders"]) ?></div></h4>
</div>
 <div>
<h5 >Total Orders</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/orders">
<div class="panel-footer" >
<span class="pull-left">See In Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>


	
	
	
<div class="col-lg-3 col-md-6" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/fsihxwoq.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"tasks"]) ?></div> </h4>
</div>
 <div>
<h5 >Refilling Orders</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/tasks">
<div class="panel-footer" >
<span class="pull-left">See In Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
	
	
	
<div class="col-lg-3 col-md-6" >
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/kjkiqtxg.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"tickets","where"=>["client_new"=>2]]) ?></div> </h4>
</div>
 <div>
<h5 >Unread Tickets</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/tickets">
<div class="panel-footer" >
<span class="pull-left">See In Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>	
        
     <div class="col-lg-3 col-md-6" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/pimvysaa.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"payments","where"=>["payment_status"=>3]]) ?></div> </h4>
</div>
 <div>
<h5 >Received Payments</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/fund-add-history">
<div class="panel-footer" >
<span class="pull-left">See in Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>	   
        
		
<div class="col-lg-3 col-md-6" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/mfzonmkf.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"categories","where"=>["category_deleted"=>0]]) ?></div> </h4>
</div>
 <div>
<h5 >Total categories</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/services">
<div class="panel-footer" >
<span class="pull-left">See in Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>	
	
	
	
	
<div class="col-lg-3 col-md-6" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/ozqvdvoh.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"services","where"=>["service_deleted"=>0]]) ?></div> </h4>
</div>
 <div>
<h5 >Total Services</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/services">
<div class="panel-footer" >
<span class="pull-left">See In Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>	
	
	
<div class="col-lg-3 col-md-6" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/pxxdikfn.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"admin","where"=>["admin_type"=>2]]) ?></div> </h4>
</div>
 <div>
<h5 >Total Staff</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/manager">
<div class="panel-footer" >
<span class="pull-left">See in Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>		
	
		
		
  <div class="col-lg-3 col-md-6" style="border-radius: 19px;" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/cosvjkbu.json"
    trigger="loop"
    delay="2000"
    colors="primary:#e83a30,secondary:#646e78,tertiary:#3a3347"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo $settings["panel_orders"]; ?></div> </h4>
</div>
 <div>
<h5 >Total Orders with fake orders</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/settings/site_count">
<div class="panel-footer" >
<span class="pull-left">See in Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>	      
        
    
  <div class="col-lg-3 col-md-6" style="border-radius: 19px;" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/pdwpcpva.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"currencies","where"=>["is_enable"=>1]]) ?></div> </h4>
</div>
 <div>
<h5 >Total Currency</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/settings/site_count">
<div class="panel-footer" >
<span class="pull-left">See In Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>	 

<div class="col-lg-3 col-md-6" style="border-radius: 19px;" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/jldyvygy.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"service_api"]) ?></div> </h4>
</div>
 <div>
<h5 >Total Providers</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/settings/providers">
<div class="panel-footer" >
<span class="pull-left">See In Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>	         
   
   <div class="col-lg-3 col-md-6" style="border-radius: 19px;" >
<div class="panel panel-green" >
<div class="panel-heading">
<div class="row">
<div class="col-xs-3" style="color:#222831;">
<lord-icon
    src="https://cdn.lordicon.com/guqkthkk.json"
    trigger="loop"
    delay="2000"
    style="width:75px;height:75px">
</lord-icon>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<h4>
<div><?php echo countRow(["table"=>"notifications_popup","where"=>["status"=>1]]) ?></div> </h4>
</div>
 <div>
<h5 >Active Broadcasts</h5>
</div>
</div>
</div>
</div>
<a href="https://<?php echo "$url/"; echo $rentaladmin; ?>/broadcasts">
<div class="panel-footer" >
<span class="pull-left">See In Detail</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>	         
      </div>  
<div id="analyticsSection">
    <div class="col-lg-12 col-md-12">
        <div class="panel panel-default">
            <div class="panel-body" style="padding:0px;padding-bottom:10px;">
                <div class="row">
                    <div class="col-md-12" style="padding-left:20px;padding-right:20px;">
                        <div class="chart-header">
                            <center><h3 id="chartTitle">Daily Statistics</h3></center>
                            <div class="header-icons">
                                <button id="downloadChartBtn" class="btn btn-success download-icon">
                                    <i class="fa fa-download"></i>
                                </button>
                                <button class="side-menu" id="sideMenuBtn">&#9776;</button>
                            </div>
                        </div>
                        <hr>
                        <div class="chart-container">
                            <canvas id="stackedAreaChart"></canvas>
                        </div>
                        <div class="sidebar-menu-content" id="sideMenuContent">
                            <button id="dailyBtn" class="active">Daily</button>
                            <button id="monthlyBtn">Monthly</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('stackedAreaChart').getContext('2d');

const gradientBlue = ctx.createLinearGradient(0, 0, 0, 400);
gradientBlue.addColorStop(0, 'rgba(0, 123, 255, 0.6)');
gradientBlue.addColorStop(1, 'rgba(0, 123, 255, 0.8)');

const gradientGreen = ctx.createLinearGradient(0, 0, 0, 400);
gradientGreen.addColorStop(0, 'rgba(0, 227, 150, 0.6)');
gradientGreen.addColorStop(1, 'rgba(0, 227, 150, 0.8)');

const gradientYellow = ctx.createLinearGradient(0, 0, 0, 400);
gradientYellow.addColorStop(0, 'rgba(255, 193, 7, 0.6)');
gradientYellow.addColorStop(1, 'rgba(255, 193, 7, 0.8)');

const gradientRed = ctx.createLinearGradient(0, 0, 0, 400);
gradientRed.addColorStop(0, 'rgba(255, 99, 132, 0.6)');
gradientRed.addColorStop(1, 'rgba(255, 99, 132, 0.8)');

const dailyLabels = Array.from({length: <?php echo count($dailyData); ?>}, (_, i) => i + 1);
const monthlyLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

const dailyData = {
    labels: dailyLabels,
    datasets: [
        {
            label: 'Users',
            data: <?php echo json_encode(array_values($dailyData)); ?>,
            backgroundColor: gradientBlue,
            borderColor: 'rgba(0, 123, 255, 1)',
            pointBackgroundColor: 'rgba(0, 123, 255, 1)',
            fill: true,
            tension: 0.4
        },
        {
            label: 'Orders',
            data: <?php echo json_encode(array_values($dailyOrdersData)); ?>,
            backgroundColor: gradientGreen,
            borderColor: 'rgba(0, 227, 150, 1)',
            pointBackgroundColor: 'rgba(0, 227, 150, 1)',
            fill: true,
            tension: 0.4
        },
        {
            label: 'Payments',
            data: <?php echo json_encode(array_values($dailyPaymentsData)); ?>,
            backgroundColor: gradientYellow,
            borderColor: 'rgba(255, 193, 7, 1)',
            pointBackgroundColor: 'rgba(255, 193, 7, 1)',
            fill: true,
            tension: 0.4
        },
        {
            label: 'Profits',
            data: <?php echo json_encode(array_values($dailyProfitsData)); ?>,
            backgroundColor: gradientRed,
            borderColor: 'rgba(255, 99, 132, 1)',
            pointBackgroundColor: 'rgba(255, 99, 132, 1)',
            fill: true,
            tension: 0.4
        }
    ]
};

const monthlyData = {
    labels: monthlyLabels,
    datasets: [
        {
            label: 'Users',
            data: <?php echo json_encode(array_values($monthlyData)); ?>,
            backgroundColor: gradientBlue,
            borderColor: 'rgba(0, 123, 255, 1)',
            pointBackgroundColor: 'rgba(0, 123, 255, 1)',
            fill: true,
            tension: 0.4
        },
        {
            label: 'Orders',
            data: <?php echo json_encode(array_values($monthlyOrdersData)); ?>,
            backgroundColor: gradientGreen,
            borderColor: 'rgba(0, 227, 150, 1)',
            pointBackgroundColor: 'rgba(0, 227, 150, 1)',
            fill: true,
            tension: 0.4
        },
        {
            label: 'Payments',
            data: <?php echo json_encode(array_values($monthlyPaymentsData)); ?>,
            backgroundColor: gradientYellow,
            borderColor: 'rgba(255, 193, 7, 1)',
            pointBackgroundColor: 'rgba(255, 193, 7, 1)',
            fill: true,
            tension: 0.4
        },
        {
            label: 'Profits',
            data: <?php echo json_encode(array_values($monthlyProfitsData)); ?>,
            backgroundColor: gradientRed,
            borderColor: 'rgba(255, 99, 132, 1)',
            pointBackgroundColor: 'rgba(255, 99, 132, 1)',
            fill: true,
            tension: 0.4
        }
    ]
};

const config = {
    type: 'line',
    data: dailyData,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    usePointStyle: true,
                    pointStyle: 'circle'
                }
            },
            
        },
        scales: {
            x: {
                grid: {
                    display: false
                }
            },
            y: {
                grid: {
                    display: true,
                    color: 'rgba(200, 200, 200, 0.2)'
                }
            }
        }
    }
};

const stackedAreaChart = new Chart(ctx, config);

document.getElementById('sideMenuBtn').addEventListener('click', () => {
    const sideMenuContent = document.getElementById('sideMenuContent');
    sideMenuContent.style.display = sideMenuContent.style.display === 'block' ? 'none' : 'block';
});

document.addEventListener('click', (event) => {
    const sideMenuContent = document.getElementById('sideMenuContent');
    const sideMenuBtn = document.getElementById('sideMenuBtn');
    if (!sideMenuContent.contains(event.target) && !sideMenuBtn.contains(event.target)) {
        sideMenuContent.style.display = 'none';
    }
});

document.getElementById('dailyBtn').addEventListener('click', () => {
    document.getElementById('chartTitle').innerText = 'Daily Statistics';
    document.getElementById('dailyBtn').classList.add('active');
    document.getElementById('monthlyBtn').classList.remove('active');
    stackedAreaChart.data = dailyData;
    stackedAreaChart.update();
});

document.getElementById('monthlyBtn').addEventListener('click', () => {
    document.getElementById('chartTitle').innerText = 'Monthly Statistics';
    document.getElementById('monthlyBtn').classList.add('active');
    document.getElementById('dailyBtn').classList.remove('active');
    stackedAreaChart.data = monthlyData;
    stackedAreaChart.update();
});

document.getElementById('downloadChartBtn').addEventListener('click', () => {
    const link = document.createElement('a');
    link.href = stackedAreaChart.toBase64Image();
    link.download = 'report.png';
    link.click();
});
</script>

<style>
/* Chart header styling */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Header icons styling */
.header-icons {
    display: flex;
    align-items: center;
}

/* Sidebar menu button styling */
.side-menu {
    background-color: <?= $pc_1 ?>;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
    margin-left: 10px;
}

/* Sidebar menu content styling */
.sidebar-menu-content {
    display: none;
    position: absolute;
    top: 50px;
    right: 10px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.sidebar-menu-content button {
    background-color: <?= $pc_1 ?>;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.sidebar-menu-content button:hover {
    background-color: <?= $ph ?>;
}

.sidebar-menu-content button.active {
    background-color: <?= $pc_2 ?>;
}

/* Download button styling */
.download-icon {
    background-color: #28a745;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    padding: 10px;
}

.download-icon:hover {
    background-color: #218838;
    color: #ffffff;
}

.download-icon i {
    margin-right: 0;
}

/* Chart container styling */
.chart-container {
    position: relative;
    height: 400px;
    width: 100%;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .chart-container {
        height: 300px;
    }
}

@media (max-width: 576px) {
    .chart-container {
        height: 200px;
    }
}

@media (max-width:767px){
    /* Panel */
    #analyticsSection .panel{
        height:600px !important;
    }
}

@media (max-width:576px){
    /* Panel */
    #analyticsSection .panel{
        height:500px !important;
    }
}
</style>
    <div class="col-lg-12 mg-t-30 mg-b-30">
        <div id="chart"></div>
    </div>

<div class="modal modal-center fade" id="confirmChange" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
   <div class="modal-dialog modal-dialog-center" role="document">
      <div class="modal-content">
         <div class="modal-body text-center">
            <h4>Are you sure you want to proceed ?</h4>
            <div align="center">
               <a class="btn btn-primary" href="" id="confirmYes">Yes</a>
               <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
         </div>
      </div>
   </div>
</div>
  <div class="modal fade" id="modalDiv" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
         <h4 class="modal-title" id="modalTitle"></h4>
       </div>
       <div id="modalContent">
       </div>
     </div>
   </div>
  </div>
  <script>
document.addEventListener('DOMContentLoaded', () => {
    // Ensure Summary section is displayed by default
    document.getElementById('summarySection').style.display = 'block';
    document.getElementById('analyticsSection').style.display = 'none';
    
    // Ensure daily chart is displayed by default in analytics section
    renderChart('userRegistrationChart', dailyData, dailyLabels, 'Daily New Users', 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    document.getElementById('dailyBtn').classList.add('active');
    document.getElementById('monthlyBtn').classList.remove('active');
});

document.getElementById('summaryBtn').addEventListener('click', () => {
    document.getElementById('summaryBtn').classList.add('active');
    document.getElementById('analyticsBtn').classList.remove('active');
    document.getElementById('summarySection').style.display = 'block';
    document.getElementById('analyticsSection').style.display = 'none';
});

document.getElementById('analyticsBtn').addEventListener('click', () => {
    document.getElementById('analyticsBtn').classList.add('active');
    document.getElementById('summaryBtn').classList.remove('active');
    document.getElementById('summarySection').style.display = 'none';
    document.getElementById('analyticsSection').style.display = 'block';
    
    // Ensure daily chart is displayed by default when switching to analytics
    resetChartAndToggle('userRegistrationChart', dailyData, dailyLabels, 'Daily New Users');
});

document.getElementById('userBtn').addEventListener('click', () => {
    resetChartAndToggle('userRegistrationChart', dailyData, dailyLabels, 'Daily New Users');
});

document.getElementById('orderBtn').addEventListener('click', () => {
    resetChartAndToggle('orderChart', dailyOrdersData, dailyLabels, 'Daily Orders');
});

document.getElementById('paymentBtn').addEventListener('click', () => {
    resetChartAndToggle('paymentChart', dailyPaymentsData, dailyLabels, 'Daily Payments');
});

document.getElementById('profitBtn').addEventListener('click', () => {
    resetChartAndToggle('profitChart', dailyProfitsData, dailyLabels, 'Daily Profits');
});

document.getElementById('dailyBtn').addEventListener('click', () => {
    document.getElementById('dailyBtn').classList.add('active');
    document.getElementById('monthlyBtn').classList.remove('active');
    if (document.getElementById('userRegistrationChart').style.display === 'block') {
        renderChart('userRegistrationChart', dailyData, dailyLabels, 'Daily New Users', 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    } else if (document.getElementById('orderChart').style.display === 'block') {
        renderChart('orderChart', dailyOrdersData, dailyLabels, 'Daily Orders', 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    } else if (document.getElementById('paymentChart').style.display === 'block') {
        renderChart('paymentChart', dailyPaymentsData, dailyLabels, 'Daily Payments', 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    } else {
        renderChart('profitChart', dailyProfitsData, dailyLabels, 'Daily Profits', 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    }
});

document.getElementById('monthlyBtn').addEventListener('click', () => {
    document.getElementById('monthlyBtn').classList.add('active');
    document.getElementById('dailyBtn').classList.remove('active');
    if (document.getElementById('userRegistrationChart').style.display === 'block') {
        renderChart('userRegistrationChart', monthlyData, monthlyLabels, 'Monthly New Users', 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    } else if (document.getElementById('orderChart').style.display === 'block') {
        renderChart('orderChart', monthlyOrdersData, monthlyLabels, 'Monthly Orders', 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    } else if (document.getElementById('paymentChart').style.display === 'block') {
        renderChart('paymentChart', monthlyPaymentsData, monthlyLabels, 'Monthly Payments', 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    } else {
        renderChart('profitChart', monthlyProfitsData, monthlyLabels, 'Monthly Profits', 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    }
});

function resetChartAndToggle(chartId, data, labels, label) {
    document.getElementById('userRegistrationChart').style.display = 'none';
    document.getElementById('orderChart').style.display = 'none';
    document.getElementById('paymentChart').style.display = 'none';
    document.getElementById('profitChart').style.display = 'none';
    document.getElementById(chartId).style.display = 'block';
    renderChart(chartId, data, labels, label, 'rgba(0, 123, 255, 0.2)', 'rgba(0, 123, 255, 1)');
    document.getElementById('dailyBtn').classList.add('active');
    document.getElementById('monthlyBtn').classList.remove('active');
}

document.getElementById('downloadChartBtn').addEventListener('click', () => {
    const activeChart = document.querySelector('canvas:not([style*="display: none"])');
    const link = document.createElement('a');
    link.href = stackedAreaChart.toDataURL('image/png');
    link.download = 'report.png';
    link.click();
});
  </script>
<?php include 'footer.php'; ?>
