<div class="container-fluid">
<div class="row">
  <!-- Column Two -->
  <div class="col-lg-11 col-md-11 col-sm-11">
    <div class="card">
      <div class="card-header">
        <div><strong id="order-title">INVOICE DETAILS </strong></div>
      </div>
      <div class="card-block">
        <div class="card-title row">
          <div class="col-lg-6 col-md-6 col-sm-6">
            <p class="m-l-10"> Receipt No: <span id="receipt_no">
                <%= @saleobj.receipt_no rescue '' %>
             </span></p>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 text-right">
            <p class="m-r-10">Date:
              <span id="receipt_date"><%= @saleobj.created_at.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-' %></span>
            </p>
          </div>
        </div>
        <div class="card-title row customer_detail hide">
          <div class="col-lg-6 col-md-6 col-sm-6">
            <p>Customer : <span id="customer_name"></span></p>
          </div>

        </div>
        <div class="card-text dining">
          <table class="table " id="order-items-table">
            <thead>
            <tr>
              <th width="2%">#</th>
              <th class="" width="20%">Items</th>
              <th style="" width="5%">QTY
              </th>
              <th class="" width="10%">Price
              </th>
              <!-- <th class='' width="17%"> Total </th> -->
              <th class='' width="20%"> Action</th>
            </tr>
            </thead>
            <tbody>
            <%
              count = 0
              sub_total = 0
              @saleobj.sale_items.each do |sale_item|
                count += 1
                sub_total = sub_total + sale_item.price
            %>
                <input type="hidden" id="sale_id" value="<%= @saleobj.sale_id %>">
                <%
                  # Can't check for discount
                  unless sale_item.price == 0
                %>
                    <tr>
                      <td class="p-1" width="2%"><%= count %></td>
                      <td class="p-2" width="20%">
                        <%= sale_item.product_name %>
                      </td>
                      <% if sale_item.status != 'void' && sale_item.status != 'edit' && sale_item.status != 'foc' %>
                          <td class="p-1" width="5%">
                            <input id="<%= sale_item.id %>_qty" data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.qty %>" class="form-control " onkeyup="checkQuantity(this.value,'<%= sale_item.id %>');" onkeypress="return isNumberKey(event);" />
                            <span id="<%= sale_item.id %>_qtyErr" style="color:red;"></span>
                          </td>
                          <td class="p-1" width="10%">
                            <input id="<%= sale_item.id %>_price" data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.unit_price %>" class="form-control" onkeypress="return isNumberKey(event);"/>
                            <span id="<%= sale_item.id %>_priceErr" style="color:red;"></span>
                          </td>
                          <!-- <td class='' width="17%">
                        <input id="<%= sale_item.id %>_price" data-id ="<%= sale_item.id %>" type="text" value="<%= sale_item.price %>" class="form-control"/>
                    </td> -->
                          <td class="p-1" width="25%">
                            <button data-id="<%= sale_item.id %>" class='btn btn-lg bg-blue waves-effect update'>Update</button>
                            <button data-id="<%= sale_item.id %>" data-type="void" class='editModal btn btn-lg bg-danger waves-effect' data-toggle="modal" data-target="#editModal">Void</button>

                            <button data-id="<%= sale_item.id %>" data-type="foc" class='editModal btn btn-lg bg-danger waves-effect' data-toggle="modal" data-target="#editModal">FOC</button>
                          </td>

                      <% elsif sale_item.qty.to_i < 0 || sale_item.status == 'edit' %>
                          <td class="p-1" width="5%">
                            <input data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.qty %>" class="form-control" disabled/>
                          </td>
                          <td class='' width="10%">
                            <input data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.unit_price %>" class="form-control" disabled/>
                          </td>
                          <!-- <td class='' width="17%">
                    <input data-id ="<%= sale_item.id %>" type="text" value="<%= sale_item.price %>" class="form-control" disabled/>
                 </td> -->
                          <td class="p-1" width="25%">
                            <button data-id="<%= sale_item.id %>" class='btn btn-lg bg-danger waves-effect cancel'>Cancel
                              Void/Update
                            </button>
                          </td>
                      <% else %>
                          <td class="p-1" width="5%">
                            <input data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.qty %>" class="form-control" disabled/>
                          </td>
                          <td class="p-1" width="10%">
                            <input data-id="<%= sale_item.id %>" type="text" value="<%= sale_item.price %>" class="form-control" disabled/>
                          </td>
                          <td></td>
                      <% end %>
                    </tr>
                <%
                  end
                  end
                %>
            </tbody>
          </table>
        </div>
        <div class="card-footer">
          <table class="table" id="order-charges-table" border="0">
            <tr>
              <td class="p-1" width="50%"><strong>Sub Total:</strong></td>
              <td><strong id="order-sub-total"><%= sub_total %></strong></td>
            </tr>
            <tr class="rebate_amount"></tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="col-md-3">
    <div class="card p-l-15 p-r-15">
      <div class="card-block">
        <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>  
 </div> -->
    <!-- Column Three -->
    <div class="col-lg-1 col-md-1 col-sm-1">
      <!-- Waiter Buttons -->
      <button type="button" class="btn btn-block btn-lg bg-default waves-effect" id='back'><i class="material-icons">reply</i>Back</button>
      <button type="button" class="btn btn-danger btn- action-btn" id='cancel_all_void'>Cancel All Void</button>
      <button type="button" class="btn btn-block btn-lg bg-blue waves-effect" id='apply'>Apply</button>
    </div>
  </div>
