create.blade.php

<div class="container-fluid pt-2 pb-2 pl-4 pr-4">
    @if ($errors->any())
          <div class="alert alert-danger">
              <ul>
                  <li>Please complete the required fields below!</li>
              </ul>
          </div>
      @endif

      {!!Form::open(array('route'=>'insert','id'=>'frmsave','method'=>'post'))!!}
        @csrf
      <div class="row">
        <div class="col-md-4 order-md-2 mb-4">
          <h4 class="d-flex justify-content-between align-items-center mb-3">
            <span class="text-muted">Order Total</span>
          </h4>
          <ul class="list-group mb-3">
             <!-- Discount Total
            <li class="list-group-item d-flex justify-content-between">
              <label for="orderTotal">Discount</label>
              <span>
              <div class="input-group col-9 float-right nopadding">
                  <div class="input-group-prepend">
                    <span class="input-group-text"><b>RM</b></span>
                  </div>
                   <input type="text" class="form-control" id="dicountTotal" name="discountTotal" value="" readonly="readonly" jAutoCalc="SUM({orderDis[]})">
                </div>
              </span>
            </li>
          -->
            <li class="list-group-item d-flex justify-content-between">
              <label for="orderTotal">Total</label>
              <span>
              <div class="input-group col-9 float-right nopadding">
                  <div class="input-group-prepend">
                    <span class="input-group-text"><b>RM</b></span>
                  </div>
                   <input type="text" class="form-control" id="orderTotal" name="orderTotal" value="" readonly="readonly" jAutoCalc="SUM({orderPerAmount[]})">
                </div>
              </span>
            </li>
          </ul>

            <hr class="mb-4">
            {!!Form::submit('Save',array('class'=>'btn btn-success btn-lg btn-block','id'=>'btnsave'))!!}
        </div>

        <div class="col-md-8 order-md-1">
          <h4 class="mb-3">New Order</h4>

          <div class="row">
              <div class="col-md-12 mb-12">
                <label for="orderId">Order No.</label>
                <input type="text" class="form-control is-valid" id="orderId" name="orderId" value="<?php use App\Http\Controllers\Order\OrderController;
