    <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;];
}

@$booker_name = $_GET[&quot;booker_name&quot;];



ob_end_flush();
?&gt;


&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;

    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;

    &lt;title&gt;Whole Sale Retail&lt;/title&gt;

    &lt;!-- Custom fonts for this template--&gt;
    &lt;link href=&quot;../vendor/fontawesome-free/css/all.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
   &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Quicksand:wght@200;300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;

    &lt;!-- Custom styles for this template--&gt;
    &lt;link href=&quot;../css/sb-admin-2.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;style&gt;


body {
    font-family: &#039;Quicksand&#039;, sans-serif;
    
}
		    .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;
    }
.bg-gradient-primary{
    
	background:#0A4657;
	color:#fff;	
	
	}

.btn-primary{
	background:#0A4657;
	color:#fff;
	 border:1px #0A4657 solid;
	
	}  
.btn-primary:hover{
  
  background:#fff;
  border:1px #0A4657 solid;
	color:#0A4657;
	
	}	 
    .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;
    }
	
	.fa-download:hover{
		color:#953E39;
		}
		
label{
	 font-weight:700;
	 color:#000;
		}
  &lt;/style&gt;

&lt;body id=&quot;page-top&quot;&gt;

    &lt;!-- Page Wrapper --&gt;
    &lt;div id=&quot;wrapper&quot;&gt;

        &lt;!-- Sidebar --&gt;
        &lt;?php
        include(&quot;common/sd.php&quot;);
		?&gt;
        &lt;!-- End of Sidebar --&gt;

        &lt;!-- Content Wrapper --&gt;
        &lt;div id=&quot;content-wrapper&quot; class=&quot;d-flex flex-column&quot;&gt;

            &lt;!-- Main Content --&gt;
            &lt;div id=&quot;content&quot;&gt;

                &lt;!-- Topbar --&gt;
                &lt;nav class=&quot;navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow&quot;&gt;

                    &lt;!-- Sidebar Toggle (Topbar) --&gt;
                    &lt;button id=&quot;sidebarToggleTop&quot; class=&quot;btn btn-link d-md-none rounded-circle mr-3&quot;&gt;
                        &lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;

                    &lt;!-- Topbar Search --&gt;
                    
  &lt;?php include(&#039;common/log.php&#039;);  ?&gt;

                    &lt;!-- Topbar Navbar --&gt;
                    
                &lt;/nav&gt;
                &lt;!-- End of Topbar --&gt;

                &lt;!-- Begin Page Content --&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-4&quot;&gt;
&lt;h3 style=&quot;color:#212529; padding:10px; background:#0A4657;color:#fff;text-align:center; border-radius:10px;&quot;&gt; User Detail&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-5&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col-sm-3&quot; style=&quot;color:#212529; padding:10px; background:#0A4657;color:#fff;text-align:center; border-radius:10px; font-size:18px; font-weight:600;&quot; &gt;
&lt;?php echo &#039;Booker Name : &#039;.$booker_name; ?&gt;

&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt; 
&lt;!--Blocks--&gt; 
&lt;?php
 $booker = mysqli_query($connection,&quot;select * from booker where name = &#039;$booker_name&#039;&quot;);
 $fetch_b = mysqli_fetch_array($booker);

	 $shop = mysqli_query($connection,&quot;select * from shop_u&quot;);
    $route = mysqli_query($connection,&quot;select * from u_route&quot;);
							 ?&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;br /&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-10&quot;&gt;
&lt;table class=&quot;table table-bordered table-sm text-center bg-white&quot;&gt;
&lt;tr style=&quot;background:#0A4657; color:#fff; font-weight:700;&quot;&gt;
&lt;td style=&quot;background:#0A4657;color:#fff;&quot;&gt;Date&lt;/td&gt;
&lt;td style=&quot;background:#0A4657;color:#fff;&quot; &gt;Name&lt;/td&gt;
&lt;td style=&quot;background:#0A4657;color:#fff;&quot; &gt;Assign Shop&lt;/td&gt;
&lt;td style=&quot;background:#0A4657;color:#fff;&quot;&gt;Assign Route&lt;/td&gt;

&lt;/tr&gt;
&lt;?php
 $booker = mysqli_query($connection,&quot;select * from booker where name = &#039;$booker_name&#039;&quot;);
 $fetch_b = mysqli_fetch_array($booker);


$route_assign = mysqli_query($connection,&quot;select * from credit_note where booker = &#039;$booker_name&#039;&quot;);
while($assign_get = mysqli_fetch_array($route_assign)){
?&gt;
&lt;tr style=&quot;color:#000; font-weight:700;&quot;&gt;
&lt;td&gt;&lt;?php echo $assign_get[&quot;date_time&quot;]; ?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $assign_get[&quot;booker&quot;]; ?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $assign_get[&quot;shop_name&quot;]; ?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $assign_get[&quot;route&quot;]; ?&gt;&lt;/td&gt;

&lt;/tr&gt;
&lt;?php
}
?&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-2&quot;&gt;
&lt;a href=&quot;userm.php&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-dark btn-sm&quot;&gt;&lt;i class=&quot;fas fa-arrow-left fa-1x&quot;&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;

&lt;a href=&quot;bookings.php?booker_name=&lt;?php echo $fetch_b[&quot;name&quot;];  ?&gt; &quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-dark btn-sm form-control&quot; style=&quot;margin-top:12px;&quot;&gt;Bookings&lt;/button&gt;&lt;/a&gt;


&lt;/div&gt;

&lt;/div&gt;


&lt;/div&gt; 
&lt;/div&gt;
    
            
                &lt;!-- /.container-fluid --&gt;

            &lt;/div&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;!-- End of Main Content --&gt;

            &lt;!-- Footer --&gt;
            &lt;?php include(&quot;common/main_ft.php&quot;);  ?&gt;
            &lt;!-- End of Footer --&gt;

        &lt;/div&gt;
        &lt;!-- End of Content Wrapper --&gt;

    &lt;/div&gt;
    &lt;!-- End of Page Wrapper --&gt;

    &lt;!-- Scroll to Top Button--&gt;
    &lt;a class=&quot;scroll-to-top rounded&quot; href=&quot;#page-top&quot;&gt;
        &lt;i class=&quot;fas fa-angle-up&quot;&gt;&lt;/i&gt;
    &lt;/a&gt;

    &lt;!-- Logout Modal--&gt;
    &lt;div class=&quot;modal fade&quot; id=&quot;logoutModal&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; 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&quot; id=&quot;exampleModalLabel&quot;&gt;Ready to Leave?&lt;/h5&gt;
                    &lt;button class=&quot;close&quot; type=&quot;button&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                        &lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;
                    &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class=&quot;modal-body&quot;&gt;Select &quot;Logout&quot; below if you are ready to end your current session.&lt;/div&gt;
                &lt;div class=&quot;modal-footer&quot;&gt;
                    &lt;button class=&quot;btn btn-secondary&quot; type=&quot;button&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
                    &lt;a class=&quot;btn btn-primary&quot; href=&quot;&quot;&gt;Logout&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&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);
});
 
 
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
    const products = document.querySelectorAll(&#039;.product-row&#039;);
    let currentIndex = -1;

    // Function to handle up and down arrow keys
    document.addEventListener(&quot;keydown&quot;, function(event) {
        if (event.key === &quot;ArrowDown&quot; || event.key === &quot;ArrowUp&quot;) {
            event.preventDefault();
            if (currentIndex === -1) {
                currentIndex = 0;
            } else {
                currentIndex += event.key === &quot;ArrowDown&quot; ? 1 : -1;
            }
            if (currentIndex &lt; 0) currentIndex = 0;
            if (currentIndex &gt;= products.length) currentIndex = products.length - 1;
            products[currentIndex].focus();
            products[currentIndex].scrollIntoView({ behavior: &#039;smooth&#039;, block: &#039;center&#039; });
        }
    });

    // Set tabindex and index for each row
    products.forEach((row, index) =&gt; {
        row.setAttribute(&#039;tabindex&#039;, &#039;0&#039;);
        row.dataset.index = index;
        row.addEventListener(&#039;focus&#039;, function() {
            currentIndex = parseInt(row.dataset.index);
        });
    });
});
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
    const categories = &lt;?php echo json_encode($categories); ?&gt;;
    const searchInput = document.getElementById(&#039;searchInput&#039;);
    const searchResults = document.getElementById(&#039;searchResults&#039;);
    const products = document.querySelectorAll(&#039;.product-row&#039;);

    searchInput.addEventListener(&#039;input&#039;, function () {
        const query = this.value.trim().toLowerCase();
        if (query === &#039;&#039;) {
            searchResults.style.display = &#039;none&#039;;
            showAllProducts();
            return;
        }
        const filteredCategories = categories.filter(category =&gt; category.toLowerCase().includes(query));
        renderResults(filteredCategories);
        filterProducts(filteredCategories);
    });

    searchInput.addEventListener(&#039;blur&#039;, function () {
        setTimeout(() =&gt; {
            searchResults.style.display = &#039;none&#039;;
        }, 200); // Delay hiding dropdown to allow click event on dropdown items
    });

    function renderResults(results) {
        let html = &#039;&#039;;
        results.forEach(result =&gt; {
            html += `&lt;div&gt;${result}&lt;/div&gt;`;
        });
        searchResults.innerHTML = html;
        searchResults.style.display = &#039;block&#039;;
    }

    function filterProducts(filteredCategories) {
        products.forEach(function (product) {
            const category = product.getAttribute(&#039;data-category&#039;);
            if (!filteredCategories.includes(category)) {
                product.style.display = &#039;none&#039;;
            } else {
                product.style.display = &#039;table-row&#039;;
            }
        });
    }

    function showAllProducts() {
        products.forEach(function (product) {
            product.style.display = &#039;table-row&#039;;
        });
    }

    searchResults.addEventListener(&#039;click&#039;, function (event) {
        const clickedItem = event.target;
        if (clickedItem.tagName === &#039;DIV&#039;) {
            searchInput.value = clickedItem.innerText;
            searchResults.style.display = &#039;none&#039;;
            filterProducts([clickedItem.innerText]);
        }
    });
});
 
 document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    document.getElementById(&quot;search-input&quot;).addEventListener(&quot;input&quot;, function() {
        var searchText = this.value.toLowerCase();
        var rows = document.querySelectorAll(&quot;.product-row&quot;);

        rows.forEach(function(row) {
            var productName = row.querySelector(&quot;td:nth-child(3)&quot;).textContent.toLowerCase();
            if (productName.includes(searchText)) {
                row.style.display = &quot;table-row&quot;;
            } else {
                row.style.display = &quot;none&quot;;
            }
        });
    });
});



   
    // Function to toggle submenu
    function toggleSubMenu(element) {
        $(element).next(&#039;.sub-menu&#039;).slideToggle();
    }
&lt;/script&gt;
   &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
    &lt;!-- Bootstrap core JavaScript--&gt;
    &lt;script src=&quot;../vendor/jquery/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../vendor/bootstrap/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

    &lt;!-- Core plugin JavaScript--&gt;
    &lt;script src=&quot;../vendor/jquery-easing/jquery.easing.min.js&quot;&gt;&lt;/script&gt;

    &lt;!-- Custom scripts for all pages--&gt;
    &lt;script src=&quot;../js/sb-admin-2.min.js&quot;&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>        </div>
    </div>