    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-php">&lt;?php
include(&quot;db/cn.php&quot;);

if(isset($_SESSION[&#039;user_name&#039;]) &amp;&amp; isset($_SESSION[&#039;user_role&#039;]) &amp;&amp; isset($_SESSION[&#039;outlet_name&#039;]) &amp;&amp; isset($_SESSION[&#039;outlet_address&#039;])) {
    $userName = $_SESSION[&#039;user_name&#039;];
    $userRole = $_SESSION[&#039;user_role&#039;];
    $outlet_address = $_SESSION[&#039;outlet_address&#039;];
    $outlet_name = $_SESSION[&#039;outlet_name&#039;];
}

// Check connection
if ($connection-&gt;connect_error) {
    die(&quot;Connection failed: &quot; . $connection-&gt;connect_error);
}

// Check if the necessary POST variables are set
$product = isset($_POST[&#039;product&#039;]) ? $_POST[&#039;product&#039;] : &#039;&#039;;
$company = isset($_POST[&#039;company&#039;]) ? $_POST[&#039;company&#039;] : &#039;&#039;;
$startDate = isset($_POST[&#039;startDate&#039;]) ? $_POST[&#039;startDate&#039;] : &#039;&#039;;
$endDate = isset($_POST[&#039;endDate&#039;]) ? $_POST[&#039;endDate&#039;] : &#039;&#039;;

// Prepare SQL statement based on filters
$sql = &quot;SELECT supplier_name, product_name, total_amount, product_price, date_time 
        FROM log_user_sales 
        WHERE 1=1&quot;;

if ($product != &#039;all&#039;) {
    $sql .= &quot; || product_name = &#039;$product&#039;&quot;;
}

if ($company != &#039;all&#039;) {
    $sql .= &quot; || supplier_name = &#039;$company&#039;&quot;;
}

$sql .= &quot; AND date_time BETWEEN &#039;$startDate&#039; AND &#039;$endDate&#039;&quot;;

$result = $connection-&gt;query($sql);
$rows = array();

if ($result-&gt;num_rows &gt; 0) {
    while($row = $result-&gt;fetch_assoc()) {
        $rows[] = $row;
    }
}

// Fetch product names
$productQuery = &quot;SELECT name FROM products&quot;;
$productResult = $connection-&gt;query($productQuery);
$products = array();
if ($productResult-&gt;num_rows &gt; 0) {
    while($row = $productResult-&gt;fetch_assoc()) {
        $products[] = $row[&#039;name&#039;];
    }
}
// Fetch product names
$categoryQuery = &quot;SELECT category FROM products&quot;;
$categoryResult = $connection-&gt;query($categoryQuery);
$categorys = array();
if ($categoryResult-&gt;num_rows &gt; 0) {
    while($row1 = $categoryResult-&gt;fetch_assoc()) {
        $categorys[] = $row1[&#039;category&#039;];
    }
}

// Fetch supplier names
$supplierQuery = &quot;SELECT supplier_name FROM supplier&quot;;
$supplierResult = $connection-&gt;query($supplierQuery);
$suppliers = array();
if ($supplierResult-&gt;num_rows &gt; 0) {
    while($row = $supplierResult-&gt;fetch_assoc()) {
        $suppliers[] = $row[&#039;supplier_name&#039;];
    }
}
?&gt;

&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;Sale Report&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/custom_css.css&quot; /&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;style&gt;
 #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 */    /* Custom styles for sidebar */
    .sidebar {
        width: 100px;
        background: linear-gradient(360deg, #060606, #0A5064);
        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: &#039;&#039;;
      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: #0A5064;
    }
    /* Custom styles for divider */
    .sidebar .nav-item:after {
      content: &quot;&quot;;
      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, #0A5064);
        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 + padding */
      margin-left: 100px; /* Width of sidebar */
      padding-top: 30px; /* Height of fixed header */
    }
	/* Custom styles for search bar */
    .search-container {
      display: flex;
      align-items: center;
      width: 300px;
      margin: 2px auto;
    }
    .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:#0A5064;
			 color:#fff;
			 border: 1px solid #0A5064;
                 	}
		.btn-dark:hover{
			background:#fff;
			 color:#0A5064;
			 border:1px solid #0A5064;
			}	
			.bg-dark2{
			background:#8A1218;
			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);
            }
        }
		&lt;/style&gt;
&lt;body&gt;

&lt;?php include(&quot;common/hd.php&quot;); ?&gt;
&lt;!-- Sidebar --&gt;
&lt;?php include(&quot;common/sd.php&quot;); ?&gt;
&lt;div class=&quot;main-content&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-sm-9&quot;&gt;
            &lt;h3 style=&quot;color:#212529;&quot;&gt;Sale Report&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-sm-3&quot;&gt;
            &lt;button id=&quot;applyFiltersBtn&quot; class=&quot;btn btn-primary&quot; style=&quot;float: right;&quot;&gt;Apply Filters&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-sm-3&quot;&gt;
         &lt;label for=&quot;companyDropdown&quot;&gt;Supplier:&lt;/label&gt;
            &lt;select id=&quot;companyDropdown&quot; class=&quot;form-control&quot;&gt;
                &lt;option value=&quot;all&quot;&gt;All Suppliers&lt;/option&gt;
                &lt;?php foreach ($suppliers as $supplier) { ?&gt;
                    &lt;option value=&quot;&lt;?php echo $supplier; ?&gt;&quot;&gt;&lt;?php echo $supplier; ?&gt;&lt;/option&gt;
                &lt;?php } ?&gt;
            &lt;/select&gt;
            
        &lt;/div&gt;
        &lt;div class=&quot;col-sm-3&quot;&gt;
            &lt;label for=&quot;productDropdown&quot;&gt;Company:&lt;/label&gt;
            &lt;select id=&quot;productDropdown&quot; class=&quot;form-control&quot;&gt;
                &lt;option value=&quot;all&quot;&gt;All Company&lt;/option&gt;
                &lt;?php foreach ($categorys as $category) { ?&gt;
                    &lt;option value=&quot;&lt;?php echo $category; ?&gt;&quot;&gt;&lt;?php echo $category; ?&gt;&lt;/option&gt;
                &lt;?php } ?&gt;
            &lt;/select&gt;
        &lt;/div&gt;

        &lt;div class=&quot;col-sm-2&quot;&gt;
           &lt;label for=&quot;productDropdown&quot;&gt;Product:&lt;/label&gt;
            &lt;select id=&quot;productDropdown&quot; class=&quot;form-control&quot;&gt;
                &lt;option value=&quot;all&quot;&gt;All Products&lt;/option&gt;
                &lt;?php foreach ($products as $product) { ?&gt;
                    &lt;option value=&quot;&lt;?php echo $product; ?&gt;&quot;&gt;&lt;?php echo $product; ?&gt;&lt;/option&gt;
                &lt;?php } ?&gt;
            &lt;/select&gt;
        &lt;/div&gt;

        &lt;div class=&quot;col-sm-2&quot;&gt;
            &lt;label for=&quot;startDate&quot;&gt;Start Date:&lt;/label&gt;
            &lt;input type=&quot;date&quot; id=&quot;startDate&quot; class=&quot;form-control&quot; /&gt;
        &lt;/div&gt;

        &lt;div class=&quot;col-sm-2&quot;&gt;
            &lt;label for=&quot;endDate&quot;&gt;End Date:&lt;/label&gt;
            &lt;input type=&quot;date&quot; id=&quot;endDate&quot; class=&quot;form-control&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;br&gt;&lt;br&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-sm-12&quot;&gt;
            &lt;table id=&quot;salesTable&quot; class=&quot;table table-stripped table-hover&quot;&gt;
                &lt;thead&gt;
                    &lt;tr class=&quot;bg-dark text-white&quot;&gt;
                        &lt;th&gt;Supplier Name&lt;/th&gt;
                        &lt;th&gt;Product Name&lt;/th&gt;
                        &lt;th&gt;Total Amount&lt;/th&gt;
                        &lt;th&gt;Product Price&lt;/th&gt;
                        &lt;th&gt;Date&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                    &lt;?php foreach ($rows as $row) { ?&gt;
                        &lt;tr&gt;
                            &lt;td&gt;&lt;?php echo $row[&#039;supplier_name&#039;]; ?&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;?php echo $row[&#039;product_name&#039;]; ?&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;?php echo $row[&#039;total_amount&#039;]; ?&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;?php echo $row[&#039;product_price&#039;]; ?&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;?php echo $row[&#039;date_time&#039;]; ?&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;?php } ?&gt;
                &lt;/tbody&gt;
                &lt;tfoot&gt;
                    &lt;tr&gt;
                        &lt;td colspan=&quot;2&quot;&gt;&lt;strong&gt;Product Total&lt;/strong&gt;&lt;/td&gt;
                        &lt;td id=&quot;productTotal&quot;&gt;0&lt;/td&gt;
                        &lt;td colspan=&quot;2&quot;&gt;&lt;strong&gt;Total Amount Grand Sum: &lt;span id=&quot;grandTotal&quot;&gt;0&lt;/span&gt;&lt;/strong&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/tfoot&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    // Function to fetch data based on filters and populate the table
    function fetchSalesData() {
        var product = document.getElementById(&#039;productDropdown&#039;).value;
        var company = document.getElementById(&#039;companyDropdown&#039;).value;
        var startDate = document.getElementById(&#039;startDate&#039;).value;
        var endDate = document.getElementById(&#039;endDate&#039;).value;

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    var tableBody = document.querySelector(&#039;#salesTable tbody&#039;);
                    tableBody.innerHTML = &#039;&#039;;
                    var productTotal = 0;

                    data.forEach(function(row) {
                        var newRow = document.createElement(&#039;tr&#039;);
                        newRow.innerHTML = &#039;&lt;td&gt;&#039; + row.supplier_name + &#039;&lt;/td&gt;&#039; +
                            &#039;&lt;td&gt;&#039; + row.product_name + &#039;&lt;/td&gt;&#039; +
                            &#039;&lt;td&gt;&#039; + row.total_amount + &#039;&lt;/td&gt;&#039; +
                            &#039;&lt;td&gt;&#039; + row.product_price + &#039;&lt;/td&gt;&#039; +
                            &#039;&lt;td&gt;&#039; + row.date_time + &#039;&lt;/td&gt;&#039;;
                        tableBody.appendChild(newRow);
                        productTotal += parseFloat(row.total_amount);
                    });

                    document.getElementById(&#039;productTotal&#039;).textContent = productTotal.toFixed(2);
                    document.getElementById(&#039;grandTotal&#039;).textContent = productTotal.toFixed(2);
                } else {
                    console.error(&#039;Error fetching data&#039;);
                }
            }
        };

        xhr.open(&#039;POST&#039;, &#039;sale_report.php&#039;);
        xhr.setRequestHeader(&#039;Content-Type&#039;, &#039;application/x-www-form-urlencoded&#039;);
        xhr.send(&#039;product=&#039; + product + &#039;&amp;company=&#039; + company + &#039;&amp;startDate=&#039; + startDate + &#039;&amp;endDate=&#039; + endDate);
    }

    // Fetch data when filters change
    var filters = document.querySelectorAll(&#039;#productDropdown, #companyDropdown, #startDate, #endDate&#039;);
    filters.forEach(function(filter) {
        filter.addEventListener(&#039;change&#039;, fetchSalesData);
    });

    // Initial fetch
    fetchSalesData();
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>        </div>
    </div>