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

@section("content")
<form id="main_form" method="post">
    @csrf
    <div class="row">
        <div class="col-md-12">
            <div class="tile" style="padding: 5px 5px 5px 5px">
                <div class="tile-body">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 1px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;" class="col-form-label"><b>{{__("number")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px" type="text" name="number" id="number" value="{{$latestNumber}}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 1px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label"><b>{{__("date")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px" type="date" name="date" id="date">
                                </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" onchange="storeQuantity()" disabled>
                                        <option></option>
                                        @foreach($stores as $store)
                                        <option value="{{$store->id}}">{{$store->name}}</option>
                                        @endforeach
                                    </select>
                                    <div class="input-error" id="storeError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;" class="col-form-label required"><b>{{__("sales-order-number")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="sales_order_id" id="sales_order_id" onchange="selectStore()" class="form-control">
                                        <option></option>
                                        @foreach($sales_orders as $order)
                                        <option value="{{$order->id}}">{{$order->number}}</option>
                                        @endforeach
                                    </select>
                                    <div class="input-error" id="salesOrderIdError" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="scrollable-table">
                                <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: 3%">{{__('type')}}</th>
                                            <th style="width: 2%">{{__('quantity')}}<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">
                                                                                <tr id="trControl{{$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 disabled>
                                                    <option></option>
                                                </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">
                                                <div id="itemsDiv">
                                                    <select onchange="getItemCode({{$serial_number}})" class="form-control" id="item{{$serial_number}}" required disabled>
                                                        <option></option>
                                                    </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>
                                                </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}}" required readonly>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="text" style="padding: 3px;font-size: 13px" id="type{{$serial_number}}" 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" required readonly>
                                                <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}}" required readonly>
                                            </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" disabled>
                                                    <input onchange="uploadImages(event, {{$serial_number}})" class="input-file" type="file" name="images{{$serial_number}}[]" id="images{{$serial_number}}" 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{{$serial_number}}"></div>
                                            </td>
                                        </tr>
                                    </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")}}"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <button class="btn btn-primary" id="btn" onclick="submitForm()" 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 itemsArray = [];
        var imagesObj = {};

        var dtToday = new Date();
        var month = dtToday.getMonth() + 1;
        var day = dtToday.getDate();
        var year = dtToday.getFullYear();
        if (month < 10)
            month = '0' + month.toString();
        if (day < 10)
            day = '0' + day.toString();
        var minDate = year + '-' + month + '-' + day;
        $('#date').val(minDate);
        $('#date').attr("readonly", true);

        let noOfRows = 1;
        var baseUrl = window.location.origin;

        function selectStore(){
            let salesOrderId = $('#sales_order_id').val();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/booking-orders/getStoreBySalesOrder/" + salesOrderId,
                success: function (response) {
                    $("#store").empty();
                    $("#store").append("<option value="+response.data+">Store"+ response.data +"</option>");
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "get",
                        dataType: 'json',
                        url: baseUrl + "/en/ajax/booking-orders/store/storeQty/" + response.data,
                        success: function (response) {
                            if (response["status"] === 200) {
                                $("#item" + noOfRows).attr("disabled",false);
                                $("#code" + noOfRows).attr("disabled",false);
                            }else{
                                console.log("Failed")
                                $("#item" + noOfRows).attr("disabled",true);
                                $("#code" + noOfRows).attr("disabled",true);
                            }
                        },
                    })
                }
            })
        }

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

        function storeQuantity(){
            let storeVal = $("#store").val();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/booking-orders/store/storeQty/" + storeVal,
                success: function (response) {
                    if (response["status"] === 200) {
                        $("#item" + noOfRows).attr("disabled",false);
                        $("#code" + noOfRows).attr("disabled",false);
                    }else{
                        console.log("Failed")
                        $("#item" + noOfRows).attr("disabled",true);
                        $("#code" + noOfRows).attr("disabled",true);
                    }
                },

            })
        }

        $("#code" + noOfRows).select2({
            placeholder: "{{__('select-code')}}",
            width: "100%",
        });
        $("#item" + noOfRows).select2({
            placeholder: "{{__('select-item')}}",
            width: "93%",
        });
        $("#sales_order_id").select2({
            placeholder: "{{__('select-sales-order-number')}}",
            width: "100%",
        });
        $("#store").select2({
            placeholder: "{{__('select-sales-order-number')}}",
            width: "100%",
        });

        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"];
                        var appenddata1 = "";
                        var appenddata2 = "";
                        for (var i = 0; i < itemsArray.length; i++) {
                            appenddata1 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].name + " </option>";
                            appenddata2 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].code + " </option>";
                        }
                        $("#item"+noOfRows).append(appenddata1);
                        $("#code"+noOfRows).append(appenddata2);
                },
            });
        }

        function getItemName(rowNo) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/items/get-item-main-unit/" + $("#code" + rowNo).val(),
                success: function (response) {
                    if (response["status"] === 200) {
                        $("#unit" + rowNo).val(response["data"]);
                    }
                }
            })
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/items/get-item-type/" + $("#code" + rowNo).val(),
                success: function (response) {
                    if (response["status"] === 200) {
                        $("#type" + 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) {
            $.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"]);
                    }
                }
            })
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/items/get-item-type/" + $("#item" + rowNo).val(),
                success: function (response) {
                    if (response["status"] === 200) {
                        $("#type" + 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 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 + `">
                        <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>
                            </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">
                            <div id="itemsDiv">
                                <select onchange="getItemCode(` + noOfRows + `)" class="form-control" id="item` + noOfRows + `" required>
                                    <option></option>
                                </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>
                            </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="text" style="padding: 3px;font-size: 13px" id="type` + 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">
                            <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>
                `);        

                var appenddata1 = "";
                var appenddata2 = "";        

                for (var i = 0; i < itemsArray.length; i++) {
                    appenddata1 += "<option value='" + itemsArray[i].id + "'>" + itemsArray[i].name + "</option>";
                    appenddata2 += "<option value='" + itemsArray[i].id + "'>" + itemsArray[i].code + "</option>";
                }        

                $("#item" + noOfRows).append(appenddata1);
                $("#code" + noOfRows).append(appenddata2);        

                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });        

                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
            }
        }

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

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

        function submitForm() {
            $("#storeError").css("display", "none");
            $("#storeError").html("");
            $("#select2-store-container").css("border", "");
            $("#salesOrderIdError").css("display", "none");
            $("#salesOrderIdError").html("");
            $("#select2-sales_order_id-container").css("border", "");
        
            var dataArray = [];
            var formData = new FormData();
            var completed = 1;
        
            if ($("#store").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-store')}}'
                });
                completed = 0;
                $("#storeError").css("display", "");
                $("#storeError").html("{{__('required-field')}}");
                $("#select2-store-container").css("border", "#b7000c solid 2px");
            } else if ($("#sales_order_id").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-sales-order-number')}}'
                });
                completed = 0;
                $("#salesOrderIdError").css("display", "");
                $("#salesOrderIdError").html("{{__('required-field')}}");
                $("#select2-sales_order_id-container").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 ($("#item" + i).val() === "" || $("#code" + i).val() === "" || $("#quantity" + i).val() === "") {
                        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 {
                            var totalImages = imagesObj[i].length;
                            for (var j = 0; j < totalImages; j++) {
                                formData.append("images" + i, imagesObj[i][j]);
                            }
                        }
                        const dataObj = {
                            item_id: $("#item" + i).val(),
                            quantity: $("#quantity" + i).val(),
                            notes: $("#notes" + i).val(),
                        };
                        dataArray.push(dataObj);
                    }
                }
            }
            if (completed === 1) {
                formData.append("store_id", $("#store").val());
                formData.append("sales_order_id", $("#sales_order_id").val());
                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/booking-orders/store",
                    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.href = '{{route("admin.booking-orders.index", "all")}}';
                            });
                        } else if (response["status"] === 201) {
                            swal({
                                icon: 'error',
                                title: '{{__('error')}}',
                                text: response["message"]
                            }).then(function () {
                                $(".hide").css({'display': 'none'});
                                $(".fa-check-circle")[0].style.display = "";
                                $("#btn").attr("disabled", false);
                                $("#textSpan").html("{{__("save")}}");
                            });
                        }
                    }
                });
            }
        }

        $(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--;
            $('.table tbody tr').each(function(i) {
                $($(this).find('td')[0]).html(i + 1).append(`<span style="padding: 0; margin: 0; display: block;line-height:2px" class="control-link remove"><i style="font-size: 12px" class="far fa-trash-alt"></i></span>`);
                $($(this).find('td select')[0]).attr("id", "code" + (i + 1));
                $($(this).find('td div')[0]).attr("id", "codeError" + (i + 1));
                $($(this).find('td select')[1]).attr("id", "item" + (i + 1));
                $($(this).find('td div div')[0]).attr("id", "itemError" + (i + 1));
                $($(this)).attr("id", "trControl" + (i + 1));
                $($(this).find('td input')[0]).attr("id", "unit" + (i + 1));
                $($(this).find('td input')[1]).attr("id", "type" + (i + 1));
                $($(this).find('td input')[2]).attr("id", "quantity" + (i + 1));
                $($(this).find('td div')[3]).attr("id", "quantityError" + (i + 1));
                $($(this).find('td input')[3]).attr("id", "notes" + (i + 1));
                $($(this).find('td button input')[0]).attr("id", "images" + (i + 1));
                $($(this).find('td button input')[0]).attr("name", "images" + (i + 1));
                $($(this).find('td button span')[0]).attr("id", "beforeUploadSpan" + (i + 1));
                $($(this).find('td button span')[2]).attr("id", "uploadedSpan" + (i + 1));
                $($(this).find('td button')[0]).attr("id", "uploadBtn" + (i + 1));
                $($(this).find('td div')[4]).attr("id", "gallery" + (i + 1));
                $("#code" + (i + 1)).removeAttr("onchange");
                $("#code" + (i + 1)).attr("onchange", "getItemName(" + (i + 1) + ")");
                $("#item" + (i + 1)).removeAttr("onchange");
                $("#item" + (i + 1)).attr("onchange", "getItemCode(" + (i + 1) + ")");
                $("#images" + (i + 1)).removeAttr("onchange");
                $("#images" + (i + 1)).attr("onchange", "uploadImages(event, " + (i + 1) + ")");
            });
            $("#code" + noOfRows).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item" + noOfRows).select2({
                placeholder: "{{__('select-item')}}",
                width: "93%",
            });
        
            if (noOfRows == 0) {
                noOfRows++;
                $('#tableBody').append(`
                    <tr id="trControl` + 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>
                            </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">
                            <div id="itemsDiv">
                                <select onchange="getItemCode(` + noOfRows + `)" class="form-control" id="item` + noOfRows + `" required>
                                    <option></option>
                                </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>
                            </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="text" style="padding: 3px;font-size: 13px" id="type` + 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">
                            <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>
                `);
        
                var appenddata1 = "";
                var appenddata2 = "";
                for (var i = 0; i < itemsArray.length; i++) {
                    appenddata1 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].name + " </option>";
                    appenddata2 += "<option value = '" + itemsArray[i].id + " '>" + itemsArray[i].code + " </option>";
                }
                $("#item" + noOfRows).append(appenddata1);
                $("#code" + noOfRows).append(appenddata2);
    
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
            }
        });


    </script>

@endsection