<div id="menu-sidebar" data-menu-active="nav-welcome" data-menu-load="#" class="offcanvas offcanvas-start offcanvas-detached rounded-m">
</div>

<div id="menu-highlights" data-menu-load="#" class="offcanvas offcanvas-bottom offcanvas-detached rounded-m">
</div>

<div id="menu-notifications" data-menu-load=#" class="offcanvas offcanvas-top offcanvas-detached rounded-m">
</div>

<div id="menu-card-more" data-menu-load="#" class="offcanvas offcanvas-bottom offcanvas-detached rounded-m">
</div>

<div id="menu-transfer" data-menu-load="#" class="offcanvas offcanvas-bottom offcanvas-detached rounded-m">
</div>

<div id="menu-friends-transfer" data-menu-load="#" class="offcanvas offcanvas-bottom offcanvas-detached rounded-m">
</div>

<div id="menu-request" data-menu-load="#" class="offcanvas offcanvas-bottom offcanvas-detached rounded-m">
</div>

<style>
    #menu-install-pwa-ios{
        display: none !important;
    }
    .pos-wrap{
        width: 100%;
        height: 100%;
        
    }
    .topbox i{
        color: #fff;
        font-size: 18px;
    }
    .pos-top{
        padding: 5px 0px;
		background-color:#000000;
    }
    .pos-top{
       
    }
    .pos-middele{
        border: 2px solid #000000;
    }
    thead{
        border-bottom: 1px solid #eddfe1;
		background-color: #ffffff;
    }
    table{
       
    }
    th,td{
        color:#fff;
    }
    i{
        color: #fff !important;
    }
    .icon-text{
		font-weight:600;
        text-align: center;
        color: #fff;
        margin-top: 11px;
		font-size: 14px;
    }
    .icon-wrap{
        text-align: center;
		margin-top: 11px;
    }
    .box-wrap{
        padding: 15px 0px;
        border: 2px solid #ffffff; 
        border-radius: 5px;
        position: relative;
    }
    .box-wrap:hover{
        background-color: gray !important;
        cursor: pointer;
    }
    .key{
        color: #fff;
        position: absolute;
        top: 1px;
        left: 8px;
		font-size: 11px;
    }
    .item i{
        font-size: 50px;
    }
    .full-height {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .top-row {
      flex: 0 0 auto;
    }
    .bottom-row {
      flex: 1 0 auto;
      align-self: flex-end;
    }
    .topbox i{
        font-size: 20px;
        cursor: pointer;
    }
    .searchwrap{
        position: relative;
    }
    .searchwrap input{
        background-color: #ffffff;
        color: #000000;
        padding-left: 45px;
        border-color: #000000;
    }
    .searchwrap i{
        position: absolute;
        left: 22px;
        top: 8px;
    }
    input::placeholder {
      color: #fff; 
      opacity: 0.8; 
    }
    .heighlight{
        font-size: 25px;
        font-weight: 700;
    }
    .table tfoot {
      
    }
    table{
        
    }
    .searchwrap{
        position: relative;
    }
    #searchitems{
        position: absolute;
        width: 98%;
        /* height: 100%; */
        max-height: 250px;
        /* overflow: hidden; */
        overflow-y: scroll;
        z-index: 2;
        background: #fff !important;
    }
    #searchitems ul li{
        list-style: none;
    }
    tbody tr{
        height: 10px;
        cursor: pointer;
        background-color: #422e2e;
        border-bottom: 2px solid #ffffff;
    }
    tbody tr:hover{
        background-color: #505273;
    }
    #searchitems ul li{
        padding: 5px 20px;
    }
    #searchitems ul li:hover{
        background-color: #402f32;
        color: #fff;
        cursor: pointer;
    }
    #searchitems ul{
        padding-left: 0;
        margin-bottom: 0;
    }
    #searchitems{
        display: none;
    }
    .bg2{
     background: linear-gradient(85deg, rgb(249 247 247) 0%, rgb(249 248 251 / 0%) 100%);
    }
    .close{
        background-color: transparent;
        border: none;
    }
    .modal-dialog2 {
        max-width: 400px;
        margin: 1.75rem auto;
    }
    .number{
        color: #fff;
        background: #0669ff;
        text-align: center;
        font-size: 25px;
        font-weight: 700;
        border: 1px solid #262a22;
        height: 60px;
        line-height: 51px;
    }
    .number:hover{
        background: #262a22;
        cursor: pointer;
    }
    tr.selectedrow {
            outline: none;
            background-color: #255fc9;
        }
        #searchitems li.selectedlirow{
            background-color: #255fc9;
            color: #fff;
        }
        .ntext{
            font-size: 15px;
        }
        .box-wrap{
            padding: 8px 0px;
        }
        .item i {
    font-size: 35px;
}
#searchitems{
    top: 51px;
    padding: 10px;
}
#searchitems div{
    font-size: 10px;
}

