@extends("layouts.admin.app")

@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__('documents in')}}</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 in')}}</a></li>
        </ul>
    </div>
@endsection
@section("content")
    @include("includes.dialog")

    <form action="{{route("admin.documents-in.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" 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>
                                                <th style="width: 5%">{{__('cost')}}</th>
                                            </tr>
                                            </thead>
                                            <tbody id="tableBody" style="font-size: 12px">
                                                                                            <tr 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">
                                    </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');
        }

            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 () {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/items/get-all-items",
                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");
            $("#cost" + 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");
            $("#cost" + rowNo).removeAttr("readonly");
        }

            function addRow() {
            if ($("#item" + noOfRows).val() === "" || $("#code" + noOfRows).val() === "" || $("#unit" + noOfRows).val() === "" || $("#quantity" + noOfRows).val() === ""  || $("#cost" + 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>
                                        <td style="padding: 5px 5px 5px 5px; margin: 0">
<input class="form-control"  name="cost[]"type="number" id="cost` + noOfRows + `" min="0" required readonly style="padding: 3px;font-size: 13px">
                         <div class="input-error" id="costError` + 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>
<td style="padding: 5px 5px 5px 5px; margin: 0">
<input class="form-control"  name="cost[]"type="number" id="cost` + noOfRows + `" min="0" required readonly style="padding: 3px;font-size: 13px">
                         <div class="input-error" id="costError` + 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