<div class="container-fluid">
  <div id="loading_wrapper" style="display:none;">
    <div id="loading"></div>
  </div>

  <div class="row clearfix">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="card">
        <div class="card-header m-l-5 m-r-5">
          <div id="order-title">
            <div class="row p-l-5 p-r-5">
              <div class="col-lg-6 col-md-6 col-sm-6"><strong>Receipt No :</strong> <span id="receipt_no"><%=@sale_data.receipt_no rescue ' '%></span></div>
              <div class="col-lg-6 col-md-6 col-sm-6 text-left"><strong>Receipt Date :</strong> <span id="receipt_date"><%=@sale_data.receipt_date.utc.getlocal.strftime("%d/%m/%Y-%I:%M %p") rescue '-' %></span></div>
            </div>
            <div class="row p-l-5 p-r-5">
              <div class="col-lg-6 col-md-6 col-sm-6"><strong>Table No :</strong> <%=@table_no%></div>
              <div class="col-lg-6 col-md-6 col-sm-6 text-left"><strong>Sale ID :</strong> <span id="sale_id"><% if @sale_data %><%=@sale_data.sale_id %><% end %></span></div>
            </div>
            
            <div class="row p-l-5 p-r-5">
              <div class="col-lg-6 col-md-6 col-sm-6"><strong>Customer :</strong> <%= @sale_data.customer.name%> <span class="hidden" id="membership_id"><%= @sale_data.customer.membership_id%></span>
                <span class="hidden" id="member_discount"><%= @member_discount%></span></div>
              <div class="col-lg-6 col-md-6 col-sm-6 text-left"><strong>Checkin Time : </strong> <%= @checkin_time.utc.getlocal.strftime("%I:%M %p") %></div>
            </div>
          </div>
        </div>

        <div class="card-block m-l-5 m-r-5 m-t--10">
          <div class="card-title">
            <div id="table-details" class="card-text" >
              <table class="table" id="append-table">
                <tr>
                  <!-- <tr> -->
                  <th>#</th>
                  <th class="item-name">Items</th>
                  <th class="item-attr">QTY</th>
                  <th class="item-attr">Price</th>
                  <!-- </tr> -->
                </tr>
              </table>
            </div>
          </div>
          <div id="order-detail-slimscroll" data-height="300">
            <!-- <div id="table-details" class="card-text" style="min-height:400px; max-height:400px; overflow-x:scroll"> -->
            <div id="table-details" class="card-text m-t--10" >
              <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.price%>
                    <tr>
                      <td><%= count %></td>
                      <td class="item-name"><%=sale_item.product_name%>@<%=sale_item.unit_price%></td>
                     <td class="item-attr"><%=sale_item.qty%></td>
                    <td class="item-attr"><%=(sale_item.price)%></td>
                 </tr>
                 <%end %>
               </tbody>
             </table>
           </div>
         </div>
       </div>
       <div class="card-footer ">
         <table class="table m-t--10 ">
          <tfooter>
            <tr>
              <td class="charges-name"><strong>Sub Total</strong></td>
              <td class="item-attr"><strong><span id="sub-total"><%=sub_total%></span></strong></td>
            </tr>
            <tr>
              <%if @sale_data.discount_type == 'member_discount'%>
              <td class="charges-name"><strong>Member Discount:</strong></td>
              <%else%>
              <td class="charges-name"><strong>(Discount)</strong></td>
              <%end%>
              <td class="item-attr"><strong><span>(<%=@sale_data.total_discount rescue 0%>)</span></strong></td>
            </tr>
            <tr>
              <td class="charges-name"><strong>Tax
              (<% @i = 0
               @account_arr.each do |ct| %>
              <%=ct.name%>
             <% if @account_arr.count != @i+1%>
              +       <% @i =+1 %>
             <%end%>
              <%end %>)
              </strong></td>
              <td class="item-attr"><strong><span><%=@sale_data.total_tax rescue 0%></span></strong></td>
            </tr>
            <tr>
              <td class="charges-name"><strong>Rounding Adj:</strong></td>
              <td class="item-attr"><strong><%= @sale_data.rounding_adjustment rescue 0%></strong></td>
            </tr>
            <tr>
              <td class="charges-name"><strong>Grand Total</strong></td>
              <td class="item-attr"><strong><span><%=@sale_data.grand_total rescue 0%></span></strong></td>
            </tr>
            <%if @balance > 0%>
            <tr>
              <td class="charges-name"><strong><%= @accountable_type %></strong></td>
              <td class="item-attr"><strong><span><%=@balance%></span></strong></td>
            </tr>
            <% end %>
          </tfooter>
        </table>
      </div>
     <!-- <div> -->
  <!-- <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 class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
  <div class="card">
    <div class="card-header">
      <div class="row m-l-5 m-r-5">
        <div class="col-md-8"><strong>Amount Due</strong></div>
        <div class="col-md-4">
          <strong>
            <span id="grand_total" class="hidden"><%= @sale_data.grand_total rescue 0%></span>
            <span id="amount_due"><%= @sale_data.grand_total rescue 0%></span></strong>
        </div>
      </div>
     
      <div class="row payment cash-color p-l-5 p-r-5">
        <div class="col-md-8">Cash</div>
        <div class="col-md-4" id="cash" ><%= @cash %></div>
      </div>

      <div class="row payment credit-color p-l-5 p-r-5" 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"  >
        <div class="col-md-12">Other Payments</div>
      </div>
      <% end %>
    </div>
    <div class="card-block">
      <div class="card-title m-l-5 m-r-5">
        <!-- mpu -->
        <% if @other != 0.0 %>
        <div class="row payment others-color">
          <div class="col-md-5"></div>
          <div class="col-md-3">MPU</div>
          <div class="col-md-4 mpu is_card" id="others"><%= @other %></div>
        </div>
        <% else %>
        <div class="row hidden">
          <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 others-color">
          <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 hidden">
          <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 others-color">
          <div class="col-md-5"></div>
          <div class="col-md-3">Visa</div>
          <div class="col-md-4 visa is_card" id="visacount"><%= @visacount %></div>
        </div>
        <% else %>
        <div class="row hidden">
          <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 others-color">
          <div class="col-md-5"></div>
          <div class="col-md-3">JCB</div>
          <div class="col-md-4 jcb is_card" id="jcbcount"><%= @jcbcount %></div>
        </div>
        <% else %>
        <div class="row hidden">
          <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 others-color">
          <div class="col-md-5"></div>
          <div class="col-md-3">Master</div>
          <div class="col-md-4 master is_card" id="mastercount"><%= @mastercount %></div>
        </div>
        <% else %>
        <div class="row hidden">
          <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 m-l-5 m-r-5">
          <div class="col-md-8"><strong>Balance</strong></div>
          <div class="col-md-4"><strong><span id='balance'><%= @sale_data.grand_total rescue 0 %></span></strong></div>
        </div>
        <!-- <br> -->
      </div>
    </div>

    <div class="card-footer">
      <div class="row m-l-5 m-r-5">
       <div class="col-lg-6 col-md-6 col-sm-6">
         <div class="row bottom">
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="1" data-type="num">1</div>
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="2" data-type="num">2</div>
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="3" data-type="num">3</div>
         </div>
         <div class="row bottom">
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="4" data-type="num">4</div>
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="5" data-type="num">5</div>
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="6" data-type="num">6</div>
         </div>
         <div class="row bottom">
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="7" data-type="num">7</div>
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="8" data-type="num">8</div>
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="9" data-type="num">9</div>
         </div>
         <div class="row bottom">
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="0" data-type="num">0</div>
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="." data-type="num">.</div>
           <div class="col-md-4 cashier_number border-top border- border-left" data-value="00" data-type="num">00</div>
         </div>
         <div class="row bottom">
           <div class="col-md-4 cashier_number border-top border- border-left green" data-type="nett">Nett</div>
           <div class="col-md-4 cashier_number border-top border- border-left red" data-type="del">Del</div>
           <div class="col-md-4 cashier_number border-top border- border-left orange" 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 border-top border- border-left payment-long payment-left" data-value="1000" data-type="add">1000</div>
           <div class="cashier_number border-top border- border-left payment-long" data-value="3000" data-type="add">3000</div>
         </div>
         <div class="row bottom">
           <div class="cashier_number border-top border- border-left payment-long payment-left" data-value="5000" data-type="add">5000</div>
           <div class="cashier_number border-top border- border-left payment-long" data-value="10000" data-type="add">10000</div>
         </div>
          <div class="row bottom">
           <div class="pay border-top border- border-left purple payment-left" id="pay">Pay</div>
          </div>
       </div>
     </div>
   </div>
 </div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
  <button type="button" class="btn btn-block btn-default waves-effect" id='back'>
    <i class="material-icons">reply</i>
     Back
  </button>
  <button type="button" class="btn bg-deep-purple btn-block" id="foc" active="<%= can? :foc, :payment %>"> FOC </button>
  <button type="button" class="btn bg-red btn-block" id="void" active="<%= can? :overall_void, :void %>"> Void </button>
  <!-- Waiter Buttons -->