</div>


<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title" id="editModalLabel">Please Enter Remark</h4>
      </div>
      <div class="modal-body">
         <input type="textarea" name="remark" class="form-control col-md-12 remark" id="remark">
      </div>
      <div class="modal-footer ">
        <div class="row p-r-20">
          <div class="col-md-5">
            <button type="button" class="btn btn-link p-t-5 p-b-5 bg-red waves-effect" id="action">VOID</button>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-link  p-t-5 p-b-5 bg-blue waves-effect" data-dismiss="modal">CLOSE</button>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>
<script>
var cashier_type = "<%= @cashier_type %>"; 
var access_code  = localStorage.getItem("access_code");
    // Bill Request
    $(document).ready(function () {

        setHeaderBreadCrumb(_SALE_EDIT_);
        $('.editModal').on('click', function () {
        $("#action").attr('data-type', $(this).attr('data-type'));
        $("#action").attr('data-id', $(this).attr('data-id'));
        $("#action").text($(this).attr('data-type'))
    })

        $(".update").on('click', function () {
            var sale_item_id = $(this).attr('data-id');
            var qty          = $('#' + sale_item_id + "_qty").val();
            var price        = $('#' + sale_item_id + "_price").val();
            var qty_status = true;
            var price_status = true;
            if((qty > 0) && (price > 0)){
              qty_status = true;
              price_status = true;
              $('#' + sale_item_id + "_qtyErr").html("");
              $('#' + sale_item_id + "_priceErr").html("");
            }else if((qty > 0) && (price <= 0 || price == '')){
              price_status = false;
              $('#' + sale_item_id + "_qtyErr").html("");
              if(price == ''){
                $('#' + sale_item_id + "_priceErr").html("can't be blank");
              }else{
                $('#' + sale_item_id + "_price").val("");
                $('#' + sale_item_id + "_priceErr").html("Price must be greater than 0");
              }
            }else if((qty <= 0 || qty == '') && (price > 0)){
              qty_status = false;
              if(qty == ''){
                $('#' + sale_item_id + "_qtyErr").html("can't be blank");
              }else{
                $('#' + sale_item_id + "_qty").val("");
                $('#' + sale_item_id + "_qtyErr").html("Quantity must be greater than 0");
              }
              
              $('#' + sale_item_id + "_priceErr").html("");
            }else{
              qty_status = false;
              price_status = false;
              $('#' + sale_item_id + "_qtyErr").html("can't be blank");
              $('#' + sale_item_id + "_priceErr").html("can't be blank");
            }
            
            if(qty_status && price_status){
              var ajax_url      = "/origami/item_edit";
              $.ajax({
                  type: "POST",
                  url: ajax_url,
                  data: 'sale_item_id=' + sale_item_id + "&update_qty=" + qty + "&update_price=" + price+ "&access_code=" + access_code + "&type=" + cashier_type,
                  success: function (result) {
                      swal({
                          title: "Information!",
                          text: "Qty and Price was successfully Updated",
                      }, function () {
                         location.reload();
                      });
                  }
              });
            }
        });

        /*$('.void').on('click', function () {
            var sale_item_id = $(this).attr('data-id');
            var remark = $("#remark").val();
            var ajax_url = "/origami/item_void";
            $.ajax({
                type: "POST",
                url: ajax_url,
                data: 'sale_item_id=' + sale_item_id + "&remark=" + remark,
                success: function (result) {
                    location.reload();
                }
            });
        })

        $('.foc').on('click', function () {
            var sale_item_id = $(this).attr('data-id');
            var ajax_url = "/origami/item_foc";
            $.ajax({
                type: "POST",
                url: ajax_url,
                data: 'sale_item_id=' + sale_item_id + "&remark=" + remark,
                success: function (result) {
                    location.reload();
                }
            });
        })*/

        $('#action').on('click', function () {
            var access_code  = localStorage.getItem("access_code");
            var sale_item_id = $(this).attr('data-id');
            var type       = $(this).attr('data-type');
            var remark       = $("#remark").val();
            if (type=='foc') {
              var ajax_url = "/origami/item_foc";
            }else{
              var ajax_url = "/origami/item_void";
            }
            
            $.ajax({
                type: "POST",
                url: ajax_url,
                data: 'sale_item_id=' + sale_item_id + "&remark=" + remark+ "&access_code=" + access_code + "&type=" + cashier_type,
                success: function (result) {
                    location.reload();
                }
            });
        })

        $('.cancel').on('click', function () {
            var sale_item_id = $(this).attr('data-id');
            var ajax_url = "/origami/item_void_cancel";
            $.ajax({
                type: "POST",
                url: ajax_url,
                data: 'sale_item_id=' + sale_item_id + '&access_code=' + access_code + "&type=" + cashier_type,
                success: function (result) {
                    location.reload();
                }
            });
        })


    })

    
    $('#back').on('click', function () {
        var table_id = '<%= @table_id %>'
        var sale_id = "<%= @saleobj.sale_id %>"
        if (cashier_type=="quick_service" || cashier_type == "food_court") {
          window.location.href = '/origami/sale/'+sale_id+'/'+cashier_type+'/payment/';
        }else{
          window.location.href = '/origami/table/' + table_id;
        }        
    })

    $('#cancel_all_void').on('click', function () {
        var sale_id = "<%= @saleobj.sale_id %>"
        var ajax_url = "/origami/cancel_all_void";
        $.ajax({
            type: "POST",
            url: ajax_url,
            data: 'sale_id=' + sale_id +'&type='+cashier_type,
            success: function (result) {
                location.reload();
            }
        });
    })

    $('#apply').on('click', function () {
        var sale_id = "<%= @saleobj.sale_id %>"
        var ajax_url = "/origami/apply_void";
        var table_id = '<%= @table_id %>'
        $.ajax({
            type: "POST",
            url: ajax_url,
            data: 'sale_id=' + sale_id+'&type='+cashier_type,
            success: function (result) {
              if (cashier_type=="quick_service" || cashier_type=="food_court") {
                window.location.href = '/origami/sale/'+sale_id+'/'+cashier_type+'/payment/';
              }else{
                 window.location.href = '/origami/table/' + table_id;
              } 
               
            }
        });
    })

    $( "input" ).focusin(function() {
      $('.addfocus').removeClass('addfocus'); 
      $( this ).addClass('addfocus');
    });

    $(".cashier_number").on('click', function(event){
      if(event.handled !== true) {
        
        var original_value='';
        original_value = $('.addfocus').val();

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

        switch (input_type) {
          case 'num':
          var input_value = $(this).attr("data-value");         
          if (original_value == "0.0"){
            $('.addfocus').val(input_value);            
          }
          else{
            $('.addfocus').val(original_value + '' + input_value);            
          }
          break;

          case 'add':
          var input_value = $(this).attr("data-value");
          amount = parseInt(input_value);
          $('.addfocus').val(amount);                   
          break;

          case 'del' :
          var discount_text=$('.addfocus').val();
          $('.addfocus').val(discount_text.substr(0,discount_text.length-1));   
          break;

          case 'clr':
          $('.addfocus').val("");              
          break;
        }
        event.handled = true;
      } else {
        return false;
      }
    });

  //check for isNumber
  function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    } else {
      return true;
    }      
  }

  function checkQuantity(obj_value,sale_item_id) {
      if(obj_value == '0'){
        $("#"+sale_item_id+"_qty").val('1');
      }
  }

  function checkPrice(obj_value,sale_item_id) {
      
  }
</script>
