sx-fc/app/views/foodcourt/sale_edit/edit.html.erb

<div class="container-fluid">
<div class="row">
  <!-- Column Two -->
  <div class="col-lg-7 col-md-7 col-sm-7">
    <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.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>
              <% sub_total = BigDecimal("0.0") %>
              <% count = 0 %>
              <% @saleobj.sale_items.each do |sale_item| %>
              <% sub_total = sub_total + sale_item.price %>
                <input type="hidden" id="sale_id" value="<%= @saleobj.sale_id %>">
                <% if sale_item.price > 0 %>
                <% count += 1 %>
                <tr class="item-row">
                  <td class="p-1" width="2%"><%= count %></td>
                  <td class="p-2" width="20%">
                    <% if sale_item.foc_item %>
                    <span><%= sale_item.foc_item.product_name %></span>
                    <% elsif sale_item.void_item %>
                    <span><%= sale_item.void_item.product_name %></span>
                    <% else %>
                    <span><%= sale_item.product_name %></span>
                    <% end %>
                    <% if sale_item.discount_item %>
                    <% if sale_item.discount_item.nett? %>
                    <div id="item-discount" class="text-secondary">With a <strong><%= number_format(sale_item.discount_item.discount) %></strong> discount</div>
                    <% elsif sale_item.discount_item.percentage? %>
                    <div id="item-discount" class="text-secondary">With a <strong><%= number_format(sale_item.discount_item.discount, precision: 0) %>%</strong> discount</div>
                    <% end %>
                    <% end %>
                  </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="p-1" width="25%">
                    <button data-id="<%= sale_item.id %>" class='btn btn-lg btn-primary waves-effect update'>Update</button>
                    <button data-id="<%= sale_item.id %>" data-type="void" class='editModal btn btn-lg btn-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 btn-danger waves-effect' data-toggle="modal" data-target="#editModal">FOC</button>
                  </td>
                  <% elsif sale_item.status == 'foc' || sale_item.status == 'void' %>
                  <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="p-1" width="25%">
                    <button data-id="<%= sale_item.id %>" class='btn btn-lg btn-danger waves-effect cancel'>Cancel
                      <%= sale_item.status %>
                    </button>
                  </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-4 col-lg-4 col-sm-4">

      <div class="p-l-20">
              <div class="row bottom">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 m-l--5">
                <div class="row m-l--5">
                  <div class="col-md-3 left cashier_number" data-value="1" data-type="num">1</div>
                  <div class="col-md-3 left cashier_number" data-value="2" data-type="num">2</div>
                  <div class="col-md-3 left cashier_number" data-value="3" data-type="num">3</div>
                </div>
              </div>
            </div>

            <div class="row bottom">
              <div class="col-md-12 m-l--5">
                <div class="row m-l--5">
                  <div class="col-md-3 left cashier_number" data-value="4" data-type="num">4</div>
                <div class="col-md-3 left cashier_number" data-value="5" data-type="num">5</div>
                <div class="col-md-3 left cashier_number" data-value="6" data-type="num">6</div>
                </div>
              </div>
            </div>

            <div class="row bottom">
              <div class="col-md-12 m-l--5">
                <div class="row m-l--5">
                  <div class="col-md-3 left cashier_number" data-value="7" data-type="num">7</div>
                <div class="col-md-3 left cashier_number" data-value="8" data-type="num">8</div>
                <div class="col-md-3 left cashier_number" data-value="9" data-type="num">9</div>
                </div>
              </div>
            </div>

            <div class="row bottom">
              <div class="col-md-12 m-l--5">
                <div class="row m-l--5">
                  <div class="col-md-3 left cashier_number" data-value="0" data-type="num">0</div>
                <div class="col-md-3 left cashier_number" data-value="." data-type="num">.</div>
                <div class="col-md-3 left cashier_number" data-value="00" data-type="num">00</div>
                </div>
              </div>
            </div>

            <div class="row bottom">
              <div class="col-md-12 m-l--5">
                <div class="row m-l--5">
                  <div class="col-md-3 left cashier_number"></div>
                <div class="col-md-3 left cashier_number red" data-type="del">DEL</div>
                <div class="col-md-3 left cashier_number green" data-type="clr">CLR</div>
                </div>
              </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 bg-default waves-effect" id='back'><i class="material-icons">reply</i>Back</button>
      <button type="button" class="btn btn-block btn-default waves-effect" id='refresh'>Refresh</button>
      <hr>
      <button type="button" class="btn btn-block btn-danger waves-effect" id='cancel_all_void'>Cancel All</button>
      <button type="button" class="btn btn-block btn-primary 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");
var queryParams = new URLSearchParams(window.location.search);

    // 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      = "/foodcourt/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 = "/foodcourt/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 = "/foodcourt/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 = "/foodcourt/item_foc";
            }else{
              var ajax_url = "/foodcourt/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 = "/foodcourt/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=="food_court"  && queryParams.get('payment_type') == 'qr') {
          window.location.href = '/foodcourt/'+sale_id+'/'+'qrpay/precreate';
        } else if(cashier_type == "food_court") {
          window.location.href = '/foodcourt/sale/'+sale_id+'/'+cashier_type+'/payment/';
        }
    })

    $('#cancel_all_void').on('click', function () {
        var sale_id = "<%= @saleobj.sale_id %>"
        var ajax_url = "/foodcourt/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 = "/foodcourt/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=="food_court"  && queryParams.get('payment_type') == 'qr') {
                window.location.href = '/foodcourt/'+sale_id+'/'+'qrpay/precreate';
              } else if(cashier_type == "food_court") {
                window.location.href = '/foodcourt/sale/'+sale_id+'/'+cashier_type+'/payment/';
              }
            }
        });
    })

    $( "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');
      }
  }
</script>