<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.gift_voucher") %></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">
			<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" style="margin-top:10px;padding:20px;">
				<div class="card-block">
					<div class="rebate-form">
						<% if @bank_integration == '1' %>
						<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>
						<% end %>
						<div class="row">
							<div class="form-group col-lg-12 col-md-12 col-sm-12">
								<label>You can pay up to </label>
								<%@can_gift_voucher = @can_gift_voucher +@rounding_adj%>
								<input type="text" name="validamount" id="validamount" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%= @can_gift_voucher %>" data-member-value="">
							</div>
							<hr>
						</div>
						<% if @gift_vouchercount != 0 %>
						<div class="row">
							<div class="form-group col-lg-12 col-md-12 col-sm-12">
								<label>Recent GiftVoucher paid amount </label>
								<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@gift_vouchercount %>" 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>

		<div class="col-lg-6 col-md-6 col-sm-6" style="margin-top:;">
			<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 border-left green" 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="gift_voucher_pay">Pay</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<input type="hidden" id="sale_id" value="<%= @sale_id %>">
		<div class="col-md-1 col-lg-1 col-sm-1">
			 <button type="button" class="btn bg-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(_GIFT_VOUCHER_);
		var sale_id = "<%= @sale_id %>";
		
		if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
			else {
				$('#validamount').attr("value",parseFloat("<%= @can_gift_voucher %>") - parseFloat(localStorage.getItem("cash")));
			}
	});
		
	$(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;
		}
	});
	
	$('#gift_voucher_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 bank_integration = "<%= @bank_integration %>";
		var cashier_type = "<%= @cashier_type %>";
		$("#reference_no_Err").html("");
		if(parseFloat(amount) <= parseFloat($("#validamount").attr("value")) && amount > 0){
			if(reference_no!=""){
				$(this).off("click");
	      		$.ajax({type: "POST",
		          url: "<%= origami_payment_gift_voucher_path %>",
		          data: "amount="+ amount + "&sale_id="+ sale_id + "&reference_no="+reference_no,
		          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";
		              });
		            }
		          }
		        });
			}
			else{
				$("#reference_no_Err").html("can't be blank");
			}

	    }else{
		    if (amount>0) {
		        swal ( "Oops" ,  "Paid Amount is over!" ,  "error" );
			}else{
			    swal ( "Oops" ,  "Enter Amount!" ,  "error" );
			}
		}
	})
</script>

