File "dashboard.php"

Full path: /home/atrmarke/public_html/atrdemolive.site/bshop/log/dashboard.php
File size: 0.04 KB (37.7 KB bytes)
MIME-type: text/x-php
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

<?php
include("db/cn.php");
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

if (isset($_SESSION['user_name']) && isset($_SESSION['user_role']) && isset($_SESSION['outlet_name']) && isset($_SESSION['outlet_address'])) {
    $userName = $_SESSION['user_name'];
    $userRole = $_SESSION['user_role'];
    $outlet_address = $_SESSION['outlet_address'];
    $outlet_name = $_SESSION['outlet_name'];
}

// Get Monthly and Annual Start/End Dates
$month_start = date("Y-m-01");
$month_end = date("Y-m-t");
$year_start = date("Y-01-01");
$year_end = date("Y-12-31");

// Calculate Monthly Sale Revenue (excluding refunds)
$monthly_revenue = 0;
$query = "SELECT discount_amount AS total_revenue 
          FROM log_user_sales 
          WHERE status = '' 
          AND r_order_id = '' 
          AND date_time BETWEEN '$month_start' AND '$month_end' GROUP BY order_id";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $monthly_revenue += (int)$row['total_revenue'];
}

// Calculate Annual Sale Revenue (excluding refunds)
$annual_revenue = 0;
$query = "SELECT discount_amount AS total_revenue 
          FROM log_user_sales 
          WHERE status = '' 
          AND r_order_id = '' 
          AND date_time BETWEEN '$year_start' AND '$year_end' GROUP BY order_id";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $annual_revenue += (int)$row['total_revenue'];
}

// Calculate Monthly Refunded Sale Revenue
$monthly_refunded_revenue = 0;
$query = "SELECT discount_amount AS total_refunds 
          FROM log_user_sales 
          WHERE status = 'refund' 
          AND date_time BETWEEN '$month_start' AND '$month_end' GROUP BY r_order_id";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $monthly_refunded_revenue += (int)$row['total_refunds'];
}

// Calculate Annual Refunded Sale Revenue
$annual_refunded_revenue = 0;
$query = "SELECT discount_amount AS total_refunds 
          FROM log_user_sales 
          WHERE status = 'refund' 
          AND date_time BETWEEN '$year_start' AND '$year_end' GROUP BY r_order_id";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $annual_refunded_revenue += (int)$row['total_refunds'];
}

// Calculate Monthly Sale Cost (excluding refunds)
$monthly_cost = 0;
$query = "SELECT sale_cost AS total_cost 
          FROM log_user_sales 
          WHERE status = '' 
          AND date_time BETWEEN '$month_start' AND '$month_end'";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $monthly_cost += (int)$row['total_cost'];
}

// Calculate Annual Sale Cost (excluding refunds)
$annual_cost = 0;
$query = "SELECT sale_cost AS total_cost 
          FROM log_user_sales 
          WHERE status = '' 
          AND date_time BETWEEN '$year_start' AND '$year_end'";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $annual_cost += (int)$row['total_cost'];
}

// Calculate Monthly Refunded Sale Cost
$monthly_refunded_cost = 0;
$query = "SELECT sale_cost AS total_refunded_cost 
          FROM log_user_sales 
          WHERE status = 'refund' 
          AND date_time BETWEEN '$month_start' AND '$month_end'";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $monthly_refunded_cost += (int)$row['total_refunded_cost'];
}

// Calculate Annual Refunded Sale Cost
$annual_refunded_cost = 0;
$query = "SELECT sale_cost AS total_refunded_cost 
          FROM log_user_sales 
          WHERE status = 'refund' 
          AND date_time BETWEEN '$year_start' AND '$year_end' ";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $annual_refunded_cost += (int)$row['total_refunded_cost'];
}

// Calculate Monthly Expenses
$monthly_expenses = 0;
$query = "SELECT amount AS total_expenses 
          FROM incash 
          WHERE date_time BETWEEN '$month_start' AND '$month_end'";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $monthly_expenses += (int)$row['total_expenses'];
}

// Calculate Annual Expenses
$annual_expenses = 0;
$query = "SELECT amount AS total_expenses 
          FROM incash 
          WHERE date_time BETWEEN '$year_start' AND '$year_end'";
$result = $connection->query($query);
while ($row = $result->fetch_assoc()) {
    $annual_expenses += (int)$row['total_expenses'];
}

