@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">Product Distribution</h3>

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

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

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

                 @csrf

                <div class="card-body">

                  <div class="row">

                    <div class="col-md-4">
                        <div class="form-group row">
                          <label for="disDate" 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="disDate" id="disDate" 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('disDate')
                                    <span class="error invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                          </div>
                        </div>

                    </div>

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

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

                            <select id="dep_id" name="dep_id" class="form-control form-control-sm select2" value="{{ old('dep_id') }}" style="width: 100%;" required>
                              <option value="">Select Department</option>
                              @foreach($departments as $v)
                              <option value="{{$v->id}}" {{ (old('dep_id') == $v->id) ? "selected" : "" }} >{{$v->department_name}}</option>
                              @endforeach

                            </select>

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

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

                    <div class="col-md-4" style="display: none;">
                        
                        <div class="form-group row">
                          <label for="deliveryDate" class="col-sm-4 col-form-label">Delivery Date: <span class="text-danger"> * </span></label>
                          <div class="col-sm-8">

                            <div class="input-group date" id="reservationdate2" data-target-input="nearest">
                                <input type="text" class="form-control form-control-sm datetimepicker-input" data-target="#reservationdate2" name="deliveryDate" id="deliveryDate" value="{{ old('deliveryDate') }}" placeholder="Bill Date"/>
                                <div class="input-group-append" data-target="#reservationdate2" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>


                                @error('deliveryDate')
                                    <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 (stock : <span id="cur_stock"></span>)</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"> 
                             <!--    <input type="text" id="product_name" class="form-control form-control-sm product_name" value="" placeholder="Product Name"> -->

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

                                <option value="">Select Product</option>
                                @foreach($products as $v)
                                <option value="{{$v->id}}" data-pname="{{$v->product_name}}" data-unitid="{{$v->unit_id}}" data-unit="{{$v->unit_name}}" data-pur="{{$v->pur_price}}" data-stock="{{ Helper::curStock('head_office_store',['product_id' => $v->id])}}">{{$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="pur_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">Note:</label>
                                  <div class="col-sm-8">

                                 <textarea class="form-control" id="description" rows="3" name="description" 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>

              </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_name').val(product_id).trigger('change');

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

           total = total.toFixed(3);
          $("#total").val(total);
          $("#unitname").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("distres.deldisrow") }}';

          $.post(route, { "product_id": product_id})
          .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){

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

      var route = '{{ route("distres.adddisrow") }}';

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

          $("#pur_rows").html(data);
          
           setTimeout(function() { 

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

            }, 1000);

            $('#product_name').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_name").val()){

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

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


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

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

  var checkQty = checkValid(quantity);

         if(checkQty){
          alert("Please enter vàlid number");

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

          return false;
         }

        var checkPrice = checkValid(price);

       if(checkPrice){
        alert("Please enter vàlid number");

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

        return false;
       }
        if($("#total").val()){

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

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


        var route = '{{ route("distres.check") }}';

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


            if(data){


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

            }else{

              alert("Not enough balance in stock!");

              return false;

            }


          })
          .fail(function() {


          });


      }else{

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

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

    }

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


});


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

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

   if(!product_name){
    $("#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 = total.toFixed(3);
  $("#total").val(total);


}else{

  var total = 0;


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



});



  $("#product_name").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 stock = $(this).find(':selected').data('stock');

       $("#cur_stock").html(stock);
       $("#unitname").html(unit_name);
       $("#unit_id").val(unitid);
       $("#rate").val(pur_price);
      
      }

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


  });


// $("#dep_id").change(function(){


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

//     var sup_id = $(this).val();

//       var url = '{{ route("distres.dipinfo", ":id") }}';
//       url = url.replace(':id', sup_id);

//       var jqxhr = $.get(url, function(data) {
//           if(!data){
//             alert('No supplier found!');
//           }
//       })
//         .done(function(data) {

//           var suppliers = data.suppliers;
//           var rows = data.rows;

//           var supplier_name = suppliers.supplier_name;
//           var supplier_mobile = suppliers.contact_no;
//           var supplier_address = suppliers.address;

//           $("#supplier_name").html(supplier_name);
//           $("#supplier_mobile").html(supplier_mobile);
//           $("#supplier_address").html(supplier_address);

//           $("#product_name").html(rows);


//         })
//         .fail(function() {
         
//         })
//         .always(function() {
         
//         });
       
//       jqxhr.always(function() {
        
//       });


//   }

// });





  });
</script>
@endpush