@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>{{__("purchase-orders")}}</h1>
        <p>{{__("all-purchase-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.purchase-orders.index", "all")}}">{{__("purchase-orders")}}</a>
        </li>
        <li class="breadcrumb-item"><a href="#">{{__("edit")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<form id="main_form" method="post">
    @csrf
    <div class="row">
        <div class="col-md-12">
            <div class="tile" style="padding: 5px 5px 5px 5px">
                <div class="tile-body">
                    <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" style="padding: 3px;font-size: 13px" type="text" name="number" id="number" value="{{$purchaseOrder['number']}}" readonly>
                                </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: 30%;" class="col-form-label"><b>{{__("date")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="date" value="{{$purchaseOrder['date']}}" name="date" id="date" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("employee-name")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="employee" id="employee" class="form-control">
                                        <option></option>
                                        @foreach($employees as $employee)
                                        <option value="{{$employee->id}}" @if ($purchaseOrder['employee_id']==$employee->id)
                                            {{'selected="selected"'}}
                                            @endif>{{$employee->full_name}}
                                        </option>
                                        @endforeach
                                    </select>
                                    <a onclick="openEmployeeWindow()"><i class="fa fa-fw fa-lg fa-plus-circle" style="font-size: 20px; color: green; cursor: pointer; padding-left: 10px"></i></a>
                                    <div class="input-error" id="employeeError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("store")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="store" id="store" class="form-control">
                                        <option></option>
                                        @foreach($stores as $store)
                                        <option value="{{$store->id}}" @if ($purchaseOrder['store_id']==$store->id)
                                            {{'selected="selected"'}}
                                            @endif>{{$store->name}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        @if ($purchaseOrder['sales_order_id']== 0)
                    <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("sales-order-number")}}</b></label>
                                <div class="col-sm-8">
                                    <input type="hidden" name="sales_order_id" id="sales_order_id" value="0">
                                    <input class="form-control" style="padding: 3px;font-size: 13px" type="text" value="0" readonly>
                                    <div class="input-error" id="salesOrderIdError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                            </div>
                        </div>
                        @else
                   <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("sales-order-number")}}</b></label>
                                <div class="col-sm-8">
                                    <input type="hidden" name="sales_order_id" id="sales_order_id" value="{{$purchaseOrder->salesOrder->id}}">
                                    <input class="form-control" style="padding: 3px;font-size: 13px" type="text" value="{{$purchaseOrder->salesOrder->number}}" readonly>
                                    <div class="input-error" id="salesOrderIdError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                            </div>
                        </div>
                    @endif
                <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("status")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="status" id="status" class="form-control">
                                        <option></option>
                                        @foreach($status as $orderStatus)
                                        <option value="{{$orderStatus->id}}" @if ($purchaseOrder['status_id']==$orderStatus->id)
                                            {{'selected="selected"'}}
                                            @endif>{{$orderStatus->status}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("purchase-type")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="purchase_type" id="purchase_type" class="form-control">
                                        <option></option>
                                        <option value="Local" @if ($purchaseOrder['purchase_type']=="Local" ) selected @endif>{{__("local")}}</option>
                                        <option value="Importation" @if ($purchaseOrder['purchase_type']=="Importation" ) selected @endif>{{__("importation")}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        @if (isset($purchaseOrder->salesOrder) && !empty($purchaseOrder['customer_name']))
                        <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: 30%;" class="col-form-label"><b>{{ __("client-name") }}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="text" name="customer_name" value="{{ $purchaseOrder['customer_name'] }}" id="customer_name" readonly>
                                </div>
                            </div>
                        </div>
                        @else
                        @endif
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("suppliers")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="vendors" id="vendors" class="form-control">
                                        <option></option>
                                        @foreach($vendors as $vendor)
                                        <option value="{{$vendor->id}}" @if ($purchaseOrder['vendor_id'] == $vendor->id){{'selected="selected"'}}@endif>
                                            {{$vendor->en_name}}
                                        </option>
                                        @endforeach
                                    </select>
                                    <div class="input-error" id="vendorsError" style="padding-top: 10px;display: none; font-size: 13px"></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: 4%">{{__('unit-price')}}<span class="required"></span>
                                            </th>
                                            <th style="width: 2%">{{__('total')}}</th>
                                            <th style="width: 5%">{{__('status')}}</th>
                                            <th style="width: 6%">{{__('delivery-type')}}</th>
                                            <th style="width: 12%">{{__('notes')}}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody" style="font-size: 12px">
                                                                                @foreach($purchaseOrderItems as $purchaseOrderItem)
                                        <tr id="trControl{{++$serial_number}}">
                                            <input type="hidden" value="{{$purchaseOrderItem->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}})" class="form-control" id="code{{$serial_number}}" required>
                                                    <option></option>
                                                    @foreach($items as $item)
                                                    <option @if($item->id == $purchaseOrderItem->item_id) selected @endif value="{{$item->id}}">{{$item->getItemCode() }}</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" id="item{{$serial_number}}" required>
                                                    <option></option>
                                                    @foreach($items as $item)
                                                    <option {{selected("name", $purchaseOrderItem->item->name,$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">
                                                <select  id="unit{{$serial_number}}" class="form-control" required>
                                                    <option value="{{ $purchaseOrderItem->item->unit->id }}">{{ $purchaseOrderItem->item->unit->unit_name }}</option>
                                                    @foreach($units as $unit)
                                                        @if($purchaseOrderItem->item_id === $unit->item_id)
                                                            <option value="{{ $unit->unit->id }}">{{ $unit->unit->unit_name }}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="number" style="padding: 3px;font-size: 13px" onchange="updateTotalPrice({{$serial_number}})" id="quantity{{$serial_number}}" min="0" value="{{($purchaseOrderItem->entered_quantity ? $purchaseOrderItem->entered_quantity : $purchaseOrderItem->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">
                                                <div class="input-group flex-nowrap">
                                                    <input class="form-control" type="number" style="padding: 3px 0 3px 3px; font-size: 13px; @if(app()->getLocale() == 'ar') border-top-left-radius: 0;border-bottom-left-radius: 0; border-left: 0; @else border-top-right-radius: 0;border-bottom-right-radius: 0; border-right: 0; @endif;" onchange="updateTotalPrice({{$serial_number}})" id="price{{$serial_number}}" value="{{$purchaseOrderItem->price}}" min="0" required>
                                                    <span class="input-group-text" style="padding: 0 3px 0 3px; margin: 0; font-size: 13px;   @if(app()->getLocale() == 'ar') border-top-right-radius: 0;border-bottom-right-radius: 0; @else border-top-left-radius: 0;border-bottom-left-radius: 0; @endif">{{__('sar')}}</span>
                                                </div>
                                                <div class="input-error" id="priceError{{$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="number" id="total{{$serial_number}}" value="{{$purchaseOrderItem->entered_quantity * $purchaseOrderItem->price}}" readonly style="padding: 3px;font-size: 13px">
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <select class="form-control" id="ItemStatus{{$serial_number}}" name="ItemStatus{{$serial_number}}" required>
                                                    <option></option>
                                                    @foreach($status as $orderStatus)
                                                    <option value="{{$orderStatus->id}}" @if($purchaseOrderItem->status_id == $orderStatus->id) selected @endif>{{$orderStatus->status}}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <select class="form-control" id="deliveryType{{$serial_number}}" name="deliveryType{{$serial_number}}" required>
                                                    <option></option>
                                                    @foreach($deliveryTypes as $deliveryType)
                                                    <option @if($purchaseOrderItem->delivery_type_id == $deliveryType->id) selected @endif
                                                        value="{{$deliveryType->id}}">{{$deliveryType->value}}</option>
                                                    @endforeach
                                                </select>
                                            </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="{{$purchaseOrderItem->notes}}" required>
                                            </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" placeholder="{{__("enter-notes")}}">{{$purchaseOrder['notes']}}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group row">
                                <label class="col-form-label" style="font-size: 13px"><b>{{__("total-qty")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="number" name="total_amount" id="total_amount" value="{{$purchaseOrder['total_qty']}}" readonly style="width: 80%; padding: 3px; font-size: 13px">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group row">
                                <label class="col-form-label" style="font-size: 13px"><b>{{__("total-price")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="number" style="width: 80%; padding: 3px; font-size: 13px" name="total_price" id="total_price" value="{{$purchaseOrder['total_price']}}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                            <div class="col-lg-3"></div>
                            <div class="col-lg-3"></div>
                            <div class="col-lg-6">
                                <div class="form-group row">
                                    <label for="staticEmail"
                                    class="col-form-label" style="font-size: 13px"><b>{{ __('Total Price After Add Tax Value') }} ({{ ($tax * 100) . '%' }})</b></label>
                                    <div class="col-sm-8">
                                        <input class="form-control"
                                            type="number"
                                            name="total_price_tax" id="total_price_tax"
                                            readonly style="width: 85%; padding: 3px; font-size: 13px">
                                    </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>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section("scripts")
    <script type="text/javascript">
        let noOfRows = $('.table tbody tr').length;
        var baseUrl = window.location.origin;
        var itemsArray = [];
        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%",
        });
        $("#status").select2({
            placeholder: "{{__('select-status')}}",
            width: "100%",
        });
        $("#vendors").select2({
                placeholder: "{{__('suppliers')}}",
                width: "100%",
            });
        $("#purchase_type").select2({
            placeholder: "{{__('select-purchase-type')}}",
            width: "100%",
        });
        $("#unit" + noOfRows).select2({
            placeholder: "{{__('select-unit')}}",
            width: "100%",
        });

        var appenddata1 = [] // Reset appenddata1 for each iteration
        var appenddata2 = [] // Reset appenddata2 for each iteration
        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"];
                    callFlag = 1;
                    for (var i = 1; i <= noOfRows; i++) {
                        var codeVal = $("#code" + i).val();
                        var nameVal = $("#item" + i).val();
                        if(appenddata1.length == 0)
                        for (var j = 0; j < itemsArray.length; j++) {
                            appenddata1 += "<option value='" + itemsArray[j].id + "'>" + itemsArray[j].name + "</option>";
                            appenddata2 += "<option value='" + itemsArray[j].id + "'>" + itemsArray[j].code + "</option>";
                        }
                        $("#item" + i).empty().append(appenddata1);
                        $("#code" + i).empty().append(appenddata2);
                        $("#item" + i + " option[value='" + codeVal + "']").attr("selected", "selected");
                        $("#code" + i + " option[value='" + nameVal + "']").attr("selected", "selected");
                        $("#code" + i).select2({
                            placeholder: "{{__('select-code')}}",
                            width: "100%",
                        });
                        $("#item" + i).select2({
                            placeholder: "{{__('select-item')}}",
                            width: "93%",
                        });
                        $("#deliveryType" + i).select2({
                            placeholder: "{{__('select-delivery-type')}}",
                            width: "100%",
                        });
                        
                        $("#ItemStatus" + i).select2({
                            placeholder: "{{__('select-status')}}",
                            width: "100%",
                        });
                        $("#unit" + i).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) {
                if (response["status"] === 200) {
                    $("#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");
        $("#ItemStatus" + 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) {
                if (response["status"] === 200) {
                    $("#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");
        $("#ItemStatus" + rowNo).removeAttr("disabled");
        $("#notes" + rowNo).removeAttr("readonly");
    }

    function addRow() {
        if (
            $("#item" + noOfRows).val() === "" ||
            $("#code" + noOfRows).val() === "" ||
            $("#unit" + noOfRows).val() === "" ||
            $("#quantity" + noOfRows).val() === "" ||
            $("#price" + noOfRows).val() === "" ||
            $("#price" + noOfRows).val() == "0.00" ||
            $("#deliveryType" + 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>
                        <option></option>
                        ${appenddata2}
                    </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>
                        ${appenddata1}
                    </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">
                <select  id="unit` + noOfRows + `" 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" onchange="updateTotalPrice(` + noOfRows + `)" 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">
                    <div class="input-group flex-nowrap">
                        <input class="form-control" type="number" style="padding: 3px 0 3px 3px; font-size: 13px; @if(app()->getLocale() == 'ar') border-top-left-radius: 0;border-bottom-left-radius: 0; border-left: 0; @else border-top-right-radius: 0;border-bottom-right-radius: 0; border-right: 0; @endif" onchange="updateTotalPrice(` + noOfRows + `)" id="price` + noOfRows + `" min="0" required readonly>
                        <span class="input-group-text" style="padding: 0 3px 0 3px; margin: 0; font-size: 13px; @if(app()->getLocale() == 'ar') border-top-right-radius: 0;border-bottom-right-radius: 0; @else border-top-left-radius: 0;border-bottom-left-radius: 0; @endif">{{__('sar')}}</span>
                    </div>
                    <div class="input-error" id="priceError` + 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="number" id="total` + noOfRows + `" value="0" readonly style="padding: 3px;font-size: 13px">
                </td>
                <td style="padding: 5px 5px 5px 5px; margin: 0">
                    <select class="form-control" id="ItemStatus` + noOfRows + `" name="ItemStatus` + noOfRows + `" required disabled>
                        <option></option>
                        @foreach($status as $orderStatus)
                            <option value="{{$orderStatus->id}}">{{$orderStatus->status}}</option>
                        @endforeach
                    </select>
                </td>
                <td style="padding: 5px 5px 5px 5px; margin: 0">
                    <select class="form-control" id="deliveryType` + noOfRows + `" name="deliveryType` + noOfRows + `" required disabled>
                        <option></option>
                        @foreach($deliveryTypes as $deliveryType)
                            <option value="{{$deliveryType->id}}">{{$deliveryType->value}}</option>
                        @endforeach
                    </select>
                </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>
        `);
            var rowName = "deliveryType" + noOfRows;
            var rowNameStatus = "ItemStatus" + noOfRows;
            $('select[name="' + rowName + '"] option:eq(1)').attr('selected', 'selected');
            $('select[name="' + rowNameStatus + '"] option:eq(1)').attr('selected', 'selected');
            $("#code" + noOfRows).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item" + noOfRows).select2({
                placeholder: "{{__('select-item')}}",
                width: "93%",
            });
            $("#deliveryType" + noOfRows).select2({
                placeholder: "{{__('select-delivery-type')}}",
                width: "100%",
            });
            $("#ItemStatus" + noOfRows).select2({
                placeholder: "{{__('select-status')}}",
                width: "100%",
            });
            $("#unit" + noOfRows).select2({
                placeholder: "{{__('select-unit')}}",
                width: "100%",
                });
        }
    }

    $("#btn").on("click", async function() {
        var totalPrice  = parseFloat($("#total_price").val());
        var tax = parseFloat($("#total_price").val() * {{$tax}});
        var result = totalPrice + tax;
        var baseUrl = window.location.origin;
        var dataArray = [];
        var completed = 1;
        if ($("#store").val() == "") {
            swal({
                icon: 'error',
                title: "{{__('error ')}}",
                text: "{{__('please - select - store ')}}"
            });
            completed = 0;
        } else {
            for (var i = 1; i <= noOfRows; i++) {
                if($("#employee").val() === ""){
                    $("#employeeError").css("display", "");
                    $("#employeeError").html("{{__('required-field')}}");
                    $("#select2-item" + "-container").css("border", "#b7000c solid 2px");
                }else{
                    $("#employeeError").html("");
                    $("#employeeError").css("display", "none");
                    $("#select2-item" + "-container").css("border", "");
                }
                if($("#vendors").val() === ""){
                    $("#vendorsError").css("display", "");
                    $("#vendorsError").html("{{__('required-field')}}");
                    $("#select2-item" + "-container").css("border", "#b7000c solid 2px");
                }else{
                    $("#vendorsError").html("");
                    $("#vendorsError").css("display", "none");
                    $("#select2-item" + "-container").css("border", "");
                }
                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 ($("#price" + i).val() === "" || $("#price" + i).val() == "0.00") {
                    $("#priceError" + i).css("display", "");
                    $("#priceError" + i).html("{{__('required-field')}}");
                    $("#price" + i).css("border", "#b7000c solid 2px");
                } else {
                    $("#priceError" + i).html("");
                    $("#priceError" + i).css("display", "none");
                    $("#price" + i).css("border", "");
                }
                if ($("#item" + i).val() === "" || $("#code" + i).val() === "" || $("#quantity" + i).val() === "" || $("#price" + i).val() === "" || $("#deliveryType" + i).val() === "" || $("#price" + i).val() == "0.00") {
                    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(),
                        price: $("#price" + i).val(),
                        delivery_type_id: $("#deliveryType" + i).val(),
                        status_id: $("#ItemStatus" + i).val(),
                        notes: $("#notes" + i).val(),
                        entered_unit_id : $("#unit" + 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')}}");
            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/purchase-orders/update",
                data: {
                    "purchaseOrderId": {{$purchaseOrder['id']}},
                    "employee_id": $("#employee").val(),
                    "store_id": $("#store").val(),
                    "vendor_id" : $("#vendors").val(),
                    "sales_order_id": $("#sales_order_id").val(),
                    "purchase_type": $("#purchase_type").val(),
                    "total_price": result,
                    "status": $("#status").val(),
                    "vat": {{$tax}},
                    "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"]
                        });
                    }
                },
                error: function(response) {
                    // Handle error
                }
            });
        }
    });

    $(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')[2]).attr("id", "price" + (i + 1));
                $($(this).find('td div')[4]).attr("id", "priceError" + (i + 1));
                $($(this).find('td input')[3]).attr("id", "total" + (i + 1));
                $($(this).find('td input')[4]).attr("id", "notes" + (i + 1));
                $($(this).find('td select')[3]).attr("id", "deliveryType" + (i + 1));
                $($(this).find('td select')[3]).attr("name", "deliveryType" + (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) + ")");
                $("#quantity" + (i + 1)).removeAttr("onchange");
                $("#quantity" + (i + 1)).attr("onchange", "updateTotalPrice(" + (i + 1) + ")");
                $("#price" + (i + 1)).removeAttr("onchange");
                $("#price" + (i + 1)).attr("onchange", "updateTotalPrice(" + (i + 1) + ")");
            });
            var rowName = "deliveryType"+noOfRows;
            var rowNameStatus = "ItemStatus"+noOfRows;
            $('select[name="' + rowName + '"] option:eq(1)').attr('selected', 'selected');
            $('select[name="' + rowNameStatus + '"] option:eq(1)').attr('selected', 'selected');
            $("#deliveryType" + noOfRows).select2({
                placeholder: "{{__('select-delivery-type')}}",
                width: "100%",
            });
            $("#ItemStatus" + noOfRows).select2({
                placeholder: "{{__('select-status')}}",
                width: "100%",
            });
            $("#code" + noOfRows).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item" + noOfRows).select2({
                placeholder: "{{__('select-item')}}",
                width: "93%",
            });
            var total = 0;
            for (var i = 1; i <= noOfRows; i++) {
                if ($("#quantity" + noOfRows).val() !== "" && ($("#price" + noOfRows).val() !== "")) {
                    total = total + ($("#quantity" + i).val() * $("#price" + i).val());
                } else
                    total = $("#total_price").val();
            }
            $("#total_price").val(total);
            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>
                                ${appenddata2}
                            </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>
                                ${appenddata1}
                            </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" onchange="updateTotalPrice(${noOfRows})" 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">
                            <div class="input-group flex-nowrap">
                                <input class="form-control" type="number" style="padding: 3px 0 3px 3px; font-size: 13px; @if(app()->getLocale() == 'ar') border-top-left-radius: 0;border-bottom-left-radius: 0; border-left: 0; @else border-top-right-radius: 0;border-bottom-right-radius: 0; border-right: 0; @endif" onchange="updateTotalPrice(${noOfRows})" id="price${noOfRows}" min="0" required readonly>
                                <span class="input-group-text" style="padding: 0 3px 0 3px; margin: 0; font-size: 13px;   @if(app()->getLocale() == 'ar') border-top-right-radius: 0;border-bottom-right-radius: 0; @else border-top-left-radius: 0;border-bottom-left-radius: 0; @endif">{{__('sar')}}</span>
                            </div>
                            <div class="input-error" id="priceError${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="number" id="total${noOfRows}" value="0" readonly style="padding: 3px;font-size: 13px">
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <select class="form-control" id="ItemStatus${noOfRows}" name="ItemStatus${noOfRows}" required disabled>
                                <option></option>
                                @foreach($status as $orderStatus)
                                    <option value="{{$orderStatus->id}}">{{$orderStatus->status}}</option>
                                @endforeach
                            </select>
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <select class="form-control" id="deliveryType${noOfRows}" name="deliveryType${noOfRows}" required disabled>
                                <option></option>
                                @foreach($deliveryTypes as $deliveryType)
                                    <option value="{{$deliveryType->id}}">{{$deliveryType->value}}</option>
                                @endforeach
                            </select>
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <input class="form-control" type="text" style="padding: 3px;font-size: 13px" name="notes${noOfRows}" id="notes${noOfRows}" value="{{$purchaseOrderItem->notes}}" required readonly>
                        </td>
                    </tr>
                `);

                var rowName = "deliveryType"+noOfRows;
                $('select[name="' + rowName + '"] option:eq(1)').attr('selected', 'selected');
                var rowNameStatus = "ItemStatus"+noOfRows;
                $('select[name="' + rowNameStatus + '"] option:eq(1)').attr('selected', 'selected');
                $("#deliveryType" + noOfRows).select2({
                    placeholder: "{{__('select-delivery-type')}}",
                    width: "100%",
                });
                $("#ItemStatus" + noOfRows).select2({
                    placeholder: "{{__('select-status')}}",
                    width: "100%",
                });
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
            }
            total_price_tax();
    });

    updateTotalPrice(rowNumber="0")
    function updateTotalPrice(rowNumber) {
        var decimalPrice = $("#price" + rowNumber).val();
        if (Number.isInteger(Number(decimalPrice))) {
            decimalPrice = Number(decimalPrice).toFixed(2);
            $("#price" + rowNumber).val(decimalPrice)
        }
        if ($("#quantity" + rowNumber).val() !== "" && ($("#price" + rowNumber).val() !== "")) {
            $("#total" + rowNumber).val($("#quantity" + rowNumber).val() * $("#price" + rowNumber).val());
        }

        var total = 0;
        var amount = 0;
        for (var i = 1; i <= noOfRows; i++) {
            if ($("#quantity" + noOfRows).val() !== "" && ($("#price" + noOfRows).val() !== "")) {
                total = total + ($("#quantity" + i).val() * $("#price" + i).val());
                amount = amount + (parseFloat($("#quantity" + i).val()));
            } else {
                total = $("#total_price").val();
                amount = $("#total_amount").val();
            }
        }
        $("#total_price").val(total);
        $("#total_amount").val(amount);
        total_price_tax();
    }

    function total_price_tax(){
            totalPrice  = parseFloat($("#total_price").val());
            tax = parseFloat($("#total_price").val() * {{$tax}});
            result = totalPrice + tax;
            $("#total_price_tax").val(result);
        }

    </script>

@endsection