<div class="container-fluid">
	<!-- <div class="page-header">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="<%=origami_root_path %>"><%= t :home %></a></li>
			<li class="breadcrumb-item"><a href="/origami/sale/<%=@sale_id %>/payment"><%= t("views.btn.payment") %></a></li>
			<li class="breadcrumb-item active"><%= t("views.right_panel.details.redeem") %></li>
			<span class="float-right">
				<%= link_to t('.back',:default => t("views.btn.back")),'/origami/sale/'+@sale_id+'/payment/others_payment'%>
			</span>
		</ol>
	</div> -->
	<div class="row">
		<div class="col-lg-5 col-md-5 col-sm-5">
			<div class="card  m-l-10 m-t-10" style="padding:0px 20px;">
				<div class="rebate-form">
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
							<label class="">You can pay up to </label>
							<%@payment_prices = @payment_prices +@rounding_adj%>
							<input type="text" name="" id="paymentamt" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%= @payment_prices %>" data-value="<%=@sale_id %>" data-member-value="<%= @membership_id %>">
						</div>
						<hr>
					</div>
					<% if @payparcount > 0 %>
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
							<label class="">Recent Payment Amount </label>
							<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%= @payparcount %>" data-value="<%=@sale_id %>" data-member-value="<%= @membership_id %>">
						</div>
						<hr>
					</div>
					<% end %>
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
							<label class="">Available Balance </label>
							<input type="text" name="valid_amount" id="valid_amount" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%=@membership_rebate_balance%>" data-value="<%=@sale_id %>" data-member-value="<%= @membership_id %>">
						</div>
						<hr>
					</div>
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
							<label class="">Payment Balance</label>
							<div id="used_amount" class="form-control col-lg-7 col-md-7 col-sm-7">0.0</div>
						</div>
						<hr>
					</div>
				</div>
			</div>
			<p class="hidden" name="sale_id" id="sale_id" ><%=@sale_id %></p>
			<p class="hidden" name="receipt_no" id="receipt_no" ><%=@sale_data.receipt_no %></p>
			<!-- <% if @payparcount > 0 %>
				<p class="">Last time rebate amount is <%= @payparcount %></p>
			<% end %>
			<p class="">You can rebate upto <span style="color:red;" id="food_prices"><%= @payment_prices %></span></p> -->
		</div>

		<div class="col-lg-6 col-md-6 col-sm-6">
			<div class="m-t-10 p-l-20">
				<div class="row">
					<div class="col-lg-6 col-md-1 col-sm-1">
						<div class="row bottom">
							<div class="col-md-4 cashier_number border-left" data-value="1" data-type="num">1</div>
							<div class="col-md-4 cashier_number border-left" data-value="2" data-type="num">2</div>
							<div class="col-md-4 cashier_number border-left" data-value="3" data-type="num">3</div>
						</div>
						<div class="row bottom">
							<div class="col-md-4 cashier_number border-left" data-value="4" data-type="num">4</div>
							<div class="col-md-4 cashier_number border-left" data-value="5" data-type="num">5</div>
							<div class="col-md-4 cashier_number border-left" data-value="6" data-type="num">6</div>
						</div>
						<div class="row bottom">
							<div class="col-md-4 cashier_number border-left" data-value="7" data-type="num">7</div>
							<div class="col-md-4 cashier_number border-left" data-value="8" data-type="num">8</div>
							<div class="col-md-4 cashier_number border-left" data-value="9" data-type="num">9</div>
						</div>
						<div class="row bottom">
							<div class="col-md-4 cashier_number border-left" data-value="0" data-type="num">0</div>
							<div class="col-md-4 cashier_number border-left" data-value="." data-type="num">.</div>
							<div class="col-md-4 cashier_number border-left" data-value="00" data-type="num">00</div>
						</div>
						<div class="row bottom">
							<div class="col-md-4 cashier_number green border-left" data-type="nett">Nett</div>
							<div class="col-md-4 cashier_number red border-left" data-type="del">Del</div>
							<div class="col-md-4 cashier_number orange border-left" data-type="clr">Clr</div>
						</div>
					</div>
					<div class="col-lg-6 col-md-6 col-sm-6">
						<div class="row bottom m-l-5">
							<div class="cashier_number long border-left" data-value="1000" data-type="add">1000</div>
							<div class="cashier_number long left" data-value="3000" data-type="add">3000</div>
						</div>
						<div class="row bottom m-l-5">
							<div class="cashier_number long border-left" data-value="5000" data-type="add">5000</div>
							<div class="cashier_number long left" data-value="10000" data-type="add">10000</div>
						</div>
						<div class="row bottom m-l-5">
							<div class="pay purple left" id="dinga_payment">Pay</div>
						</div>
					</div>

				</div>
			</div>


		</div>
		<div class="col-lg-1 col-md-1 col-sm-1">
		 <button type="button" class="btn bg-default m-t-10 btn-lg btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/<%= @cashier_type %>/payment/others_payment';"> <i class="material-icons m-t--5">reply</i>Back </button>
		</div>
		<div id="sxModal">
		    <div id="sxModal-Content"><h3>Card Tap</h3></div>
		    <div class="m-r-20" align="right">
		        <button type="button" class="btn btn-lg btn-link bg-red waves-effect btn_cancel">Cancel</button>
		    </div>
		 </div>
	</div>
	<div id="sxModal">
	    <div id="sxModal-Content"><h3>Card Tap</h3></div>
	    <div class="m-r-20" align="right">
	        <button type="button" class="btn btn-lg btn-link bg-red waves-effect btn_cancel">Cancel</button>
	    </div>
	 </div>
