@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">Manual Stock Entry</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->

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

                            @csrf

                            <div class="card-body">

                                <div class="row">

                                    <div class="col-md-2 d-none">

                                        <div class="form-group row">
                                            <label for="req_type" class="col-sm-12 col-form-label">Request Type: <span
                                                    class="text-danger"> * </span></label>
                                            <div class="col-sm-12">

                                                <select id="req_type" name="req_type" class="form-control form-control-sm" style="width: 100%;" required>
                                                    <option value="sale">Sale Product</option>
                                                    <option value="combo">Combo Product</option>
                                                </select>


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

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

                                        <div class="form-group row">
                                          <label for="cat_id" class="col-sm-12 col-form-label">Category:</label>
                                          <div class="col-sm-12">

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

                                            <option value="">Select Category</option>
                                            @foreach($categories as $v)
                                            <option value="{{$v->id}}">{{ $v->cat_name }}</option>
                                            @endforeach

                                          </select>

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

                                          </div>
                                        </div>

                                    </div>


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

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

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

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

                                                    @foreach ($outlet as $v)
                                                        <option value="{{ $v->id }}"
                                                            {{ $v->id == auth()->user()->outlet_id ? 'selected' : '' }}>
                                                            {{ $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-2">

                                        <div class="form-group row">
                                            <label for="req_invoice" class="col-sm-12 col-form-label">Inv. No: <span
                                                    class="text-danger"> * </span></label>
                                            <div class="col-sm-12">
                                                <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 class="col-md-2">

                                        <label style="color:#fff;" class="col-sm-12 col-form-label">.</label>

                                      <button type="button" id="search_product" class="btn btn-sm btn-primary">Search</button>

                                    </div>


                                </div>

                                <div style="margin-top: 15px;" class="row">

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

                                      <table class="table table-sm">
                                          <thead class="thead-dark">
                                            <tr>
                                              <th>Sl</th>
                                              <th>Product</th>
                                              <th>P.Code</th>
                                              <th>Price</th>
                                              <th>Stock</th>
                                              <th>Unit</th>
                                              <th>Req. Qty</th>
                                              <th style="width:90px;">Action</th>
                                            </tr>

                                          </thead>

                                          <tbody id="product_list">

                                          </tbody>

                                        </table>

                                    </div>


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

                                      <table class="table table-sm">
                                          <thead class="thead-light">
                                            <tr>
                                              <th>Sl</th>
                                              <th>Product</th>
                                             <th>Price</th>
                                              <th>Qty</th>
                                              <th>Unit</th>
                                              <th>Action</th>
                                            </tr>

                                          </thead>

                                          <tbody id="selected_product_list">

                                          </tbody>


                                        </table>

                                    </div>

                                  </div>

                                  <div class="row">

                                    <div class="col-md-6">
                                        <div style="display:none;" 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 re/>
                                                    <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-6">

                                    <div style="display: none;" 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="2" name="description" placeholder="Note" style="height: 50px;"></textarea>

                                      </div>
                                    </div>

                                  </div>


                                  </div>


                                <!-- /.card-body -->
                                <div class="card-footer" style="text-align: right;">

                                    <button type="submit" class="btn btn-primary">Request</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 viewRow(product_id,quantity,reciid,prodqty){

      var route = '{{ route("usagerec.usagedetils") }}';

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


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


        })
        .fail(function() {



          alert( "error" );
        });


    }

  function addSelect(selthis,qty){


                var pid = $(selthis).data("pid");
                var unitid = $(selthis).data("unitid");
                var unit = $(selthis).data("unit");
                var price = $(selthis).data("price");
                var pname = $(selthis).data("pname");
                var prodqty = $(selthis).data("prodqty");
                var reciid = $(selthis).data("reciid");

                  var sel = '.p_'+pid;

                  var plen =  $(sel).length;

                    if(plen > 0){

                    var sl = $(sel).parent("td").parent("tr").find(".sl").val();

                      var appendtr = `<td>

                      <input type="hidden" name="product_id[]" class="p_`+pid+`" value="`+pid+`">

                      <input type="hidden" name="pname[]"  value="`+pname+`">
                      <input type="hidden" name="price[]"  value="`+price+`">
                      <input type="hidden" name="unitid[]"  value="`+unitid+`">
                      <input type="hidden" name="unit[]"  value="`+unit+`">

                      <input type="hidden"  class="sl" value="`+sl+`">
                      `+sl+`
                      </td>
                      <td>`+pname+`</td>
                      <td>`+price+`</td>
                      <td>
                     <input style="width: 80px;"  name="qty[]" type="number" class="form-control form-control-sm selqty" value="`+qty+`">
                      </td>
                      <td>`+unit+`</td>
                      <td>
                      <button type="button" data-pid="product_id" class="del_sel btn btn-danger btn-xs">x</button>
                      </td>`;

                        $(sel).parent("td").parent("tr").html(appendtr);

                    }else{


                      if($(" .sl ").length == 0){

                        var sl = 1;

                      }else{

                      var sl = $(" .sl ").length+1;

                      }

                    var appendtr = `<tr>
                          <td>
                          <input type="hidden" name="product_id[]" class="p_`+pid+`" value="`+pid+`">

                          <input type="hidden" name="pname[]"  value="`+pname+`">
                          <input type="hidden" name="price[]"  value="`+price+`">
                          <input type="hidden" name="unitid[]"  value="`+unitid+`">
                          <input type="hidden" name="unit[]"  value="`+unit+`">

                          <input type="hidden"  class="sl" value="`+sl+`">

                          `+sl+`
                          </td>
                          <td>`+pname+`</td>
                          <td>`+price+`</td>
                          <td>
                            <input style="width: 80px;"  name="qty[]" type="number" class="form-control form-control-sm selqty" value="`+qty+`">
                          </td>
                          <td>`+unit+`</td>
                          <td>
                            <button type="button" data-pid="product_id" class="del_sel btn btn-danger btn-xs">x</button>
                          </td>
                    </tr>`;

                        $("#selected_product_list").append(appendtr);

                    }


                 $( selthis ).select().focus();
                 $( selthis ).closest("tr").css({"background": "#000", "color": "#fff"});





  }




        // $(window).on('load', function() {

        //     setTimeout(() => {

        //         $("#outlet").trigger("change");

        //     }, 1000);


        // });


        $(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();
            });


            $("#req_type").change(function(){
                $("#selected_product_list").html('');
                $("#product_list").html('');
            });

            $( "#selected_product_list" ).on( "click", ".selqty", function(e) {


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

                    if (+number <= 0) {

                        $(this).val(1)
                    }


              $( this ).select().focus();


            });


            $( "#selected_product_list" ).on( "change", ".selqty", function(e) {


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

                    if (+number <= 0) {

                        $(this).val(1)
                    }


              $( this ).select().focus();


            });





            $( "#product_list" ).on( "click", ".prod_qty", function(e) {
              $( this ).select().focus();
            });

            $( "#product_list" ).on( "click", ".seled_row", function() {

                  var sel = this;
                  var qty = $(this).parent("td").parent("tr").find(".prod_qty").val();
                  if(qty > 0){
                  }else{
                    qty = 0;
                  }
                  addSelect(sel,qty);
            });


            $( "#selected_product_list" ).on( "click", ".del_sel", function() {

                if (confirm('Want to delete?')) {

                  $(this).closest("tr").remove();


                }


            });

            $( "#product_list" ).on( "keydown", ".prod_qty", function(event) {

                if(event.keyCode == 13)
                {
                    event.preventDefault();

                   var sel = this;
                   var qty = $(this).val();

                   if(qty > 0){

                   }else{
                    qty = 0;
                   }

                     addSelect(sel,qty);

                }

            });


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

              e.preventDefault();

            var s = 0;

            $('.sl').each(function(index, currentElement) {

             s =  index + 1;

            });


            if(s > 0){

              $("#userform").submit();

            }

            return false;

            });

            $( "body" ).on( "keydown", "#usage_date", function(event) {

                event.preventDefault();

            });


        $("#search_product").click(function () {
            var req_type = $("#req_type").val();
            var cat_id = $("#cat_id").val();
            var outlet_id = $("#outlet").val();

            // Validation
            if (!req_type) {
                alert("Select Req. Type!");
                return false;
            }

            if (!cat_id) {
                if(req_type == 'combo'){

                }else{

                    alert("Select Category!");
                    return false;

                }
            }

            if (!outlet_id) {
                alert("Select Outlet!");
                return false;
            }

            var route = '{{ route("usagerec.getReqProd") }}';

            $.get(route, {
                cat_id: cat_id,
                outlet_id: outlet_id,
                req_type: req_type
            })
            .done(function (data) {
                $("#product_list").html(data);
            })
            .fail(function () {
                alert("error");
            });
        });

        $( "#product_list" ).on( "click", ".view_item", function(e) {


              var unitid = $(this).data('unitid');
              var unit_name = $(this).data('unit');
              var pname = $(this).data('pname');
              var reciid = $(this).data('reciid');
              var prodqty = $(this).data('prodqty');

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

              var quantity = $(this).parent("td").parent("tr").find(".prod_qty").val();

              if(+quantity > 0){


              var viewrow = viewRow(product_id,quantity,reciid,prodqty);

              }else{
                alert("Please Enter Qty!");
              }



        });




            function checkValid(number) {

                if (+number <= 0) {

                    return true;

                }

                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();
                    if (quantity <= 0) {
                        alert("Please, Enter Posetive Number!");
                        $("#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 = parseFloat(total).toFixed(3);

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


                } else {

                    var total = 0;


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


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

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

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

                    var url = '{{ route('response.finalproduct', ':id') }}';
                    url = url.replace(':id', outlet_id);

                    var jqxhr = $.get(url, function(data) {

                            if (!data) {
                                console.log('No found!');
                            }
                        })
                        .done(function(data) {
                            $("#product_id").html(data.rows);
                        })
                        .fail(function() {

                        })
                        .always(function() {

                        });
                }


            });


            $("#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