@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>{{__("maintenance-orders")}}</h1>
        <p>{{__("all-maintenance-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.maintenance-orders.index", "all")}}">{{__("maintenance-orders")}}</a>
        </li>
        <li class="breadcrumb-item"><a href="#">{{__("edit")}}</a></li>
    </ul>
</div>
@endsection
@section("content")
<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="{{$order['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="text" name="date" value="{{$order['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 required"><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 ($order['store_id']==$store->id)
                                            {{'selected="selected"'}}
                                            @endif>{{$store->name}}
                                        </option>
                                        @endforeach
                                    </select>

                                </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>{{__("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 ($order['status_id']==$orderStatus->id)
                                            {{'selected="selected"'}}
                                            @endif>{{$orderStatus->status}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        @foreach($sales_orders as $salesOrder)
                        @if ($order['sales_order_id']==$salesOrder->id)
                        <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 class="form-control" style="padding: 3px;font-size: 13px" type="text" name="sales_order_id" id="sales_order_id" value="{{$salesOrder->id}}" readonly>
                                    <div class="input-error" id="salesOrderIdError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                            </div>
                        </div>
                        @endif
                        @if ($order['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 class="form-control" style="padding: 3px;font-size: 13px" type="text" name="sales_order_id" id="sales_order_id" value="0" readonly>
                                    <div class="input-error" id="salesOrderIdError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                            </div>
                        </div>
                        @break
                        @endif
                        @endforeach
                        <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>
                                @if(!empty($order['customer_name']))
                                <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="{{$order['customer_name']}}" id="customer_name" readonly>
                                </div>
                                @else
                                <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" readonly>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <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 required"><b>{{__("maintenance-date")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px" type="date" name="maintenance_date" id="maintenance_date" value="{{$order['maintenance_date']}}">
                                    <div class="input-error" id="maintenanceDateError" 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: 1px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label required"><b>{{__("maintenance-time")}}</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="time" name="maintenance_time" id="maintenance_time" value="{{$order['maintenance_time']}}">
                                    <div class="input-error" id="maintenanceTimeError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </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>{{__("maintenance-team-name")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="maintenance_team" id="maintenance_team" class="form-control">
                                        <option></option>
                                        @foreach($maintenance_teams as $maintenance_team)
                                        <option value="{{$maintenance_team->id}}" @if ($order['maintenance_team_id']==$maintenance_team->id) {{'selected="selected"'}} @endif>{{$maintenance_team->team_name}}</option>
                                        @endforeach
                                    </select>
                                </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>{{__("maintenance-type")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="maintenance_type" id="maintenance_type" class="form-control" onchange="checkType()">
                                        <option></option>
                                        @foreach($maintenance_types as $maintenance_type)
                                        <option value="{{$maintenance_type->id}}" @if ($order['maintenance_type_id']==$maintenance_type->id)
                                            {{'selected="selected"'}}
                                            @endif>{{$maintenance_type->type_en}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="regularMaintenanceRow" @if($order['maintenance_type_id']==1) style="display: none" @endif>
                        <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 required"><b>{{__("every")}}</b></label>
                                <div class="col-sm-4">
                                    <input class="form-control" style="padding: 3px;font-size: 13px" type="text" name="maintenance_interval_number" id="maintenance_interval_number" value="{{$order['maintenance_interval_number']}}" placeholder="{{__("maintenance_interval_number")}}">
                                    <div class="input-error" id="maintenanceIntervalError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                                <div class="col-sm-4">
                                    <select id="maintenance_interval" class="form-control @if($errors->has('maintenance_interval')) is-invalid @endif" style="height: 29px; padding: 0; margin: 0">
                                        <option value="" disabled>{{__("select-interval")}}</option>
                                        <option value="d" @if($order['maintenance_interval_type']=="d" ) selected @endif>{{__("day")}}</option>
                                        <option value="m" @if($order['maintenance_interval_type']=="m" ) selected @endif>{{__("month")}}</option>
                                        <option value="y" @if($order['maintenance_interval_type']=="y" ) selected @endif>{{__("year")}}</option>
                                    </select>
                                </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" class="col-form-label required"><b>{{__("start_date")}}</b></label>
                                <div class="col-sm-4">
                                    <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="date" name="start_date" id="start_date" value="{{$order['maintenance_start_date']}}">
                                    <div class="input-error" id="startDateError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif" class="col-form-label required"><b>{{__("end_date")}}</b></label>
                                <div class="col-sm-4">
                                    <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="date" name="end_date" id="end_date" value="{{$order['maintenance_end_date']}}">
                                    <div class="input-error" id="endDateError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group" style="float: left; padding-top: 0; margin: 0 0 5px 0">
                                <div class="checkbox-correct size-1 check-box">
                                    <input type="checkbox" @if($order['excluding_weekends']==1) checked @endif id="excludingWeekends" name="excludingWeekends" style="height: 17px; width: 17px">
                                </div>
                                <label style="font-size: 13px;" class="col-form-label">{{__("excluding-weekends")}}</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group" style="float: left; padding-top: 0; margin: 0 0 5px 0">
                                <div class="checkbox-correct size-1 check-box">
                                    <input type="checkbox" @if($order['excluding_vacations_days']==1) checked @endif id="excludingVacationsDays" name="excludingVacationsDays" style="height: 17px; width: 17px">
                                </div>
                                <label style="font-size: 13px;" class="col-form-label">{{__("excluding-vacations-days")}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="scrollable-table">
                                <table class="table table-hover table-bordered table-fix-head" style="margin-bottom: 5px">
                                    <thead style="font-size: 12px; line-height: 2px">
                                        <tr>
                                            <th style="width: 1%">#</th>
                                            <th style="width: 7%">{{__('code')}}<span class="required"></span></th>
                                            <th style="width: 19%">{{__('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: 2%">{{__('location')}}<span class="required"></span></th>
                                            <th style="width: 12%">{{__('notes')}}</th>
                                            <th style="width: 1%">{{__('images')}}</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}})" class="form-control" id="code{{$serial_number}}" required>
                                                    <option></option>
                                                    @foreach($items as $item)
                                                    <option @if($item->id == $orderItem->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", $orderItem->item->name,$item)}} 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{{$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->item->unit->unit_name}}" 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}}" value="{{$orderItem->quantity}}" min="0" 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" id="data{{$serial_number}}">
                                                @if(!is_null($order['sales_order_id']))
                                                <select class="form-control" id="location{{$serial_number}}">
                                                    <option></option>
                                                    @foreach($orderItem->locations as $location)
                                                    <option value="{{$location->id}}" @if($orderItem->location_id == $location->id) selected @endif>{{$location->location}}</option>
                                                    @endforeach
                                                </select>
                                                <div class="input-error" id="locationError{{$serial_number}}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                                                @else
                                                <div class="modal fade" id="exampleModal{{$serial_number}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Location</h5>
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div>
                                                                    <div class="row badge-light p-3">
                                                                        <div class="col-6" style="margin-top: 5px">
                                                                            <label>{{__('Add Location')}}</label>
                                                                            <textarea type="text" class="form-control" id="locationDesc{{$serial_number}}" placeholder="Add Location">{{$orderItem->location}}</textarea>
                                                                        </div>
                                                                        <div>
                                                                            <div class="col-lg-10 mb-3">
                                                                                <div class="form-group">
                                                                                    <label class="control-label">{{__("Location")}}</label>
                                                                                    <div id="map{{$serial_number}}" class="col-lg-12" style="width: 500px;height: 226px;border: 2px solid #ccc;"></div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-12" id="latLng">
                                                                                <div class="col-lg-6">
                                                                                    <div class="form-group">
                                                                                        <label class="control-label">{{__("lat")}}</label>
                                                                                        <input class="form-control" type="text" name="lat{{$serial_number}}" id="lat{{$serial_number}}" placeholder="{{__('Enter lat')}}" value="{{$orderItem->latitude}}">
                                                                                        <div class="invalid-feedback" style="display: none"></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-lg-6">
                                                                                    <div class="form-group">
                                                                                        <label class="control-label">{{__("Lng")}}</label>
                                                                                        <input class="form-control" type="text" name="lng{{$serial_number}}" id="lng{{$serial_number}}" placeholder="{{__('Enter Lng')}}" value="{{$orderItem->longitude}}">
                                                                                        <div class="invalid-feedback" style="display: none"></div>
                                                                                    </div>
                                                                                </div>
                                                                                <input type="hidden" id="isSaved{{$serial_number}}" value=1>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="savedButton btn btn-primary" onclick="save({{$serial_number}})">Save changes</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" id="createBtn{{$serial_number}}" class="createBtn btn btn-primary form-control" onclick="createBtn({{$serial_number}})" data-toggle="modal" data-target="#exampleModal{{$serial_number}}">
                                                    {{__('show')}}
                                                </button>
                                                <div class="input-error" id="locationError{{$serial_number}}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                                                @endif
                                            </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>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <button class="btn btn-primary form-control button-upload-file multi-images" id="uploadBtn{{$serial_number}}" style="width: 100%; padding: 0; margin: 0">
                                                    <input onchange="uploadImages(event, {{$serial_number}})" class="input-file" type="file" name="images{{$serial_number}}" id="images{{$serial_number}}" accept="image/x-png,image/gif,image/jpeg">
                                                    <span class="upload-file-content">
                                                        <i class="fas fa-upload fa-lg upload-file-content-icon left" style="font-size: 13px"></i>
                                                        <span class="upload-file-content-text" style="font-size: 13px">{{__("upload")}}</span>
                                                    </span>
                                                </button>
                                                <div class="gallery" id="gallery{{$serial_number}}">
                                                    @if($orderItem->images != null)
                                                                                                        @foreach($orderItem->images as $image)
                                                    <span class="img"><img height="50px" width="50px" style="margin-top: 1px" src="{{ asset($image->path.'/'.$image->file_name)}}"><span class="control-link" onclick="removeImageFile({{$image->id}},this , {{$index++}}, {{$serial_number}})"><i style="color: #ca0900" class="far fa-trash-alt"></i></span></span>
                                                    @endforeach
                                                    @endif
                                                </div>
                                            </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" for="staticEmail" 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")}}">{{$order['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>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section("scripts")
    <!-- Google analytics script-->
    <script type="text/javascript">
        var map,marker;
        var mapRowNo;
        let noOfRows = $('.table tbody tr').length;
        var baseUrl = window.location.origin;
        var imagesObj = {};
        var itemsArr = [];
        var itemsArray = [];
        for(var i=1; i<=noOfRows; i++){
            if($('#gallery'+i+' '+'.img').length > 0) {
                var imgArr = [];
                for (var j = 0; j < $('#gallery' + i + ' ' + '.img').length; j++) {
                    imgArr.push($('#gallery' + i + ' ' + '.img img')[j].src)
                }
                imagesObj[i] = imgArr;
            }
        }

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

        for(var i=1; i<=noOfRows; i++){
            $("#code"+i).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item"+i).select2({
                placeholder: "{{__('select-item')}}",
                width: "93%",
            });
            $("#location" + i).select2({
                placeholder: "{{__('select-location')}}",
                width: "93%",
            });
        }

        $("#store").select2({
            placeholder: "{{__('select-store')}}",
            width: "100%",
        });
        $("#status").select2({
            placeholder: "{{__('select-status')}}",
            width: "100%",
        });
        $("#supply_team_id").select2({
            placeholder: "{{__('select-status')}}",
            width: "100%",
        });

        $("#order_type").select2({
            placeholder: "{{__('select-order-type')}}",
            width: "100%",
        });

        $("#maintenance_team").select2({
            placeholder: "{{__('select-maintenance-team')}}",
            width: "100%",
        });
        $("#maintenance_type").select2({
            placeholder: "{{__('select-maintenance-type')}}",
            width: "100%",
        });

        var appenddata1 = "";
        var appenddata2 = "";
        var appenddata4 = "";
        var appenddata3 = "";
        var codeVal = "";
        var nameVal = "";
        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();
                        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>";
                        }
                        for (var j = 0; j < itemsArray.length; j++) {
                            if (itemsArray[j].id != codeVal && itemsArray[j].id != nameVal) {
                                appenddata3 += "<option value='" + itemsArray[j].id + "'>" + itemsArray[j].name + "</option>";
                                appenddata4 += "<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%",
                        });
                    }
                },
            });
        }

        function getItemName(rowNo) {
            if($("#sales_order_id").val() != ""){
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "post",
                    url: baseUrl + "/en/ajax/supply-of-order/get-item-installed-locations",
                    dataType: 'json',
                    data: {sales_order_id: $("#sales_order_id").val(), item_id: $("#code" + rowNo).val()},
                    success: function (response) {
                        if (response["status"] === 200) {
                            itemsArr = response["locations"];
                            $("#location" + rowNo).empty().append('<option></option>');
                            $.each(itemsArr, function (index, value) {
                                $("#location" + rowNo).append('<option value="' + value.id + '">' + itemsArr[index].location + ' </option>');
                            });
                            $("#location" + rowNo).removeAttr("disabled");
                        }
                    }
                });
            }
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/items/get-item-main-unit/" + $("#code" + rowNo).val(),
                success: function (response) {
                    if (response["status"] === 200) {
                        $("#unit" + rowNo).val(response["data"]);
                    }
                }
            })
            $('#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");
            $("#notes" + rowNo).removeAttr("readonly");
            $("#uploadBtn" + rowNo).removeAttr("disabled");
            $("#images" + rowNo).removeAttr("disabled");
        }

        function getItemCode(rowNo) {
            if($("#sales_order_id").val() != ""){
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "post",
                    url: baseUrl + "/en/ajax/supply-of-order/get-item-installed-locations",
                    dataType: 'json',
                    data: {sales_order_id: $("#sales_order_id").val(), item_id: $("#item" + rowNo).val()},
                    success: function (response) {
                        if (response["status"] === 200) {
                            itemsArr = response["locations"];
                            $("#location" + rowNo).empty().append('<option></option>');
                            $.each(itemsArr, function (index, value) {
                                $("#location" + rowNo).append('<option value="' + value.id + '">' + itemsArr[index].location + ' </option>');
                            });
                            $("#location" + rowNo).removeAttr("disabled");
                        }
                    }
                });
            }
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/items/get-item-main-unit/" + $("#item" + rowNo).val(),
                success: function (response) {
                    if (response["status"] === 200) {
                        $("#unit" + rowNo).val(response["data"]);
                    }
                }
            })
            $('#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");
            $("#notes" + rowNo).removeAttr("readonly");
            $("#uploadBtn" + rowNo).removeAttr("disabled");
            $("#images" + rowNo).removeAttr("disabled");
        }

        function createBtn(rowNo){
            mapRowNo = rowNo;
            if (rowNo === undefined || rowNo === null)
                rowNo = 1;
            let latVal = parseFloat($("#lat"+rowNo).val());
            let lngVal = parseFloat($("#lng"+rowNo).val());
            if(latVal == 0 && lngVal == 0 || ( $("#lat"+rowNo).val() == "" && $("#lng"+rowNo).val() == "")){
                latVal = 24.172538;
                lngVal = 44.965225;
                $("#lat"+rowNo).val(latVal);
                $("#lng"+rowNo).val(lngVal)
            }

            let defaultPosition = { lat: latVal, lng: lngVal };
            map = new google.maps.Map(document.getElementById("map"+rowNo), {
                center: defaultPosition,
                zoom: 8,
            });
            marker = new google.maps.Marker({
                position: defaultPosition,
                map: map,
                draggable: true
            });
            map.addListener("center_changed",changeMarkerPosition);
            map.addListener("zoom_change",changeMarkerPosition);
            marker.addListener("dragend",setPositionToInputs)
        }

        function changeMarkerPosition(){
            let latlng = map.getCenter();
            marker.setPosition(latlng);
            setPositionToInputs();
        }

        function setPositionToInputs(){
            let inputLat = marker.getPosition().lat();
            let inputLng = marker.getPosition().lng();
            $("#lat"+mapRowNo).val(inputLat);
            $("#lng"+mapRowNo).val(inputLng);
            getAddressByReverseGeocoding(inputLat, inputLng, function (address) {
            $("#locationDesc" + mapRowNo).val(address);
            });
        }

        function getAddressByReverseGeocoding(lat, lng, callback) {
            var latlng = new google.maps.LatLng(lat, lng);
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status !== google.maps.GeocoderStatus.OK) {
                    alert(status);
                }
                if (status == google.maps.GeocoderStatus.OK) {
                var address = results[0].formatted_address;
                callback(address);}
            });
        }

        function save(rowNo){
            $("#isSaved"+rowNo).val(1);
            swal('{{__("the-location-saved-successfully")}}', {
                icon: "success",
            });
            $('#exampleModal'+rowNo).modal('hide');
        }

        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>
                                    <option></option>
                                    ${appenddata4}
                    </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>
                      ${appenddata3}
                    </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" id="quantity` + noOfRows + `" min="0" required readonly style="padding: 3px;font-size: 13px">
                         <div class="input-error" id="quantityError` + noOfRows + `" style="padding-top: 10px; display:none; font-size: 13px"></div>
                                            </td>
                            <td style="padding: 5px 5px 5px 5px; margin: 0" id="data` + noOfRows + `">

                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="text"
                                                       id="notes` + noOfRows + `" required readonly style="padding: 3px;font-size: 13px">
                                            </td>
                                                      <td style="padding: 5px 5px 5px 5px; margin: 0">
                           <button class="btn btn-primary form-control button-upload-file multi-images"
                                                    id="uploadBtn` + noOfRows + `" style="width: 100%; padding: 0; margin: 0" disabled>
                                                    <input onchange="uploadImages(event, ` + noOfRows + `)" class="input-file" type="file"
                                                           name="images` + noOfRows + `"
                                                           id="images` + noOfRows + `" disabled
                                                           accept="image/x-png,image/gif,image/jpeg">
                                                    <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left" style="font-size: 13px"></i>
                                                <span class="upload-file-content-text" style="font-size: 13px">{{__("upload")}}</span>
                                            </span>
                                                </button>
                                                <div style="display:none;" class="gallery" id="gallery` + noOfRows + `"></div>
                                            </td>
                                        </tr>
             `
                );
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
                if($("#sales_order_id").val() != ""){
                    $("#data"+noOfRows).empty().append(`
                        <select class="form-control"
                                id="location`+noOfRows+`" disabled>
                            <option></option>
                        </select>
                        <div class="input-error" id="locationError`+noOfRows+`"
                             style="padding-top: 10px; display: none; font-size: 13px"></div>
                `);
                    $("#location" + noOfRows).select2({
                        placeholder: "{{__('select-location')}}",
                        width: "93%",
                    });
                }else{
                    $("#data"+noOfRows).empty().append(`
                                      <div class="modal fade" id="exampleModal` + noOfRows + `" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Location</h5>
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div>
                                                                    <div class="row badge-light p-3" >
                                                                        <div class="col-6" style="margin-top: 5px">
                                                                            <label>{{__('Add Location')}}</label>
                                                                            <textarea type="text" class="form-control" id="locationDesc` + noOfRows + `" placeholder="Add Location"></textarea>
                                                                        </div>
                                                                        <div>
                                                                            <div class="col-lg-10 mb-3">
                                                                                <div class="form-group">
                                                                                    <label class="control-label">{{__("Location")}}</label>
                                                                                    <div id="map` + noOfRows + `" class="col-lg-12" style="width: 500px;height: 226px;border: 2px solid #ccc;"></div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-12"  id="latLng">
                                                                                <div class="col-lg-6" >
                                                                                    <div class="form-group">
                                                                                        <label class="control-label">{{__("lat")}}</label>
                                                                                        <input class="form-control" type="text" name="lat` + noOfRows + `" id="lat` + noOfRows + `" placeholder="{{__('Enter lat')}}" value="{{inputValue("lat")}}">
                                                                                        <div class="invalid-feedback" style="display: none"></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-lg-6">
                                                                                    <div class="form-group">
                                                                                        <label class="control-label">{{__("Lng")}}</label>
                                                                                        <input class="form-control" type="text" name="lng` + noOfRows + `" id="lng` + noOfRows + `" placeholder="{{__('Enter Lng')}}" value="{{inputValue("lng")}}">
                                                                                        <div class="invalid-feedback" style="display: none"></div>
                                                                                    </div>
                                                                                </div>
                                                                                  <input type="hidden" id="isSaved` + noOfRows + `" value=0>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="savedButton btn btn-primary" onclick="save(` + noOfRows + `)">Save changes</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" id="createBtn` + noOfRows + `" class="createBtn btn btn-primary form-control" onclick="createBtn(` + noOfRows + `)" data-toggle="modal" data-target="#exampleModal` + noOfRows + `">
                                                    {{__('Create')}}
                    </button>
                      <div class="input-error" id="locationError`+noOfRows+`"
                             style="padding-top: 10px; display: none; font-size: 13px"></div>
                    `);
                }
            }
        }

        function uploadImages(e, rowNo) {
            var imagesArray = [];
            var fileInput = document.getElementById('images' + rowNo);
            var files = fileInput.files;
            if (files.length !== 0) {
                $("#gallery" + rowNo).css("display", "");
                    imagesArray.push(document.getElementById("images" + rowNo).files[0]);
                    var urls = URL.createObjectURL(e.target.files[0]);
                    $("#gallery" + rowNo).empty().append(`<span class="img">
