@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>{{__("UnBooking Order")}}</h1>
        <p>{{__("UnBooking Order")}}</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.unbooking-orders.index", "all")}}">{{__("Un Booking Order")}}</a>
        </li>
        <li class="breadcrumb-item"><a href="#">{{__("edit")}}</a></li>
    </ul>
</div>
@endsection
@section("content")
<div 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: 4px">
                                <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">
                                <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="text" value="{{$order->store->name}}" readonly>
                                </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>{{__("Booking Order 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="{{$old_order}}" 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>{{__("sales-order-number")}}</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="number" value="{{$order->salesOrder->number}}" placeholder="{{$order->salesOrder->number}}" readonly>
                                    <div class="input-error" id="salesOrderIdError" 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"><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="{{$order['customer_name']}}" id="customer_name" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tile" style="padding: 5px 5px 5px 5px">
        <div class="col-md-12">
            <div class="scrollable-table" style="max-height: 380px">
                <table class="table table-hover table-bordered table-fix-head" style="margin-bottom: 5px">
                    <thead style="font-size: 12px; line-height: 2px">
                        <tr>
                            <th style="width: 1%">#</th>
                            <th style="width: 7%">{{__('code')}}<span class="required"></span></th>
                            <th style="width: 20%">{{__('item')}}<span class="required"></span></th>
                            <th style="width: 3%">{{__('unit')}}</th>
                            <th style="width: 2%">{{__('quantity')}}<span class="required"></span></th>
                            <th style="width: 12%">{{__('notes')}}</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody" style="font-size: 12px">
                        
                        @foreach($orderItems as $orderItem)
                        <tr id="trControl{{++$serial_number}}">
                            <input type="hidden" value="{{$orderItem->id}}" id="id{{$serial_number}}">
                            <td style="text-align: center; padding: 5px 5px 5px 5px; margin: 0">{{$serial_number}}</td>
                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                    @foreach($items as $item)
                                    @if($item->id == $orderItem->item_id)
                                    <input class="form-control" type="text" style="padding: 3px;font-size: 13px" value="{{$item->getItemCode()}}" required readonly>
                                    @endif
                                    @endforeach
                                <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">
                                    @foreach($items as $item)
                                    @if ($orderItem->item->name == $item->name)
                                    <input type="hidden" id="itemId{{$serial_number}}" value="{{$item->id}}">
                                    <input class="form-control" type="text" style="padding: 3px; font-size: 13px" value="{{$item->name}}" required readonly>
                                    @endif
                                    @endforeach
                                <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}}" min="0" value="{{$orderItem->quantity}}" required>
                                <div class="input-error" id="quantityError{{$serial_number}}" style="padding-top: 10px;display: none; font-size: 13px"></div>
                            </td>
                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                <input class="form-control" type="text" style="padding: 3px;font-size: 13px" id="notes{{$serial_number}}" value="{{$orderItem->notes}}" required readonly>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>

                </table>
                {{-- <a id="addBtn"><i class="fa fa-fw fa-lg fa-plus-circle"--}}
                {{-- style="font-size: 18px; color: green; cursor: pointer"--}}
                {{-- onclick="addRow()"></i></a>--}}
            </div>
            <hr style="padding: 0 0 2px 0; margin: 5px 0 0 0">
            <div class="row" style="padding-top: 5px">
                <div class="col-lg-6">
                    <div class="form-group row">
                        <label style="@if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif; font-size: 13px" class="col-form-label"><b>{{__("notes")}}</b></label>
                        <div class="col-sm-10">
                            <textarea style="height: 30px; font-size: 13px; padding: 3px" class="form-control" type="text" name="notes" id="notes" readonly style="width: 80%; padding: 3px; font-size: 13px" placeholder="{{__("enter-notes")}}">{{$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>
</form>
@endsection

@section("scripts")
    <!-- Data table plugin-->
    <script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
    <script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable({"bPaginate": false, "bInfo": false});</script>
    <!-- Google analytics script-->
    <script type="text/javascript">
        $("#store").select2({
            placeholder: "{{__('select-store')}}",
            width: "100%",
        });
        $("#sales_order_id").select2({
            placeholder: "{{__('select-sales_order_number')}}",
            width: "100%",
        });
    </script>
    <script type="text/javascript">
        let noOfRows = $('.table tbody tr').length;
        var baseUrl = window.location.origin;

        $("#btn").on("click", async function () {
            var baseUrl = window.location.origin;
            var dataArray = [];
            var completed = 1;
                for (var i = 1; i <= noOfRows; i++) {
                    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 ($("#quantity" + i).val() === "" ) {
                        swal({
                            icon: 'error',
                            title: "{{__('error')}}",
                            text: "{{__('fill-row-error')}}" + i
                        })
                        completed = 0;
                        break;
                    } else {
                        const dataObj = {
                            id: $("#id" + i).val(),
                            item_id: $("#itemId" + i).val(),
                            quantity: $("#quantity" + i).val(),
                            notes: $("#notes" + i).val(),
                        };
                        dataArray.push(dataObj);
                    }
                }
            if (completed === 1) {
                $(".hide").css({'display': ''});
                $(".fa-check-circle")[0].style.display = "none";
                $("#btn").attr("disabled", true);
                $("#textSpan").html("{{__("saving")}}");
                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + "/en/admin/unbooking-orders/update/data/{{$order->order_id}}",
                    data: {
                        "order_id": {{$order['id']}},
                        "notes": $("#notes").val(),
                        "items": JSON.stringify(dataArray)
                    },
                    success: function (response) {
                        if (response["status"] === 200) {
                            swal({
                                title: "Updated Successfully",
                                text: response["message"],
                                icon: "success",
                            }).then(function () {
                                window.location.href = '{{route("admin.unbooking-orders.index", "all")}}';
                            })
                        } else if (response["status"] === 201) {
                            swal({
                                icon: 'error',
                                title: '{{__('error')}}',
                                text: response["message"]
                            }).then(function () {
                                window.location.reload();
                            })
                        }
                    }
                });
            }
        });
    </script>

@endsection