    <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($_SERVER[&#039;REQUEST_METHOD&#039;] == &quot;POST&quot; &amp;&amp; isset($_POST[&#039;withdraw_add&#039;])){
	$userName1 = $_SESSION[&#039;user_name&#039;];
     $userRole1 = $_SESSION[&#039;user_role&#039;];
	@$name_detailnew = $_POST[&#039;desc1&#039;];
	@$amountnew = $_POST[&quot;amount1&quot;];
	$paid_wd = $_POST[&quot;paid_wd&quot;];

	$date_timenew = date(&quot;Y-m-d&quot;);
	mysqli_query($connection,&quot;insert into withdraw(name_detail,amount,paid_by,date_time,login_user,user_role,outlet_name,outlet_address)
	values(&#039;&quot;.$name_detailnew.&quot;&#039;,&#039;&quot;.$amountnew.&quot;&#039;,&#039;&quot;.$paid_wd.&quot;&#039;,&#039;&quot;.$date_timenew.&quot;&#039;,&#039;&quot;.$userName1.&quot;&#039;,&#039;&quot;.$userRole1.&quot;&#039;,&#039;&quot;.$outlet_name.&quot;&#039;,&#039;&quot;.$outlet_address.&quot;&#039;) &quot;);
	echo &#039;&lt;script type=&quot;text/javascript&quot;&gt;window.location.href=&quot;withdraw.php&quot;;&lt;/script&gt;&#039;;
	
	}

	


ob_end_flush();
?&gt;

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Withdraw&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;/head&gt;
&lt;style&gt;
#table-container-wrapper {
    max-height: 660px; /* 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: &#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: #503F2E;
    }

    /* 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, #3C2F23, #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: #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);
        }
    }	
&lt;/style&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-3&quot;&gt;
     &lt;h3 style=&quot;width:305px; height:66px; text-align:center; background:#503F2E; color:#fff; padding:12px; border-radius:10px;&quot;&gt;WithDraw&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-sm-6&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;col-sm-3&quot;&gt;
             &lt;a href=&quot;report_p.php&quot; class=&quot;btn btn-dark&quot; style=&quot;margin-top:10px;float:right;&quot;&gt;Back&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
&lt;/div&gt;
&lt;br /&gt;

&lt;!-- Date filter form --&gt;
&lt;div class=&quot;container&quot;&gt;
    &lt;form method=&quot;GET&quot; action=&quot;&lt;?php echo $_SERVER[&#039;PHP_SELF&#039;]; ?&gt;&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-sm-3&quot;&gt;
                &lt;input type=&quot;date&quot; name=&quot;start_date&quot; class=&quot;form-control&quot; value=&quot;&lt;?php echo isset($_GET[&#039;start_date&#039;]) ? $_GET[&#039;start_date&#039;] : &#039;&#039;; ?&gt;&quot; /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-sm-3&quot;&gt;
                &lt;input type=&quot;date&quot; name=&quot;end_date&quot; class=&quot;form-control&quot; value=&quot;&lt;?php echo isset($_GET[&#039;end_date&#039;]) ? $_GET[&#039;end_date&#039;] : &#039;&#039;; ?&gt;&quot; /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-sm-2&quot;&gt;
                &lt;button type=&quot;submit&quot; class=&quot;btn btn-dark&quot;&gt;Filter&lt;/button&gt;
            &lt;/div&gt;
           
            &lt;div class=&quot;col-sm-4&quot;&gt;
                 
                 &lt;a href=&quot;withdraw.php&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot;  &gt;&lt;i class=&quot;fas fa-sync-alt fa-1x&quot;&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-dark &quot; data-toggle=&quot;modal&quot; data-target=&quot;#addWithdrawModal&quot;&gt;
                        Add Withdraw
                    &lt;/button&gt;
                
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/div&gt;


&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-sm-11&quot; style=&quot;&quot; id=&quot;table-container-wrapper&quot;&gt;
            &lt;div class=&quot;row text-center&quot;&gt;
                &lt;!-- Search container --&gt;
               
                

                &lt;table class=&quot;table table-striped table-hover table-sm&quot; style=&quot;margin-top:20px;&quot;&gt;
                    &lt;tr style=&quot;background:#212529;font-weight:700; font-size:12px;&quot; class=&quot;text-white text-capitalize header-row&quot;&gt;
                        &lt;th&gt;Date&lt;/th&gt;
                        &lt;th&gt;Drawing&lt;/th&gt;
                        &lt;th&gt;Amount(Rs)&lt;/th&gt;
                        &lt;th&gt;Paid By&lt;/th&gt;
                        &lt;th&gt; By&lt;/th&gt;
                    &lt;/tr&gt;

                    &lt;?php
                    ob_start();
                    
                    // Handle start date and end date filters
                    $startDate = isset($_GET[&#039;start_date&#039;]) ? $_GET[&#039;start_date&#039;] : null;
                    $endDate = isset($_GET[&#039;end_date&#039;]) ? $_GET[&#039;end_date&#039;] : null;

                    // SQL query
                    $query = &quot;SELECT * FROM withdraw WHERE 1=1&quot;;
                    
                    if ($startDate) {
                        $query .= &quot; AND date_time &gt;= &#039;$startDate&#039;&quot;;
                    }
                    if ($endDate) {
                        $query .= &quot; AND date_time &lt;= &#039;$endDate&#039;&quot;;
                    }
                    
                    $query .= &quot; ORDER BY date_time DESC&quot;;
                    $rec = mysqli_query($connection, $query);

                    while ($row = mysqli_fetch_array($rec)) {
                        ?&gt;
                        &lt;tr style=&quot;font-size:14px;&quot;&gt;
                            &lt;td&gt;&lt;?php echo $row[&quot;date_time&quot;]; ?&gt;&lt;/td&gt;
                            &lt;td class=&quot;text-capitalize&quot; style=&quot;font-weight:700;&quot;&gt;&lt;?php echo $row[&quot;name_detail&quot;]; ?&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;?php echo $row[&quot;amount&quot;]; ?&gt;&lt;/td&gt;
                            &lt;td style=&quot;text-transform:uppercase;font-weight:700;font-size:12px;&quot;&gt;&lt;?php echo $row[&quot;paid_by&quot;]; ?&gt;&lt;/td&gt;
                            &lt;td class=&quot;text-capitalize&quot;&gt;&lt;?php echo $row[&quot;login_user&quot;]; ?&gt;&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;?php 
                    }
                    ob_end_flush();
                    ?&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Modal for adding withdraw --&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;addWithdrawModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;addwithdrawModalLabel&quot; aria-hidden=&quot;true&quot; style=&quot;margin-top:80px;&quot;&gt;
    &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h5 class=&quot;modal-title text-capitalize&quot; id=&quot;addwithdrawModalLabel&quot;&gt;Add Withdraw Cash&lt;/h5&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                    &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
                &lt;!-- Form for adding purchase --&gt;
                &lt;form method=&quot;post&quot; action=&quot;&lt;?php echo $_SERVER[&#039;PHP_SELF&#039;]; ?&gt;&quot; enctype=&quot;multipart/form-data&quot;&gt;
                    &lt;input type=&quot;text&quot; name=&quot;desc1&quot; placeholder=&quot;Description / Name&quot; class=&quot;form-control&quot; /&gt;
                    &lt;br /&gt;
                    &lt;input type=&quot;text&quot; name=&quot;amount1&quot; placeholder=&quot;Amount&quot; class=&quot;form-control&quot; /&gt;
                    &lt;br /&gt;
                    &lt;select name=&quot;paid_wd&quot; class=&quot;form-control&quot;&gt;
                        &lt;option value=&quot;cash&quot;&gt;Cash&lt;/option&gt;
                        &lt;option value=&quot;bank1&quot;&gt;Bank 1&lt;/option&gt;
                                    &lt;option value=&quot;bank2&quot;&gt;Bank 2 &lt;/option&gt;
                                    &lt;option value=&quot;bank3&quot;&gt;Bank 3&lt;/option&gt;
                        &lt;option value=&quot;other&quot;&gt;Other&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;br&gt;
                    &lt;button type=&quot;submit&quot; class=&quot;btn btn-dark&quot; name=&quot;withdraw_add&quot;&gt;Enter&lt;/button&gt;
                &lt;/form&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 src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&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;script&gt;
    $(document).ready(function(){
        $(&quot;#searchInput&quot;).on(&quot;keyup&quot;, function() {
            var value = $(this).val().toLowerCase();
            $(&quot;table tr&quot;).filter(function() {
                // Exclude header row from filtering
                if (!$(this).hasClass(&#039;header-row&#039;)) {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) &gt; -1);
                }
            });
        });
    });
	
	
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;/html&gt;
</code></pre>        </div>
    </div>