
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-3">
    <div class="card"  >
      <div class="card-header">
        <div id="order-title">
          <table>
            <tr>
              <td style="width:50%;"><strong>Receipt No : <%=@sale_data.receipt_no rescue ' '%></strong></td>
              <td style="width:50%;"><strong>Receipt Date : <%=@sale_data.receipt_date.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></strong></td>
            </tr>
            <tr>
              <td><strong>Table No</strong> <% if @sale_data%>- <%=@sale_data.receipt_no%><% end %></td>
              <td><strong>Sale Id</strong> <span id="sale_id"><% if @sale_data %><%=@sale_data.sale_id %><% end %></span></td>
            </tr>
            <tr>
              <td><strong>Customer :</strong> <%= @sale_data.customer.name%></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="card-block">
        <div class="card-title">
          <table >
            <!-- <thead> -->
              <tr>
                <th style="width:5%">#</th>
                <th style="width:76%;">Items</th>
                <th style="width:20%;">QTY</td>
                <th style="width:20%;">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
                count = 0
            %>
	          <% @sale_data.sale_items.each do |sale_item|
                count += 1
               %>

	          		<% sub_total += sale_item.qty*sale_item.unit_price%>
	            	<tr>
                      <td><%= count %></td>
	                    <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>
              <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>
              <tr>
                <td style="width:80%; text-align:left; border-top:none"><strong>Rounding Adj:</strong></td>
                <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@sale_data.rounding_adjustment rescue 0%></span></strong></td>
              </tr>
              <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>
             <%if @balance > 0%>
             <tr>
                <td style="width:80%; text-align:left; border-top:none"><strong><%= @accountable_type %></strong></td>
                <td style="width:20%; text-align:right; border-top:none"><strong><span><%=@balance%></span></strong></td>
              </tr>
              <% end %>
            </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" style="margin-top:10px;">
      <div class="col-md-8"><strong style="font-size:18px;">Amount Due</strong></div>
      <div class="col-md-4"><strong><span id="amount_due" style="font-size:18px;"><%= @sale_data.grand_total %></span></strong></div>
    </div>
    <br>
    <div class="row payment cash-color">
      <div class="col-md-8">Cash</div>
      <div class="col-md-4" id="cash" ><%= @cash %></div>
    </div>

    <div class="row payment credit-color" id="credit_payment" >
      <div class="col-md-8">Credit</div>
      <div class="col-md-4" id="credit"><%= @credit %></div>
    </div>
    <% if @other == 0.0 && @ppamount == 0.0 && @visacount == 0.0 && @jcbcount == 0.0 && @mastercount == 0.0%>
      <div class="row payment other-payment-color" id="card_payment" >
        <div class="col-md-8">Other Payments</div>
        <div class="col-md-4" id="others"><%= @other %></div>
      </div>
    <% else %>
      <div class="row payment other-payment-color" id="card_payment" style="line-height:30px;height: 30px;margin-bottom: 0px;" >
        <div class="col-md-12">Other Payments</div>
      </div>
    <% end %>

       <!-- mpu -->
      <% if @other != 0.0 %>
        <div class="row payment other-payment-color"  style="line-height:30px;height: 30px;margin-bottom: 0px;">
          <div class="col-md-5"></div>
          <div class="col-md-3">MPU</div>
          <div class="col-md-4" id="others"><%= @other %></div>
        </div>
      <% else %>
        <div class="row" style="display:none">
          <div class="col-md-5"></div>
          <div class="col-md-3">MPU</div>
          <div class="col-md-4" id="others">0.0</div>
        </div>
      <% end %>
      <!-- paypar -->
      <% if @ppamount != 0.0 %>
      <div class="row payment other-payment-color"  style="line-height:30px;height: 30px;margin-bottom: 0px;">
        <div class="col-md-5"></div>
        <div class="col-md-3">Redeem</div>
        <div class="col-md-4" id="ppamount"><%= @ppamount %></div>
      </div>
      <% else %>
      <div class="row" style="display:none">
        <div class="col-md-5"></div>
        <div class="col-md-3">Redeem</div>
        <div class="col-md-4" id="ppamount">0.0</div>
      </div>
      <% end %>
      <!-- Visa -->
      <% if @visacount != 0.0 %>
      <div class="row payment other-payment-color"  style="line-height:30px;height: 30px;margin-bottom: 0px;">
        <div class="col-md-5"></div>
        <div class="col-md-3">Visa</div>
        <div class="col-md-4" id="visacount"><%= @visacount %></div>
      </div>
      <% else %>
      <div class="row" style="display:none">
        <div class="col-md-5"></div>
        <div class="col-md-3">Visa</div>
        <div class="col-md-4" id="visacount">0.0</div>
      </div>
      <% end %>
      <!-- JCB -->
      <% if @jcbcount != 0.0 %>
      <div class="row payment other-payment-color"  style="line-height:30px;height: 30px;margin-bottom: 0px;">
        <div class="col-md-5"></div>
        <div class="col-md-3">JCB</div>
        <div class="col-md-4" id="jcbcount"><%= @jcbcount %></div>
      </div>
      <% else %>
      <div class="row" style="display:none">
        <div class="col-md-5"></div>
        <div class="col-md-3">JCB</div>
        <div class="col-md-4" id="jcbcount">0.0</div>
      </div>
      <% end %>
      <!-- Master -->
      <% if @mastercount != 0.0 %>
      <div class="row payment other-payment-color"  style="line-height:30px;height: 30px;margin-bottom: 0px;">
        <div class="col-md-5"></div>
        <div class="col-md-3">Master</div>
        <div class="col-md-4" id="mastercount"><%= @mastercount %></div>
      </div>
      <% else %>
      <div class="row" style="display:none">
        <div class="col-md-5"></div>
        <div class="col-md-3">Master</div>
        <div class="col-md-4" id="mastercount">0.0</div>
      </div>
      <% end %>
      <br>
    <div class="row">
      <div class="col-md-8"><strong style="font-size:18px;">Balance</strong></div>
      <div class="col-md-4"><strong style="font-size:18px;"><span id='balance'><%= @sale_data.grand_total %></span></strong></div>
    </div>
    <br>

      <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="pay">Pay</div>
           </div>
         </div>
      </div>

  </div>
  <div class="col-lg-1 col-md-1 col-sm-1">
    <!-- Waiter Buttons -->

    <button type="button" class="btn btn-primary btn-block" onclick="localStorage.removeItem('cash');window.location.href = '/origami';"> Back </button>
    <button type="button" class="btn btn-primary btn-block"> FOC </button>
    <button type="button" class="btn btn-primary btn-block" id="void"> Void </button>
  </div>
  </div>