.quantity {
  display: flex;
  border: 2px solid #3498db;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 30px;
}

.quantity button {
  background-color: #3498db;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 20px;
  width: 30px;
  height: auto;
  text-align: center;
  transition: background-color 0.2s;
  width: 20px;
}

.quantity button:hover {
  background-color: #2980b9;
}

.input-box {
  width: 40px;
  text-align: center;
  border: none;
  padding: 8px 8px;
  font-size: 16px;
  outline: none;
}


.quantity .input-box::-webkit-inner-spin-button,
.quantity .input-box::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity .input-box[type="number"] {
  -moz-appearance: textfield;
}
.modal-backdrop.show{
    display: none !important;
}
#footer-bar a:not(.btn) i{
    color: #bdbdbd !important;
}
</style>








<script src="assets/js/jquery-3.6.0.min.js"></script>
<!--<script src="plug/scripts/bootstrap.min.js"></script>-->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/sweetalert/sweetalert2.all.min.js"></script>
<script src="assets/plugins/sweetalert/sweetalerts.min.js"></script>
<script src="plug/scripts/custom.js"></script>








<script>
    document.addEventListener("DOMContentLoaded", function() {
    const qtyinput = document.getElementById('qtyinput');
    const discountinput = document.getElementById('discountinput');
    var priceinput2 = document.getElementById('priceinput');
    document.getElementById('saveqty1').addEventListener('click', function(event) {
    const qty = qtyinput.value; 
    const dis = discountinput.value; 
    const price = priceinput2.value; 
    
    const tempid = document.getElementById('qtyproductid').value;

  
    $.ajax({
        url: "modal-qty-change.php",
        type: "POST",
        data: { tempid: tempid, qty: qty, dis:dis,price:price }, 
        success: function (data) {
            loadCartItems();
            qtyinput.value = 1;
                discountinput.value = 0;
            $("#qtyModal").modal("hide");
            document.getElementById('searchinputbox').focus();
        },
        error: function () {
            console.error('Error occurred during AJAX request');
        }
    });
});
});
    function redirect(url){
        window.location.href = url; 
    }
    document.body.onload = function() {
        
        loadCartItems();    
    }
    loadCartItems();
    function loadCartItems() {
  $.ajax({
    url: "load-new-mobile-left-cart-panel.php",
    type: "POST",
   
    success: function (data) {
      $("#right_cart_panel").html(data);
      
    },
    error: function (jXHR, textStatus, errorThrown) {
      alert(jXHR.responseText);
    },
  });
  //showTotalAmount();
}

