<div class="row">

	<div class="col-lg-5 col-md-5 col-sm-3">
			<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 redeem up to </label>
						      	<input type="text" name="" id="redeemamt" class="form-control col-lg-7 col-md-7 col-sm-7" readonly="" value="<%= @redeem_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="col-lg-4 col-md-4 col-sm-4">Recent Redeem 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="col-lg-4 col-md-4 col-sm-4"> Rebate 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="col-lg-4 col-md-4 col-sm-4">Redeem Amount</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>
			<!-- <% 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"><%= @redeem_prices %></span></p> -->
	</div>

    <div class="col-lg-6 col-md-7 col-sm-7">

    	<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="redeem">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-lg btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"> Back </button>
	 </div>
</div>
<div class="row">

</div>
<script type="text/javascript">
$(document).ready(function() {
		if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
	  else {
	    $('#redeemamt').attr("value",parseFloat("<%= @redeem_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 = $('#valid_amount').val();
								$('#used_amount').text(remain_amount);
			        break;

          		}
          	event.handled = true;
        } else {
            return false;
        }
});
$("#redeem").click(function(){
	valid_amount = $("#valid_amount").val();
	sale_id = $("#valid_amount").attr('data-value');
	membership_id = $("#valid_amount").attr('data-member-value');
	redeem_amount = parseFloat($("#used_amount").text());
	if(redeem_amount<=0 ){
		alert("Please type valid amount");

	}else if(valid_amount< redeem_amount){
		alert(" Insufficient Amount!")
	}else{
		if(redeem_amount <= "<%= @redeem_prices %>"){
			$.ajax({
				type: "POST",
				url:  "<%=origami_payment_paypar_path%>",
				data: {redeem_amount:redeem_amount,membership_id:membership_id,sale_id:sale_id},
				success: function(result){
					if(result.status == true){
						window.location.href = '/origami/sale/'+ sale_id  + "/payment"
					}else{
						alert(result.message);
					}
				}
			})
		}else {
			alert("Redeem Amount is over!");
		}
	}
});
</script>
