<?php
    include 'load.php';
    require_once 'db_connection.php'; 

?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="assets/plugins/owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/plugins/owlcarousel/owl.theme.default.min.css">
    <link rel="stylesheet" href="assets/alertify/alertify.core.css">
    <link rel="stylesheet" href="assets/alertify/alertify.default.css">
    <link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
<style>
    body{
        width: 100%;
        height: 100%;
        background: #402f32;
    }
    .pos-wrap{
        width: 100%;
        height: 100%;
       
    }
    .topbox i{
        color: #fff;
        font-size: 18px;
    }
    .pos-top{
        padding: 15px 0px;
    }
    .pos-top{
        border-bottom: 1px solid #eddfe1;
    }
    .pos-middele{
        border: 1px solid #eddfe1;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }
    thead{
        border-bottom: 1px solid #eddfe1;
        
    }
    table{
       
    }
    th,td{
        color:#fff;
    }
    i{
        color: #fff !important;
    }
    .icon-text{
        text-align: center;
        color: #fff;
        margin-top: 5px;
    }
    .icon-wrap{
        text-align: center;
    }
    .box-wrap{
        padding: 15px 0px;
        border: 2px solid gray; 
        border-radius: 3px;
        position: relative;
    }
    .box-wrap:hover{
        background-color: gray !important;
        cursor: pointer;
    }
    .key{
        color: #fff;
        position: absolute;
        top: 2px;
        left: 10px;
    }
    .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: #402f32;
        color: #fff;
        padding-left: 45px;
        border-color: crimson;
    }
    .searchwrap i{
        position: absolute;
        left: 25px;
        top: 5px;
    }
    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: 500px;
        /* overflow: hidden; */
        overflow-y: scroll;
        z-index: 2;
        background: #fff;
    }
    #searchitems ul li{
        list-style: none;
    }
    tbody tr{
        height: 10px;
        cursor: pointer;
       
    }
    tbody tr:hover{
        background-color: #505273;
    }