<script>
$(document).ready(function(){
  if(localStorage.getItem("cash") == null || localStorage.getItem("cash") == 'null'){}
  else {
    $('#cash').text(localStorage.getItem("cash"));
  }
  update_balance();
})

$(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();
          if(cash.length == 1)
            $('#cash').text("0.0");
          else
            $('#cash').text(cash.substr(0,cash.length-1));
          update_balance();
        break;
        case 'clr':
           $('#cash').text("0.0");
           update_balance();
        break;
        case 'nett':
          var credit1 = $('#credit').text();
          var card1 = $('#others').text();
          var paypar1 = $('#ppamount').text();
          var visa1 = $('#visacount').text();
          var jcb1 = $('#jcbcount').text();
          var master1 = $('#mastercount').text();
          var othertotal = parseFloat(credit1) + parseFloat(card1) + parseFloat(paypar1) + parseFloat(visa1) + parseFloat(jcb1) + parseFloat(master1);
          var total = $('#amount_due').text();
          var amt = parseFloat(total) - othertotal;
          $('#cash').text(amt);
          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() {
   localStorage.setItem("cash",$('#cash').text() );
   var sale_id = $('#sale_id').text();
    window.location.href = '/origami/sale/'+ sale_id  + "/payment/others_payment"
    return false;
 });

 $('#pay').click(function() {
    $('#pay').text("Processing, Please wait!")
     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_cash_path %>",
        data: "cash="+ cash + "&sale_id=" + sale_id,
        success:function(result){
          localStorage.removeItem("cash");
          if($('#balance').text() < 0){
            alert("Changed amount  " + $('#balance').text() * (-1) )
          }else{
            $('#pay').text("Pay")
            alert("Thank you")
          }

          window.location.href = '/origami';
        }
      });
   }
 });

$('#void').on('click',function () {
    var sure = confirm("Are you sure want to Void");
    if (sure == true) {
        var sale_id = $('#sale_id').text();
        var ajax_url = "/origami/sale/" + sale_id + '/void';
        $.ajax({
            type: 'POST',
            url: ajax_url,
            success: function () {
                window.location.href = '/origami/';
            }
        })
    } else {

    }
});

});

function update_balance(){
  var cash = $('#cash').text();
  var credit = $('#credit').text();
  var card = $('#others').text();
  var paypar = $('#ppamount').text();
  var visa = $('#visacount').text();
  var jcb = $('#jcbcount').text();
  var master = $('#mastercount').text();
  var amount_due = $('#amount_due').text();
  var total = parseFloat(cash) + parseFloat(credit) + parseFloat(card) + parseFloat(paypar) + parseFloat(visa) + parseFloat(jcb) + parseFloat(master)
  var result = amount_due - total;
  $('#balance').text(result.toFixed(2));
}

</script>