// Calculate Net Revenue (excluding refunds)
$monthly_net_revenue = $monthly_revenue -  $monthly_refunded_revenue;
$annual_net_revenue = $annual_revenue - $annual_refunded_revenue;

// Calculate Net Cost (excluding refunds)
$monthly_net_cost = $monthly_cost - $monthly_refunded_cost;
$annual_net_cost = $annual_cost - $annual_refunded_cost ;

// Calculate Net Profit
$monthly_net_profit = $monthly_net_revenue - $monthly_net_cost - $monthly_expenses;
$annual_net_profit = $annual_net_revenue - $annual_net_cost - $annual_expenses;

// Now echo this data in the respective card elements
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DashBoard - BOOK SHOP</title>
    
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="css/custom_css.css" />

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  
</head>

<style>
 #product-container-wrapper {
    max-height: 700px; /* Adjust the maximum height as needed */
    overflow-y: auto; /* Enable vertical scroll when content overflows */
}
/* Custom styles for sidebar */
 #table-container-wrapper {
    max-height: 500px; /* Adjust the maximum height as needed */
    overflow-y: auto; /* Enable vertical scroll when content overflows */
}

 #qty-container-wrapper {
    max-height: 500px; /* Adjust the maximum height as needed */
    overflow-y: auto; /* Enable vertical scroll when content overflows */
}
@media (max-width: 880px) {
    .col-4 {
        width: 33.33% !important;
    }
    .fa-wifi {
        display: none !important;
    }
    .col-6 {
        width: 50% !important;
    }
}

@media (min-width: 880px) {
    .sidebar {
        width: 100%;
        /* Change sidebar width to 100% on mobile */
        max-width: 120px; /* Set maximum width for the sidebar */
    }
}

@media (min-width: 880px) {
    .main-content {
        margin-left: ; /* Width of the sidebar */
    }
}