</style>
<div id="global-loader">
<div class="whirly-loader"> </div>
</div>
<section class="pos-wrap">
    <div class="container-fluid">
        <div class="pos-top">
            <div class="row">
                <div class="col-lg-2 d-flex justify-content-around">
                        <div class="topbox">
                            <i class="bi bi-upc"></i>
                        </div>
                        <div class="topbox">
                            <i class="bi bi-123">123</i>
                        </div>
                        <div class="topbox">
                        <i class="bi bi-hash"></i>
                        </div>
                        <div class="topbox">
                            <i class="bi bi-tag"></i>
                        </div>
                </div>
                    <div class="col-lg-10 searchwrap">
                        <i class="bi bi-search"></i>
                        <input type="text" class="form-control"  id="searchinputbox" placeholder="Search product by name, code or barcode" onKeyDown="if(event.keyCode==32) searchbarcodeProduct();">
                       <!-- <div id="searchitems">
                            <ul>
                                <li>aaaaaaaaaa</li>
                                <li>aaaaaaaaaa</li>
                                <li>aaaaaaaaaa</li>
                            </ul>
                        </div>-->
                    </div>
            </div>
        </div>
        <div class="pos-middele full-height">
            <div class="row g-1">
                <div class="col-lg-8" id="right_cart_panel">
                <table class="table table-borderless mb-0">
                    <thead>
                        <tr>
                        <th scope="col">Product Name</th>
                        <th scope="col">Quantty</th>
                        <th scope="col">Price</th>
                        <th scope="col">Discount</th>
                        <th scope="col">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                    <tfoot>
                        <tr>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>Sub Total</td>
                            <td style=" ">0.00</td>
                        </tr>
                        <tr>
                        <td></td>
                        <td></td>
                            <td></td>
                            <td>Discount</td>
                            <td style="">0.00</td>
                        </tr>
                        <tr>
                        <td></td>
                            <td></td>
                            <td></td>
                            <td class="heighlight">Total</td>
                            <td class="heighlight" style="">0.00</td>
                        </tr>
                    </tfoot>
                    </table>
                </div>
                <div class="col-lg-4">
                    <div class="row g-1">
                        <div class="col-lg-3 mt-1 pb-1 item">
                            <div class="wrap box-wrap">
                                    <div class="icon-wrap">
                                        <span class="key">F8</span>
                                        <i class="bi bi-x"></i>
                                    </div>
                                    <div class="icon-text">
                                        Delete
                                    </div>
                            </div>
                        </div>
                        <div class="col-lg-3 mt-1 pb-1 item">
                            <div class="wrap box-wrap" onclick="searchfocus();">
                                    <span class="key">F2</span>
                                    <div class="icon-wrap">
                                    <i class="bi bi-search"></i>
                                    </div>
                                    <div class="icon-text">
                                        Search
                                    </div>
                            </div>
                        </div>
                        <div class="col-lg-3 mt-1 pb-1 item">
                            <div class="wrap box-wrap">
                                    <span class="key">F8</span>
                                    <div class="icon-wrap">
                                        <i class="bi bi-basket3"></i>
                                    </div>
                                    <div class="icon-text">
                                        Quntity
                                    </div>
                            </div>
                        </div>
                        <div class="col-lg-3 mt-1 pb-1 item">
                            <div class="wrap box-wrap">
                                    <span class="key">F8</span>
                                    <div class="icon-wrap">
                                        <i class="bi bi-plus"></i>
                                    </div>
                                    <div class="icon-text">
                                        New Order
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="row g-1">
                            <div class="col-lg-3 mt-1 pb-1 item item1">
                                <div class="wrap box-wrap">
                                        <span class="key">F8</span>
                                        <div class="icon-text">
                                            Cash
                                        </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mt-1 pb-1 item item1">
                                <div class="wrap box-wrap">
                                        <span class="key">F8</span>
                                        <div class="icon-text">
                                            Credit
                                        </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mt-1 pb-1 item item1">
                                <div class="wrap box-wrap">
                                        <span class="key">F8</span>
                                        <div class="icon-text">
                                            Card
                                        </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mt-1 pb-1 item item1">
                                <div class="wrap box-wrap">
                                        <span class="key">F8</span>
                                        <div class="icon-text">
                                        Bank Transfer
                                        </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mt-0 pb-1 item item1">
                                <div class="wrap box-wrap">
                                        <span class="key">F8</span>
                                        <div class="icon-text">
                                        Cheques
                                        </div>
                                </div>
                            </div>
                    </div>


                    <div class="row g-1 mt-5">
                        <div class="col-lg-3 mt-1  item">
                                <div class="wrap box-wrap">
                                        <span class="key">F8</span>
                                        <div class="icon-wrap">
                                        <i class="bi bi-percent"></i>
                                        </div>
                                        <div class="icon-text">
                                            Discount
                                        </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mt-1  item">
                                <div class="wrap box-wrap">
                                        <span class="key">F8</span>
                                        <div class="icon-wrap">
                                        <i class="bi bi-chat-left-text"></i>
                                        </div>
                                        <div class="icon-text">
                                            Commnet
                                        </div>
                                </div>
                            </div>

                            <div class="col-lg-6 mt-1  item">
                                <div class="wrap box-wrap">
                                        <span class="key">F8</span>
                                        <div class="icon-wrap">
                                            <i class="bi bi-box"></i>
                                        </div>
                                        <div class="icon-text">
                                            Cash Drawer
                                        </div>
                                </div>
                            </div>

                            <div class="col-lg-3 mt-1  item">
                            <div class="wrap box-wrap">
                                        
                                        <div class="icon-wrap">
                                        <i>F9</i>
                                        </div>
                                        <div class="icon-text">
                                            Save Sale
                                        </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mt-1  item">
                                <div class="wrap box-wrap">
                                       
                                        <div class="icon-wrap">
                                        <i class="bi bi-folder-symlink"></i>
                                        </div>
                                        <div class="icon-text">
                                            Refund
                                        </div>
                                </div>
                            </div>

                            <div class="col-lg-6 mt-1  item">
                                <div class="wrap box-wrap" onclick="goToCheckout();">
                                        
                                        <div class="icon-wrap">
                                        <i>F10</i>
                                        </div>
                                        <div class="icon-text">
                                           Payment
                                        </div>
                                </div>
                            </div>



                            <div class="col-lg-3 mt-1  item">
                                <div class="wrap box-wrap">
                                       
                                        <div class="icon-wrap">
                                        <i class="bi bi-lock"></i>
                                        </div>
                                        <div class="icon-text">
                                            Lock
                                        </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mt-1  item">
                                <div class="wrap box-wrap">
                                       
                                        <div class="icon-wrap">
                                        <i class="bi bi-arrow-repeat"></i>
                                        </div>
                                        <div class="icon-text">
                                            Transfer
                                        </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mt-1  item">
                                <div class="wrap box-wrap">
                                       
                                        <div class="icon-wrap">
                                        <i class="bi bi-trash"></i>
                                        </div>
                                        <div class="icon-text">
                                            Void Order
                                        </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mt-1 item">
                                <div class="wrap box-wrap" style="height: 138px;">
                                       
                                        <div class="icon-wrap">
                                        <i class="bi bi-three-dots"></i>
                                        </div>
                                        <div class="icon-text">
                                            
                                        </div>
                                </div>
                            </div>

                    </div>



                </div>
            </div>
        </div>
    </div>
