
<div class="row">

	<div class="col-lg-5 col-md-5 col-sm-3">
		<div class="row">
			<div class="col-md-6">
				<h2>VISA</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 class="col-lg-4 col-md-4 col-sm-4">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_visa %>" data-member-value="">
						</div>
						<hr>
					</div>
					<% if @visacount != 0 %>
					<div class="row">
						<div class="form-group col-lg-12 col-md-12 col-sm-12">
								<label class="col-lg-4 col-md-4 col-sm-4">Recent Visa paid amount </label>
									<input type="text" name="" id="" class="form-control col-lg-7 col-md-7 col-sm-7"  readonly="" value="<%=@visacount %>" data-member-value="">
						</div>
						<hr>
					</div>
					<% end %>
		    		<div class="row">
			    		<div class="form-group col-lg-12 col-md-12 col-sm-12">
			      			<label class="col-lg-4 col-md-4 col-sm-4">Reference Number</label>
						      	<input type="text" name="valid_amount" id="valid_amount" class="form-control col-lg-7 col-md-7 col-sm-7" 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 class="col-lg-4 col-md-4 col-sm-4">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" 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="visa_pay">Pay</div>
           </div>
         </div>
      </div>

    </div>

		<div class="col-lg-1 col-md-1 col-sm-1">
			<button type="button" class="btn btn-primary btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
		</div>
</div>

<script>
$(document).ready(function() {
		if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
	  else {
	    $('#validamount').attr("value",parseFloat("<%= @can_visa %>") - 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;
        }
});
  $('#visa_pay').on('click',function(){
    var amount = $('#amount').text();
    var sale_id = "<%= @sale_id %>";
		if(parseFloat(amount) <= parseFloat($("#validamount").attr("value"))){
    $.ajax({type: "POST",
      url: "<%= origami_payment_visa_path  %>",
      data: "amount="+ amount + "&sale_id="+ sale_id,
      success:function(result){
        if(result){
          alert("Payment success")
          window.location.href = '/origami/sale/'+ sale_id  + "/payment";
       }
      }
    });
	}else{
		alert("Paid Amount is over!");
	}
  })
</script>
