@extends('layouts.admin')


@push('styles')

  <link rel="stylesheet" href="{{asset('plugins/fontawesome-free/css/all.min.css')}}">
  <link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
  <link rel="stylesheet" href="{{asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">

  <link rel="stylesheet" href="{{asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css')}}">

  <style>
    div.form-group {
    margin-bottom: 3px;
    }
    #unitname {
      position: relative;
      top: 11px;
    }
    #btn_looding {
     display: none;
    }

  </style>

@endpush

@section('content')

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid mt-4">
        <div class="row">
          <!-- left column -->
          <div class="col-md-12">
            <!-- jquery validation -->
            <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">Wastage Entry</h3>

              </div>
              <!-- /.card-header -->
              <!-- form start -->

              <form id="userform" class="form-horizontal" method="POST" action="{{ route('wastage.wastageData') }}">

                 @csrf

                <div class="card-body">

                  <div class="row">

                    <div class="col-md-4">
                        <div class="form-group row">
                          <label for="reqDate" class="col-sm-4 col-form-label">Date: <span class="text-danger"> * </span></label>
                          <div class="col-sm-8">
                            <div class="input-group date" id="reservationdate" data-target-input="nearest">
                                <input type="text" class="form-control form-control-sm datetimepicker-input" data-target="#reservationdate" name="reqDate" id="reqDate" value="{{ $date }}" placeholder="Enter Date" required/>
                                <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>

                                @error('reqDate')
                                    <span class="error invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                          </div>
                        </div>

                    </div>

                    <div class="col-md-4">

                        <div class="form-group row">
                          <label for="outlet" class="col-sm-4 col-form-label">Outlet: <span class="text-danger"> * </span></label>
                          <div class="col-sm-8">

                            <select id="outlet" name="outlet" class="form-control form-control-sm select2" value="{{ old('outlet') }}" style="width: 100%;" required>

                               <option value="">Select Outlet</option>

                              @foreach($outlet as $v)

                                <option value="{{ $v->id }}">{{ $v->outlet_name }}</option>

                              @endforeach


                            </select>

                              @error('outlet')
                                  <span class="error invalid-feedback" role="alert">
                                      <strong>{{ $message }}</strong>
                                  </span>
                              @enderror

                          </div>
                        </div>
                    </div>
                    <div class="col-md-4">

                        <div class="form-group row">
                          <label for="req_invoice" class="col-sm-4 col-form-label">Invoice No: <span class="text-danger"> * </span></label>
                          <div class="col-sm-8">
                            <input id="req_invoice" type="text" name="req_invoice" class="form-control form-control-sm" value="{{ $invoice }}" style="width: 100%;" readonly required>

                              @error('req_invoice')
                                  <span class="error invalid-feedback" role="alert">
                                      <strong>{{ $message }}</strong>
                                  </span>
                              @enderror

                          </div>
                        </div>
                    </div>

                  </div>

                  <div class="row">

                    <div class="col-md-12">

                      <table class="table table-sm">
                          <thead>
                            <tr>
                              <th style="width: 10px">Sl</th>
                              <th style="width:200px">Product</th>
                              <th>Quantity</th>
                              <th>Unit</th>
                              <th>Rate</th>
                              <th>Amount</th>
                              <th style="width:90px;">Action</th>
                            </tr>


                            <tr>
                              <th>1</th>
                              <th style="width:200px">
                              <select id="product_id" name="product_id" class="form-control form-control-sm myselect2" style="width: 100%;">
                                <option value="">Select Product</option>
                                @foreach($products as $v)

                                <option value="{{$v->id}}" data-lastprice="{{$v->sale_price}}" data-pname="{{$v->product_name}}" data-unitid="{{$v->unit_id}}" data-unit="{{$v->unit_name}}" data-pur="{{$v->pur_price}}" data-reciid="{{$v->recipe_id}}" data-prodqty="{{$v->prod_qty}}" data-productId="{{ $v->product_id }}" data-stock="">{{$v->product_name}}-({{$v->product_code}})</option>

                                @endforeach

                              </select>

                              </th>
                              <th>
                                <input type="number" id="quantity" class="form-control form-control-sm quantity" value="" placeholder="Quantity">
                              </th>
                              <th>
                                <p id="unitname"></p>
                              </th>
                              <th>
                                <input type="number" id="rate" class="form-control form-control-sm rate" value="" placeholder="Rate" disabled>
                              </th>

                              <th>
                                <input type="text" id="total" class="form-control form-control-sm total" value="" placeholder="Amount" disabled>
                              </th>
                              <th>
                                <button type="button" id="add_row" class="btn btn-info btn-sm">Add</button>

                                <button id="btn_looding" class="btn btn-info btn-sm" type="button" disabled="">
                                  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                                  <span class="sr-only">Loading...</span>
                                </button>

                              </th>
                            </tr>


                          </thead>

                          <tbody id="req_rows">

                          </tbody>

                          <tfoot>

                            <tr>
                              <td style="padding-top: 35px;" colspan="4">
                                <div class="form-group row">
                                  <label for="description" class="col-sm-4 col-form-label">Wastage Note:</label>
                                  <div class="col-sm-8">

                                 <textarea class="form-control" id="description" rows="3" name="description" placeholder="Wastage Note" style="height: 70px;"></textarea>

                                  </div>
                                </div>
                              </td>
                              <td colspan="2"></td>
                            </tr>
                          </tfoot>

                        </table>

                    </div>


                  </div>
                <!-- /.card-body -->
                <div class="card-footer">

                  <button type="submit" class="btn btn-primary">Submit</button>

                </div>

              </form>

            </div>
            <!-- /.card -->
            </div>
          <!--/.col (left) -->
          <!-- right column -->
          <div class="col-md-6">

          </div>
          <!--/.col (right) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->

