    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-php">&lt;?php
include(&quot;db/cn.php&quot;);
ob_start();
session_start(); // Make sure the session is started

// Check if session variables are set
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;];
} else {
    // Redirect to a login page or show an error
    echo &#039;&lt;script type=&quot;text/javascript&quot;&gt;window.location.href=&quot;logout.php&quot;;&lt;/script&gt;&#039;;
    exit();
}

@$supplier_name = $_GET[&quot;emp_name&quot;];

// Create DateTime object for the current date
$currentDate = new DateTime();

// Clone the object and modify it to get the previous month
$previousMonthDate = clone $currentDate;
$previousMonthDate-&gt;modify(&#039;first day of last month&#039;);

// Get the month and year for the previous month
$previous_month = $previousMonthDate-&gt;format(&#039;m&#039;);
$current_year = $currentDate-&gt;format(&#039;Y&#039;);

// Debugging: Echo month and year
echo &quot;Previous Month: $previous_month, Current Year: $current_year&lt;br&gt;&quot;;

// Query to get total salary for the previous month in the current year
$salari_total_query = &quot;
    SELECT 
        SUM(emp_salari) AS total_salary
    FROM e_salary
    WHERE emp_name = &#039;$supplier_name&#039;
    AND MONTH(date_time) = $previous_month
    AND YEAR(date_time) = $current_year
&quot;;
$salari_total = mysqli_query($connection, $salari_total_query) or die(mysqli_error($connection));

// Debugging: Check the query and result
echo &quot;SQL Query for Total Salary: $salari_total_query&lt;br&gt;&quot;;

// Query to get total advances for the previous month in the current year
$salari_advances_query = &quot;
    SELECT 
        SUM(emp_adv) AS total_advances
    FROM adv_salari
    WHERE emp_name = &#039;$supplier_name&#039;
    AND MONTH(date_time) = $previous_month
    AND YEAR(date_time) = $current_year
&quot;;
$salari_advances = mysqli_query($connection, $salari_advances_query) or die(mysqli_error($connection));

// Debugging: Check the query and result
echo &quot;SQL Query for Total Advances: $salari_advances_query&lt;br&gt;&quot;;

// Query to get total paid for the previous month in the current year
$salari_paid_query = &quot;
    SELECT 
        SUM(emp_paid) AS total_paid
    FROM salari_paid
    WHERE emp_name = &#039;$supplier_name&#039;
    AND MONTH(date_time) = $previous_month
    AND YEAR(date_time) = $current_year
&quot;;
$salari_paid = mysqli_query($connection, $salari_paid_query) or die(mysqli_error($connection));

// Debugging: Check the query and result
echo &quot;SQL Query for Total Paid: $salari_paid_query&lt;br&gt;&quot;;

// Fetch the results
$total_salary = mysqli_fetch_assoc($salari_total)[&#039;total_salary&#039;] ?? 0;
$total_advances = mysqli_fetch_assoc($salari_advances)[&#039;total_advances&#039;] ?? 0;
$total_paid = mysqli_fetch_assoc($salari_paid)[&#039;total_paid&#039;] ?? 0;
$remaining = $total_salary - $total_paid - $total_advances;

// Debugging: Output fetched amounts
echo &quot;Total Salary: $total_salary, Total Advances: $total_advances, Total Paid: $total_paid, Remaining: $remaining&lt;br&gt;&quot;;

ob_end_flush();
?&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&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;Salay Management&lt;/title&gt;
    &lt;!-- Latest compiled and minified CSS --&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;/head&gt;

&lt;style&gt;
 #supplier-container-wrapper {
    max-height: 700px; /* 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, #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(90deg, #0A5064, #060606);
        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: #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);
        }
    }
		label{font-size:12px; font-weight:600;}
&lt;/style&gt;

&lt;body&gt;

&lt;?php
ob_start();
 include(&quot;common/hd.php&quot;);?&gt;
&lt;!-- Sidebar --&gt;
&lt;?php include(&quot;common/sd.php&quot;);

$salari_history = mysqli_query($connection,&quot;
    SELECT date_time, emp_paid 
    FROM salari_paid 
    WHERE emp_name = &#039;$supplier_name&#039; 
    AND YEAR(date_time) = YEAR(CURRENT_DATE()) 
    ORDER BY MONTH(date_time), DAY(date_time)
&quot;);
 ?&gt;
&lt;div class=&quot;main-content&quot;&gt;
    &lt;div class=&quot;container mt-4&quot;&gt;
        &lt;h4 class=&quot;col-4 text-center&quot; style=&quot;background:#0A4657; color:#fff; padding:14px; border-radius:10px;&quot;&gt;
            Employee Name : &lt;?php echo htmlspecialchars($supplier_name); ?&gt;
        &lt;/h4&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;table class=&quot;table table-bordered text-center&quot;&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th style=&quot;background:#0A4657;color:#fff;&quot;&gt;Month&lt;/th&gt;
                        &lt;th style=&quot;background:#060606;color:#fff;&quot;&gt;Total Salary&lt;/th&gt;
                        &lt;th style=&quot;background:#060606;color:#fff;&quot;&gt;Total Advances&lt;/th&gt;
                        &lt;th style=&quot;background:#060606;color:#fff;&quot;&gt;Total Paid&lt;/th&gt;
                        &lt;th style=&quot;background:#0A4657;color:#fff;&quot;&gt;Remaining&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                    &lt;?php
                    // Loop through all months of the current year
                    for ($month = 1; $month &lt;= 12; $month++) {
                        echo &quot;&lt;tr&gt;&quot;;
                        echo &quot;&lt;td style=&#039;background:#0A4657;color:#fff;&#039;&gt;&quot; . date(&#039;F&#039;, mktime(0, 0, 0, $month, 10)) . &quot;&lt;/td&gt;&quot;; // Month name

                        if ($month == $previous_month) {
                            // Display values only for the previous month
                            echo &quot;&lt;td&gt; Rs &quot; . number_format($total_salary, 2) . &quot;&lt;/td&gt;&quot;; // Total salary
                            echo &quot;&lt;td&gt; Rs &quot; . number_format($total_advances, 2) . &quot;&lt;/td&gt;&quot;; // Total advances
                            echo &quot;&lt;td&gt; Rs &quot; . number_format($total_paid, 2) . &quot;&lt;/td&gt;&quot;; // Total paid
                            echo &quot;&lt;td style=&#039;color:#0A4657; font-weight:600;&#039;&gt; Rs &quot; . number_format($remaining, 2) . &quot;&lt;/td&gt;&quot;; // Remaining amount
                        } else {
                            // Leave the cells empty for other months
                            echo &quot;&lt;td&gt; - &lt;/td&gt;&quot;;
                            echo &quot;&lt;td&gt; - &lt;/td&gt;&quot;;
                            echo &quot;&lt;td&gt; - &lt;/td&gt;&quot;;
                            echo &quot;&lt;td&gt; - &lt;/td&gt;&quot;;
                        }

                        echo &quot;&lt;/tr&gt;&quot;;
                    }
                    ?&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;    
   
&lt;/body&gt;


&lt;script&gt;
document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    var searchInput = document.getElementById(&#039;searchInput&#039;);
    var rows = document.querySelectorAll(&quot;#supplierTableBody tr&quot;);

    searchInput.addEventListener(&quot;keyup&quot;, function(event) {
        var term = event.target.value.toLowerCase();
        rows.forEach(function(row) {
            var cells = row.getElementsByTagName(&quot;td&quot;);
            var found = false;
            Array.from(cells).forEach(function(cell) {
                if (cell.textContent.toLowerCase().indexOf(term) &gt; -1) {
                    found = true;
                }
            });
            if (found) {
                row.style.display = &quot;&quot;;
            } else {
                row.style.display = &quot;none&quot;;
            }
        });
    });
});

document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
    var sidebar = document.getElementById(&quot;sidebar&quot;);
    var overlay = document.createElement(&quot;div&quot;);
    overlay.classList.add(&quot;overlay&quot;);
    document.body.appendChild(overlay);

    function toggleSidebar() {
        sidebar.classList.toggle(&quot;hide&quot;);
        overlay.classList.toggle(&quot;hide&quot;);

        var mainContent = document.querySelector(&quot;.main-content&quot;);
        if (sidebar.classList.contains(&quot;hide&quot;)) {
            mainContent.style.marginLeft = &quot;0&quot;;
        } else {
            mainContent.style.marginLeft = &quot;100px&quot;; // Width of the sidebar
        }
    }

    overlay.addEventListener(&quot;click&quot;, function () {
        toggleSidebar();
    });

    // Add toggle functionality to navbar toggler
    var navbarToggler = document.querySelector(&quot;.navbar-toggler&quot;);
    navbarToggler.addEventListener(&quot;click&quot;, function () {
        toggleSidebar();
    });

    // Automatically hide sidebar on all screen sizes
    // sidebar.classList.add(&quot;hide&quot;);
    // overlay.classList.add(&quot;hide&quot;);
    
    // Add class to body to prevent scrolling when sidebar is open
    // document.body.classList.add(&quot;noscroll&quot;);

    // Check if screen size is larger than a certain threshold (e.g., 768px for desktop screens)
    function checkScreenSize() {
        if (window.innerWidth &gt; 768) {
            sidebar.classList.remove(&quot;hide&quot;);
            overlay.classList.remove(&quot;hide&quot;);
        } else {
            sidebar.classList.add(&quot;hide&quot;);
            overlay.classList.add(&quot;hide&quot;);
        }
    }

    // Check screen size on initial load and whenever the window is resized
    checkScreenSize();
    window.addEventListener(&quot;resize&quot;, checkScreenSize);
});
 

&lt;/script&gt;

&lt;!-- jQuery library --&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Popper JS --&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js&quot;&gt;&lt;/script&gt;

&lt;/html&gt;
</code></pre>        </div>
    </div>