</div>

</div>
</div>

<script>
  $(document).ready(function(){
    /* start check first bill or not*/
        var receipt_no = "";
        if(($("#receipt_no").html()!=undefined) && ($("#receipt_no").html()!="")){
          receipt_no = ($("#receipt_no").html()).trim();
        }

      payment_type =  checkReceiptNoInFirstBillData(receipt_no,"payment")
        if(payment_type=="Cash"){
           $("#card_payment").hide();
           $("#credit_payment").hide();
        }else if(payment_type=="Credit"){
           $("#card_payment").hide();
        }
    
      /* end check first bill or not*/
    var dining_id = "<%= @sale_data.bookings[0].dining_facility_id %>";

    $("#back").on('click', function() {
      localStorage.removeItem('cash');
      window.location.href = '/origami/table/'+ dining_id;
    });

    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() {
    // Disable click event cash to prevent
    $(".payment .cash-color").off('click');

    $('#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() {
      sub_total = $('#sub-total').text();
      if (payment_type == 'MPU' && $('.mpu').text() == 0 && sub_total != 0.0) {
          swal("Opps","Please Pay with MPU Payment","warning");
      }else if(payment_type == "Redeem" && $('#ppamount').text()==0 && sub_total != 0.0){
          swal("Opps","Please Pay with Redeem Payment","warning");
      }else if(payment_type == "VISA" && $('#visacount').text()==0 && sub_total != 0.0){
          swal("Opps","Please Pay with Visa Payment","warning");
        
      }else if(payment_type == "JCB" && $('#jcbcount').text()==0 && sub_total != 0.0){
          swal("Opps","Please Pay with jcb Payment","warning");
      }
      else if(payment_type == "Master" && $('#mastercount').text()==0 && sub_total != 0.0){
          swal("Opps","Please Pay with Master Payment","warning");
      }else{

        $( "#loading_wrapper").show();
        if($('#balance').text() > 0){
          swal ( "Oops", "Insufficient Amount!" ,  "error" );
          $("#loading_wrapper").hide();
        }else{
          $(this).off("click");
          var sale_id   = $('#sale_id').text();
          // var item_row  = $('.is_card');

          // if (item_row.length < 1) {
            calculate_member_discount(sale_id);
          // }
         
            //  payment
            var cash = $('#cash').text();
            var credit = $('#credit').text();
            var card = $('#card').text();
            
            $.ajax({type: "POST",
              url: "<%= origami_payment_cash_path %>",
              data: "cash="+ cash + "&sale_id=" + sale_id,
              async: false,
              success:function(result){
                /* start delete receipt no in first bill*/
                if(($("#receipt_no").html()!=undefined) && ($("#receipt_no").html()!="")){
                  var receipt_no = ($("#receipt_no").html()).trim();
                  deleteReceiptNoInFirstBillData(receipt_no);
                }
                /* end delete receipt no in first bill*/

                localStorage.removeItem("cash");             
                if (result.status) {
                  var msg = result.message;
                }
                else{
                  var msg = '';
                }
                $( "#loading_wrapper" ).hide();
                if($('#balance').text() < 0){
                  swal({
                    title: "Information!",
                    text: 'Changed amount  ' + $('#balance').text() * (-1),
                    html: true,
                    closeOnConfirm: false,
                    closeOnCancel: false,
                    allowOutsideClick: false
                  }, function () {
                    window.location.href = '/origami';
                  });
                }else{         
                  $('#pay').text("Pay");
                  swal({
                   title: "Information!",
                   text: 'Thank You !',
                   html: true,
                   closeOnConfirm: false, 
                   closeOnCancel: false,
                   allowOutsideClick: false
                 }, function () {
                  window.location.href = '/origami';
                });
                }
              }
            });
          }
        }
    });

    $('#void').on('click',function () {
      if ($(this).attr('active') === "true") { 
        swal({
           title: "Information!",
           text: 'Are you sure want to Void !',
          }, function () {
            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{
        swal("Opps","You are not authorized for void","warning")
      }
      
    });
  });

  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));
  }

  $('#foc').click(function() {
    //$( "#loading_wrapper" ).show();
        //  payment
        var cash = $('#grand_total').text();
        var sub_total = $('#sub-total').text();
        var sale_id = $('#sale_id').text();
        var params = { 'cash':cash,'sale_id':sale_id,'sub_total':sub_total };

        if ($(this).attr('active')=== "true") {  
        $.ajax({
          type: "POST",
          url: "<%= origami_payment_foc_path %>",
          data: params,
          success:function(result){          

            //$( "#loading_wrapper" ).hide();
            
            if (cash >= 0) {
              swal({
               title: "Information!",
               text: 'Thank You !',
             }, function () {
              window.location.href = '/origami';
            });
            }
            
          }
        });
        }else{
          swal("Opps","You are not authorized for foc","warning")
        }
      });

  function calculate_member_discount(sale_id) {
   var sub_total = $('#sub-total').text();
   var member_id = $('#membership_id').text();
   var member_discount = $('#member_discount').text();
   var item_row  = $('.is_card');

   if (member_id && member_discount) {
     if (item_row.length < 1) {
       is_card = false
     }else{
      is_card = true
     }
    $.ajax({
      type: "POST",
      url: "/origami/" + sale_id + "/member_discount",
      data: {'sale_id':sale_id, 'sub_total':sub_total,'is_card':is_card },
      async: false,
      success:function(result){ 
      }
    });
  }
}
</script>