<div class="container-fluid">
	<div id="loading_wrapper" style="display:none;">
		<div id="loading"></div>
	</div>
	<!-- <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.btn.jcb") %></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-3">	
			<span class="hidden" id="membership_id"><%= @membership_id%></span>
			<span class="hidden" id="member_discount"><%= @member_discount%></span>
			<span class="hidden" id="sub-total"><%= @sub_total%></span>
			<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 for="com_port_name">Select Device</label>
			            <select id="com_port_name" name="com_port_name" class="form-control select col-lg-7 col-md-7 col-sm-7">
			              
			            </select>
			          </div>
			          <hr>
			        </div>

					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
							<label>You can pay up to </label>
							<%@can_junction_pay = @can_junction_pay +@rounding_adj%>
							<input type="text" name="validamount" id="validamount" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@can_junction_pay %>" data-member-value="">
						</div>
						<hr>
					</div>
					<% if @jcbcount != 0 %>
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
							<label>Recent junction pay paid amount </label>
							<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@junction_pay_count %>" data-member-value="">
						</div>
						<hr>
					</div>
					<% end %>
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
							<label>Reference Number</label>
							<input type="text" name="reference_no" id="reference_no" class="form-control col-lg-7 col-md-7 col-sm-7" value="" data-value="<%=@sale_id %>" data-member-value="">
							<br><span id="reference_no_Err" style="color:red;"></span>
						</div>
						<hr>
					</div>
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
							<label>Amount</label>
							<div id="amount" class="form-control col-lg-7 col-md-7 col-sm-7">0.0</div>
						</div>
						<hr>
					</div>
				</div>
			</div>
		</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-6 col-sm-6">
						<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="junction_pay">Pay</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	<input type="hidden" id="sale_id" value="<%= @sale_id %>">
	<div class="col-lg-1 col-md-1 col-sm-1">
		<button type="button" class="btn btn-default  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>
</div>
<script>
	var cashier_type = "<%= @cashier_type %>";  
	$(document).ready(function() {
		setHeaderBreadCrumb(_JUNCTIONPAY_);
		var sale_id = "<%= @sale_id %>";
		var bank_integration = "<%= @bank_integration %>";
		if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
		else {
			$('#validamount').attr("value",parseFloat("<%= @can_junction_pay %>") - parseFloat(localStorage.getItem("cash")));
		}
		
		code2lab.getCommPorts(); //get comportlists from jade
	});

// number key pad
$(document).on('click', '.cashier_number', function(event){
	event.stopPropagation();
	event.preventDefault();
	if(event.handled !== true) {
		var original_value;
		original_value = $('#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"){
				$('#amount').text(input_value);
			}else{
				$('#amount').append(input_value);
			}
			break;

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

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

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


$('#junction_pay').on('click',function(){
	var amount = $('#amount').text();
	var reference_no = $('#reference_no').val();
	var sale_id = "<%= @sale_id %>";
	var receipt_no = "<%= @receipt_no %>";
	var cashier_id = "<%= @cashier_id %>";	
	$("#reference_no_Err").html("");
	if(reference_no.length > 0){
		if(parseFloat(amount) <= parseFloat($("#validamount").attr("value")) && amount > 0){
			$(this).off("click");
			  //start member discount 5% by pay card	
				// var sub_total = $('#sub-total').text();
				// var member_id = $('#membership_id').text();
				// var member_discount = $('#member_discount').text();
				// if (member_id && member_discount) {
				// 	$.ajax({
				// 		type: "POST",
				// 		url: "/origami/" + sale_id + "/member_discount",
				// 		data: {'sale_id':sale_id, 'sub_total':sub_total,'is_card':true },
		        //       success:function(result){           
		        //           }
		        //         });
				// }
		    //end member discount
		    $("#loading_wrapper").show();
		    var com_port = '/dev/' + $("#com_port_name").val();
		    var is_rebate=false;
		    //alert(cashier_id + amount + com_port);
		    code2lab.reqJunctionPay(true, cashier_id, parseFloat(amount), receipt_no, com_port); 

		    resJunctionPayUpdate = function(totalBillAmount , finalBillAmt,giftCardAmount,									voucherAmount,voucherNumber,receiptNumber){
		    	$("#loading_wrapper").hide();

		    	var voucher_no = voucherNumber;
		    	if (voucher_no == ''){
		    		voucher_no = reference_no;
		    	}

				$.ajax({
					type: "POST",
			     	url: "<%= origami_payment_junctionpay_path %>",
			     	data: "gift_amount="+ giftCardAmount + "&voucher_amount=" + voucherAmount + 
			     	"&voucher_no=" + voucher_no + "&sale_id="+ sale_id,
			     	success:function(result){
			     		if(result){			   
			     			var desc = 'Payment Successfully';
			     			// is_rebate get from resJunctionPay and if member
			     			if(is_rebate){ desc = desc + ". And You get Rebate!"}  	

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

		    resJunctionPay = function(memberno,transactionNo,finalBillingAmt){
		    	if(memberno != ''){ is_rebate = true; }
			};

			resError = function(err_message){
				if(err_message != "ERROR: Verification cancelled"){
					$("#loading_wrapper").hide();
		    		swal({
	     				title: "Oops!",
	     				text: err_message,
	     				type: "error",
	     				html: true,
						closeOnConfirm: false,
						closeOnCancel: false,
						allowOutsideClick: false
	     			}, function () {
	     				window.location.href = '/origami/sale/'+ sale_id  +"/"+cashier_type+"/payment/others_payment";
	     			});
				}
		    };
		    // 	$("#loading_wrapper").hide();
		    // 	$.ajax({type: "POST",
		    //      	url: "/origami/payment/"+payment_type,
		    //      	data: "amount="+ finalBillingAmt + "&sale_id="+ sale_id,
		    //      	success:function(result){
		    //      		if(result){
		    //      			swal({
		    //      				title: "Information!",
		    //      				text: "Payment Successfully",
		    //      				html: true,
						// 		closeOnConfirm: false,
						// 		closeOnCancel: false,
						// 		allowOutsideClick: false
		    //      			}, function () {
		    //      				window.location.href = '/origami/sale/'+ sale_id  +"/"+cashier_type+"/payment";
		    //      			});
		    //      		}
		    //      	}
		    //      });
		    // });

		    // var resError = function(message){
		    // 	console.log(message);
		    // 	$("#loading_wrapper").hide();
		    // 	swal ( "Oops" ,  message ,  "error" );
		    // };
		}
	}
});

// var resJunctionPayUpdate = function(totalBillAmount , finalBillAmt,giftCardAmount,voucherAmount,								voucherNumber,receiptNumber){
// 	$("#loading_wrapper").hide();
// 	// alert(voucherNumber + ' ' + totalBillAmount + ' ' + receiptNumber + ' ' + giftCardAmount);
// 	$.ajax({
// 		type: "POST",
//      	url: "<%= origami_payment_junctionpay_path %>",
//      	data: "amount="+ totalBillAmount + "&sale_id="+ sale_id,
//      	success:function(result){
//      		if(result){
//      			swal({
//      				title: "Information!",
//      				text: "Payment Successfully",
//      				html: true,
// 					closeOnConfirm: false,
// 					closeOnCancel: false,
// 					allowOutsideClick: false
//      			}, function () {
//      				window.location.href = '/origami/sale/'+ sale_id  +"/"+cashier_type+"/payment";
//      			});
//      		}
//      	}
//     });
// };
</script>