@endsection

@push('scripts')
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
<script src="{{asset('plugins/moment/moment.min.js')}}"></script>
<script src="{{asset('plugins/inputmask/jquery.inputmask.min.js')}}"></script>
<script type="text/javascript">

  $(function () {


    $('#reservationdate').datetimepicker({
        format: 'DD-MM-YYYY'
    });

    $('#reservationdate2').datetimepicker({
        format: 'DD-MM-YYYY'
    });


    //Initialize Select2 Elements
    $('.select2').select2();
    $('.myselect2').select2();

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })



    $(document).on('select2:open', () => {
        document.querySelector('.select2-search__field').focus();
    });


$( "#userform" ).on( "click", ".edit_row", function() {

        if($(this).data("pid")){


          var product_id = $(this).data("pid");

          var quantity = $(this).data("quantity");
          var price = $(this).data("price");
          var total = $(this).data("total");
          var unitname = $(this).data("unitname");
          var pname = $(this).data("pname");

          $('#product_id').val(product_id).trigger('change');

          $("#quantity").val(quantity);
          $("#price").val(price);
          $("#total").val(total);
          $("#unitname2").html(unitname);


      }
});

$( "#userform" ).on( "click", ".delete_row", function() {

        if($(this).data("pid")){

          if (confirm('Are you sure To delete this record?')) {

          var product_id = $(this).data("pid");

        var route = '{{ route("inventory.delReciRow") }}';

          $.post(route, { "product_id": product_id})
          .done(function( data ) {

            $("#req_rows").html(data);
            console.log(data);

          })
          .fail(function() {
            alert( "error" );
          });



        } else {
            return false;
        }




      }
});


    function addRow(product_id,req_qty,price,total,unit_name,pname,unitid,reqDate,outlet,description,req_invoice){


    $("#add_row").hide();
    $("#btn_looding").show();

      var route = '{{ route("inventory.addReciRow") }}';


        $.post(route, { "product_id": product_id, "req_qty": req_qty,"price": price,"total": total,"unit_name":unit_name,"pname":pname,"unitid":unitid,"reqDate":reqDate,"outlet":outlet,"description":description,"req_invoice":req_invoice})
        .done(function( data ) {

          $("#req_rows").html(data);

          $("#rate").val('');
          $("#quantity").val('');
          $("#total").val('');
          $("#product_id").val('');

           setTimeout(function() {

                $("#add_row").show();
                $("#btn_looding").hide();

            }, 1000);


            $('#product_id').val('').trigger('change');


        })
        .fail(function() {

          $("#add_row").show();
          $("#btn_looding").hide();


          alert( "error" );
        });


    }
    function checkValid(number){

        if(+number<=0){

          return true;

        }

        return false;
    }

$("#add_row").click(function(e){

    e.preventDefault();

  if($("#product_id").val()){

    if($("#quantity").val()){

      if($("#rate").val()){

         var unitid = $("#product_id").find(':selected').data('unitid');

        // var product_id = $("#product_id").find(':selected').data('productId');

         var unit_name = $("#product_id").find(':selected').data('unit');
         var pname = $("#product_id").find(':selected').data('pname');
         var reciid = $("#product_id").find(':selected').data('reciid');
         var prodqty = $("#product_id").find(':selected').data('prodqty');

        var product_id = $("#product_id").val();

        var req_qty = $("#quantity").val();
        var price = $("#rate").val();
        var outlet = $("#outlet").val();
        var reqDate = $("#reqDate").val();
        var description = $("#description").val();
        var req_invoice = $("#req_invoice").val();


      var checkQty = checkValid(quantity);

         if(checkQty){
          alert("Please enter valid number");

          $("#quantity").val('')

          return false;
         }

        var checkPrice = checkValid(price);

       if(checkPrice){
        alert("Please enter valid number");

        $("#rate").val('')

        return false;
       }


        if($("#total").val()){

            var total = $("#total").val();

        }else{
               var total = 0;
              alert("Total Amount Not Empty!");
              return false;
        }

        var addrow = addRow(product_id,req_qty,price,total,unit_name,pname,unitid,reqDate,outlet,description,req_invoice);

        }else{

            alert("Enter Rate!");
            return false;
        }

        }else{
        alert("Enter Quantity!");
        return false;

        }

      }else{
        alert("Select Product!");
        return false;
      }


});


$("#quantity").keyup(function(){

   var product_id = $("#product_id").val();

   if(!product_id){
    $("#quantity").val(0);
    $("#rate").val(0);
      alert("Select Product!");
      return false;
   }


  if($("#quantity").val()){
    var quantity = $("#quantity").val();
  }else{
    var quantity = 0;
  }


  if($("#rate").val()){
    var price = $("#rate").val();
  }else{
    var price = 0;
  }



if(quantity && price){
  var total = quantity * price;

  $("#total").val(total);


}else{

  var total = 0;


  $("#total").val(total);
}



});



  $("#product_id").change(function(){

      if($(this).val()){

     var product_id = $(this).val();

     var unitid = $(this).find(':selected').data('unitid');
     var product_id = $(this).find(':selected').data('productId');
     var unit_name = $(this).find(':selected').data('unit');
     var pur_price = $(this).find(':selected').data('pur');
    // var stock = $(this).find(':selected').data('stock');

     //$("#cur_stock").html(stock);

     var lastprice = $(this).find(':selected').data('lastprice');

     $("#rate").val(lastprice);

     $("#unitname").html(unit_name);

     $("#quantity").focus();

    }else{

      $("#rate").val('');

     $("#unitname").html('');

    }


  });

  });
</script>
@endpush