echo OrderController::generateOrderNR(); ?>" readonly="readonly">
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 mb-12 mt-2">
                <label for="customerId">Customer</label>
                <select class="custom-select" name="customerId" id="customerId">
                  <option></option>
                  @foreach($customers as $customer)
                  <option value="{{$customer['customerId']}}" {{(old('customerId')==$customer->customerId)? 'selected':''}}>{{$customer['customerName']}}</option>
                  @endforeach
                </select>
                @if ($errors->has('customerId'))
                   <div class="text-danger">
                    <small>{{ $errors->first('customerId') }}</small>
                  </div>
               @endif
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 mb-12 mt-2">
                <label for="orderStatusId">Status</label>
                <select  class="custom-select" name="orderStatusId" id="orderStatusId">
                  <option></option>
                  @foreach($order_statuses as $order_status)
                  <option value="{{$order_status['orderStatusId']}}" {{(old('orderStatusId')==$order_status->orderStatusId)? 'selected':''}}>{{$order_status['orderStatusName']}}</option>
                  @endforeach
                </select>
                @if ($errors->has('orderStatusId'))
                   <div class="text-danger">
                    <small>{{ $errors->first('orderStatusId') }}</small>
                  </div>
               @endif
              </div>
            </div>

            <!-- This will show up when status order changed to "Paid" -->
            <div class="row">
              <div class="col-md-12 mb-12 mt-2">
                <label for="paymentMethodId">Payment Method</label>
                <select  class="custom-select" name="paymentMethodId" id="paymentMethodId">
                  <option></option>
                  @foreach($payment_methods as $payment_method)
                  <option value="{{$payment_method['paymentMethodId']}}" {{(old('paymentMethodId')==$payment_method->paymentMethodId)? 'selected':''}}>{{$payment_method['paymentMethodName']}}</option>
                  @endforeach
                </select>
                @if ($errors->has('paymentMethodId'))
                   <div class="text-danger">
                    <small>{{ $errors->first('paymentMethodId') }}</small>
                  </div>
               @endif
              </div>
            </div>

            <div class="row">
              <div class="col-md-12 mb-3 mt-2">
                    <label for="tbl-products">Product</label>

                    <div id="newRow">

            @if(Form::old('productSku'))
                @foreach(old('productSku') as $key => $val)
                    <table id="tbl-products" name="line_items" class="table table-bordered tbl-products">
                    <thead>
                      <th colspan="5" class="rowCount"></th>
                      <th>Available Stock</th>
                    </thead>
                    <tbody>
                        <td colspan="5">
                          <select  id="productSku" name="productSku[]" class="productSku custom-select">
                            <option></option>
                            @foreach($products as $product)
                            <option value="{{$product['productSku']}}" {{(old('productSku.'.$key)==$product->productSku)? 'selected':''}}>{{$product['productName']}}</option>
                            @endforeach
                            </select>
                            @if ($errors->has('productSku.'.$key))
                               <div class="text-danger">
                                <small>{{ $errors->first('productSku.'.$key) }}</small>
                              </div>
                           @endif
                        </td>
                        <td>
                          <input disabled id="productQty" type="text" class="form-control" name="productQty[]" value="" readonly="readonly">
                        </td>
                        <td align="center">
                          <a href="#" class="btn btn-danger remove" id="remove"><em class="fa fa-trash"></em></a>
                      </td>
                      </tbody>
                    <thead>
                      <th>Quantity</th>
                      <th colspan="2">UOM</th>
                      <th>Price (per)</th>
                      <th>Discount (%)</th>
                      <th>Amount</th>
                    </thead>
                    <tbody>
                      <td>
                          <input type="text" class="form-control" id="orderQty" name="orderQty[]" value="{{ old('orderQty.'.$key) }}">
                           @if ($errors->has('orderQty.'.$key))
                               <div class="text-danger">
                                <small>{{ $errors->first('orderQty.'.$key) }}</small>
                              </div>
                           @endif
                        </td>
                        <td colspan="2">
                          <select  class="custom-select" name="uomId" id="uomId" name="uomId[]">
                            <option></option>
                            <option value="1" {{(old('uomId.'.$key))? 'selected':''}}>Test</option>
                          </select>
                          @if ($errors->has('uomId.'.$key))
                               <div class="text-danger">
                                <small>{{ $errors->first('uomId.'.$key) }}</small>
                              </div>
                           @endif
                        </td>
                        <td>
                          <input  type="text" class="form-control" id="orderPrice" name="orderPrice[]" value="{{ old('orderPrice.'.$key) }}">
                           @if ($errors->has('orderPrice.'.$key))
                               <div class="text-danger">
                                <small>{{ $errors->first('orderPrice.'.$key) }}</small>
                              </div>
                           @endif
                        </td>
                        <td>
                          <input type="text" class="form-control" id="orderDis" name="orderDis[]" placeholder="0.00" value="{{ old('orderDis.'.$key) }}">
                           @if ($errors->has('orderDis.'.$key))
                               <div class="text-danger">
                                <small>{{ $errors->first('orderDis.'.$key) }}</small>
                              </div>
                           @endif
                        </td>
                        <td>
                          <input type="text" class="form-control" id="orderPerAmount" name="orderPerAmount[]" readonly="readonly" jAutoCalc="{#orderQty} * {#orderPrice} - {#orderQty} * {#orderPrice} * {#orderDis} / 100">
                        </td>
                    </tbody>
                  </table>
                @endforeach
                @else
                    <table id="tbl-products" name="line_items" class="table table-bordered tbl-products">
                    <thead>
                      <th colspan="5" class="rowCount"></th>
                      <th>Available Stock</th>
                    </thead>
                    <tbody>
                        <td colspan="5">
                          <select  id="productSku" name="productSku[]" class="productSku custom-select">
                            <option></option>
                            @foreach($products as $product)
                            <option value="{{$product['productSku']}}">{{$product['productName']}}</option>
                            @endforeach
                            </select>
                            @if ($errors->has('productSku.0'))
                               <div class="text-danger">
                                <small>{{ $errors->first('productSku.0') }}</small>
                              </div>
                           @endif
                        </td>
                        <td>
                          <input  disabled id="productQty" type="text" class="form-control" name="productQty[]" value="" readonly="readonly">
                        </td>
                        <td align="center">
                          <a href="#" class="btn btn-danger remove" id="remove"><em class="fa fa-trash"></em></a>
                      </td>
                      </tbody>
                    <thead>
                      <th>Quantity</th>
                      <th colspan="2">UOM</th>
                      <th>Price (per)</th>
                      <th>Discount (%)</th>
                      <th>Amount</th>
                    </thead>
                    <tbody>
                      <td>
                          <input  type="text" class="form-control" id="orderQty" name="orderQty[]">
                           @if ($errors->has('orderQty.0'))
                               <div class="text-danger">
                                <small>{{ $errors->first('orderQty.0') }}</small>
                              </div>
                           @endif
                        </td>
                        <td colspan="2">
                          <select  class="custom-select" name="uomId" id="uomId" name="uomId[]">
                            <option></option>
                            <option value="1">Test</option>
                          </select>
                        </td>
                        <td>
                          <input  type="text" class="form-control" id="orderPrice" name="orderPrice[]">
                           @if ($errors->has('orderPrice.0'))
                               <div class="text-danger">
                                <small>{{ $errors->first('orderPrice.0') }}</small>
                              </div>
                           @endif
                        </td>
                        <td>
                          <input type="text" class="form-control" id="orderDis" name="orderDis[]" placeholder="0.00" value="0.00">
                        </td>
                        <td>
                          <input type="text" class="form-control" id="orderPerAmount" name="orderPerAmount[]" readonly="readonly" jAutoCalc="{#orderQty} * {#orderPrice} - {#orderQty} * {#orderPrice} * {#orderDis} / 100">
                        </td>
                    </tbody>
                  </table>
                @endif
                </div>
                  <a href="#" class="btn btn-success addRow" id="addRow"><em class="fa fa-plus"></em> Add New Product</a>
              </div>
            </div>
            </div>
          {!!Form::hidden('_token',csrf_token())!!}
        {!!Form::close()!!}
        </div>
      </div>