</div>

<!-- customer light box -->
<div class="modal fade" id="is_paymemberModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title" id="is_paymemberModalLabel">Are you Member?</h1>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
        <input type="hidden" name="paypar_account_no" id="paypar_account_no" />
        <input type="hidden" name="qr_code" id="qr_code" />
        <div class="row text-center m-t-20">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-lg btn-link bg-primary waves-effect btn_member">Card Member</button>
          </div>

          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <button type="button" class="btn btn-lg btn-link bg-primary waves-effect btn_qr_code">QR Code</button>
          </div>
        </div>
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>   

<script type="text/javascript">
    var cashier_type = "<%= @cashier_type %>"; 
	$(document).ready(function() {
		setHeaderBreadCrumb(_DINGA_);
		if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
		else {
			$('#paymentamt').attr("value",parseFloat("<%= @payment_prices %>") - parseFloat(localStorage.getItem("cash")));
		}
	});

	$(document).on('click', '.cashier_number', function(event){
		event.stopPropagation();
		event.preventDefault();
		if(event.handled !== true) {
			var original_value;
			original_value = $('#used_amount').text();

			var input_value = $(this).attr("data-value");

			var input_type = $(this).attr("data-type");
			switch (input_type) {
				case 'num':
				if (original_value == "0.0"){
					$('#used_amount').text(input_value);
				}else{
					$('#used_amount').append(input_value);
				}
				break;

				case 'add':
				var input_value = $(this).attr("data-value");
				amount = parseInt(input_value) + parseInt(original_value);
				$('#used_amount').html(amount);

				break;
				case 'clr':
				$('#used_amount').html("0.0");
				break;
				case 'del' :
				var cash=$('#used_amount').text();
				$('#used_amount').text(cash.substr(0,cash.length-1));
				break;
				case 'nett':
				var remain_amount = $('#paymentamt').val();
				$('#used_amount').text(remain_amount);
				break;

			}
			event.handled = true;
		} else {
			return false;
		}
	});

	$("#dinga_payment").on('click', function(){
		valid_amount = $("#valid_amount").val();
		sale_id = $("#valid_amount").attr('data-value');
		membership_id = $("#valid_amount").attr('data-member-value');
		payment_amount = parseFloat($("#used_amount").text());
		if(payment_amount > 0){
			if((membership_id!=undefined) && (membership_id!="") && (membership_id > 0)){
				if(payment_amount<=0 ){
					swal ( "Oops" ,  "Please type valid amount!" ,  "warning" );
				}else if(valid_amount< payment_amount){
					swal ( "Oops" ,  "Insufficient Amount!" ,  "warning" );
				}else{
					if(payment_amount <= "<%= @payment_prices %>"){
						$(this).off("click");
						$.ajax({
							type: "POST",
							url:  "<%=origami_payment_dinga_path%>",
							data: {payment_amount:payment_amount,membership_id:membership_id,sale_id:sale_id,transaction_ref:"",account_no:0},
							success: function(result){
								if(result.status == true){
									swal({
										title: "Information!",
										text: result.message,
										html: true,
										closeOnConfirm: false,
										closeOnCancel: false,
										allowOutsideClick: false
									}, function () {
										window.location.href = '/origami/sale/'+ sale_id  + "/"+cashier_type+"/payment"
									});

								}else{
									swal ( "Information" , result.message);
								}
							}
						})
					}else {
						swal ( "Oops" ,  "Payment Amount is over!" ,  "warning" );
					}
				}
			}else{
				$("#is_paymemberModal").show();
				$("#is_paymemberModal").modal({show : true, backdrop: false, keyboard : false});
			}
		}else{
			swal ( "Oops" ,  "Amount should be greater than 0!" ,  "warning" );
		}
	});

	// Read Card Reader
  $(".btn_member").on('click', function(){  
    var cardNo = ""; 
    var customer_id = '';
    var customer_name = '';
    var membership_id = '';
    var membership_type = '';
    var sale_id     = $("#sale_id").text() || 0;
    var receipt_no  = $("#receipt_no").text() || 0;
    var customer_mamber_card_no = 0;

    $("#is_paymemberModal").hide();
    $("#sxModal").show();   
    setTimeout(function(){
      getCardNo();
      $("#sxModal").hide();        
      customer_mamber_card_no = $("#paypar_account_no").val();
      
      if(sale_id != 0 && customer_mamber_card_no != 0){    
        $.ajax({
          type: "POST",
          url: "/origami/"+sale_id+"/send_account" ,
          data: { account_no : customer_mamber_card_no, amount : payment_amount, receipt_no : receipt_no},
          dataType: "json",
          success: function(data) {
          	console.log(data)
            if (data.status == true) {
            	var valid_amount = parseFloat(data.old_balance_amount) - parseFloat(data.reload_amount);
            	$("#valid_amount").val((valid_amount > 0) ? parseFloat(valid_amount) : 0);

              	$.ajax({
					type: "POST",
					url:  "<%=origami_payment_dinga_path%>",
					data: {payment_amount:payment_amount,membership_id:0,sale_id:sale_id,transaction_ref:data.transaction_ref,account_no :customer_mamber_card_no},
					success: function(result){
						console.log(result)
						if(result.status == true){
							swal({
								title: "Information!",
								text: result.message,
								html: true,
								closeOnConfirm: false,
								closeOnCancel: false,
								allowOutsideClick: false
							}, function () {
								 window.location.href = '/origami/sale/'+ sale_id  + "/"+cashier_type+"/payment";
							});

						}else{
							swal ( "Opps",result.message ,"warning" );
						}
					}
				});
            }else{
            	swal({
					  title: 'Oops',
					  text: data.message.toString(),
					  type: 'error',
					  html: true,
					  closeOnConfirm: false,
					  closeOnCancel: false,
					  allowOutsideClick: false
					}, function () {
					 window.location.href = '/origami/sale/'+ sale_id +"/"+cashier_type + "/payment/others_payment/DINGA";
				});
            }

          }
        });                
      }
     },100);
  });

  // Read NFC card no from java
  function getCardNo(){
    code2lab.readNFC();
  }

  // get CardNo from Java
  function setCardNo(cardNo){
    if(cardNo.length == 16){
      $("#paypar_account_no").val(cardNo);
    }
  }

  // QR Code Reader
  $(".btn_qr_code").on('click', function(e){
	    $("#is_memberModal").hide();
	    var code = "";  
	    var customer_id = '';
	    var customer_name = '';
	    var membership_id = '';
	    var membership_type = '';    
	    var receipt_no  = $("#receipt_no").text() || 0;
	    setTimeout(function(){
	      code=getQRCode();
	      if(sale_id != 0 && code != ""){  
	         $.ajax({
	          type: "POST",
	          url: "/origami/"+sale_id+"/send_account" ,
	          data: { account_no : code, amount : payment_amount, receipt_no : receipt_no},
	          dataType: "json",
	          success: function(data) {
	            if (data.status == true) {
	            	var valid_amount = parseFloat(data.old_balance_amount) - parseFloat(data.reload_amount);
	            	$("#valid_amount").val((valid_amount > 0) ? parseFloat(valid_amount) : 0);

	              	$.ajax({
						type: "POST",
						url:  "<%=origami_payment_dinga_path%>",
						data: {payment_amount:payment_amount,membership_id:0,sale_id:sale_id,transaction_ref:data.transaction_ref,account_no:code},
						success: function(result){

							if(result.status == true){
								swal({
									title: "Information!",
									text: result.message,
									html: true,
									closeOnConfirm: false,
									closeOnCancel: false,
									allowOutsideClick: false
								}, function () {
									window.location.href = '/origami/sale/'+ sale_id  + "/"+cashier_type+"/payment";
								});

							}else{
								swal ( "Opps",result.message ,"warning" );
							}
						}
					});
	            }else{
	            	swal({
						  title: 'Oops',
						  text: data.message.toString(),
						  type: 'error',
						  html: true,
						  closeOnConfirm: false,
						  closeOnCancel: false,
						  allowOutsideClick: false
						}, function () {
						window.location.href = '/origami/sale/'+ sale_id +"/"+cashier_type + "/payment/others_payment/DINGA";
					});
	            }
	          }
	        });                
	      }    
	    },100);
	});

	// Read qrcode from java
	function getQRCode(){
		return code2lab.readQRCode();
		$("#qr_code").val(code);  
	}

	function update_sale(membership_id, customer_id, customer_name, sale_id) {
		var customer="";
		if(customer_name != ""){
		  customer = '(' + customer_name + ')';
	}

	swal({
	  title: "Confirmation !",
	  text: 'Are You Sure to assign this customer' + customer + '!',
	  showCancelButton: true,
	  confirmButtonColor: "green",
	  confirmButtonText: "Yes!",
	  cancelButtonClass: 'btn btn-danger',
	  closeOnConfirm: false,
	}, function () {
	  $.ajax({
	    type: "POST",
	    url: "/origami/"+sale_id+"/"+cashier_type+"/customers/update_sale" ,
	    data: {customer_id:customer_id,sale_id:sale_id},
	    dataType: "json",
	    success: function(data) {
	      if(data.status == true)
	      {
	        //change customer detail
	        $("#customer_name").html(customer_name);
	        $("#membership_id").html(membership_id);
	        window.location.href = '/origami/sale/'+sale_id+'/'+cashier_type+'/payment/';
	      }else{
	        swal("Alert!", "Record not found!", "error");
	        location.reload();
	      }
	    }
	  });        
	});
	}

	$(".btn_cancel").on('click',function(){
		$("#sxModal").hide();
	});
</script>