<img height="50px" width="50px" src="` + urls + `">
<span class="control-link" onclick="removeImageFile(0,this, ` + 0 + `, ` + rowNo + `)"><i style="color: #ca0900"
                            class="far fa-trash-alt"></i></span>
                            </span>
`);
                    imagesObj[rowNo] = imagesArray;
            }
        }

        function removeImageFile(id, element, index, rowNo) {
            swal({
                title: '{{__("delete-image")}}',
                text: '{{__("are-you-sure-to-delete-this-image?")}}',
                icon: "warning",
                buttons: ['{{__("no")}}', '{{__("yes")}}'],
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    if(id !== 0){
                        $.ajax({
                            type: "delete",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: baseUrl + "/en/ajax/maintenance-orders/delete-image/"+id,
                            success: function (response) {
                                //  response = JSON.parse(response);
                                if (response["status"] === 200) {
                                    swal({
                                        title: "Deleted Successfully",
                                        text: response["message"],
                                        icon: "success",
                                    })
                                }
                            },
                            error: function (response) {

                            }
                        });
                    }
                    $(element).parent(".img").remove();
                    imagesObj[rowNo].splice(index, 1);
                    if ($('#gallery'+rowNo+' '+'.img').length === 0) {
                        $("#gallery" + rowNo).css("display", "none");
                        delete imagesObj[rowNo];
                    }
                    else {
                        $("#gallery" + rowNo).empty();
                        for (var i = 0; i < imagesObj[rowNo].length; i++) {
                            if(typeof imagesObj[rowNo][i] != "string"){
                                var urls = URL.createObjectURL(imagesObj[rowNo][i]);
                                var string = imagesObj[rowNo][i].replace(baseUrl+"/uploads/Order-Details/", '');
                                var imgId = string.split("/")[0];
                            }
                            else{
                                var urls = imagesObj[rowNo][i];
                                var imgId = 0;
                            }
                            $("#gallery" + rowNo).append(`<span class="img">
