    <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();

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;];
}

if ($_GET) {
    if (isset($_GET[&quot;cr_name&quot;])) {
        $id = $_GET[&quot;cr_name&quot;];

        // Use prepared statements to prevent SQL injection
        $stmt = $connection-&gt;prepare(&quot;DELETE FROM credit_note WHERE cr_name = ? AND user_name = ? AND user_role = ? AND outlet_name = ? AND outlet_address = ?&quot;);
        $stmt-&gt;bind_param(&quot;issss&quot;, $id, $userName, $userRole, $outlet_name, $outlet_address);

        if ($stmt-&gt;execute()) {
            echo &#039;&lt;script type=&quot;text/javascript&quot;&gt;window.location.href=&quot;credits.php&quot;;&lt;/script&gt;&#039;;
           // header(&quot;Location: credits.php&quot;);
            exit();
        } else {
            echo &quot;Error: &quot; . $stmt-&gt;error;
        }
        
        $stmt-&gt;close();
    }
}

if ($_SERVER[&quot;REQUEST_METHOD&quot;] == &quot;POST&quot; &amp;&amp; isset($_POST[&quot;creditor&quot;])) {
    $date_time32 = date(&quot;Y-m-d&quot;);
    $cr_name = $_POST[&quot;cr_name&quot;];
    $cr_nickname = $_POST[&quot;cr_nickname&quot;];
    $cr_address = $_POST[&quot;cr_address&quot;];
    $phone_number = $_POST[&quot;phone_number&quot;];
    $cr_id = $_POST[&quot;cr_id&quot;];

    // Use prepared statements to prevent SQL injection
    $stmt = $connection-&gt;prepare(&quot;INSERT INTO credit_note (cr_name, cr_nickname, cr_address, phone_number, cr_id, user_name, user_role, outlet_name, outlet_address, date_time) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)&quot;);
    $stmt-&gt;bind_param(&quot;ssssssssss&quot;, $cr_name, $cr_nickname, $cr_address, $phone_number, $cr_id, $userName, $userRole, $outlet_name, $outlet_address, $date_time32);

    if ($stmt-&gt;execute()) {
        // Success, redirect or inform the user
    } else {
        echo &quot;Error: &quot; . $stmt-&gt;error;
    }

    $stmt-&gt;close();
}
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;Creditor 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;
 #table-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, #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);
        }
    }
&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;br /&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;
                        Receivable Management&lt;/h3&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-sm-3&quot;&gt;

                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;
        &lt;br /&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;row&quot;&gt;
            
                &lt;div class=&quot;col-sm-6&quot; style=&quot;&quot; id=&quot;table-container-wrapper&quot;&gt;
                    &lt;div class=&quot;row text-center&quot;&gt;
                        &lt;div class=&quot;search-container&quot;&gt;
                        
                            &lt;input type=&quot;text&quot; id=&quot;searchInput&quot; class=&quot;form-control&quot; placeholder=&quot;Search...&quot;&gt;
                            &lt;div class=&quot;search-icon&quot;&gt;
                                &lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;br /&gt;&lt;br /&gt;
                        &lt;table class=&quot;table table-hover table-stripped table-sm&quot;&gt;
                        &lt;tr class=&quot;bg-dark text-white text-center&quot;&gt;
                        &lt;td&gt;ID&lt;/td&gt;
                        &lt;td&gt;Name&lt;/td&gt;
                        &lt;td&gt;Cell&lt;/td&gt;
                        &lt;td&gt;Action&lt;/td&gt;
                        &lt;td&gt;Delete&lt;/td&gt;
                        &lt;/tr&gt;
&lt;?php 
ob_start();
// Retrieve the sum of remain_balance for each creditor
$rec = mysqli_query($connection, &quot;SELECT * from credit_note
                                  GROUP BY cr_name&quot;);

if (!$rec) {
    die(&quot;Error: &quot; . mysqli_error($connection));
}

while($row = mysqli_fetch_array($rec)) {
    $customerName = $row[&quot;cr_name&quot;];
    //$total_remain_balance = $row[&quot;cr_id&quot;];
?&gt;
&lt;tr&gt;
    &lt;td style=&quot;font-weight:700; color:#300;&quot;&gt;&lt;?php echo $row[&quot;cr_id&quot;]; ?&gt;&lt;/td&gt;
    &lt;td class=&quot;text-capitalize&quot;&gt;&lt;?php echo $customerName; ?&gt;&lt;/td&gt;
    &lt;td&gt;&lt;?php  echo $row[&quot;phone_number&quot;]; ?&gt;&lt;/td&gt;
    &lt;td&gt;&lt;a href=&quot;creditor_detail.php?customer_name=&lt;?php echo $customerName; ?&gt;&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-dark btn-sm&quot;&gt;&lt;i class=&quot;fas fa-clipboard fa-1x&quot;&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;
     &lt;td&gt;&lt;a href=&quot;credits.php?cr_name=&lt;?php echo $customerName; ?&gt;&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-danger btn-sm&quot;&gt;x&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;?php 
} 
ob_end_flush();
?&gt;
  &lt;/table&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-sm-3&quot;&gt;&lt;/div&gt;
                &lt;div class=&quot;col-sm-3&quot;&gt;&lt;center&gt;
                 &lt;button type=&quot;button&quot; class=&quot;btn btn-dark  &quot; data-toggle=&quot;modal&quot; data-target=&quot;#exampleModal2&quot;&gt;
    Add Creditor &amp;nbsp; &lt;i class=&quot;fas fa-clipboard-check&quot;&gt;&lt;/i&gt;
&lt;/button&gt;&lt;/center&gt;
                
                &lt;!-- Modal --&gt;
                &lt;div class=&quot;modal fade&quot; id=&quot;exampleModal2&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
                    &lt;div class=&quot;modal-dialog&quot;&gt;
                        &lt;div class=&quot;modal-content&quot;&gt;
                            &lt;div class=&quot;modal-header&quot;&gt;
                                &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Enter Creditor Information&lt;/h5&gt;
                                &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;modal-body&quot;&gt;
                               &lt;form action=&quot;credits.php&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
                                &lt;!-- Form inputs --&gt;
                                &lt;input class=&quot;form-control mb-3&quot; type=&quot;text&quot;  name=&quot;cr_name&quot; placeholder=&quot;Creditor Name&quot; /&gt;
                                &lt;input class=&quot;form-control mb-3&quot; type=&quot;text&quot;  name=&quot;cr_nickname&quot; placeholder=&quot;Creditor Nickname&quot; /&gt;
                                &lt;input class=&quot;form-control mb-3&quot; type=&quot;text&quot;  name=&quot;cr_address&quot; placeholder=&quot;Creditor Address&quot; /&gt;
                                &lt;input class=&quot;form-control mb-3&quot; type=&quot;text&quot;  name=&quot;phone_number&quot; placeholder=&quot;Phone Number&quot; /&gt;
                                &lt;input class=&quot;form-control mb-3&quot; type=&quot;text&quot;  name=&quot;cr_id&quot; placeholder=&quot;Creditor ID&quot; /&gt;
                                
                                &lt;button type=&quot;submit&quot; class=&quot;btn btn-dark&quot; name=&quot;creditor&quot; &gt; Enter&lt;/button&gt;
                                
                                &lt;/form&gt;
                                
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
           &lt;/div&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      
        

    &lt;/div&gt;
&lt;/body&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&gt;

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;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>