@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')
<!-- 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">Ingredients Usage Entry</h3>

                        <a href="{{ route('iusage.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('iusage.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-4 d-none">
                                    <div class="form-group row ">
                                        <label for="outlet_id" class="col-sm-4 col-form-label">Outlet<span
                                                class="text-danger"> * </span>
                                        </label>
                                        <div class="col-sm-8 ">

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

                                                @foreach ($outlets as $v)
                                                <option value="{{ $v->id }}"
                                                    {{ $v->id == 2 ? '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-4">

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

                                            <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" 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.iusagedetils') }}";

        $.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;

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

            $.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.icheck') }}";


            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.igetcatprod') }}";

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