function searchbarcodeProduct() {
   
   var searchbarcode = document.getElementById("searchinputbox").value;
   var searchQty = 1; 
   if (searchbarcode && searchQty > 0) {
     $.ajax({
       url: "load-search-barcode-by-barcode-byproduct.php",
       type: "POST",
       data: "searchbarcode=" + searchbarcode + "& searchQty=" + searchQty + "&",
       success: function (data) {
         if (data > 0) {
           loadCartItems();
           document.getElementById("searchinputbox").value = "";
           
         } else {
           alertify.error(data);
           document.getElementById("searchinputbox").value = "";
           
         }
       },
       error: function (jXHR, textStatus, errorThrown) {
         alert(jXHR.responseText);
       },
     });
   }
 }

 document.addEventListener("DOMContentLoaded", function() {
    const searchInput = document.getElementById("searchinputbox");
    
    searchInput.addEventListener("input", function() {
        let input = searchInput.value;
        if(input.trim() === ""){
            $("#searchitems").html("");
            $("#searchitems").css("display","none");
        }else{
                $.ajax({
                    url: "live-search-mobile-item-load.php",
                    type: "POST",
                    data : "product="+input+"&", 
                    success: function (data) {
                        if(data == 0 || data === ""){
                            $("#searchitems").html("");
                            $("#searchitems").css("display","none");
                           
                        }else{
                            $("#searchitems").css("display","block");
                            $("#searchitems").html(data);
                        }
                        
                    },
                    error: function () {
                
                },
            });
        }
       
    });
});
 var inputTimeout;
function handleInput() {
  clearTimeout(inputTimeout);
  inputTimeout = setTimeout(filterProducts, 1);
 
}
function filterProducts() {
  var searchbarcode = document.getElementById("searchinputbox").value;
  
    $.ajax({
      url: "search-filter-products.php",
      type: "POST",
      dataType: 'json',
      data: "searchbarcode=" + searchbarcode + "&",
      success: function (data) {
        loadCartItems();  
        if(data[0] > 0){
            document.getElementById("searchinputbox").value = "";
            $("#searchitems").html("");
            $("#searchitems").css("display","none");


            if(data[4]==148){
                document.getElementById('allmodalproductname').innerText = data[2];
                document.getElementById('allproductid').value = data[0];
                $('#allModal').modal('show');
                document.getElementById('genaralnameinput').focus();
                var allModal = document.getElementById('allModal');
                if (allModal) { 
                   


                    setTimeout(function() {
                    var allmodalinput = document.getElementsByClassName('allmodalinput');
                    if (allmodalinput.length > 0) {
                        allmodalinput[0].focus();
                        
                            document.addEventListener('keydown', function(event) {
                                var focusedElement = document.activeElement;
                                if (focusedElement && focusedElement.classList.contains('allmodalinput')) {
                                    var index = Array.prototype.indexOf.call(allmodalinput, focusedElement);
                                    
                                        if (event.key === 'ArrowDown') {
                                            if (index < allmodalinput.length - 1) {
                                                allmodalinput[index + 1].focus();
                                            }
                                        }else if (event.key === 'ArrowUp') {
                                            if (index > 0) {
                                                allmodalinput[index - 1].focus();
                                            }
                                        }
                                  

                                }
                            });
                       
                    }
                    
                    
                }, 100);




                }
            }else{
                
              
                document.getElementById('modalproductname').innerText = data[2];
                document.getElementById('modalproductqty').innerText = data[1];
                document.getElementById('qtyproductid').value = data[0];
                document.getElementById('priceinput').value = data[3];
                document.getElementById('discountinput').value = data[5];
                document.getElementById('costprice').innerText = "(Cost Price = "+data[6]+")";
                $('#qtyModal').modal('show');
                document.getElementById('qtyinput').focus();
                document.getElementById("qtyinput").select();


                var qtyModal = document.getElementById('qtyModal');
                if (qtyModal) { 
                    
                setTimeout(function() {
                    var qtyModalinput = document.getElementsByClassName('qtyModalinput');
                    if (qtyModalinput.length > 0) {
                        qtyModalinput[0].focus();
                        
                            document.addEventListener('keydown', function(event) {
                                var focusedElement = document.activeElement;
                                if (focusedElement && focusedElement.classList.contains('qtyModalinput')) {
                                    var index = Array.prototype.indexOf.call(qtyModalinput, focusedElement);
                                    
                                        if (event.key === 'ArrowDown') {
                                            if (index < qtyModalinput.length - 1) {
                                                qtyModalinput[index + 1].focus();
                                            }
                                        }else if (event.key === 'ArrowUp') {
                                            if (index > 0) {
                                                qtyModalinput[index - 1].focus();
                                            }
                                        }
                                  

                                }
                            });
                       
                    }
                    
                    
                }, 100);


            }




            }














        }
       
      },
      error: function (jXHR, textStatus, errorThrown) {
        
      },
    });
  
}

