sx-fc/app/views/origami/payments/show.html.erb

<div class="row">
<div class="col-lg-5 col-md-5 col-sm-3">
    <div class="card"  >
      <div class="card-header">
        <div id="order-title">
        	<span><strong>Receipt No : <%=@sale_data.receipt_no rescue ' '%></strong></span>
          <span style="margin-left: 24%"><strong>Receipt Date : <%=@sale_data.receipt_date.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></strong></span>
        	<span><strong>Table No</strong> <% if @sale_data%>- <%=@sale_data.receipt_no%><% end %></span>
          <span style="margin-left: 27%"><strong>Sale Id</strong> </span><span id="sale_id"><% if @sale_data %><%=@sale_data.sale_id %><% end %></span>
        </div>
      </div>
      <div class="card-block">
        <div class="card-title">
          <table class="table">
            <thead>
              <tr>
                <th style="width:60%; text-align:left">Items</th>
                <th style="width:20%; text-align:right">QTY</td>
                <th style="width:20%; text-align:right">Price</td>
              </tr>
            </thead>
          </table>
        </div>
        <div id="table-details" class="card-text" style="min-height:400px; max-height:400px; overflow-x:scroll">
          <table class="table" id="append-table">
            <tbody>
            <% sub_total = 0 %>
	          <% @sale_data.sale_items.each do |sale_item| %>
	          		<% sub_total += sale_item.qty*sale_item.unit_price%>
	            	<tr>
	                    <td style="width:60%; text-align:left">
	                       <span id="item-name-price"><%=sale_item.product_name%>@<%=sale_item.unit_price%></span>
	                    </td>
	                    <td style="width:20%; text-align:right">
	                      <span id="item-qty"><%=sale_item.qty%></span>
	                    </td>
	                    <td style="width:20%; text-align:right">
	                       <span id="item-total-price"><%=(sale_item.qty*sale_item.unit_price)%></span>
	                    </td>
	                  </tr>
	            <%end %>
            </tbody>
          </table>
        </div>
        <div class="card-footer">
          <table class="table" style="margin-bottom:0px">
            <tfooter>
              <tr>
                <td style="width:80%; text-align:left; border-top:none"><strong>Sub Total</strong></td>
                <td style="width:20%; text-align:right; border-top:none"><strong><span id="sub-total"><%=sub_total%></span></strong></td>
              </tr>
              <tr>
               	<td style="width:80%; text-align:left; border-top:none"><strong>(Discount)</strong></td>
                <td style="width:20%; text-align:right; border-top:none"><strong><span>(<%=@sale_data.total_discount rescue 0%>)</span></strong></td>
              </tr>
                <td style="width:80%; text-align:left; border-top:none"><strong>Tax</strong></td>
                <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@sale_data.total_tax rescue 0%></span></strong></td>
              </tr>
                <td style="width:80%; text-align:left; border-top:none"><strong>Grand Total</strong></td>
                <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@sale_data.grand_total rescue 0%></span></strong></td>
              </tr>
            </tfooter>
          </table>
        </div>
        <div style='text-align:center;margin-top:20px'>
          <!-- <INPUT TYPE="Button" class='btn btn-primary' VALUE="Reprint" onClick="" style='width:120px'/>
        <INPUT TYPE="Submit" class='btn btn-primary' VALUE="CANCEL" action="origami/index" style='width:120px'/> -->
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-5 col-md-5 col-sm-3">
    <div class="row">
      <div class="col-md-8"><strong>AMOUNT DUE</strong></div>
      <div class="col-md-4"><strong><span id="amount_due"><%= @sale_data.grand_total %></span></strong></div>
    </div>
    <hr>
    <div class="row">
      <div class="col-md-8">CASH</div>
      <div class="col-md-4" id="cash" >0.0</div>
    </div>
    <hr>
    <div class="row" id="credit_payment">
      <div class="col-md-8">CREDIT</div>
      <div class="col-md-4">0.0</div>
    </div>
      <hr>
    <div class="row" id="card_payment">
      <div class="col-md-8">OTHERS PAYMENT</div>
      <div class="col-md-4">0.0</div>
    </div>
      <hr>
    <div class="row">
      <div class="col-md-8">BALANCE</div>
      <div class="col-md-4"><span id='balance'><%= @sale_data.grand_total %></span></div>
    </div>
      <hr>
    <div class="row">
      <div class="col-md-12">
         <div class="row">
           <div class="col-md-7">
              <div class="row">
                 <div class="col-md-3 cashier_number" data-value="1" data-type="num">1</div>
                 <div class="col-md-3 cashier_number" data-value="2" data-type="num">2</div>
                 <div class="col-md-3 cashier_number" data-value="3" data-type="num">3</div>
              </div>
            </div>
           <div class="col-md-5">
              <div class="col-md-12 cashier_number long" data-value="1000" data-type="add">1000</div>
           </div>
         </div>
         <div class="row">
           <div class="col-md-7">
             <div class="row">
                <div class="col-md-3 cashier_number" data-value="4" data-type="num">4</div>
                <div class="col-md-3 cashier_number" data-value="5" data-type="num">5</div>
                <div class="col-md-3 cashier_number" data-value="6" data-type="num">6</div>
             </div>
           </div>
           <div class="col-md-5">
             <div class="col-md-12 cashier_number long" data-value="5000" data-type="add">5000</div>
           </div>
         </div>
         <div class="row">
            <div class="col-md-7">
              <div class="row">
                 <div class="col-md-3 cashier_number" data-value="7" data-type="num">7</div>
                 <div class="col-md-3 cashier_number" data-value="8" data-type="num">8</div>
                 <div class="col-md-3 cashier_number" data-value="9" data-type="num">9</div>
              </div>
            </div>
            <div class="col-md-5">
                <div class="col-md-12 cashier_number long" data-value="10000" data-type="add">10000</div>
            </div>
          </div>
          <div class="row">
             <div class="col-md-7">
               <div class="row">
                  <div class="col-md-3 cashier_number" data-value="0" data-type="num">0</div>
                  <div class="col-md-3 cashier_number" data-value="." data-type="num">.</div>
                  <div class="col-md-3 cashier_number" data-value="00" data-type="num">00</div>
               </div>
             </div>
             <div class="col-md-5">
                <div class="col-md-12 cashier_number long" data-value="50000" data-type="add">50000</div>
             </div>
          </div>
          <div class="row">
             <div class="col-md-7">
               <div class="row">
                 <div class="col-md-3 cashier_number"></div>
                 <div class="col-md-3 cashier_number red" data-type="del">DEL</div>
                 <div class="col-md-3 cashier_number green" data-type="clr">CLR</div>
               </div>
             </div>
             <div class="col-md-5">
                <div class="col-md-12 cashier_number long purple " id="pay">PAY</div>
             </div>
           </div>
      </div>
    </div>
  </div>
  </div>