</section>






<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/select2/js/select2.min.js"></script>
<script src="assets/plugins/owlcarousel/owl.carousel.min.js"></script>
<script src="assets/plugins/sweetalert/sweetalert2.all.min.js"></script>
<script src="assets/plugins/sweetalert/sweetalerts.min.js"></script>

<script>
    document.body.onload = function() {
        loadCartItems();    
    }
    loadCartItems();
  document.onkeyup = function(e) {
    if (e.code === 'F2') {
        searchfocus();
        
    }
  }

  function searchfocus(){
        event.preventDefault();
        document.getElementById('searchinputbox').focus();
  }


  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.getElementById('searchinputbox').addEventListener('keydown', function(event) {
      if (event.key === 'Enter') {
        event.preventDefault(); 
        searchbarcodeProduct();
       
       
      }
    });



function loadCartItems() {
  $.ajax({
    url: "load-left-cart-panel.php",
    type: "POST",
    //data : "proid="+proid+"&",
    success: function (data) {
      $("#right_cart_panel").html(data);
    },
    error: function (jXHR, textStatus, errorThrown) {
      alert(jXHR.responseText);
    },
  });
  //showTotalAmount();
}


function goToCheckout() {


//showTotalAmount();
document.getElementById("cash_type").focus();
$('#myModal').modal('show');

var totalbillvalue = document.getElementById("total_amount_view").innerHTML;
document.getElementById("totalview").innerHTML = "Total : Rs. " + totalbillvalue;
document.getElementById("cashamount").value = totalbillvalue.replace(/\s/g, '');
//showChangeAmount();
}

function cloasemyModal() {
  $("#myModal").modal("hide");
}



function payBill() {
		//showTotalAmount();
		var totalbillvalue = document.getElementById("total_amount_view").innerHTML;
		//var discount_display = document.getElementById("discount_display").innerHTML;
		//discount_display = parseInt(discount_display.replace('Rs.',''));
		//var discount = discount_display;
		var discount = 0;
		var customer = 1;
		var cashamount = document.getElementById("cashamount").value;

		var totalAmountvalue = document.getElementById("cashamount").value;

		var cardno = document.getElementById("cardno").value;
		var cheque = ""; //document.getElementById("cheque").value;
		//var duedate = ""; //document.getElementById("duedate").value;
		var duedate = document.getElementById("cheque_date").value;
		var cheque_number = document.getElementById("cheque_number").value; 
		var pay_type = document.getElementById("cash_type").value;
		var deliveryCost = "0.00"; //document.getElementById("deliveryCostview").innerHTML;
		var country = "0"; //document.getElementById("country").value;
		var city = "0"; //document.getElementById("city").value;
		var branch_id = document.getElementById("branch_id").value;
		var oid = "0";

		$.ajax({
			url: "load-save-new-bill.php",
			type: "POST",
			data: "country=" + country + "& city=" + city + "& deliveryCost=" + deliveryCost + "& totalbillvalue=" + totalbillvalue + "& cashamount=" + cashamount + "& customer=" + customer + "& cardno=" + cardno + "&  cheque=" + cheque + "&  duedate=" + duedate + "& pay_type=" + pay_type + "& totalAmountvalue=" + totalAmountvalue + "& discount=" + discount + "& branch_id=" + branch_id + "& cheque_number=" + cheque_number + "& oid=" + oid + "&",
			success: function(data) {
				if (data > 0) {
					$('#myModal').modal('hide');
					//var totalbillvalue = document.getElementById("total_amount_view").innerHTML = "Order has been saved<br>Order Number : " + data;
					loadCartItems();
					// document.getElementById("searchbarcode").focus();
					//window.open("salesreciept.php?receiptno=" + data + '&paid_amount=' + cashamount, "_blank");
					window.open("salesreciept.php?receiptno=" + data + '&paid_amount=' + cashamount, "_blank");
				} else {
					//alertify.error(data);
				}
			},
			error: function(jXHR, textStatus, errorThrown) {
				alert(jXHR.responseText);
			}
		})

	}