/* Added new class to control overlay */
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none; /* Initially hidden */
}
    /* Custom styles for sidebar */
    .sidebar {
        width: 100px;
        background: linear-gradient(360deg, #060606, #3C2F23);
        position: fixed;
        bottom: 0;
        top: 60px;
        transition: transform 0.3s ease-in-out;
        transform: translateX(0);
        z-index: 1;
        height: 100%;
        border-radius: 0px;
		   transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    }

    .sidebar.hide {
        transform: translateX(-100px);
        /* Move sidebar out of the viewport when it is hidden */
    }

    .sidebar .nav-item {
        padding: 10px 0;
        text-align: center;
        position: relative;
        font-size: 12px;
    }

    .sidebar .nav-link {
        color: #fff;
        position: relative;
        /* Ensure icon and text are positioned relative to the nav link */
        z-index: 2;
        /* Ensure the text and icon are above the hover background */
    }

    .sidebar .nav-link i {
        margin-bottom: 5px;
        /* Adjust the margin of the icon */
    }

    /* Custom styles for hover effect */
    .sidebar .nav-item:hover:after {
        background-color: #fff;
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* Ensure the hover background is below the text and icon */
    }

    .sidebar .nav-item:hover .nav-link {
        color: #524C42;
    }

    /* Custom styles for divider */
    .sidebar .nav-item:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #fff;
        transition: height 0.3s ease-in-out;
        /* Transition effect for smooth animation */
    }

    /* Custom styles for header */
    .header {
        background: linear-gradient(270deg, #060606, #3C2F23);
        color: #fff;
        padding: 10px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2;
        height: 69px;
        box-shadow: #FFF 2px 0px 0px 0px;
        /* Ensure header appears above sidebar */
    }

    .header .navbar-toggler {
        color: #fff;
    }

    .header .navbar-toggler-icon {
        color: #fff;
        /* Set the color of the toggle button to white */
    }

    .header .navbar-toggler.white {
        color: #fff !important;
        /* Ensure the toggle button is white */
    }

    .header .navbar-brand {
        color: #fff;
        /* Set navbar brand text color to white */
    }

    .header .nav-item .nav-link {
        color: #fff;
        /* Set nav link text color to white */
    }

.main-content {
    margin-top: 50px; /* Height of fixed header */
    margin-left: 100px; /* Initially, set margin-left to 0 */
    padding-top: 30px; /* Height of fixed header */
    transition: margin-left 0.3s ease-in-out; /* Add transition for smoother animation */
}


    /* Custom styles for search bar */
    .search-container {
        display: flex;
        align-items: center;
       width:100%;
        margin: 2px auto;
        float:left;
	}

/* Updated hide class to apply to the overlay */
.sidebar.hide, .overlay.hide {
    transform: translateX(-100%);
}

    .search-input {
        width: 100%;
        padding: 10px 30px 10px 10px;
        /* Adjust padding to accommodate the icon */
        border: 1px solid #ccc;
        border-radius: 20px;
        font-size: 16px;
    }

    .search-icon {
        position: relative;
        left: -25px;
        /* Adjust the position of the icon */
        color: #aaa;
    }

    .search-icon i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-dark {
        background: #503F2E;
        color: #fff;
        border: 1px solid #503F2E;
    }

    .btn-dark:hover {
        background: #fff;
        color: #503F2E;
        border: 1px solid #503F2E;
    }

    .bg-dark2 {
        background: #503F2E;
        color: #fff;
    }

    .modal-content {
        animation: modal-animation 0.5s;
    }

    @keyframes modal-animation {
        from {
            opacity: 0;
            transform: scale(0.8);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

	
		
		        #searchResults {
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            max-height: 200px;
            overflow-y: auto;
            width: 85%;
            display: none;
        }
        #searchResults div {
            padding: 10px;
            cursor: pointer;
        }
        #searchResults div:hover {
            background-color: #f1f1f1;
        }
		    .chart-container {
      position: relative;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      padding: 15px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    canvas {
      max-width: 100%;
      height: auto;
    }
	.border-left-dark{
	   border-left:7px solid #000;
	   border-right:2px solid #0A5064;
	   border-bottom:2px solid #0A5064;
	   border-top:2px solid #0A5064;	
	   border-radius:7px;
		}
		.btn-black{
		background:#4C0027;
		color:#fff;
		border:1px #4C0027 solid;	
			}
			.btn-black:hover{
			  	background:#fff;
		color:#4C0027;
		border:1px #4C0027 solid;
				}
			
				.bg-warning{
        background-color: #430000;
        color:#fff;/* Light red to indicate warning */
    }
</style>

<body>

<?php
if(isset($msg)){
	
	echo $msg;
	}
?>
<?php include("common/hd.php"); ?>
<!-- Sidebar -->
<?php include("common/sd.php"); ?>
<div class="main-content">
<div class="container-fluid">
                     <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
                        
                    </div>

                    <div class="container" style="background: linear-gradient(360deg, #060606, #503F2E); border:5px solid #3C2F23; border-radius:20px;">
                    <div class="row">
                    <div class="col-sm-5"> 
                    <br>
                    <img src="img/Ghazalil.png" width="70" height="70">
                    <br><br>
                    <h3 class="mb-3 text-white" style="font-size:25px">Welcome Admin ,<br>Book Shop </h3>
                    <p class="text-white btn btn-dark btn-sm">Logged In</p>
                    </div>
                    <div class="col-sm-2"></div>
                    <div class="col-sm-5">
                    
                    <img src="../img/school.png" width="596" height="371" class="img-fluid" />
                    </div>
                    </div>
                    
                    </div>        

<br><br>

                   <!--<div class="container">
                     <div class="row">

<!-- Earnings (Monthly) Card Example
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-dark shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-uppercase mb-1"  style="font-size:13px;color:#785F46;">
                                                Sale Revenue(Monthly)</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rs.<?= number_format($monthly_net_revenue) ?>/-</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-dollar-sign fa-2x" style="color:#785F46;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Earnings (Monthly) Card Example
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-dark shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-uppercase mb-1"  style="font-size:13px;color:#785F46;">
                                                Sale Revenue(Annual)</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rs.<?= number_format($annual_net_revenue) ?>/-</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-dollar-sign fa-2x" style="color:#785F46;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                   

                       



<!-- Sale Cost (Annual) Card Example
<div class="col-xl-3 col-md-6 mb-4">
    <div class="card border-left-dark shadow h-100 py-2">
        <div class="card-body">
            <div class="row no-gutters align-items-center">
                <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-uppercase mb-1" style="font-size:13px;color:#785F46;">
                        Sale Cost (Monthly)
                    </div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">
                        Rs. <?= number_format($monthly_net_cost) ?> /-
                    </div>
                </div>
                <div class="col-auto">
                    <i class="fas fa-dollar-sign fa-2x" style="color:#785F46;"></i>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- Sale Cost (Annual) Card Example 
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-dark shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="font-size:13px;color:#785F46;">
                                                Sale Cost (Annual)
                                            </div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                                Rs. <?= number_format($annual_net_cost) ?>/-
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-dollar-sign fa-2x" style="color:#785F46;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        
                        </div>
      </div>               
                     <div class="row">
                       
                    
                        
                         <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-dark shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-uppercase mb-1"  style="font-size:13px;color:#785F46;">
                                                Expense (Monthly)</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rs.  <?= number_format((int)$monthly_expenses) ?> /-</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-calendar fa-2x " style="color:#785F46;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-dark shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-uppercase mb-1"  style="font-size:13px;color:#785F46;">
                                               Expense (Annual)</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rs.<?= number_format(@(int)$annual_expenses) ?> /-</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-dollar-sign fa-2x " style="color:#785F46;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Earnings (Monthly) Card Example 
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-dark shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-uppercase mb-1"  style="font-size:13px;color:#785F46;">
                                               Net-Profit (Monthly)</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rs. <?= number_format(@(int)$monthly_net_profit) ?> /-</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-dollar-sign fa-2x " style="color:#785F46;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Earnings (Monthly) Card Example 
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-dark shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-uppercase mb-1"  style="font-size:13px;color:#785F46;">
                                               Net-Profit (Annual)</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rs. <?= number_format($annual_net_profit) ?> /-</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-dollar-sign fa-2x " style="color:#785F46;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pending Requests Card Example 
                        
                        
                     </div>
                     
                   </div>-->
                 <div class="container">
                     <h3 style="background:#372B20;color:#fff; padding:7px; border-radius:7px; width:205px;text-align:center;">Product Table</h3>
                     <p style="color:#060606; font-weight:500; padding:7px; border-radius:7px; text-align:center; width:350px;background:#430000;color:#fff;">
                         Product Quantity Less 10 will be High-Light
                     </p>
    <div class="row">
        <div class="col-sm-12" id="qty-container-wrapper">
            <?php
            $product = mysqli_query($connection, "SELECT * FROM products");
            ?>
            <table class="table table-bordered table-hover bg-white text-center text-capitalize">
                <tr class="bg-dark text-white">
                    <th>Sr#</th>
                    <th>Item Code</th>
                    
                    <th>Class</th>
                    <th>Product</th>
                    <th>R.Qty</th>
                    <th>Company</th>
                </tr>
                <?php  
                $sr_no = 1;
                while ($rows = mysqli_fetch_array($product)) {
                    // Check if quantity is less than 10
                    $highlightClass = $rows["quantity"] < 10 ? 'style="background:#430000;color:#fff;"' : '';
                ?>
                <tr <?php echo $highlightClass; ?>>
                    <td><?php echo $sr_no++; ?></td>
                    <td><?php echo $rows["product_id"]; ?></td>
                  
                    <td><?php echo $rows["size"]; ?></td>
                    <td style="font-weight:600;"><?php echo $rows["product_name"]; ?></td>
                    <td><?php echo $rows["quantity"]; ?></td>
                    <td><?php echo $rows["company"]; ?></td>
                </tr>
                <?php
                }
                ?>
            </table>
        </div>
    </div>
</div>
                   <br><br>
                   <!--line graph-->
                   <div class="container" style="margin-bottom:80px;">
                    <div class="row">
                      <div class="col-sm-8 ">
                        <div class="chart-container">
                        <div>
                                <button class="btn btn-dark btn-sm" onclick="filterData(7)">7 Days</button>
                                <button class="btn btn-dark btn-sm" onclick="filterData(14)">14 Days</button>
                                <button class="btn btn-dark btn-sm" onclick="filterData(28)">28 Days</button>
                            </div>
                          <canvas class="col-sm-12" id="lineChart"></canvas>
                            
                        </div>
                      </div>
                      <div class="col-sm-4">
                         <div class="chart-container">
                           <canvas id="donutChart"></canvas>
                        </div>
                      </div>
                    </div>
                  </div>



                </div>


<?php
// Database connection (assuming $connection is already defined)
$start_of_month = date("Y-m-01");
$end_of_month = date("Y-m-t");

// Fetch daily sales data for the current month
$sales_query = mysqli_query($connection, "
    SELECT DATE(date_time) AS date, SUM(discount_amount) AS total_sales 
    FROM log_user_sales 
    WHERE date_time BETWEEN '$start_of_month' AND '$end_of_month'
    GROUP BY DATE(date_time)
");

$sales_data = [];
while ($row = mysqli_fetch_assoc($sales_query)) {
    $sales_data[$row['date']] = $row['total_sales'];
}

// Fetch daily purchase data for the current month
$purchases_query = mysqli_query($connection, "
    SELECT DATE(date_time) AS date, SUM(sale_cost) AS total_purchases 
    FROM log_user_sales 
    WHERE date_time BETWEEN '$start_of_month' AND '$end_of_month'
    GROUP BY DATE(date_time)
");

$purchases_data = [];
while ($row = mysqli_fetch_assoc($purchases_query)) {
    $purchases_data[$row['date']] = $row['total_purchases'];
}

// Pass data to JavaScript
$sales_data_json = json_encode($sales_data);
$purchases_data_json = json_encode($purchases_data);
?>
  <?php
// Database connection (assuming $connection is already defined)
$current_date_expense = date("Y-m-d");

// Get the first and last day of the current month
$start_of_month_expense = date("Y-m-01");
$end_of_month_expense = date("Y-m-t");

// Sales Query
$sales_query_expense = mysqli_query($connection, "
    SELECT SUM(discount_amount) AS total_sales_expense 
    FROM log_user_sales 
    WHERE date_time BETWEEN '$start_of_month_expense' AND '$end_of_month_expense'
");

$total_sales_expense = 0;
if ($sales_query_expense) {
    $sales_result_expense = mysqli_fetch_array($sales_query_expense);
    if ($sales_result_expense && isset($sales_result_expense['total_sales_expense'])) {
        $total_sales_expense = $sales_result_expense['total_sales_expense'];
    }
}

// Purchase Query
$purchases_query_expense = mysqli_query($connection, "
    SELECT SUM(sale_cost) AS total_purchases_expense 
    FROM log_user_sales 
    WHERE date_time BETWEEN '$start_of_month_expense' AND '$end_of_month_expense'
");

$total_purchases_expense = 0;
if ($purchases_query_expense) {
    $purchases_result_expense = mysqli_fetch_array($purchases_query_expense);
    if ($purchases_result_expense && isset($purchases_result_expense['total_purchases_expense'])) {
        $total_purchases_expense = $purchases_result_expense['total_purchases_expense'];
    }
}

// Expense Query
$expense_query_expense = mysqli_query($connection, "
    SELECT SUM(amount) AS total_expense_expense 
    FROM incash 
    WHERE date_time BETWEEN '$start_of_month_expense' AND '$end_of_month_expense'
");

$total_expense_expense = 0;
if ($expense_query_expense) {
    $expense_result_expense = mysqli_fetch_array($expense_query_expense);
    if ($expense_result_expense && isset($expense_result_expense['total_expense_expense'])) {
        $total_expense_expense = $expense_result_expense['total_expense_expense'];
    }
}

// Pass data to JavaScript
$sales_data_json_expense = json_encode($total_sales_expense);
$purchases_data_json_expense = json_encode($total_purchases_expense);
$expense_data_json_expense = json_encode($total_expense_expense);
?>  
</div>    
</body>
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script>
        // Retrieve PHP data
        var salesData = <?php echo $sales_data_json; ?>;
        var purchasesData = <?php echo $purchases_data_json; ?>;

        // Get the current date and first and last day of the current month
        var currentDate = new Date();
        var firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
        var lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);

        // Generate labels for the current month
        var labels = [];
        for (var d = new Date(firstDay); d <= lastDay; d.setDate(d.getDate() + 1)) {
            labels.push(d.toISOString().split('T')[0]);
        }

        // Function to filter data
        function filterData(days) {
            var endDate = new Date();
            var startDate = new Date();
            startDate.setDate(endDate.getDate() - days + 1); // Calculate start date based on days

            var filteredLabels = [];
            var filteredSalesData = [];
            var filteredPurchasesData = [];

            labels.forEach(function(label, index) {
                var currentDate = new Date(label);
                if (currentDate >= startDate && currentDate <= endDate) {
                    filteredLabels.push(label);
                    filteredSalesData.push(salesData[label] || 0);
                    filteredPurchasesData.push(purchasesData[label] || 0);
                }
            });

            // Update chart data
            myChart.data.labels = filteredLabels;
            myChart.data.datasets[0].data = filteredPurchasesData;
            myChart.data.datasets[1].data = filteredSalesData;
            myChart.update();
        }

        // Initial data for the line chart
        var initialSalesDataArray = [];
        var initialPurchasesDataArray = [];

        labels.forEach(function(label) {
            initialSalesDataArray.push(salesData[label] || 0);
            initialPurchasesDataArray.push(purchasesData[label] || 0);
        });

        // Data for the line chart
        var data = {
            labels: labels,
            datasets: [
                {
                    label: 'Purchase',
                    borderColor: 'rgba(80, 63, 46, 1)',
                    backgroundColor: 'rgba(80, 63, 46, 0.2)',
                    data: initialPurchasesDataArray,
                    fill: 'origin'
                },
                {
                    label: 'Sale',
                    borderColor: 'rgba(6, 8, 9, 1)',
                    backgroundColor: 'rgba(6, 8, 9, 0.2)',
                    data: initialSalesDataArray,
                    fill: 'origin'
                }
            ]
        };

        // Chart configuration
        var config = {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Purchase Vs Sale Report'
                    }
                },
                scales: {
                    x: {
                        type: 'category',
                        labels: labels
                    }
                },
                animation: {
                    duration: 2800, // 2 seconds
                    easing: 'easeInOutQuad'
                }
            }
        };

        // Create the chart
        var ctx = document.getElementById('lineChart').getContext('2d');
        var myChart = new Chart(ctx, config);
    </script>
  <script>
           // Retrieve PHP data
        var salesDataExpense = <?php echo $sales_data_json_expense; ?>;
        var purchasesDataExpense = <?php echo $purchases_data_json_expense; ?>;
        var expenseDataExpense = <?php echo $expense_data_json_expense; ?>;

        // Data for the doughnut chart
        var dataExpense = {
            labels: ['Expense', 'purchase', 'Sale'],
            datasets: [{
                data: [expenseDataExpense, purchasesDataExpense, salesDataExpense],
                backgroundColor: [
                    'rgba(180, 143, 106, 0.8)',
                    'rgba(120, 95, 70, 0.8)',
                    'rgba(80, 63, 46, 0.8)'
                ],
                hoverBackgroundColor: [
                    'rgba(180, 143, 106, 1)',
                    'rgba(120, 95, 70, 1)',
                    'rgba(80, 63, 46, 1)'
                ]
            }]
        };

        // Chart configuration
        var configExpense = {
            type: 'doughnut',
            data: dataExpense,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Expense, Purchase, and Sale Report'
                    }
                },
                animation: {
                    animateRotate: true,
                    animateScale: true,
                    duration: 2000, // 2 seconds
                    easing: 'easeInOutQuad'
                }
            }
        };

        // Create the chart
        var ctxExpense = document.getElementById('donutChart').getContext('2d');
        var myChartExpense = new Chart(ctxExpense, configExpense);
 