<script>
$(document).on('click', '.cashier_number', function(event){
  if(event.handled !== true) {
      var original_value;
      original_value = $('#cash').text();

      var input_type = $(this).attr("data-type");

      switch (input_type) {
        case 'num':
        var input_value = $(this).attr("data-value");
        if (original_value == "0.0"){
          $('#cash').text(input_value);
          update_balance();
        }else{
          $('#cash').append(input_value);
          update_balance();
        }
        break;
        case 'add':
          var input_value = $(this).attr("data-value");
          amount = parseInt(input_value) + parseInt(original_value);
          $('#cash').text(amount);
          update_balance();
        break;
        case 'del' :
          var cash=$('#cash').text();
          $('#cash').text(cash.substr(0,cash.length-1));
          update_balance();
        break;
        case 'clr':
           $('#cash').text("0.0");
           update_balance();
        break;
    }
      event.handled = true;
    } else {
        return false;
    }
});

$( document ).ready(function() {
  $('#credit_payment').click(function() {
    var sale_id = $('#sale_id').text();
     window.location.href = '/origami/sale/'+ sale_id  + "/payment/credit_payment"
     return false;
 });

 $('#card_payment').click(function() {
   var sale_id = $('#sale_id').text();
    window.location.href = '/origami/sale/'+ sale_id  + "/payment/others_payment"
    return false;
 });

 $('#pay').click(function() {

     if($('#balance').text() > 0){
        alert(" Insufficient Amount!")
     }else{
      //  payment
      var cash = $('#cash').text();
      var credit = $('#credit').text();
      var card = $('#card').text();
      var sale_id = $('#sale_id').text();
      $.ajax({type: "POST",
        url: "<%= origami_payment_process_path %>",
        data: "cash="+ cash + "&sale_id=" + sale_id,
        success:function(result){
          alert("THANK YOU")
        }
      });
   }
 });

});

function update_balance(){
  var cash = $('#cash').text();
  var credit = $('#credit').text();
  var card = $('#card').text();
  var amount_due = $('#amount_due').text();
  var total = cash + credit + card
  var result = amount_due - total
  $('#balance').text(result);
}
</script>