@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, #unitname2 {
      position: relative;
      top: 11px;
    }
    #btn_looding {
     display: none;
    }

  </style>

@endpush

@section('content')


<!-- Helper::productPrice('product ',); -->

    <!-- 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">Product Recipe & Costing Create</h3>

                <a href="{{route('recipe.index')}}" style="float: right;padding: 3px 26px;" class="btn btn-outline-dark btn-flat">Recipe List</a>

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


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

                 @csrf

                <div class="card-body">

<!--                   <div class="row">

                      <div class="col-sm-12" style="display: none;">

                          <div class="form-group row">
                            <label for="recipe_date" class="col-sm-1 col-form-label">Date: <span class="text-danger"> * </span></label>
                            <div class="col-sm-3">
                              <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="recipe_date" id="recipe_date" value="{{ $date }}" placeholder="Enter Date" />
                                  <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('recipe_date')
                                      <span class="error invalid-feedback" role="alert">
                                          <strong>{{ $message }}</strong>
                                      </span>
                                  @enderror

                            </div>
                          </div>

                      </div>

                  </div> -->

                  <div class="row">

                    <input type="hidden" name="recipe_type" value="" id="recipe_type">

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

                            <div class="form-group row">
                              <label for="product_id" class="col-sm-3 col-form-label">Product:</label>
                              <div class="col-sm-9">

                              <select id="product_id" name="product_id" class="form-control form-control-sm select2" style="width: 100%;">

                                <option value="">Select Product</option>
                                @foreach($products as $v)
                                <option value="{{$v->id}}" data-retype="{{$v->product_type}}" data-pname="{{$v->product_id}}" data-unitid="{{$v->unit_id}}" data-unit="{{$v->unit_name}}" data-pur="{{$v->pur_price}}">{{$v->product_name}}-({{$v->product_code}})</option>
                                @endforeach

                              </select>

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

                              </div>
                            </div>

                      </div>

                      <div class="col-sm-5">

                              <div class="form-group row">
                                <label for="prod_qty" class="col-sm-4 col-form-label">Production Qty:</label>
                                <div class="col-sm-4">
                                  <input step="any" type="number" class="form-control form-control-sm" name="prod_qty" id="prod_qty" value="" placeholder="Production Qty" required>



                                </div>


                                <label class="col-sm-4 col-form-label"> <p id="unit_main"> </p> </label>

                                <input type="hidden" id="unit_id" value="" name="unit_id">

                              </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">Ingredients</th>
                              <th>Unit</th>
                              <th>Last Price</th>
                              <th>Quantity</th>
                              <th>Amount</th>
                              <th style="width:90px;">Action</th>
                            </tr>

                            <tr>
                              <th>#</th>
                              <th style="width:200px">

                              <select id="ingredient_id" name="ingredient_id" class="form-control form-control-sm myselect2" style="width: 100%;">
                                <option value="">Select Ingredient</option>
                                @foreach($ingredients as $v)

                                @php

                                  $lastPrice = Helper::lastPrice(['product_id' => $v->id]);

                                  if(empty($lastPrice)){
                                  $lastPrice = Helper::lastPrice2(['id' => $v->id]);
                                  }

                                @endphp

                                <option value="{{$v->id}}" data-lastprice="{{ $lastPrice }}" data-pname="{{$v->product_name}}" data-unitid="{{$v->unit_id}}" data-unit="{{$v->unit_name}}" data-pur="{{$v->pur_price}}">{{$v->product_name}}-({{$v->product_code}})</option>

                                @endforeach

                              </select>

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

                              <th>
                                <input type="text" id="total" class="form-control form-control-sm total" value="" placeholder="Amount" readonly>
                              </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="pur_rows">

                          </tbody>

                          <tfoot>

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

                                 <textarea class="form-control" id="pur_note" rows="3" name="details" placeholder="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>
</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 ingredient_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");

          $('#ingredient_id').val(ingredient_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 prod_qty = $("#prod_qty").val();

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

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

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

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



        } else {
            return false;
        }




      }
});


    function addRow(product_id,quantity,price,total,unit_name,pname,unitid,prod_qty){

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

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

        $.post(route, { "product_id": product_id, "quantity": quantity,"price": price,"total": total,"unit_name":unit_name,"pname":pname,"unitid":unitid,"prod_qty" : prod_qty})
        .done(function( data ) {

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

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

           setTimeout(function() {

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

            }, 1000);


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




        })
        .fail(function() {

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


          alert( "error" );
        });


    }



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

  e.preventDefault();


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

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

}else{

  alert("Enter Production Qty!");

  return false;
}

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

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

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


         var unitid = $("#ingredient_id").find(':selected').data('unitid');
         var unit_name = $("#ingredient_id").find(':selected').data('unit');
         var pname = $("#ingredient_id").find(':selected').data('pname');

        var product_id = $("#ingredient_id").val();
        var quantity = $("#quantity").val();
        var price = $("#rate").val();


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

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

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

        var addrow = addRow(product_id,quantity,price,total,unit_name,pname,unitid,prod_qty);

      }else{

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

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

    }

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


});


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

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

   if(!ingredient_id){

    $("#quantity").val(0);

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

      alert("Select Ingredient!");
      return false;
   }

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

    var quantity = 0;
   }

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

    var rate = 0;
   }

   var total = quantity * rate;

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


});



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

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

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

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

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

      if(lastprice){

       $("#rate").val(lastprice);
     }else{

       $("#rate").val(pur_price);
     }


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

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

    }else{

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

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

    }


});


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

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

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

     var unitid = $(this).find(':selected').data('unitid');
     var unit_name = $(this).find(':selected').data('unit');
     var pur_price = $(this).find(':selected').data('pur');
     var retype = $(this).find(':selected').data('retype');

     $("#unit_main").html(unit_name);
     $("#unit_id").val(unitid);
     $("#recipe_type").val(retype);

    }else{

    $("#prod_qty").val('');
     $("#unit_main").html('');
     $("#unit_id").val('');
     $("#recipe_type").val('');

    }


});


  });
</script>
@endpush