document.addEventListener("DOMContentLoaded", function () {
    var sidebar = document.getElementById("sidebar");
    var overlay = document.createElement("div");
    overlay.classList.add("overlay");
    document.body.appendChild(overlay);

    function toggleSidebar() {
        sidebar.classList.toggle("hide");
        overlay.classList.toggle("hide");

        var mainContent = document.querySelector(".main-content");
        if (sidebar.classList.contains("hide")) {
            mainContent.style.marginLeft = "0";
        } else {
            mainContent.style.marginLeft = "100px"; // Width of the sidebar
        }
    }

    overlay.addEventListener("click", function () {
        toggleSidebar();
    });

    // Add toggle functionality to navbar toggler
    var navbarToggler = document.querySelector(".navbar-toggler");
    navbarToggler.addEventListener("click", function () {
        toggleSidebar();
    });

    // Automatically hide sidebar on all screen sizes
    // sidebar.classList.add("hide");
    // overlay.classList.add("hide");
    
    // Add class to body to prevent scrolling when sidebar is open
    // document.body.classList.add("noscroll");

    // Check if screen size is larger than a certain threshold (e.g., 768px for desktop screens)
    function checkScreenSize() {
        if (window.innerWidth > 768) {
            sidebar.classList.remove("hide");
            overlay.classList.remove("hide");
        } else {
            sidebar.classList.add("hide");
            overlay.classList.add("hide");
        }
    }

    // Check screen size on initial load and whenever the window is resized
    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);
});
    // Function to toggle submenu
    function toggleSubMenu(element) {
        $(element).next('.sub-menu').slideToggle();
    }
</script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

</html>