function addNewProductById(prid){
    var searchbarcode = prid; 
    var searchQty = 1; 
    if (searchbarcode && searchQty > 0) {
        $.ajax({
        url: "load-search-product-by-barcode.php",
        type: "POST",
        dataType: 'json',
        data: "searchbarcode=" + searchbarcode + "& searchQty=" + searchQty + "&",
        success: function (data) {
          //  if (data[0] > 0) {
            loadCartItems();
            $("#searchitems").html("");
            document.getElementById("searchinputbox").value = "";
            
            if(prid==148){
                document.getElementById('allmodalproductname').innerText = data[2];
                document.getElementById('allproductid').value = data[0];
                $('#allModal').modal('show');
                document.getElementById('genaralnameinput').focus();
                var allModal = document.getElementById('allModal');
                if (allModal) { 
                   


                    setTimeout(function() {
                    var allmodalinput = document.getElementsByClassName('allmodalinput');
                    if (allmodalinput.length > 0) {
                        allmodalinput[0].focus();
                        
                            
                       
                    }
                    
                    
                }, 100);




                }
            }else{
                
                
                document.getElementById('modalproductname').innerText = data[2];
                document.getElementById('modalproductqty').innerText = data[1];
                document.getElementById('qtyproductid').value = data[0];
                document.getElementById('priceinput').value = data[3];
                document.getElementById('discountinput').value = data[4];
                document.getElementById('costprice').innerText = "(Cost Price = "+data[5]+")";
                $('#qtyModal').modal('show');
                document.getElementById('qtyinput').focus();
                document.getElementById("qtyinput").select();

            
                var qtyModal = document.getElementById('qtyModal');
                if (qtyModal) { 
                    
              /*  setTimeout(function() {


                    var qtyModalinput = document.getElementsByClassName('qtyModalinput');
                    if (qtyModalinput.length > 0) {
                        alert(qtyModalinput.length);
                        qtyModalinput[0].focus();
                        
                            document.addEventListener('keydown', function(event) {
                                var focusedElement = document.activeElement;
                                if (focusedElement && focusedElement.classList.contains('qtyModalinput')) {
                                    var index = Array.prototype.indexOf.call(qtyModalinput, focusedElement);
                                    
                                        if (event.key === 'ArrowDown') {
                                            if (index < qtyModalinput.length - 1) {
                                                qtyModalinput[index + 1].focus();
                                            }
                                        }else if (event.key === 'ArrowUp') {
                                            if (index > 0) {
                                                qtyModalinput[index - 1].focus();
                                            }
                                        }
                                  

                                }
                            });
                       
                    }



                    
                    
                }, 100);
 */



 



           }




            }





            

            
         
        },
        error: function (jXHR, textStatus, errorThrown) {
            alert(jXHR.responseText);
        },
        });
    }
}



</script>



</body>

