@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title" style="padding: 11px">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("Delivery-Orders")}}</h1>
            <p>{{__("all-Delivery-orders")}}</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="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="{{route("admin.Delivery-orders.index", "all")}}">{{__("Delivery-Orders")}}</a>
            </li>
            <li class="breadcrumb-item"><a href="#">{{__("edit")}}</a></li>
        </ul>
    </div>
@endsection
@section("content")
    <div class="tile">
        <div class="tile-body">
    <form id="main_form" method="post">
        @csrf
        <div class="row">
            <div class="col-md-12">

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group row" style="margin-bottom: 1px">
                                    <label
                                        style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                        class="col-form-label"><b>{{__("number")}}</b></label>
                                    <div class="col-sm-8">
                                        <input class="form-control @if($errors->has('number')) is-invalid @endif"
                                               type="text"
                                               name="number" id="number" placeholder="{{__("")}}"
                                               value="{{$Receipts->number}}" style="padding: 3px;font-size: 13px" disabled>
                                        @error("number")
                                        <div class="input-error" style="padding-top: 10px">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group row" style="margin-bottom: 1px">
                                    <label
                                        style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                        class="col-form-label"><b>{{__("Order Number")}}</b></label>
                                    <div class="col-sm-8">
                                        <input class="form-control @if($errors->has('name')) is-invalid @endif"
                                               type="text"
                                               name="number" id="number" placeholder="{{__("")}}"
                                               value="{{$Receipts->order->number}}" style="padding: 3px;font-size: 13px" disabled>
                                        @error("name")
                                        <div class="input-error" style="padding-top: 10px">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group row" style="margin-bottom: 1px">
                                    <label
                                        style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                        class="col-form-label"><b>{{__("date")}}</b></label>
                                    <div class="col-sm-8">
                                        <input class="form-control @if($errors->has('date')) is-invalid @endif"
                                               type="text"
                                               name="date" id="date" placeholder="{{__("")}}"
                                               value="{{$Receipts->date}}" style="padding: 3px;font-size: 13px" disabled>
                                        @error("date")
                                        <div class="input-error" style="padding-top: 10px">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group row" style="margin-bottom: 1px">
                                    <label
                                        style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                        class="col-form-label"><b>{{__("type")}}</b></label>
                                    <div class="col-sm-8">
                                        <input class="form-control @if($errors->has('type')) is-invalid @endif"
                                               type="text"
                                               name="date" id="date" placeholder="{{__("")}}"
                                               value="{{$Receipts->ReceiptType->type}}" style="padding: 3px;font-size: 13px" disabled>
                                        @error("type")
                                        <div class="input-error" style="padding-top: 10px">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group row" style="margin-bottom: 1px">
                                    <label
                                        style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                        class="col-form-label"><b>{{__("Warehouse")}}</b></label>
                                    <div class="col-sm-8">
                                        <input class="form-control @if($errors->has('warehouse')) is-invalid @endif"
                                               type="text"
                                               name="warehouse" id="warehouse" placeholder="{{__("")}}"
                                               value="{{$Receipts->store->name}}" style="padding: 3px;font-size: 13px" disabled>
                                        @error("warehouse")
                                        <div class="input-error" style="padding-top: 10px">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group row" style="margin-bottom: 1px">
                                    <label
                                        style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                        class="col-form-label"><b>{{__("client-name")}}</b></label>
                                    <div class="col-sm-8">
                                        <input class="form-control @if($errors->has('user_name')) is-invalid @endif"
                                               type="text"
                                               name="user_name" id="user_name" placeholder="{{__("")}}"
                                               value="{{$Receipts->order->salesOrder->client->en_name}}" style="padding: 3px;font-size: 13px" disabled>
                                        @error("user_name")
                                        <div class="input-error" style="padding-top: 10px">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group row" style="margin-bottom: 1px">
                                    <label
                                        style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                        class="col-form-label"><b>{{__("Supply Team")}}</b></label>
                                    <div class="col-sm-8">
                                        <input class="form-control @if($errors->has('Supply_Team')) is-invalid @endif"
                                               type="text"
                                               name="Supply_Team" id="Team" placeholder="{{__("")}}"
                                               value="{{$Receipts->receiptable->supply_team_name}}" style="padding: 3px;font-size: 13px" disabled>
                                        @error("Supply_Team")
                                        <div class="input-error" style="padding-top: 10px">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
            </div>
        </div>        <div class="row">

            <div class="col-md-12">
                <div class="scrollable-table" style="max-height: 380px">
                    <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')}}</th>
                                            <th style="width: 2%">{{__('quantity')}}<span class="required"></span></th>
                                            <th style="width: 12%">{{__('notes')}}</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tableBody" style="font-size: 12px">
                                                                                        @foreach($orderItems as $orderItem)
                                                <tr id="trControl{{++$serial_number}}">
                                                    <input type="hidden" value="{{$orderItem->id}}"
                                                           id="id{{$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}})"
                                                                disabled   class="form-control"
                                                                id="code{{$serial_number}}" style="width: 80%; padding: 3px; font-size: 13px" readonly>
                                                            <option></option>
                                                            @foreach($items as $item)
                                                                <option
                                                                    {{selected("item_code", $orderItem->itemNumber,$item)}}  value="{{$item->id}}">{{$item->item_code}}</option>
                                                            @endforeach
                                                        </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">
                                                        <select onchange="getItemCode({{$serial_number}})"
                                                                class="form-control" readonly disabled
                                                                id="item{{$serial_number}}" readonly style="width: 80%; padding: 3px; font-size: 13px">
                                                            <option></option>
                                                            @foreach($items as $item)
                                                                <option  {{selected("name", $orderItem->itemName,$item)}}   value="{{$item->id}}">{{$item->name}}</option>
                                                            @endforeach
                                                        </select>
                                                        <a href="{{route("admin.items.create")}}"><i class="fa fa-fw fa-lg fa-plus-circle"
                                                                                                     style="font-size: 15px; color: green; cursor: pointer"></i></a>
                                                        <div class="input-error" id="itemError{{$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" style="padding: 3px;font-size: 13px"
                                                               id="unit{{$serial_number}}" value="{{$orderItem->unit}}" required readonly>
                                                    </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}}" min="0" value="{{$orderItem->quantity}}" required>
                                                        <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" style="padding: 3px;font-size: 13px" id="notes{{$serial_number}}" value="{{$orderItem->notes}}" required readonly>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </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" style="padding-top: 5px">
                            <div class="col-lg-6">
                                <div class="form-group row">
                                    <label style="@if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif; font-size: 13px"
                                           class="col-form-label"><b>{{__("notes")}}</b></label>
                                    <div class="col-sm-10">
                                        <textarea style="height: 30px; font-size: 13px; padding: 3px"
                                                  class="form-control"
                                                  type="text"

                                                  name="notes" id="notes"
                                                  readonly style="width: 80%; padding: 3px; font-size: 13px" placeholder="{{__("enter-notes")}}">{{$purchaseOrder['notes']}}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <button class="btn btn-primary" id="btn" 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>
    </form>                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>
