@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("items")}}</h1>
            <p>{{__("booking-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.items.index")}}">{{__("items")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("booking-orders")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")
    @include("includes.dialog")

    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered text-center" id="sampleTable">
                            <thead>
                            <tr>
                                <th style="width: 1%">#</th>
                                <th style="width: 3%">{{__("order-number")}}</th>
                                <th style="width: 6%">{{__("date")}}</th>
                                <th style="width: 5%">{{__("store")}}</th>
                                <th style="width: 7%">{{__("client")}}</th>
                                <th style="width: 9%">{{__("sales-order-number")}}</th>
                                <th style="width: 2%">{{__("quantity")}}</th>
                                <th style="width: 5%">{{__("unbooked-quantity")}}</th>
                                <th style="width: 2%">{{__("unbook-quantity")}}</th>
                            </tr>
                            </thead>
                            <tbody>
                                                        @foreach($orders as $order)
                                <tr>
                                    <td>{{$serial_number++}}</td>
                                    <td>{{$order["orderNumber"]}}</td>
                                    <td>{{$order["date"]}}</td>
                                    <td>{{$order["store"]}}</td>
                                    <td>{{$order["client"] ?? null}}</td>
                                    <td>{{$order["salesOrderNumber"]}}</td>
                                    <td>{{$order["quantity"]}}</td>
                                    <td>{{$order["unbookedQuantity"]}}</td>
                                    <td>
                                        <button type="button" onclick="addBtn({{$order["id"]}}, {{$order["quantity"]}}, {{$order["unbookedQuantity"]}}, {{$order["item_id"]}})" class="btn btn-primary" data-toggle="modal" style="font-size: 12px; padding: 2px">
                                            {{__('unbook-quantity')}}
                                        </button>
                                    </td>

                                    <!-- Unbook Quantity Modal -->
                                    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content" style="width: 120%">
                                                <div class="modal-header">
                                                    <h5 class="modal-title"> {{__('unbook-quantity')}}</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 id="appendRow">
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('close')}}</button>
                                                        <button type="submit" class="btn btn-primary" onclick="saveBtn()">{{__('save')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("scripts")

    <!-- Data table plugin-->
    <script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
    <script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable();</script>
    <script type="text/javascript">
        function addBtn(id, orderQty, unbookedQty, itemId){
            $('#appendRow').empty().append(
                `
                <input type="hidden" id="id" value="`+id+`">
                <input type="hidden" id="orderQty" value="`+orderQty+`">
                <input type="hidden" id="unbookedQty" value="`+unbookedQty+`">
                <input type="hidden" id="itemId" value="`+itemId+`">
        <div class="row">
            <div class="col-lg-2">
                <div class="form-group">
                    <label class="control-label required" style="font-size: 12px; font-weight: bold">{{__("quantity")}}</label>
                  </div>
            </div>
              <div class="col-lg-6">
                <div class="form-group">
                    <input class="form-control" type="number" style="padding: 3px;font-size: 13px; height: 32px"
                           id="quantity" name="quantity" max="1">
                  </div>
            </div>
        </div>
          `
            );
            $("#addModal").modal('show');
        }

        function saveBtn() {
            var totalQty = parseFloat($("#orderQty").val()) - parseFloat($("#unbookedQty").val());
            if ($("#quantity").val() === "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('quantity-error-msg')}}'
                })
            }else if(parseFloat($("#quantity").val()) > totalQty.toFixed(6)){
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('quantity-exceed-error-msg')}}'
                })
            }else{
            var baseUrl = window.location.origin;
            var formData = new FormData();
            formData.append("id", $("#id").val());
            formData.append("item_id", $("#itemId").val());
            formData.append("quantity", $("#quantity").val());
            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/items/unbook-item-quantity",
                dataType: 'json',
                contentType: false,
                processData: false,
                data: formData,
                success: function (response) {
                    if (response["status"] === 200) {
                        swal({
                            closeOnClickOutside: false,
                            title: '{{__('added-successfully')}}',
                            text: response["message"],
                            icon: "success",
                        }).then(function () {
                            window.location.reload();
                        })

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

                }
            });
        }
        }
    </script>
@endsection