<div class="modal" tabindex="-1" role="dialog" id="qtyModal">
	<div class="modal-dialog modal-dialog2" role="document">
		<div class="modal-content" style="background:#403b4a; border: 2px solid #373c32;">
			<!--<div class="modal-header" style="background:#403b4a;">
				
				
			</div>-->
			<div class="modal-body" id="myModalMsg"> 
                <button type="button" class="close" style="position: absolute; right: 8px; top: 7px;" data-dismiss="modal" aria-label="Close" onclick="cloaseqtyModal();">
					<span style="color:#fff;" aria-hidden="true">&times;</span>
				</button>
                <h5 class="modal-title" style="color:#ffffff; text-align:center;">Change Quantity & Discount</h5>
                <p style="color:#ffffff; text-align:center; margin-bottom:5px;">Product : <span id="modalproductname"></span></p>
                <p style="color:#ffffff; text-align:center; margin-bottom:5px;">Default Quantity : <span id="modalproductqty"></span></p>
                 <div class="qtyinputwrap">
                    <input type="hidden" id="qtyproductid" value="0">
                    <label style="color:#fff;">Quantity</label>
                    <input type="text" class="form-control mb-3 qtyModalinput" id="qtyinput" step="0.01" min="0" value="1">
                    <label style="color:#fff;">Price <span id="costprice"></span></label>
                    <input type="text" class="form-control mb-3 qtyModalinput" id="priceinput" value="0">
                    <label style="color:#fff;">Discount</label>
                    <input type="text" class="form-control mb-3 qtyModalinput" id="discountinput" value="0">
                    <button style="width:100%;" type="text" class="btn btn-primary mb-3 qtyModalinput" id="saveqty1">Save</button>
                 </div>  
                 
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="allModal">
	<div class="modal-dialog modal-dialog2" role="document">
		<div class="modal-content" style="background:#403b4a; border: 2px solid #373c32;">
			<!--<div class="modal-header" style="background:#403b4a;">
				
				
			</div>-->
			<div class="modal-body" id="myModalMsg"> 
                <button type="button" class="close" style="position: absolute; right: 8px; top: 7px;" data-dismiss="modal" aria-label="Close" onclick="cloaseallModal();">
					<span style="color:#fff;" aria-hidden="true">&times;</span>
				</button>
                <h5 class="modal-title" style="color:#ffffff; text-align:center;">Change Genaral Item</h5>
                <p style="color:#ffffff; text-align:center; margin-bottom:5px;">Product : <span id="allmodalproductname"></span></p>
               
                 <div class="qtyinputwrap">
                    <input type="hidden" id="allproductid" value="0">
                    <label class="mt-3" style="color: #fff;">Product Name</label>
                    <input type="text" class="form-control mt-1 gall1 allmodalinput" onkeypress="handlegenaralkeypress(event,'genaralqtyinput')" id="genaralnameinput">
                    <label class="mt-3" style="color: #fff;">Quantity</label>
                    <input type="text" class="form-control mt-1 gall2 allmodalinput" onkeypress="handlegenaralkeypress(event,'genaralpriceinput')" id="genaralqtyinput" step="0.01" min="0" value="1">
                    <label class="mt-3" style="color: #fff;">Price</label>
                    <input type="text" class="form-control mt-1 gall3 allmodalinput" onkeypress="handlegenaralkeypress(event,'genaraldiscountinput')" id="genaralpriceinput" step="0.01" min="0" value="0">
                    <label class="mt-3" style="color: #fff;">Discount</label>
                    <input type="text" class="form-control mt-1 gall4 allmodalinput" onkeypress="handlegenaralkeypress(event,'genaraltaxinput')" id="genaraldiscountinput" value="0">
                    <label class="mt-3" style="color: #fff;">Tax</label>
                    <input type="text" class="form-control mt-1 gall5 allmodalinput" onkeypress="handlegenaralkeypress(event,'genaralmarketpriceinput')" id="genaraltaxinput" value="0%">
                    <label class="mt-3" style="color: #fff;">Market Price</label>
                    <input type="text" class="form-control mt-1 gall5 allmodalinput" onkeypress="handlegenaralkeypress(event,'allgenadd')" id="genaralmarketpriceinput" value="0">
                    <button class="number ntext mt-3 gall allmodalinput" style="width: 100%;" id="allgenadd">Save</button>
                 </div>  
                 
                 </div>     
            </div>
        </div>
    </div>
</div>