@endsection
@section("scripts")
    <script type="text/javascript">
        let noOfRows = $('.table tbody tr').length;
        var baseUrl = window.location.origin;

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

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

        $("#employee").select2({
            placeholder: "{{__('select-employee-name')}}",
            width: "90%",
        });
        $("#store").select2({
            placeholder: "{{__('select-store')}}",
            width: "100%",
        });
        $("#sales_order_id").select2({
            placeholder: "{{__('select-sales-order-number')}}",
            width: "100%",
        });
        $("#status").select2({
            placeholder: "{{__('select-status')}}",
            width: "100%",
        });
        $("#purchase_type").select2({
            placeholder: "{{__('select-purchase-type')}}",
            width: "100%",
        });
        for(var i=1; i<=noOfRows; i++){
            $("#code"+i).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item"+i).select2({
                placeholder: "{{__('select-item')}}",
                width: "93%",
            });
        }

        function getItemName(rowNo) {
            $.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) {
                    if (response["status"] === 200) {
                        $("#unit" + rowNo).val(response["data"]);
                    }
                }
            })
            $('#item' + rowNo)
                .empty()
                .append(`
                  @foreach($items as $item)
                <option value="{{$item->id}}" readonly>{{$item->name}}</option>
                @endforeach
                `);
            var codeVal = $("#code" + rowNo).val();
            $("#item" + rowNo + " option[value='" + codeVal + "']").attr("selected", "selected");
            $("#quantity" + rowNo).removeAttr("readonly");
            $("#notes" + rowNo).removeAttr("readonly");
        }

        function getItemCode(rowNo) {
            $.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) {
                    if (response["status"] === 200) {
                        $("#unit" + rowNo).val(response["data"]);
                    }
                }
            })
            $('#code' + rowNo)
                .empty()
                .append(`
           @foreach($items as $item)
                <option value="{{$item->id}}">{{$item->item_code}}</option>
            @endforeach
                `);
            var nameVal = $("#item" + rowNo).val();
            $("#code" + rowNo + " option[value='" + nameVal + "']").attr("selected", "selected");
            $("#quantity" + 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 id="trControl` + noOfRows + `">
                      <input type="hidden" value="0" id="id` + 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 readonly>
                                                    <option></option>
                                                    @foreach($items as $item)
                    <option value="{{$item->id}}">{{$item->item_code}}</option>
                                                    @endforeach
                    </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">
                                                    <select onchange="getItemCode(` + noOfRows + `)"
                                                             class="form-control"
                                                            id="item` + noOfRows + `" required  readonly>
                                                        <option></option>
                                                        @foreach($items as $item)
                    <option value="{{$item->id}}">{{$item->name}}</option>
                                                        @endforeach
                    </select>

                    <a onclick="openItemWindow()"><i
                            class="fa fa-fw fa-lg fa-plus-circle"
                            style="font-size: 15px; color: green; cursor: pointer"></i></a>
                    <div class="input-error" id="itemError` + 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" type="text" style="padding: 3px;font-size: 13px"
                                                       id="unit` + noOfRows + `" required readonly>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="number" style="padding: 3px;font-size: 13px"
                                                       id="quantity` + noOfRows + `" min="0" required readonly>
                                                <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" type="text" style="padding: 3px;font-size: 13px"
                           id="notes` + noOfRows + `" required readonly>
                                            </td>
                                        </tr>
             `
                );
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
            }
        }

        $("#btn").on("click", async function () {
            var baseUrl = window.location.origin;
            var dataArray = [];
            var completed = 1;
            if ($("#employee").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-employee')}}'
                })
                completed = 0;
            }else if ($("#store").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-store')}}'
                })
                completed = 0;
            } else if ($("#sales_order_id").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-sales-order-number')}}'
                })
                completed = 0;
            } 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 = {
                            id: $("#id" + i).val(),
                            item_id: $("#item" + i).val(),
                            quantity: $("#quantity" + i).val(),
                            notes: $("#notes" + i).val(),
                        };
                        dataArray.push(dataObj);
                    }
                }
            }
            if (completed === 1) {
                $(".hide").css({'display': ''});
                $(".fa-check-circle")[0].style.display = "none";
                $("#btn").attr("disabled", true);
                $("#textSpan").html("{{__("saving")}}");
                console.log("/en/ajax/Receipts-orders/update/{{$Receipts['id']}}")
                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + "/en/ajax/Receipts-orders/update/{{$Receipts['id']}}",
                    data: {
                        "purchaseOrderId": {{$purchaseOrder['id']}},
                        "notes": $("#notes").val(),
                        "items": JSON.stringify(dataArray)
                    },
                    success: function (response) {
                        //  response = JSON.parse(response);
                        if (response["status"] === 200) {
                            swal({
                                title: "Updated Successfully",
                                text: response["message"],
                                icon: "success",
                            }).then(function () {
                                window.location.href = '{{route("admin.purchase-orders.index", "all")}}';
                            })

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

                        }

                    },
                    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('input')[0]).attr("id", "id" + (i + 1));
                $($(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')[1]).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')[2]).attr("id", "quantityError" + (i + 1));
                $($(this).find('td input')[4]).attr("id", "notes" + (i + 1));
                $($(this).find('td select')[2]).attr("id", "ItemStatus" + (i + 1));
                $($(this).find('td select')[2]).attr("name", "ItemStatus" + (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%",
            });
            var total = 0;

            if (noOfRows == 0) {
                noOfRows++;
                $('#tableBody').append(
                    `
                     <tr id="trControl` + noOfRows + `">
                      <input type="hidden" value="0" id="id` + 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>
                                                    @foreach($items as $item)
                    <option value="{{$item->id}}">{{$item->item_code}}</option>
                                                    @endforeach
                    </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">
                                                    <select onchange="getItemCode(` + noOfRows + `)"
                                                            class="form-control"
                                                            id="item` + noOfRows + `" required>
                                                        <option></option>
                                                        @foreach($items as $item)
                    <option value="{{$item->id}}">{{$item->name}}</option>
                                                        @endforeach
                    </select>

                    <a onclick="openItemWindow()"><i
                            class="fa fa-fw fa-lg fa-plus-circle"
                            style="font-size: 15px; color: green; cursor: pointer"></i></a>
                    <div class="input-error" id="itemError` + 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" type="text" style="padding: 3px;font-size: 13px"
                                                       id="unit` + noOfRows + `" required readonly>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="number" style="padding: 3px;font-size: 13px"
                                                       id="quantity` + noOfRows + `" min="0" required readonly>
                                                <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" type="text" style="padding: 3px;font-size: 13px"
                                                       id="notes` + noOfRows + `" required readonly>
                                            </td>
                                        </tr>
             `
                );
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
            }
        });


    </script>

@endsection