sx-fc/app/views/origami/credit_payments/index.html.erb

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <h2>CREDIT PAYMENT</h2>
    </div>
  </div>
  <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="card-block">
          <div class="rebate-form">
           <!-- <div class="row"> -->
           <div class="row">
            <div  class="col-lg-5 col-md-5 col-sm-5">
              <label>You can pay up to </label>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
              <input type="text" name="validamount" id="validamount" class="form-control"  readonly="" value="<%=@can_credit %>" data-member-value="">
            </div>
          </div>
          <hr>
          <!-- </div> -->
          <% if @creditcount != 0 %>
          <!-- <div class="row"> -->
          <div class=" row">
            <div  class="col-lg-5 col-md-5 col-sm-5">
              <label>Recent Credit Amount </label>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
              <input type="text" name="" class="form-control "  readonly="" value="<%=@creditcount %>" data-member-value="">
            </div>
          </div>
          <hr>
          <!-- </div> -->
          <% end %>
          <!-- <div class="row"> -->
          <div class="row">
           <div class="col-lg-5 col-md-5 col-sm-5">
             <label >Recent Credit Amount</label>
           </div>
           <div class="col-lg-6 col-md-6 col-sm-6">
            <input type="text" name="valid_amount" id="valid_amount" class="form-control" value="" data-value="<%=@sale_id %>" data-member-value="">
          </div>
        </div>
        <hr>
        <!-- </div> -->
        <div class="row">
         <div class="col-lg-5 col-md-5 col-sm-5">
          <label>Amount</label>
        </div>
        <div class="col-lg-7 col-md-7 col-sm-7">
          <div id="amount" class="form-control">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="row clearfix">
   <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">
       <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">
       <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">
       <div class="pay purple left" id="credit_pay">Pay</div>
     </div>
   </div>
 </div>

</div>

<div class="col-lg-1 col-md-1 col-sm-1">
  <button type="button" class="btn bg-default m-l-10 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment';"> Back </button>
</div>
</div>
</div>
<script>
  $(document).ready(function() {
    if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
     else {
       $('#validamount').attr("value",parseFloat("<%= @can_credit %>") - 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;
  }
});
  $('#credit_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_credit_path  %>",
        data: "amount="+ amount + "&sale_id="+ sale_id,
        success:function(result){
          if(result){
            swal({
              title: "Infomation!",
              text: "Payment Success",
              type: "success"
            }, function () {
              window.location.href = '/origami/sale/'+ sale_id  + "/payment";
            });            
          }
        }
      });
    }else{
      swal("Alert","Paid Amount is over!","error");
    }
  })
</script>