<img height="50px" width="50px" src="` + urls + `">
<span class="control-link" onclick="removeImageFile(` + imgId + `, this, ` + i + `, ` + rowNo + `)"><i style="color: #ca0900"
                            class="far fa-trash-alt"></i></span>
                            </span>
`);
                        }
                    }
                    swal('{{__("the-image-deleted-successfully")}}', {
                        icon: "success",
                    });
                }
            });

        }

        $("#btn").on("click", async function () {
            $("#maintenanceDateError").css("display", "none");
            $("#maintenanceDateError").html("");
            $("#maintenance_date").css("border", "");
            $("#maintenanceTimeError").css("display", "none");
            $("#maintenanceTimeError").html("");
            $("#maintenance_time").css("border", "");
            $("#maintenanceIntervalError").css("display", "none");
            $("#maintenanceIntervalError").html("");
            $("#maintenance_interval_number").css("border", "");
            $("#startDateError").css("display", "none");
            $("#startDateError").html("");
            $("#start_date").css("border", "");
            $("#endDateError").css("display", "none");
            $("#endDateError").html("");
            $("#end_date").css("border", "");
            var dataArray = [];
            var formData = new FormData();
            var completed = 1;
            if($("#maintenance_date").val() == ""){
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-maintenance-date')}}'
                })
                completed = 0;
                $("#maintenanceDateError").css("display", "")
                $("#maintenanceDateError").html("{{__('required-field')}}");
                $("#maintenance_date").css("border", "#b7000c solid 2px")
            }else if($("#maintenance_time").val() == ""){
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-maintenance-time')}}'
                })
                completed = 0;
                $("#maintenanceTimeError").css("display", "")
                $("#maintenanceTimeError").html("{{__('required-field')}}");
                $("#maintenance_time").css("border", "#b7000c solid 2px")
            }else if ($("#maintenance_type").val() == 2 && ($("#maintenance_interval_number").val() < 0 || $("#maintenance_interval_number").val() == "")) {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-maintenance-interval')}}'
                })
                completed = 0;
                $("#maintenanceIntervalError").css("display", "")
                $("#maintenanceIntervalError").html("{{__('required-field')}}");
                $("#maintenance_interval_number").css("border", "#b7000c solid 2px")
            }else if ($("#maintenance_type").val() == 2 && $("#start_date").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-start-date')}}'
                })
                completed = 0;
                $("#startDateError").css("display", "")
                $("#startDateError").html("{{__('required-field')}}");
                $("#start_date").css("border", "#b7000c solid 2px")
            }else if ($("#maintenance_type").val() == 2 && $("#end_date").val()  == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-end-date')}}'
                })
                completed = 0;
                $("#endDateError").css("display", "")
                $("#endDateError").html("{{__('required-field')}}");
                $("#end_date").css("border", "#b7000c solid 2px")
            } else {
                for (var i = 1; i <= noOfRows; i++) {
                    if ($("#item" + i).val() === "") {
                        $("#itemError" + i).css("display", "")
                        $("#itemError" + i).html("{{__('required-field')}}");
                        $("#select2-item" + i + "-container").css("border", "#b7000c solid 2px")
                    } else {
                        $("#itemError" + i).html("");
                        $("#itemError" + i).css("display", "none")
                        $("#select2-item" + i + "-container").css("border", "")
                    }
                    if ($("#code" + i).val() === "") {
                        $("#codeError" + i).css("display", "")
                        $("#codeError" + i).html("{{__('required-field')}}");
                        $("#select2-code" + i + "-container").css("border", "#b7000c solid 2px")
                    } else {
                        $("#codeError" + i).html("");
                        $("#codeError" + i).css("display", "none")
                        $("#select2-code" + i + "-container").css("border", "")
                    }
                    if ($("#quantity" + i).val() === "") {
                        $("#quantityError" + i).css("display", "")
                        $("#quantityError" + i).html("{{__('required-field')}}");
                        $("#quantity" + i).css("border", "#b7000c solid 2px")
                    } else {
                        $("#quantityError" + i).html("");
                        $("#quantityError" + i).css("display", "none")
                        $("#quantity" + i).css("border", "")
                    }
                    if ($("#location" + i).val() === "" && $("#sales_order_id").val() != "") {
                        $("#locationError" + i).css("display", "")
                        $("#locationError" + i).html("{{__('required-field')}}");
                        $("#location" + i).css("border", "#b7000c solid 2px")
                    } else {
                        $("#locationError" + i).html("");
                        $("#locationError" + i).css("display", "none")
                        $("#location" + i).css("border", "")
                    }
                    if ($("#isSaved" + i).val() == 0 && $("#sales_order_id").val() == "") {
                        $("#locationError" + i).css("display", "")
                        $("#locationError" + i).html("{{__('required-field')}}");
                        $("#location" + i).css("border", "#b7000c solid 2px")
                    } else {
                        $("#locationError" + i).html("");
                        $("#locationError" + i).css("display", "none")
                        $("#location" + i).css("border", "")
                    }
                    if (($("#lat" + i).val() === "" || $("#lng" + i).val() === "") && $("#sales_order_id").val() == "") {
                        $("#locationError" + i).css("display", "")
                        $("#locationError" + i).html("{{__('required-field')}}");
                        $("#location" + i).css("border", "#b7000c solid 2px")
                    } else {
                        $("#locationError" + i).html("");
                        $("#locationError" + i).css("display", "none")
                        $("#location" + i).css("border", "")
                    }
                    if ($("#location" + i).val() == "" && $("#sales_order_id").val()!="") {
                        console.log("////")
                        swal({
                            icon: 'error',
                            title: '{{__('error')}}',
                            text: '{{__('fill-row-error')}}' + i
                        })
                        completed = 0;
                        break;
                    } else {
                        var checkIfExist = i in imagesObj;
                        if (!checkIfExist) {
                            formData.append("images" + i, null);
                        } else {
                                formData.append("images" + i, imagesObj[i][0]);
                        }

                        console.log($("#location" + i).val());
                        if ($("#sales_order_id").val() != ""){
                            const dataObj = {
                                id: $("#id" + i).val(),
                                item_id: $("#item" + i).val(),
                                quantity: $("#quantity" + i).val(),
                                notes: $("#notes" + i).val(),
                                longitude : $("#lng" + i).val(),
                                latitude : $("#lat" + i).val(),
                                location: $("#locationDesc" + i).val()
                            };
                            dataArray.push(dataObj);
                        }else{
                            const dataObj = {
                                id: $("#id" + i).val(),
                                item_id: $("#item" + i).val(),
                                quantity: $("#quantity" + i).val(),
                                notes: $("#notes" + i).val(),
                                longitude : $("#lng" + i).val(),
                                latitude : $("#lat" + i).val(),
                                location: $("#locationDesc" + i).val()
                            };
                            dataArray.push(dataObj);
                        }
                    }
                }
            }
            console.log(dataArray);
            if (completed === 1) {
                var excludingWeekends;
                var excludingVacationsDays;
                if ($('input[name=excludingWeekends]').is(':checked')){
                    excludingWeekends = 1;
                }else{
                    excludingWeekends = 0;
                }
                if ($('input[name=excludingVacationsDays]').is(':checked')){
                    excludingVacationsDays = 1;
                }else{
                    excludingVacationsDays = 0;
                }
                formData.append("id", {{$order['id']}});
                formData.append("status", $("#status").val());
                formData.append("storeId", $("#store").val());
                formData.append("maintenance_team", $("#maintenance_team").val());
                formData.append("maintenance_date", $("#maintenance_date").val());
                formData.append("maintenance_time", $("#maintenance_time").val());
                formData.append("maintenance_type", $("#maintenance_type").val());
                if($("#maintenance_type").val() == 2){
                    formData.append("interval_number", $("#maintenance_interval_number").val());
                    formData.append("interval_type", $("#maintenance_interval").val());
                    formData.append("start_date", $("#start_date").val());
                    formData.append("end_date", $("#end_date").val());
                }
                formData.append("excluding_weekends", excludingWeekends);
                formData.append("excluding_vacations_days", excludingVacationsDays);
                formData.append("notes", $("#notes").val());
                formData.append("items", JSON.stringify(dataArray));
                $(".hide").css({'display': ''});
                $(".fa-check-circle")[0].style.display = "none";
                $("#btn").attr("disabled", true);
                $("#textSpan").html("{{__("saving")}}");
                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + "/en/ajax/maintenance-orders/update",
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function (response) {
                        if (response["status"] === 200) {
                            swal({
                                closeOnClickOutside: false,
                                title: "Updated Successfully",
                                text: response["message"],
                                icon: "success",
                            }).then(function () {
                                window.location.href = '{{route("admin.maintenance-orders.index", "all")}}';
                            })

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

                    }
                });


            }
        });


        $(document).on('click', '.table .remove', function () {
            let rowId = $(this).closest('tr')[0].getAttribute("id");
            let rowNo = rowId.charAt(rowId.length-1);
            delete imagesObj[rowNo];
            let lastKey = Object.keys(imagesObj)[Object.keys(imagesObj).length-1];
            for(var i=1; i<=lastKey; i++){
                var checkIfExist = i in imagesObj;
                if(checkIfExist && i>=rowNo){
                    imagesObj[i-1] = imagesObj[i];
                    delete imagesObj[i];
                }
            }
            $(this).closest('tr').remove();
            noOfRows--;
            for(var j=1; j<=noOfRows; j++){
                $("#trControl"+(j+1)).attr("id", "trControl"+j);
                $($("#trControl"+j).find('td')[0]).html(j).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>`);
                $("#id"+(j+1)).attr("id", "id"+j);
                $("#data"+(j+1)).attr("id", "data"+j);
                $("#exampleModal"+(j+1)).attr("id", "exampleModal"+j);
                $("#createBtn"+(j+1)).attr("id", "createBtn"+j);
                $("#createBtn"+j).attr("data-target", "#exampleModal"+j);
                $("#createBtn"+j).attr("onclick", "createBtn(" + j + ")");
                $("#code"+(j+1)).attr("id", "code"+j);
                $("#codeError"+(j+1)).attr("id", "codeError"+j);
                $("#itemError"+(j+1)).attr("id", "itemError"+j);
                $("#item"+(j+1)).attr("id", "item"+j);
                $("#location"+(j+1)).attr("id", "location"+j);
                $("#locationError"+(j+1)).attr("id", "locationError"+j);
                $("#images"+(j+1)).attr("id", "images"+j);
                $("#images"+j).attr("name", "images"+j);
                $("#uploadBtn"+(j+1)).attr("id", "uploadBtn"+j);
                $("#gallery"+(j+1)).attr("id", "gallery"+j);
                $("#unit"+(j+1)).attr("id", "unit"+j);
                $("#quantity"+(j+1)).attr("id", "quantity"+j);
                $("#quantityError"+(j+1)).attr("id", "quantityError"+j);
                $("#notes"+(j+1)).attr("id", "notes"+j);
                $("#item"+j).attr("onchange", "getItemCode(" + j + ")");
                $("#code"+j).attr("onchange", "getItemName(" + j + ")");
                $("#images"+j).attr("onchange", "uploadImages(event, " + j + ")");
                $("#map"+(j+1)).attr("id", "map"+j);
                $("#lat"+(j+1)).attr("id", "lat"+j);
                $("#lat"+j).attr("name", "lat"+j);
                $("#lng"+(j+1)).attr("id", "lng"+j);
                $("#lng"+j).attr("name", "lng"+j);
                $("#locationDesc"+(j+1)).attr("id", "locationDesc"+j);
                $("#isSaved"+(j+1)).attr("id", "isSaved"+j);
            }
            $("#item" + noOfRows).select2({
                placeholder: "{{__('select-item')}}",
                width: "93%",
            });
            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" id="quantity` + noOfRows + `" min="0" required readonly style="padding: 3px;font-size: 13px">
                         <div class="input-error" id="quantityError` + noOfRows + `" style="padding-top: 10px; display:none; font-size: 13px"></div>
                                            </td>
 <td style="padding: 5px 5px 5px 5px; margin: 0" id="data` + noOfRows + `">

                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="text"
                                                       id="notes` + noOfRows + `" required readonly style="padding: 3px;font-size: 13px">
                                            </td>
                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                           <button class="btn btn-primary form-control button-upload-file multi-images"
                                                    id="uploadBtn` + noOfRows + `" style="width: 100%; padding: 0; margin: 0" disabled>
                                                    <input onchange="uploadImages(event, ` + noOfRows + `)" class="input-file" type="file"
                                                           name="images` + noOfRows + `"
                                                           id="images` + noOfRows + `" disabled
                                                           accept="image/x-png,image/gif,image/jpeg">
                                                    <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left" style="font-size: 13px"></i>
                                                <span class="upload-file-content-text" style="font-size: 13px">{{__("upload")}}</span>
                                            </span>
                                                </button>
                                                <div style="display:none;" class="gallery" id="gallery` + noOfRows + `"></div>
                            </td>
                                        </tr>
             `
                );
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
                if($("#sales_order_id").val() != ""){
                    $("#data"+noOfRows).empty().append(`
                        <select class="form-control"
                                id="location`+noOfRows+`" disabled>
                            <option></option>
                        </select>
                        <div class="input-error" id="locationError`+noOfRows+`"
                             style="padding-top: 10px; display: none; font-size: 13px"></div>
                `);
                    $("#location" + noOfRows).select2({
                        placeholder: "{{__('select-location')}}",
                        width: "93%",
                    });
                }else{
                    $("#data"+noOfRows).empty().append(`
                                      <div class="modal fade" id="exampleModal` + noOfRows + `" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Location</h5>
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div>
                                                                    <div class="row badge-light p-3" >
                                                                        <div class="col-6" style="margin-top: 5px">
                                                                            <label>{{__('Add Location')}}</label>
                                                                            <textarea type="text" class="form-control" id="locationDesc` + noOfRows + `" placeholder="Add Location"></textarea>
                                                                        </div>
                                                                        <div>
                                                                            <div class="col-lg-10 mb-3">
                                                                                <div class="form-group">
                                                                                    <label class="control-label">{{__("Location")}}</label>
                                                                                    <div id="map` + noOfRows + `" class="col-lg-12" style="width: 500px;height: 226px;border: 2px solid #ccc;"></div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-12"  id="latLng">
                                                                                <div class="col-lg-6" >
                                                                                    <div class="form-group">
                                                                                        <label class="control-label">{{__("lat")}}</label>
                                                                                        <input class="form-control" type="text" name="lat` + noOfRows + `" id="lat` + noOfRows + `" placeholder="{{__('Enter lat')}}" value="{{inputValue("lat")}}">
                                                                                        <div class="invalid-feedback" style="display: none"></div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-lg-6">
                                                                                    <div class="form-group">
                                                                                        <label class="control-label">{{__("Lng")}}</label>
                                                                                        <input class="form-control" type="text" name="lng` + noOfRows + `" id="lng` + noOfRows + `" placeholder="{{__('Enter Lng')}}" value="{{inputValue("lng")}}">
                                                                                        <div class="invalid-feedback" style="display: none"></div>
                                                                                    </div>
                                                                                </div>
                                                                                  <input type="hidden" id="isSaved` + noOfRows + `" value=0>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="savedButton btn btn-primary" onclick="save(` + noOfRows + `)">Save changes</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" id="createBtn` + noOfRows + `" class="createBtn btn btn-primary form-control" onclick="createBtn(` + noOfRows + `)" data-toggle="modal" data-target="#exampleModal` + noOfRows + `">
                                                    {{__('Create')}}
                    </button>
                      <div class="input-error" id="locationError`+noOfRows+`"
                             style="padding-top: 10px; display: none; font-size: 13px"></div>
                    `);
                }
            }
        });
        function checkType(){
            if($("#maintenance_type").val() == 2){
                $("#regularMaintenanceRow").css({'display' : ''});
            }else
                $("#regularMaintenanceRow").css({'display' : 'none'});
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEiJBaJbjjg8prC40SagCJotsXS9-Pyxk&callback=createBtn&libraries=&v=weekly"></script>
@endsection