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

<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.visa") %></li>
      <span class="float-right">
        <%= link_to t('.back',:default => t("views.btn.back")),'/origami/sale/'+@sale_id+'/payment/others_payment'%>
      </span>
    </ol>
  </div> -->
  <h5>VISA Payment</h5>
  <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 m-l-10 m-t-10" style="padding:0px 20px;">
      <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_visa = @can_visa +@rounding_adj%>
          <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>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>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>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="">
  <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 " 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 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="visa_pay">Pay</div>
       </div>
     </div>
   </div>
 </div>
</div>

<div class="col-lg-1 col-md-1 col-sm-1">
 <button type="button" class="btn bg-default m-t-10 btn-block" onclick="window.location.href = '/origami/sale/<%= @sale_id %>/payment/others_payment';"><i class="material-icons m-t--5">reply</i> Back </button>
</div>
</div>
</div>
<script>
  $(document).ready(function() {
    var sale_id = "<%= @sale_id %>";
    var bank_integration = "<%= @bank_integration %>";

    if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
     else {
       $('#validamount').attr("value",parseFloat("<%= @can_visa %>") - parseFloat(localStorage.getItem("cash")));
     }
    
    if(bank_integration == '1'){
      if(typeof code2lab != 'undefined'){
        code2lab.getCommPorts(); //get comportlists from jade
      }
      else{
        swal({
          title: 'Oops',
          text: 'VISA is not available in here!',
          type: 'error',
          html: true,
          closeOnConfirm: false,
          closeOnCancel: false,
          allowOutsideClick: false
        }, function () {
          window.location.href = '/origami/sale/'+ sale_id  + "/payment/others_payment";
        });
      }
    }
    
   });
  $(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 %>";
    var receipt_no = "<%= @receipt_no %>";
    console.log(amount);
    console.log($("#validamount").attr("value"));
    if(parseFloat(amount) <= parseFloat($("#validamount").attr("value")) && amount > 0){
      $(this).off("click");
      //start member discount 5% by pay card  
        // var sub_total = $('#sub-total').text();
        // var member_id = $('#membership_id').text();
        // var member_discount = $('#member_discount').text();
        // if (member_id && member_discount) {
        //   $.ajax({
        //     type: "POST",
        //     url: "/origami/" + sale_id + "/member_discount",
        //     data: {'sale_id':sale_id, 'sub_total':sub_total,'is_card':true },
        //            success:function(result){           
        //            }
        //         });
        // }
      //end member discount
      var bank_integration = "<%= @bank_integration %>";
      if(bank_integration == '1'){
        pay_withBank("SALE", "visa", amount, sale_id, receipt_no);
      }
      else{
        $.ajax({type: "POST",
          url: "<%= origami_payment_visa_path %>",
          data: "amount="+ amount + "&sale_id="+ sale_id,
          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  + "/payment";
              });
            }
          }
         });
      }
    }else{
      if (amount>0) {
        swal ( "Oops" ,  "Paid Amount is over!" ,  "error" );
      }else{
        swal ( "Oops" ,  "Enter Amount!" ,  "error" );
      }
    }
  })
</script>