@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;
        }

        .view_item {
            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">Dispatch Entry</h3>

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

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


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

                            @csrf

                            @method('POST')

                            <div class="card-body">

                                <div class="row">


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

                                        <div class="form-group row">
                                            <label for="department_id" class="col-sm-4 col-form-label">Department:</label>
                                            <div class="col-sm-8">

                                                <select id="department_id" name="department_id"
                                                    class="form-control form-control-sm" style="width: 100%;" required
                                                    readonly>
                                                    <option value="1">Production</option>
                                                </select>
                                                =

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

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


                                <div class="row">

                                    <div class="col-sm-3">
                                        <div class="form-group row">

                                            <label for="outlet_id" class="col-sm-12 col-form-label"> Dispatch From <span class="text-danger"> * </span></label>

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

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

                                                    @foreach ($dis_from_outlet as $v)
                                                        <option value="{{ $v->id }}"
                                                            {{ $outlet_id == $v->id ? 'selected' : '' }}>
                                                            {{ $v->outlet_name }} </option>
                                                    @endforeach

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

                                            </div>


                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <div class="form-group row">

                                            <label for="outlet_to" class="col-sm-12 col-form-label"> Dispatch To <span class="text-danger"> * </span></label>

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

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

                                                    @foreach ($dis_to_outlet as $v)
                                                        <option value="{{ $v->id }}">
                                                            {{ $v->outlet_name }} </option>
                                                    @endforeach

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

                                            </div>


                                        </div>
                                    </div>


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

                                        <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" style="width: 100%;"
                                                    required>

                                                    <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">

                                        <button type="button" style="margin-top: 38px;" id="search_product" class="btn btn-sm btn-primary">Search</button>

                                    </div>

                                </div>


                                <div class="row">

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

                                        <table class="table table-sm">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th>Sl</th>
                                                    <th>Product</th>
                                                    <th>Unit</th>
                                                    <th>Price</th>
                                                    <th>Stock</th>
                                                    <th>Amount</th>
                                                    <th>Usage. 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>Unit</th>
                                                    <th>Price</th>
                                                    <th>Qty</th>
                                                    <th>Amount</th>
                                                    <th>Action</th>
                                                </tr>

                                            </thead>

                                            <tbody id="selected_product_list">

                                            </tbody>


                                        </table>

                                    </div>


                                </div>


                                <div class="row">

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

                                        <div class="form-group row">
                                            <label for="usage_date" class="col-sm-4 col-form-label">Usage 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="usage_date" id="usage_date"
                                                        value="{{ $date }}" placeholder="Enter Date" required
                                                        readonly />
                                                    <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('usage_date')
                                                    <span class="error invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror

                                            </div>
                                        </div>

                                    </div>

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

                                        <div class="form-group row">
                                            <label for="pur_note" class="col-sm-4 col-form-label text-right">Note:</label>
                                            <div class="col-sm-8">

                                                <textarea class="form-control" id="pur_note" rows="3" name="details" placeholder="Note"
                                                    style="height: 50px;"></textarea>

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

                                    <button type="submit" id="submit_data" 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 -->

    <!-- /.modal -->

    <div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Details</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-head-fixed text-nowrap">
                        <thead>
                            <tr>
                                <th style="width: 10px">Sl</th>
                                <th style="width:200px">Product Name</th>
                                <th style="width:200px">Product Type</th>
                                <th>Unit</th>
                                <th>Current Balance</th>
                                <th>Usage Qty</th>
                                <th>Need Qty</th>
                            </tr>
                        </thead>
                        <tbody id="view_info">

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@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() {


            $("#userform").on('keydown', '.prod_qty', function(e) { 

                    var sel = this;

                  var keyCode = e.keyCode || e.which; 

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

                    $(sel).parent("td").parent("tr").find(".seled_row").trigger("click");

                    $(sel).select();
                    $(sel).focus();


                           
                } 
              
            });


        });


        $(document).ready(function() {
            $('#userform').on('keydown', function(event) {
                // Check if Enter key is pressed
                if (event.key === 'Enter') {
                    event.preventDefault(); // Prevent the default form submission
                }
            });
        });


        function viewRow(product_id, quantity, reciid, prodqty) {

            var route = '{{ route('usagerec.cusagedetils') }}';

            $.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) {

            if (+qty > 0) {

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

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

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


                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 amount = price * qty;
                 amount = amount.toFixed(3);

                var route = '{{ route('usagerec.ccheck') }}';

                $.post(route, {
                        "product_id": pid,
                        "quantity": qty,
                        "outlet_id": outlet_id,
                        "_token":'{{ csrf_token() }}'
                    })
                    .done(function(data) {

                        if (data) {

                            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>` + unit + `</td>
                      <td>` + price + `</td>
                      <td>
                        <input data-prodqty="` + prodqty + `" data-reciid="` + reciid + `"  data-unitid="` + unitid +
                                    `" data-unit="` + unit + `" data-price="` + price + `" data-pname="` + pname +
                                    `" data-pid="` + pid +
                                    `" type="number" style="width:80px" class="prodQty form-control form-control-sm prod_qty" step="any" name="qty[]"  value="` +
                                    qty + `">
                      </td>
                       <td>` + amount + `</td>
                      <td>
                      <button type="button" data-pid="` + pid + `" class="del_sel btn btn-danger btn-xs">x</button>

                      <button data-prodqty="` + prodqty + `" data-reciid="` + reciid + `"  data-unitid="` + unitid +
                                    `" data-unit="` + unit + `" data-price="` + price + `" data-pname="` + pname +
                                    `" data-pid="` + pid + `" type="button" data-toggle="modal" data-target="#modal-lg" class="btn btn-primary btn-xs view_item">View</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 class="` + pid + `">
                          <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>` + unit + `</td>
                          <td>` + price + `</td>
                          <td>

                           <input data-prodqty="` + prodqty + `" data-reciid="` + reciid + `"  data-unitid="` +
                                    unitid + `" data-unit="` + unit + `" data-price="` + price + `" data-pname="` +
                                    pname + `" data-pid="` + pid +
                                    `" type="number" style="width:80px" class="prodQty form-control form-control-sm prod_qty" step="any" name="qty[]"  value="` +
                                    qty + `">

                          </td>

                        <td>` + amount + `</td>
                          <td>
                            <button type="button" data-pid="` + pid + `" class="del_sel btn btn-danger btn-xs">x</button>

                            <button data-prodqty="` + prodqty + `" data-reciid="` + reciid + `"  data-unitid="` +
                                    unitid + `" data-unit="` + unit + `" data-price="` + price + `" data-pname="` +
                                    pname + `" data-pid="` + pid + `" type="button" data-toggle="modal" data-target="#modal-lg" class="btn btn-primary btn-xs view_item">View</button>

                          </td>
                    </tr>`;

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

                            }


                            $(selthis).select().focus();

                        } else {

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

                            return false;

                        }


                    })
                    .fail(function() {


                    });



            } else {

                $(selthis).trigger("blur");

            }


        }




        async function processQuantities() {
            // Convert jQuery collection to an array for proper async handling
            const elements = $("#selected_product_list").find('.prodQty').toArray();

            // Use a for...of loop to iterate over the elements sequentially

            let isValidData = true;

            for (let currentElement of elements) {
                // Retrieve the necessary data from the current element
                let $element = $(currentElement); // Convert back to jQuery object

                let qty = $element.val();
                let prodqty = $element.data('prodqty');
                let reciid = $element.data('reciid');
                let unitid = $element.data('unitid');
                let unit = $element.data('unit');
                let price = $element.data('price');
                let pname = $element.data('pname');
                let pid = $element.data('pid');

                // Define the route for the post request
                let route = '{{ route('usagerec.ccheck') }}';


                try {
                    // Wait for the $.post request to complete

                    let data = await $.post(route, {
                        "product_id": pid,
                        "quantity": qty,
                        "reciid": reciid,
                        "prodqty": prodqty
                    });

                    // Handle the response data
                    if (!data) {

                        let sel = "." + pid;

                        $(sel).css("color", "red");

                        isValidData = false;

                        // return false;

                    }




                } catch (error) {
                    // Handle any errors that occur during the request
                    console.error("Error during $.post:", error);
                    return isValidData;
                }
            }

            return isValidData;

        }


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


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

                e.preventDefault();

                var s = 0;

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

                    s = index + 1;

                });


                if (s > 0) {


                    var issubmit = await processQuantities();

                    if (issubmit) {


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


                    } else {

                        return false;

                    }


                }



            });


            $("#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();
                addSelect(sel, qty);
                $(this).parent("td").parent("tr").css({"background": "#000", "color": "#fff"});
            });

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

                    addSelect(sel, qty);

                    $(this).parent("td").parent("tr").css({"background": "#000", "color": "#fff"});

                }

            });




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

                event.preventDefault();

            });


            $("#search_product").click(function() {


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

                } else {

                    alert('Please Select Outlet!');

                    return false;
                }


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

                    var cat_id = $("#cat_id").val();
                    var outlet_id = $("#outlet_id").val();

                    var route = '{{ route('usagerec.cgetcatprod') }}';

                    $.get(route, {
                            "cat_id": cat_id,
                            "outlet_id": outlet_id,
                        })
                        .done(function(data) {


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


                        })
                        .fail(function() {



                            alert("error");
                        });


                } else {

                    alert('Please Select Category!');

                    return false;

                }


            });



            $("#userform").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!");
                }



            });




        });
    </script>
@endpush