</script>



<div class="modal" tabindex="-1" role="dialog" id="myModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header" style="background-color:#198754;">
				<h5 class="modal-title" style="color:#ffffff;">PAYMENT PANEL</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="cloasemyModal();">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body" id="myModalMsg">

				<div class="row">
					<div id="totalview" style="font-size: 21px;color: black; text-align: center;padding: 5px 0px;font-weight:bold; margin: 10px;">
					</div>

					<div class="col-12 my-1">
						<label style="font-weight:bold;color:#000000;">Payment Option</label>
						<select class="form-select" id="cash_type" onchange="setCardNo();">
							<option value="cash">Cash</option>
							<option value="credit">Credit</option>
							<option value="card">Card</option>
							<option value="banktransfer">Bank Transfer</option>
							<option value="cheques">Cheques</option>
						</select>
					</div>

					<input type="hidden" class="form-control" id="branch_id" value="<?php echo $branch_id; ?>">

					<div class="col-12 my-1" id="cardnoshow" style="display: none;">
						<label style="font-weight:bold;color:#000000;" class="paytype">Card Number</label>
						<input type="number" class="form-control" id="cardno" name="payment_option_number" placeholder="Card No">
					</div>

					<div class="col-12 my-1" id="creditAmount" style="display: none;">
						<label style="font-weight:bold;color:#000000;">Credit Amount</label>
						<input type="text" class="form-control" readonly id="creditAmountvalue" placeholder="Credit Amount">
					</div>

					<div class="col-12 my-1" id="totalcreditAmount" style="display: none;">
						<label style="font-weight:bold;color:#000000;">Credit Amount Left</label>
						<input type="text" class="form-control" readonly id="totalAmountvalue" placeholder="Total Amount">
						<input type="hidden" class="form-control" readonly id="totalAmountvalue2">
					</div>
					<div class="col-12 my-1" id="cheque_datewrap" style="display: none;">
						<label style="font-weight:bold;color:#000000;">Cheque Date</label>
						<input type="text" class="form-control" id="cheque_date" value="" placeholder="Cheque Date">
					</div>
					<div class="col-12 my-1" id="cheque_nowrap" style="display: none;">
						<label style="font-weight:bold;color:#000000;">Cheque Number</label>
						<input type="text" class="form-control" id="cheque_number" value="" placeholder="Cheque Number">
					</div>
					<div class="col-12 my-1" id="cardnoshow">
						<label style="font-weight:bold;color:#000000;">Cash Amount</label>
						<input type="text" class="form-control" id="cashamount" value="" placeholder="Cash Amount" onchange="showChangeAmount();" onkeyup="showChangeAmount();">
					</div>

					<div class="col-12 my-1">
						<button class="btn btn-secondary btn-block" onclick="onlypayBill();" style="background-color:#0000FF;width: 100%;font-weight:700;font-size:22px;"><i class="fa fa-money" aria-hidden="true"></i> PAY</button>
					</div>
					<?php if (!isset($_GET['oid'])) { ?>
					<div class="col-12 my-1">
						<button class="btn btn-success btn-block" onclick="payBill();" style="width: 100%;font-weight:700;font-size:22px;"><i class="fa fa-print" aria-hidden="true"></i> PAY & PRINT</button>
					</div>
					<div class="col-12 my-1">
						<button class="btn btn-secondary btn-block" onclick="onlySaveBill();" style="background-color:#fcba03;width: 100%;font-weight:700;font-size:22px;color:#fff;"><i class="fa fa-money" aria-hidden="true"></i> Save</button>
					</div>
					<div class="col-12 my-1">
						<button class="btn btn-secondary btn-block" onclick="onlySaveBillWithBarcode();" style="background-color:#fcba03;width: 100%;font-weight:700;font-size:22px;color:#fff;"><i class="fa fa-money" aria-hidden="true"></i> Save & Barcode</button>
					</div>
					<?php } ?>
					<div class="col-12 my-1">
						<button class="btn btn-danger btn-block" onclick="deleteAllCart();" style="width: 100%;font-weight:700;font-size:22px;"><i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-file" aria-hidden="true"></i> Clear All</button>
					</div>

					<div id="balanceview" style="font-size: 21px;color: black; text-align: center;padding: 5px 0px;font-weight:bold; margin: 10px;">
					</div>

				</div>

			</div>
		</div>
	</div>
</div>

</body>
</html>