<script>
  $(document).ready(function() {

    function chosenJs() { // Interactive dropdown select run here...
    $('select').chosen({
        allow_single_deselect: true
      });
    }
    chosenJs(); // Init the function

    function autoCalcSetup() { // Calculation code run here...
        $('form[id=frmsave]').jAutoCalc('destroy');
         $('form[id=frmsave] table[name=line_items]').jAutoCalc({
            keyEventsFire: true,
            decimalPlaces: 2,
            emptyAsZero: true
          });
            $('form[id=frmsave]').jAutoCalc({
                decimalPlaces: 2,
                emptyAsZero: true
              });
            $('form[id=frmsave]').jAutoCalc({
                decimalPlaces: 2,
                emptyAsZero: true
              });
         }
    autoCalcSetup(); // Init the function

    function calculateOrderRows() { // Row order calculation code run here...
    $(".rowCount").each(function (i){
          var index = i + 1;
           $(this).text("Product - " + index++);
        });
    }
    calculateOrderRows(); // Init the function

    $('#newRow #productSku').each(function(){ // This function generates value from preselected data in select dropdown
        var tr = $(this).parent().parent().parent();
        var id = tr.find('#productSku').val();
        var dataId = {'id':id};
        $.ajax({
          type : 'GET',
          url : '{{ url("find_qty") }}',
          dataType : 'json',
          data : dataId,
          success:function(data){
            console.log(data);
            tr.find('#productQty').val(data.productQty);
          }
        });
      });

    $('#newRow').delegate('#productSku','change',function(){ // This function generates value from selected data in select dropdown
        var tr = $(this).parent().parent().parent();
        var id = tr.find('#productSku').val();
        var dataId = {'id':id};
        $.ajax({
          type : 'GET',
          url : '{{ url("find_qty") }}',
          dataType : 'json',
          data : dataId,
          success:function(data){
            console.log(data);
            tr.find('#productQty').val(data.productQty);
          }
        });
      });

      $('#newRow').on('click','.remove',function(){ // Function for remove button
        var i=$('#newRow table').length;
        if(i==1)
        {
          alert('You cannot remove the last one!');
        } else {
        $(this).closest('#newRow table').remove();
        autoCalcSetup(); // Init calculation code on looping field
        calculateOrderRows(); // Init row order calculation on looping field
      }
      });

      $('.addRow').on('click',function() // Add Row function on products input
      {
      var tr = '<table id="tbl-products" name="line_items" class="table table-bordered tbl-products">'+
                    '<thead>'+
                      '<th colspan="5" class="rowCount"></th>'+
                      '<th>Available Stock</th>'+
                    '</thead>'+
                    '<tbody>'+
                        '<td colspan="5">'+
                          '<select  id="productSku" name="productSku[]" class="custom-select">'+
                            '<option></option>'+
                            '@foreach($products as $product)'+
                            '<option value="{{$product['productSku']}}">{{$product['productName']}}</option>'+
                            '@endforeach'+
                            '</select>'+
                        '</td>'+
                        '<td>'+
                          '<input disabled id="productQty" type="text" class="form-control" name="productQty[]" value="" readonly="readonly">'+
                        '</td>'+
                        '<td align="center">'+
                          '<a href="#" class="btn btn-danger remove" id="remove"><em class="fa fa-trash"></em></a>'+
                      '</td>'+
                      '</tbody>'+
                    '<thead>'+
                      '<th>Quantity</th>'+
                      '<th colspan="2">UOM</th>'+
                      '<th>Price (per)</th>'+
                      '<th>Discount (%)</th>'+
                      '<th>Amount</th>'+
                    '</thead>'+
                    '<tbody>'+
                      '<td>'+
                          '<input  type="text" class="form-control" id="orderQty" name="orderQty[]">'+
                           '@if ($errors->has('orderQty'))'+
                              '<p class="error">{{ $errors->first('orderQty') }}</p>'+
                          '@endif'+
                        '</td>'+
                        '<td colspan="2">'+
                          '<select  class="custom-select" name="uomId" id="uomId">'+
                            '<option></option>'+
                            '<option value="1">Test</option>'+
                          '</select>'+
                        '</td>'+
                        '<td>'+
                          '<input  type="text" class="form-control" id="orderPrice" name="orderPrice[]">'+
                           '@if ($errors->has('orderPrice'))'+
                              '<p class="error">{{ $errors->first('orderPrice') }}</p>'+
                          '@endif'+
                        '</td>'+
                        '<td>'+
                          '<input type="text" class="form-control" id="orderDis" name="orderDis[]" placeholder="0.00" value="0.00">'+
                           '@if ($errors->has('orderDis'))'+
                              '<p class="error">{{ $errors->first('orderDis') }}</p>'+
                          '@endif'+
                        '</td>'+
                        '<td>'+
                          '<input type="text" class="form-control" id="orderPerAmount" name="orderPerAmount[]" readonly="readonly" jAutoCalc="{#orderQty} * {#orderPrice} - {#orderQty} * {#orderPrice} * {#orderDis} / 100">'+
                        '</td>'+
                    '</tbody>'+
                  '</table>';
                  $('#newRow').append(tr);
                  calculateOrderRows(); // Init row order calculation on looping field
                  autoCalcSetup(); // Init calculation code on looping field
                  chosenJs(); // Init interactive dropdown select on looping field
              });
            });

</script>