@extends("layouts.admin.app")

@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__('documents out')}}</h1>
            <p>{{__('Control and view all documents')}}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__('documents out')}}</a></li>
        </ul>
    </div>
@endsection
@section("content")
    @include("includes.dialog")
    <form action="{{route("admin.documents-out.store", ["id"=>request()->id] )}}" id="main_form" method="post">
        @csrf

        @if(!request()->id)
            <div class="row">
                <div class="col-lg-12">
                    <div class="tile">
                        <div class="tile-body">
                            <div class="col-lg-4">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        @endif


        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-body">

                        <input name="confirmDocumentInput" value="" id="confirm_document_input" type="hidden">
                        @if(session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        @if($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif


                        <div class="col-lg-5">
                            <div class="form-group" style="display: flex !important; flex-direction: row !important;">
                                <div class="col-lg-3">
                                    <label class="form-group"> <span>{{__('Stores')}}  </span> </label>
                                </div>
                                <div class="col-lg-6">
                                    <select class="form-control @if($errors->has('store_id')) is-invalid @endif" @if(request()->id) disabled @endif id="store_id" name="store_id">
                                        <option value="">{{__('Select a Store')}}</option>
                                        @foreach($stores as $store)
                                            <option value="{{ $store->id }}">{{ $store->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @error("store_id")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                        <div class="col-lg-5">
                            <div class="form-group" style="display: flex !important; flex-direction: row !important;">

                                <div class="col-lg-3">
                                    <label class="control-label">{{__('Document No.')}}</label>
                                </div>
                                <div class="col-lg-6">
                                    <input class="form-control @if($errors->has('document_number')) is-invalid @endif" @if(request()->id) readonly @endif id="document_number" type="number" name="document_number" placeholder="{{$nextDocumentNumber}}" value="{{ old('document_number', ($documentHeader ? $documentHeader->document_number : $nextDocumentNumber)) }}" >
                                </div>

                            </div>
                            @error("document_number")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                        <div class="col-lg-5">
                            <div class="form-group" style="display: flex !important; flex-direction: row !important;">
                                <div class="col-lg-3">
                                    <label  class="control-label">{{__('Date')}}</label>
                                </div>
                                <div class="col-lg-6">
                                    <input class="form-control @if($errors->has('date')) is-invalid @endif" @if($confirmDocument == 1) disabled @endif id="date" type="date" name="date" placeholder=""  value="{{$documentHeader ? $documentHeader->date :  inputValue("date")}}">
                                </div>
                            </div>
                            @error("date")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>


                        <div class="col-lg-5">
                            <div class="form-group" style="display: flex !important; flex-direction: row !important; ">
                                <div class="col-lg-3">
                                    <label class="control-label">{{__('Note')}}</label>
                                </div>
                                <div class="col-lg-6">
                                    <input class="form-control @if($errors->has('note')) is-invalid @endif" @if($confirmDocument == 1) disabled @endif id="note" type="text" name="note" placeholder="" value="{{$documentHeader ? $documentHeader->note :  inputValue("note")}}" >
                                </div>
                            </div>
                            @error("note")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row" >
                        <div class="col-md-12">
                            <div class="scrollable-table">
                                <table class="table table-hover table-bordered table-fix-head" style="margin-bottom: 5px">
                                    <thead style="font-size: 12px; line-height: 2px">
                                    <tr>
                                        <th style="width: 1%">#</th>
                                        <th style="width: 7%">{{__('code')}}<span class="required"></span></th>
                                        <th style="width: 20%">{{__('item')}}<span class="required"></span></th>
                                        <th style="width: 3%">{{__('unit')}}<span class="required"></span></th>
                                        <th style="width: 4%">{{__('Total Quantity')}}<span class="required"></span></th>
                                    </tr>
                                    </thead>
                                    <tbody id="tableBody" style="font-size: 12px">
                                                                            <tr name="data[]" id="trControl{{$serial_number}}">
                                        <td style="text-align: center; padding: 5px 5px 5px 5px; margin: 0">{{$serial_number}}<span style="padding: 0; margin: 0; display: block;line-height:2px" class="control-link remove"><i style="font-size: 12px" class="far fa-trash-alt"></i></span>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <select onchange="getItemName({{$serial_number}})"  name="item_id[]"class="form-control"
                                                    id="code{{$serial_number}}" required>
                                                <option></option>
                                            </select>
                                            <div class="input-error" id="codeError{{$serial_number}}"
                                                 style="padding-top: 10px; display: none; font-size: 13px"></div>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <div id="itemsDiv">
                                                <select onchange="getItemCode({{$serial_number}})"
                                                        class="form-control"
                                                        id="item{{$serial_number}}" required>
                                                    <option></option>
                                                </select>
                                                <div class="input-error" id="itemError{{$serial_number}}"
                                                     style="padding-top: 10px;display: none; font-size: 13px"></div>
                                            </div>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <select  id="unit{{$serial_number}}" name="unit[]" class="form-control" required>
                                            </select>
                                        </td>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <input class="form-control" type="number" style="padding: 3px;font-size: 13px"
                                                   id="quantity{{$serial_number}}" name="quantity[]" min="0" required readonly>
                                            <div class="input-error" id="quantityError{{$serial_number}}"
                                                 style="padding-top: 10px;display: none; font-size: 13px"></div>
                                        </td>
{{--                                        <td style="padding: 5px 5px 5px 5px; margin: 0">--}}
{{--                                            <input class="form-control" type="text"  name="cost[]"style="padding: 3px;font-size: 13px"--}}
{{--                                                   id="notes{{$serial_number}}" required readonly>--}}
{{--                                        </td>--}}
                                    </tr>

                                    </tbody>

                                </table>
                                <a id="addBtn"><i class="fa fa-fw fa-lg fa-plus-circle"
                                                  style="font-size: 18px; color: green; cursor: pointer"
                                                  onclick="addRow()"></i></a>
                            </div>
                        </div>
                    </div>
                    <hr style="padding: 0 0 2px 0; margin: 5px 0 0 0">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                {{--                                        <button class="btn btn-primary" id="btn" onclick="submitForm()" type="button" style="padding: 4px; margin: 0 10px 0 10px"><i--}}
                                {{--                                                class="fa fa-fw fa-lg fa-check-circle" style="font-size: 14px"></i><i--}}
                                {{--                                                class="loading-icon fa-lg fas fa-spinner fa-spin hide"--}}
                                {{--                                                style="display: none"></i><span id="textSpan" style="font-size: 14px">{{__("save")}}</span></button>--}}
                            </div>
                        </div>
                    </div>
                    {{--                            </tfoot>--}}
                    </table>

                </div>
            </div>
        </div>
        @if($confirmDocument == 0)
            <div class="row" id="submitFormDiv">
                <div class="col-md-12" id="submitForm">
                    <div class="form-group">
                        <button class="btn btn-primary" id="btn" ><i class="fa fa-fw fa-lg fa-check-circle"></i>{{__("Save")}}</button>
                    </div>
                </div>
            </div>
            @endif
            </div>
            </div>
            </div>
            </div>

    </form>
@endsection
@section("scripts")
    <!-- Data table plugin-->
    <script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
    <script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>

    <script type="text/javascript">$('#sampleTable').DataTable();</script>
    <!-- Google analytics script-->
    <script type="text/javascript">


        if(document.location.hostname == 'pratikborsadiya.in') {
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-72504830-1', 'auto');
            ga('send', 'pageview');
        }
        {{--$("#unit" + noOfRows).select2({--}}
        {{--    placeholder: "{{__('select-unit')}}",--}}
        {{--    width: "100%",--}}
        {{--});--}}
        var itemsArray = [];
        var dtToday = new Date();
        var month = dtToday.getMonth() + 1;
        var day = dtToday.getDate();
        var year = dtToday.getFullYear();
        if (month < 10)
            month = '0' + month.toString();
        if (day < 10)
            day = '0' + day.toString();

        var minDate = year + '-' + month + '-' + day;
        $('#date').val(minDate);
        // $('#date').attr("readonly", true);

        let noOfRows = 1;
        var baseUrl = window.location.origin;
        window.onload = function () {
        document.getElementById('store_id').addEventListener('change', function () {
            var selectedStoreID = this.value;
            if (selectedStoreID) {
             console.log( baseUrl + "/en/ajax/items/get-store-items/"+selectedStoreID)


            $.ajax({

                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/items/get-store-items/"+selectedStoreID,
                type: 'get',

                success: function(response){
                    itemsArray = response["items"];
                    var appenddata1 = "";
                    var appenddata2 = "";
                    for (var i = 0; i < itemsArray.length; i++) {
                        appenddata1 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].name + " </option>";
                        appenddata2 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].code + " </option>";
                    }
                    $("#item"+noOfRows).append(appenddata1);
                    $("#code"+noOfRows).append(appenddata2);
                },

            });
        }

        });
        }
        function openItemWindow() {
            window.open("{{route("admin.items.create")}}", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=300,left=200,width=1000,height=600");
        }


        $("#code" + noOfRows).select2({
            placeholder: "{{__('select-code')}}",
            width: "100%",
        });
        $("#item" + noOfRows).select2({
            placeholder: "{{__('select-item')}}",
            width: "93%",
        });
        $("#store").select2({
            placeholder: "{{__('select-store')}}",
            width: "100%",
        });
        $("#production_line").select2({
            placeholder: "{{__('select-production-line')}}",
            width: "100%",
        });
        $("#sales_order_id").select2({
            placeholder: "{{__('select-sales-order-number')}}",
            width: "100%",
        });
        $("#unit" + noOfRows).select2({
            placeholder: "{{__('select-unit')}}",
            width: "100%",
        });

        function getItemName(rowNo){
            $("#unit" + rowNo).empty();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/items/get-item-unit/" + $("#code" + rowNo).val(),
                success: function (response) {
                    $("#main_unit").text(`(${response[0]})`).css("color", "red");
                    if (response.status === 200) {
                        options = '';
                        for (var i = 0; i < response.data.length; i++) {
                            options += '<option value="' + response.data[i].id + '">' + response.data[i].unit_name + '</option>';
                        }
                        $("#unit" + rowNo).append(options);
                    }
                }
            })
            $('#item' + rowNo).empty();
            var appenddata1 = "";
            for (var i = 0; i < itemsArray.length; i++) {
                appenddata1 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].name + " </option>";
            }
            $("#item"+rowNo).append(appenddata1);
            var codeVal = $("#code" + rowNo).val();
            $("#item" + rowNo + " option[value='" + codeVal + "']").attr("selected", "selected");
            $("#quantity" + rowNo).removeAttr("readonly");
            $("#price" + rowNo).removeAttr("readonly");
            $("#deliveryType" + rowNo).removeAttr("disabled");
            $("#notes" + rowNo).removeAttr("readonly");
        }

        function getItemCode(rowNo) {
            $("#unit" + rowNo).empty();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/items/get-item-unit/" + $("#item" + rowNo).val(),
                success: function (response) {
                    $("#main_unit").text(`(${response[0]})`).css("color", "red");
                    if (response["status"] === 200) {
                        options = '';
                        for (var i = 0; i < response.data.length; i++) {
                            options += '<option value="' + response.data[i].id + '">' + response.data[i].unit_name + '</option>';
                        }
                        $("#unit" + rowNo).append(options);
                    }
                }
            })
            $('#code' + rowNo).empty();
            var appenddata1 = "";
            for (var i = 0; i < itemsArray.length; i++) {
                appenddata1 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].code + " </option>";
            }
            $("#code"+rowNo).append(appenddata1);
            var nameVal = $("#item" + rowNo).val();
            $("#code" + rowNo + " option[value='" + nameVal + "']").attr("selected", "selected");
            $("#quantity" + rowNo).removeAttr("readonly");
            $("#price" + rowNo).removeAttr("readonly");
            $("#deliveryType" + rowNo).removeAttr("disabled");
            $("#notes" + rowNo).removeAttr("readonly");
        }

        function addRow() {
            if ($("#item" + noOfRows).val() === "" || $("#code" + noOfRows).val() === "" || $("#unit" + noOfRows).val() === "" || $("#quantity" + noOfRows).val() === "" ) {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('table-error-msg')}}'
                })
            } else {

                noOfRows++;
                $('#tableBody').append(
                    `
                        <tr name="data[]" id="trControl` + noOfRows + `">
                 <td style="text-align: center; padding: 5px 5px 5px 5px; margin: 0">` + noOfRows + `<span style="padding: 0; margin: 0; display: block;line-height:2px" class="control-link remove"><i style="font-size: 12px" class="far fa-trash-alt"></i></span>
                                            </td>
<td style="padding: 5px 5px 5px 5px; margin: 0">
    <select onchange="getItemName(` + noOfRows + `)" class="form-control"
                                        id="code` + noOfRows + `" required>
                                    <option></option>
                    </select>
                     <div class="input-error" id="codeError` + noOfRows + `" style="padding-top: 10px;display:none; font-size: 13px"></div>
                </td>
                <td style="padding: 5px 5px 5px 5px; margin: 0">
            <div id="itemsDiv">
                   <select name="item_id[]" onchange="getItemCode(` + noOfRows + `)" class="form-control" id="item` + noOfRows + `" required>
                      <option></option>
                    </select>

                    <div class="input-error" id="itemError` + noOfRows + `" style="padding-top: 10px; display:none; font-size: 13px"></div>
                 </div>
                </td>
                  <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                    <select  id="unit` + noOfRows + `" name="unit[]" class="form-control" required>
                                                    </select>
                                                </td>

<td style="padding: 5px 5px 5px 5px; margin: 0">
<input class="form-control" type="number" name="quantity[]" id="quantity` + noOfRows + `" min="0" required readonly style="padding: 3px;font-size: 13px">
                         <div class="input-error" id="quantityError` + noOfRows + `" style="padding-top: 10px; display:none; font-size: 13px"></div>
                                            </td>

                                        </tr>
             `
                );
                var appenddata1 = "";
                var appenddata2 = "";
                for (var i = 0; i < itemsArray.length; i++) {
                    appenddata1 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].name + " </option>";
                    appenddata2 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].code + " </option>";
                }
                $("#item"+noOfRows).append(appenddata1);
                $("#code"+noOfRows).append(appenddata2);
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
                $("#unit" + noOfRows).select2({
                    placeholder: "{{__('select-unit')}}",
                    width: "100%",
                });

            }
        }

        function submitForm() {
            $("#storeError").css("display", "none");
            $("#storeError").html("");
            $("#salesOrderError").css("display", "none");
            $("#salesOrderError").html("");
            $("#productionLineError").css("display", "none");
            $("#productionLineError").html("");
            $("#select2-production_line-container").css("border", "");
            $("#select2-store-container").css("border", "");
            var dataArray = [];
            var formData = new FormData();
            var completed = 1;
            if ($("#store").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-store')}}'
                })
                completed = 0;
                $("#storeError").css("display", "")
                $("#storeError").html("{{__('required-field')}}");
                $("#select2-store-container").css("border", "#b7000c solid 2px")
            } else if ($("#sales_order_id").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-sales-order-number')}}'
                })
                completed = 0;
                $("#salesOrderError").css("display", "")
                $("#salesOrderError").html("{{__('required-field')}}");
                $("#select2-sales_order_id-container").css("border", "#b7000c solid 2px")
            }else if ($("#production_line").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-production-line')}}'
                })
                completed = 0;
                $("#productionLineError").css("display", "")
                $("#productionLineError").html("{{__('required-field')}}");
                $("#select2-production_line-container").css("border", "#b7000c solid 2px")
            }else {
                for (var i = 1; i <= noOfRows; i++) {
                    if ($("#item" + i).val() === "") {
                        $("#itemError" + i).css("display", "")
                        $("#itemError" + i).html("{{__('required-field')}}");
                        $("#select2-item" + i + "-container").css("border", "#b7000c solid 2px")
                    } else {
                        $("#itemError" + i).html("");
                        $("#itemError" + i).css("display", "none")
                        $("#select2-item" + i + "-container").css("border", "")
                    }
                    if ($("#code" + i).val() === "") {
                        $("#codeError" + i).css("display", "")
                        $("#codeError" + i).html("{{__('required-field')}}");
                        $("#select2-code" + i + "-container").css("border", "#b7000c solid 2px")
                    } else {
                        $("#codeError" + i).html("");
                        $("#codeError" + i).css("display", "none")
                        $("#select2-code" + i + "-container").css("border", "")
                    }
                    if ($("#quantity" + i).val() === "") {
                        $("#quantityError" + i).css("display", "")
                        $("#quantityError" + i).html("{{__('required-field')}}");
                        $("#quantity" + i).css("border", "#b7000c solid 2px")
                    } else {
                        $("#quantityError" + i).html("");
                        $("#quantityError" + i).css("display", "none")
                        $("#quantity" + i).css("border", "")
                    }
                    if ($("#item" + i).val() === "" || $("#code" + i).val() === "" || $("#quantity" + i).val() === "") {
                        swal({
                            icon: 'error',
                            title: '{{__('error')}}',
                            text: '{{__('fill-row-error')}}' + i
                        })
                        completed = 0;
                        break;
                    } else {
                        const dataObj = {
                            item_id: $("#item" + i).val(),
                            quantity: $("#quantity" + i).val(),
                            notes: $("#notes" + i).val(),
                        };
                        dataArray.push(dataObj);
                    }
                }
            }

            if (completed === 1) {
                formData.append("store_id", $("#store").val());
                formData.append("production_line_id", $("#production_line").val());
                formData.append("sales_order_id", $("#sales_order_id").val());
                formData.append("notes", $("#notes").val());
                formData.append("items", JSON.stringify(dataArray));
                $(".hide").css({'display': ''});
                $(".fa-check-circle")[0].style.display = "none";
                $("#btn").attr("disabled", true);
                $("#textSpan").html("{{__("saving")}}");
                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + "/en/ajax/production-orders/store",
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function (response) {
                        if (response["status"] === 200) {
                            swal({
                                closeOnClickOutside: false,
                                title: "Added Successfully",
                                text: response["message"],
                                icon: "success",
                            }).then(function () {
                                window.location.href = '{{route("admin.production-orders.index", "all")}}';
                            })

                        } else if (response["status"] === 201) {
                            swal({
                                icon: 'error',
                                title: '{{__('error')}}',
                                text: response["message"]
                            })
                        }
                    },
                    error: function (response) {

                    }
                });


            }

        }

        $(document).on('click', '.table .remove', function () {
            $(this).closest('tr').remove();
            noOfRows--;
            $('.table tbody tr').each(function (i) {
                $($(this).find('td')[0]).html(i + 1).append(`<span style="padding: 0; margin: 0; display: block;line-height:2px" class="control-link remove"><i style="font-size: 12px" class="far fa-trash-alt"></i></span>`);
                $($(this).find('td select')[0]).attr("id", "code" + (i + 1));
                $($(this).find('td div')[0]).attr("id", "codeError" + (i + 1));
                $($(this).find('td select')[1]).attr("id", "item" + (i + 1));
                $($(this).find('td div div')[0]).attr("id", "itemError" + (i + 1));
                $($(this)).attr("id", "trControl" + (i + 1));
                $($(this).find('td input')[0]).attr("id", "unit" + (i + 1));
                $($(this).find('td input')[1]).attr("id", "quantity" + (i + 1));
                $($(this).find('td div')[3]).attr("id", "quantityError" + (i + 1));
                $($(this).find('td input')[2]).attr("id", "notes" + (i + 1));
                $("#code" + (i + 1)).removeAttr("onchange");
                $("#code" + (i + 1)).attr("onchange", "getItemName(" + (i + 1) + ")");
                $("#item" + (i + 1)).removeAttr("onchange");
                $("#item" + (i + 1)).attr("onchange", "getItemCode(" + (i + 1) + ")");
            });

            $("#code" + noOfRows).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item" + noOfRows).select2({
                placeholder: "{{__('select-item')}}",
                width: "93%",
            });
            $("#unit" + noOfRows).select2({
                placeholder: "{{__('select-unit')}}",
                width: "100%",
            });
            if (noOfRows == 0) {
                noOfRows++;
                $('#tableBody').append(
                    `
                        <tr name="data[]" id="trControl` + noOfRows + `" >
                 <td style="text-align: center; padding: 5px 5px 5px 5px; margin: 0">` + noOfRows + `<span style="padding: 0; margin: 0; display: block;line-height:2px" class="control-link remove"><i style="font-size: 12px" class="far fa-trash-alt"></i></span>
                                            </td>


<td style="padding: 5px 5px 5px 5px; margin: 0">
    <select onchange="getItemName(` + noOfRows + `)" class="form-control"
                                        id="code` + noOfRows + `" required>
                                    <option></option>
                    </select>
                     <div class="input-error" id="codeError` + noOfRows + `" style="padding-top: 10px;display:none; font-size: 13px"></div>
                </td>
                <td style="padding: 5px 5px 5px 5px; margin: 0">
            <div id="itemsDiv">
                   <select onchange="getItemCode(` + noOfRows + `)" class="form-control" id="item` + noOfRows + `" required>
                      <option></option>
                    </select>

                    <div class="input-error" id="itemError` + noOfRows + `" style="padding-top: 10px; display:none; font-size: 13px"></div>
                 </div>
                </td>
                <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                    <select  id="unit` + noOfRows + `" name="unit" class="form-control" required>
                                                    </select>
                                                </td>
<td style="padding: 5px 5px 5px 5px; margin: 0">
<input class="form-control" name="quantity[]" type="number" id="quantity` + noOfRows + `" min="0" required readonly style="padding: 3px;font-size: 13px">
                         <div class="input-error" id="quantityError` + noOfRows + `" style="padding-top: 10px; display:none; font-size: 13px"></div>
                                            </td>

                                        </tr>
             `
                );
                var appenddata1 = "";
                var appenddata2 = "";
                for (var i = 0; i < itemsArray.length; i++) {
                    appenddata1 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].name + " </option>";
                    appenddata2 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].code + " </option>";
                }
                $("#item"+noOfRows).append(appenddata1);
                $("#code"+noOfRows).append(appenddata2);
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
                $("#unit" + noOfRows).select2({
                    placeholder: "{{__('select-unit')}}",
                    width: "100%",
                });

            }
        });





    </script>

    <script type="text/javascript" src="{{asset("assets/js/documentHelper.js")}}"></script>

@endsection