
<div class="row">

	<div class="col-lg-5 col-md-5 col-sm-3">
		<div class="row">
			<div class="col-md-6">
				<h2>Voucher / Coupon</h2>
			</div>
		</div>
			<div class="card" style="margin-top:10px;padding-top:20px;">
				<div class="rebate-form">
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
								<label>You can pay up to </label>
									<input type="text" name="validamount" id="validamount" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@can_voucher %>" data-member-value="">
						</div>
						<hr>
					</div>
					<% if @vouchercount != 0 %>
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
								<label>Recent Voucher paid amount </label>
									<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@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="valid_amount" id="<%=@sale_id %>" class="form-control col-lg-7 col-md-7 col-sm-7 float-value" value="" data-value="<%=@sale_id %>" data-member-value="">
			    		</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> -->
									<input type="text" name="" id="amount" class="form-control col-lg-7 col-md-7 col-sm-7 float-value" value="" data-value="amount" data-member-value="">
			    		</div>
			    		<hr>
			    	</div>
		    	</div>
			</div>
	</div>

    <div class="col-lg-6 col-md-6 col-sm-6" style="margin-top:75px;">

    	<div class="row">
         <div class="col-lg-6 col-md-1 col-sm-1">
           <div class="row bottom">
             <div class=" cashier_number " data-value="1" data-type="num">1</div>
             <div class=" cashier_number left" data-value="2" data-type="num">2</div>
             <div class=" cashier_number left" data-value="3" data-type="num">3</div>
           </div>
           <div class="row bottom">
             <div class=" cashier_number " data-value="4" data-type="num">4</div>
             <div class=" cashier_number left" data-value="5" data-type="num">5</div>
             <div class=" cashier_number left" data-value="6" data-type="num">6</div>
           </div>
           <div class="row bottom">
             <div class=" cashier_number " data-value="7" data-type="num">7</div>
             <div class=" cashier_number left" data-value="8" data-type="num">8</div>
             <div class=" cashier_number left" data-value="9" data-type="num">9</div>
           </div>
           <div class="row bottom">
             <div class=" cashier_number " data-value="0" data-type="num">0</div>
             <div class=" cashier_number left" data-value="." data-type="num">.</div>
             <div class=" cashier_number left" data-value="00" data-type="num">00</div>
           </div>
           <div class="row bottom">
             <div class=" cashier_number green" data-type="nett" >Nett</div>
             <div class=" cashier_number red left" data-type="del">Del</div>
             <div class=" cashier_number orange left" data-type="clr">Clr</div>
           </div>
         </div>
         <div class="col-lg-6 col-md-1 col-sm-1">
           <div class="row bottom">
             <div class="cashier_number long" 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">
             <div class="cashier_number long" 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">
             <div class="pay purple" id="voucher_pay">Pay</div>
           </div>
         </div>
      </div>

    </div>

		<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';"> Back </button>
		</div>
</div>

<script>
$(document).ready(function() {
      	setHeaderBreadCrumb(_VOUCHER_);

		if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
	  else {
	    $('#validamount').attr("value",parseFloat("<%= @can_voucher %>") - parseFloat(localStorage.getItem("cash")));
	  }
});
// number key pad
var float_value = ""
var total = 0

$(document).on('focusout', '.float-value', function(event){
 float_value = $(this).attr("data-value");
$(document).on('click', '.cashier_number', function(event){
        event.stopPropagation();
        event.preventDefault();
        if(event.handled !== true) {
            var original_value;
            original_value = $('#'+float_value).val();

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

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

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

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

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


  $('#voucher_pay').on('click',function(){
    var amount = $('#amount').val();
		var refnumber = $("#<%=@sale_id %>").val();
    var sale_id = "<%= @sale_id %>";
		if(parseFloat(amount) <= parseFloat($("#validamount").attr("value")) ){
			// alert(amount);
			// alert(refnumber);
	    $.ajax({type: "POST",
	      url: "<%= origami_payment_voucher_path  %>",
	      data: "amount="+ amount + "&sale_id="+ sale_id+ "&refnumber="+ refnumber,
	      success:function(result){
	        if(result){
	          alert("Payment success")
	          window.location.href = '/origami/sale/'+ sale_id  + "/payment";
	       }
	      }
	    });
		}else{
			alert("Paid Amount is over!");
		}
  })
</script>
