// Map variables
var deleteImgStatus = [false, false, false, false, false];

var sourceLat = "",
    sourceLng = "",
    destLat = "",
    destLng = "";
var saveTotalDistance = null;
var sourceMarker, destMarker;
var routeControls = [];
var popupArrays = [];
var bounds = [
    [46.9130026312, 77.6166317076],
    [17.5782370061, 32.5092252948],
];
var startAbrarMarker = null;
var isSetStartAbrarMarker = false;
var endAbrarMarker = null;
var isSetEndAbrarMarker = false;
var mapshow = null;
var startAbrarMarkershow = null;
var isSetStartAbrarMarkershow = false;
var endAbrarMarkershow = null;
var isSetEndAbrarMarkershow = false;
var routeControls = [];
var routeControlsPath = [];
var popupArrays = [];
var popupArraysPath = [];
var polylinePath = null;
var nextvalidation = true;
var valuevarification = []
// Form Input
var selectedItem = 0;
var previousSelectedItem = 0;
var selectedSubItems = "";
var subItemsData = {};
var submitFormInput = [];
var titlemodal = "";
var hasSubItemGotValue = true;
var projectType = 0;
var itemsData = null;
var requestId = null;
var rookeshError = false;
var showsubitems = []


var startP = [35.6892, 51.389]
var endP = [35.6892, 51.389]

var startAbrarDivIcon = L.divIcon({
    html: `
    <div id="pin-marker-start" class="pin-marker">
      <div class="map-pin-marker">
        <div class="pin-main-circle"></div>
        <div class="pin-white-circle"></div>
        <div class="pin-title-circle">
          <span class="title-circle-text">شروع</span>
        </div>
        <div class="pin-main-line"></div>
      </div>
      <div class="pin-main-shadow">
        <div class="shadow-dot">
        </div>
      </div>
    </div>
  `,
    iconSize: [55, 75],
    iconAnchor: [33, 64],
});

var endAbrarDivIcon = L.divIcon({
    html: `
    <div id="pin-marker-end" class="pin-marker">
      <div class="map-pin-marker">
        <div class="pin-main-circle"></div>
        <div class="pin-white-circle"></div>
        <div class="pin-title-circle">
          <span class="title-circle-text">پایان</span>
        </div>
        <div class="pin-main-line"></div>
      </div>
      <div class="pin-main-shadow">
        <div class="shadow-dot">
        </div>
      </div>
    </div>
  `,
    iconSize: [55, 75],
    iconAnchor: [33, 64],
});
// Create leaflet map client
var map = L.map("map", {
    maxBounds: bounds,
    minZoom: 6,
}).setView([34.62, 52.471], 6);

// Create map tile layer
L.tileLayer("https://testmap.141.ir/141map/{z}/{x}/{y}.png", {}).addTo(map);

startAbrarMarker = new L.marker(startP, {
    icon: startAbrarDivIcon,
    draggable: true,
}).addTo(map);
endAbrarMarker = new L.marker(endP, {
    icon: endAbrarDivIcon,
    draggable: true,
});

map.on("move", function () {
    if (!isSetStartAbrarMarker && !isSetEndAbrarMarker) {
        startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
        $("#pin-marker-start").removeClass("pin-set").addClass("pin-move");
    }

    if (isSetStartAbrarMarker && !isSetEndAbrarMarker) {
        endAbrarMarker.setLatLng(L.latLng(map.getCenter()));
        $("#pin-marker-end").removeClass("pin-set").addClass("pin-move");
    }
});

map.on("moveend", function () {
    if (!isSetStartAbrarMarker && !isSetEndAbrarMarker) {
        startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
        $("#pin-marker-start").removeClass("pin-move pin-set");
    }

    if (isSetStartAbrarMarker && !isSetEndAbrarMarker) {
        endAbrarMarker.setLatLng(L.latLng(map.getCenter()));
        $("#pin-marker-end").removeClass("pin-move pin-set");
    }
});
startAbrarMarker.on("click", function () {
    sourceLat = map.getCenter().lat;
    sourceLng = map.getCenter().lng;
    console.log("sourceee", [sourceLat, sourceLng])
    if (!isSetStartAbrarMarker) {
        startAbrarMarker.setLatLng(L.latLng(map.getCenter()));
        isSetStartAbrarMarker = true;
        $("#pin-marker-start")
            .removeClass("pin-move pin-warn")
            .addClass("pin-set");
    }
    // Drop origin marker onto map
    addSourceMarker(1);
    endAbrarMarker.addTo(map);
    showItemSelectionModal();

    // Hide origin image
    $(this).hide();
    $("#pin-marker-start")
        .removeClass("pin-move pin-warn")
        .addClass("pin-set");
})
startAbrarMarker.on("drag", function () {
    console.log("hiiiiiiii")
    $("#pin-marker-start").addClass("pin-move");
    // checkMarkersAndDrawPath();
});
startAbrarMarker.on("dragend", function () {
    console.log("hii")
    $("#pin-marker-start").removeClass("pin-move");
    console.log("pin move")
    if ($("#pin-marker-start").hasClass("pin-set") || isSetStartAbrarMarker) {

        $("#pin-marker-start").addClass("pin-set");
        checkMarkersAndDrawPath();
    } else {
        map.setView(startAbrarMarker.getLatLng());
    }
});
function addSourceMarker(type) {
    let sourceCoordinates = null;
    if (type == 1) {
        sourceCoordinates = L.latLng(map.getCenter());
    } else if (type == 2) {
        sourceCoordinates = [sourceLat, sourceLng];
    }
}
endAbrarMarker.on("click", function () {
    destLat = map.getCenter().lat;
    destLng = map.getCenter().lng;

    // Drop origin marker onto map
    addDestinationMarker(1);
    if (!isSetEndAbrarMarker) {
        endAbrarMarker.setLatLng(L.latLng(map.getCenter()));
        isSetEndAbrarMarker = true;
        $("#pin-marker-end").removeClass("pin-move").addClass("pin-set");
    }
    showItemSelectionModal();

    // Hide destination image
    // $(this).hide();

    // Draw path from origin to destination
    checkMarkersAndDrawPath();
})

function addDestinationMarker(type) {
    let destinationCoordinates = null;
    if (type == 1) {
        destinationCoordinates = L.latLng(map.getCenter());
    } else if (type == 2) {
        destinationCoordinates = [destLat, destLng];
    }
    showItemSelectionModal();

}
endAbrarMarker.on("drag", function () {
    $("#pin-marker-end").addClass("pin-move");
    checkMarkersAndDrawPath();
});

endAbrarMarker.on("dragend", function () {
    $("#pin-marker-end").removeClass("pin-move");

    if ($("#pin-marker-end").hasClass("pin-set") || isSetEndAbrarMarker) {
        $("#pin-marker-end").addClass("pin-set");
        checkMarkersAndDrawPath();
    } else {
        map.setView(endAbrarMarker.getLatLng());
    }
});

function drawPath() {
    if (routeControls.length) {
        $(routeControls).each(function (index, control) {
            map.removeControl(control);
            routeControls.splice(routeControls.indexOf(index), 1);
        });
    }

    // routeControls.push(
    //   L.polyline(
    //     [
    //       L.latLng(
    //         parseFloat(startAbrarMarker.getLatLng().lat),
    //         parseFloat(startAbrarMarker.getLatLng().lng)
    //       ),
    //       L.latLng(
    //         parseFloat(endAbrarMarker.getLatLng().lat),
    //         parseFloat(endAbrarMarker.getLatLng().lng)
    //       ),
    //     ],
    //     {
    //       color: "blue",
    //       weight: 3,
    //       opacity: 0.5,
    //       smoothFactor: 1,
    //     }
    //   )
    // );

    // map.addLayer(routeControls[0]);

    routeControls.push(
        L.Routing.control({
            waypoints: [
                L.latLng(
                    parseFloat(startAbrarMarker.getLatLng().lat),
                    parseFloat(startAbrarMarker.getLatLng().lng)
                ),
                L.latLng(
                    parseFloat(endAbrarMarker.getLatLng().lat),
                    parseFloat(endAbrarMarker.getLatLng().lng)
                ),
            ],
            fitSelectedRoutes: false,
            draggableWaypoints: true,
            createMarker: function () {
                return null;
            },
            lineOptions: {
                addWaypoints: false,
                styles: [
                    {
                        color: "#28a745",
                        opacity: 0.8,
                        weight: 5,
                    },
                ],
            },
        })
            .on("routesfound", function (e) {
                var divideBy = 2;

                for (let index = 0; index < popupArrays.length; index++) {
                    map.removeLayer(popupArrays[index]);
                }

                var customOptions = {
                    maxWidth: "300",
                    maxHeight: "150",
                    className: "customRouteEstimate",
                };
                var popup = new L.Popup(customOptions);

                var popupLocation = new L.LatLng(
                    e.routes[0].coordinates[
                        parseInt(e.routes[0].coordinates.length / divideBy)
                    ].lat,
                    e.routes[0].coordinates[
                        parseInt(e.routes[0].coordinates.length / divideBy)
                    ].lng
                );

                var popupContent =
                    '<span style="color:#FF5630; font-size:11px; font-family: IRANSansFaNum;">مسافت: </span>' +
                    parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2) +
                    " کیلومتر";

                saveTotalDistance = parseFloat(
                    parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2)
                );

                popup.setLatLng(popupLocation);
                popup.setContent(popupContent);

                popupArrays.push(popup);
                map.addLayer(popup);

                showItemSelectionModal();
            })
            // .on("routesfound", function (e) {
            //   var divideBy = 2;

            //   for (let index = 0; index < popupArrays.length; index++) {
            //     map.removeLayer(popupArrays[index]);
            //   }

            //   var customOptions = {
            //     maxWidth: "300",
            //     maxHeight: "150",
            //     className: "customRouteEstimate",
            //   };
            //   var popup = new L.Popup(customOptions);

            //   var popupLocation = new L.LatLng(
            //     e.routes[0].coordinates[
            //       parseInt(e.routes[0].coordinates.length / divideBy)
            //     ].lat,
            //     e.routes[0].coordinates[
            //       parseInt(e.routes[0].coordinates.length / divideBy)
            //     ].lng
            //   );

            //   var popupContent =
            //     '<span style="color:#FF5630; font-size:11px; font-family: IRANSansFaNum;">مسافت: </span>' +
            //     parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2) +
            //     " کیلومتر";

            //   saveTotalDistance = parseFloat(
            //     parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2)
            //   );

            //   popup.setLatLng(popupLocation);
            //   popup.setContent(popupContent);

            //   popupArrays.push(popup);
            //   map.addLayer(popup);

            //   // showItemSelectionModal();
            // })
            .addTo(map)
    );
    $(".leaflet-control-container").css("display", "none");
    $(".leaflet-routing-container-hide").css("display", "none");
}
function checkMarkersAndDrawPath() {
    if (
        $("#pin-marker-start").hasClass("pin-set") &&
        !$("#pin-marker-start").hasClass("pin-move") &&
        $("#pin-marker-end").hasClass("pin-set") &&
        !$("#pin-marker-end").hasClass("pin-move")
    ) {
        drawPath();
    } else {
        setTimeout(() => {
            if (
                $("#pin-marker-start").hasClass("pin-set") &&
                !$("#pin-marker-start").hasClass("pin-move") &&
                $("#pin-marker-end").hasClass("pin-set") &&
                !$("#pin-marker-end").hasClass("pin-move")
            ) {
                drawPath();
            } else {
                if (routeControls.length) {
                    $(routeControls).each(function (index, control) {
                        map.removeControl(control);
                        routeControls.splice(routeControls.indexOf(index), 1);
                    });
                }
                // if (polyline != null) {
                //   map.removeLayer(polyline);
                // }
            }
        }, 20);
    }
}

function handleTopMenuClick(num) {
    switch (num) {
        case 1: {
            window.open("/rmto", "_self");
            break;
        }
        case 2: {
            $("#reportModal").modal("show");
            break;
        }
        case 3: {
            window.open("/rmtobi", "_self");
            break;
        }
        case 4: {
            window.open("/rmto", "_self");
            break;
        }
    }
}

function showItemSelectionModal() {
    if (destLat != "") {
        $("#vertical-menu").modal({ backdrop: "static", keyboard: false });
        $("#vertical-menu").modal("show");

        // Show selected Item if there is selected one!
        if (selectedItem != 0) {
            $("#item-" + selectedItem).prop("checked", true);
        }
    }
}

$("#next-modal-show").on("click", function () {
    showSecondModal();
});

function showSecondModal() {
    var dataeachitem = []
    if ($("#item-1").is(":checked")) {
        console.log("testhear", showsubitems)
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 1) {
                dataeachitem.push(showsubitems[i])
                console.log("khiari", dataeachitem);
                // console.log("kivi", showsubitems[1])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-1-name").textContent;
        showSubItem(1, titlemodal, dataeachitem);
    } else if ($("#item-2").is(":checked")) {
        console.log("testhear2", showsubitems)
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 2) {
                dataeachitem.push(showsubitems[i])
                console.log("khiari", dataeachitem);
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-2-name").textContent;
        showSubItem(2, titlemodal, dataeachitem);
    } else if ($("#item-3").is(":checked")) {
        console.log("testhear3", showsubitems)
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 3) {
                dataeachitem.push(showsubitems[i])
                console.log("khiari", dataeachitem);
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-3-name").textContent;
        showSubItem(3, titlemodal, dataeachitem);
    } else if ($("#item-4").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 4) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-4-name").textContent;
        showSubItem(4, titlemodal, dataeachitem);
    } else if ($("#item-5").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 5) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-5-name").textContent;
        showSubItem(5, titlemodal, dataeachitem);
    } else if ($("#item-6").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 6) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-6-name").textContent;
        showSubItem(6, titlemodal, dataeachitem);
    } else if ($("#item-7").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 7) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-7-name").textContent;
        showSubItem(7, titlemodal, dataeachitem);
    } else if ($("#item-8").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 8) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-8-name").textContent;
        showSubItem(8, titlemodal, dataeachitem);
    } else if ($("#item-9").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 9) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-9-name").textContent;
        showSubItem(9, titlemodal, dataeachitem);
    } else if ($("#item-10").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 10) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-10-name").textContent;
        showSubItem(10, titlemodal, dataeachitem);
    } else if ($("#item-11").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 11) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-11-name").textContent;
        showSubItem(11, titlemodal, dataeachitem);
    } else if ($("#item-12").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 12) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-12-name").textContent;
        showSubItem(12, titlemodal, dataeachitem);
    } else if ($("#item-13").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 13) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-13-name").textContent;
        showSubItem(13, titlemodal, dataeachitem);
    } else if ($("#item-14").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 14) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-14-name").textContent;
        showSubItem(14, titlemodal, dataeachitem);
    } else if ($("#item-15").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 15) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-15-name").textContent;
        showSubItem(15, titlemodal, dataeachitem);
    } else if ($("#item-16").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 16) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-16-name").textContent;
        showSubItem(16, titlemodal, dataeachitem);
    } else if ($("#item-17").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 17) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-17-name").textContent;
        showSubItem(17, titlemodal, dataeachitem);
    } else if ($("#item-18").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 18) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-18-name").textContent;
        showSubItem(18, titlemodal, dataeachitem);
    } else if ($("#item-19").is(":checked")) {
        for (var i = 0; i < showsubitems.length; i++) {
            if (showsubitems[i].item == 19) {
                dataeachitem.push(showsubitems[i])
            }
        }
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-19-name").textContent;
        showSubItem(19, titlemodal, dataeachitem);
    }
    else if ($("#item-20").is(":checked")) {
        // console.log("hi im checked")
        $("#vertical-menu").modal("hide");
        titlemodal = document.getElementById("item-20-name").textContent;
        showSubItem(20, titlemodal, dataeachitem);
    }
}

function showSubItem(index, name, datachoosen) {
    var appenddata = "";
    console.log(index, "index")
    console.log(name, "name")
    console.log("dataaaaaaaaaaaa", datachoosen)
    if (sourceLat != "" && destLat != "") {
        // Set modal title
        $("#uploadroaditem .modal-title").html(name);

        selectedItem = index;

        // Set modal content
        let subItems = "";
        $(".sub-item-container").empty();

        switch (selectedItem) {
            case 1: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="reconstruction'+ datachoosen[i].sub_item + '" name="reconstruction">\
              <label for="reconstruction'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item1-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="reconstruction'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="reconstruction'+ datachoosen[i].sub_item + '-1" name="reconstruction1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }

                break;
            }
            case 2: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="cleaning'+ datachoosen[i].sub_item + '" name="cleaning">\
              <label for="cleaning'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item2-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="cleaning'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="cleaning'+ datachoosen[i].sub_item + '-1" name="cleaning1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }

                break;
            }
            case 3: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="signs'+ datachoosen[i].sub_item + '" name="signs">\
              <label for="signs'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item3-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="signs'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="signs'+ datachoosen[i].sub_item + '-1" name="signs1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }

                break;
            }
            case 4: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="shield'+ datachoosen[i].sub_item + '" name="shield">\
              <label for="shield'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item4-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="shield'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="shield'+ datachoosen[i].sub_item + '-1" name="shield1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
                break;
            }
            case 5: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="lighting'+ datachoosen[i].sub_item + '" name="lighting">\
              <label for="lighting'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item5-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="lighting'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="lighting'+ datachoosen[i].sub_item + '-1" name="lighting1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
                break;
            }
            case 6: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="lining'+ datachoosen[i].sub_item + '" name="lining">\
              <label for="lining'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item6-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="lining'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="lining'+ datachoosen[i].sub_item + '-1" name="lining1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
                break;
            }
            case 7: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="coloring'+ datachoosen[i].sub_item + '" name="coloring">\
              <label for="coloring'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item7-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="coloring'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="coloring'+ datachoosen[i].sub_item + '-1" name="coloring1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
                break;
            }
            case 8: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="washing'+ datachoosen[i].sub_item + '" name="washing">\
              <label for="washing'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item8-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="washing'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="washing'+ datachoosen[i].sub_item + '-1" name="washing1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
            }
            case 9: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="securing'+ datachoosen[i].sub_item + '" name="securing">\
              <label for="securing'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item9-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="securing'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="securing'+ datachoosen[i].sub_item + '-1" name="securing1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
                break;
            }
            case 10: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="privacy'+ datachoosen[i].sub_item + '" name="privacy">\
              <label for="privacy'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item10-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="privacy'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="privacy'+ datachoosen[i].sub_item + '-1" name="privacy1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
                break;
            }
            case 11: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="bridge'+ datachoosen[i].sub_item + '" name="bridge">\
              <label for="bridge'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item11-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="bridge'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="bridge'+ datachoosen[i].sub_item + '-1" name="bridge1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
                break;
            }
            case 12: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="tunnel'+ datachoosen[i].sub_item + '" name="tunnel">\
              <label for="tunnel'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item12-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="tunnel'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="tunnel'+ datachoosen[i].sub_item + '-1" name="tunnel1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
                break;
            }
            case 13: {
                for (var i = 0; i < datachoosen.length; i++) {
                    console.log("lezgi", datachoosen.length);
                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="winterOperation'+ datachoosen[i].sub_item + '" name="winterOperation">\
              <label for="winterOperation'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item13-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="winterOperation'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="winterOperation'+ datachoosen[i].sub_item + '-1" name="winterOperation1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }

                break;
            }
            case 14: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="machinery'+ datachoosen[i].sub_item + '" name="machinery">\
              <label for="machinery'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item14-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="machinery'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="machinery'+ datachoosen[i].sub_item + '-1" name="machinery1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }

                break;
            }
            case 15: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="tollhouse'+ datachoosen[i].sub_item + '" name="tollhouse">\
              <label for="tollhouse'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item15-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="tollhouse'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="tollhouse'+ datachoosen[i].sub_item + '-1" name="tollhouse1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }

                break;
            }
            case 16: {
                for (var i = 0; i < datachoosen.length; i++) {

                    subItems = subItems + '<div class="col-sm-12 sub-item">\
          <div class="form-group radio-body clearfix">\
            <div class="icheck-primary d-inline">\
              <input type="radio" id="emergency'+ datachoosen[i].sub_item + '" name="emergency">\
              <label for="emergency'+ datachoosen[i].sub_item + '">' + datachoosen[i].sub_item_str + '\
              </label>\
            </div>\
          </div>\
        </div>\
        <div class="col-sm-12 sub-item16-'+ datachoosen[i].sub_item + '" style="display: none;">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-center align-items-center">\
              <label for="emergency'+ datachoosen[i].sub_item + '-1" class="ml-3">\
                '+ datachoosen[i].sub_item_unit + ':\
              </label>\
              <input type="number" class="form-control text-center" style="width: 50%" id="emergency'+ datachoosen[i].sub_item + '-1" name="emergency1" min="0" maxlength="7">\
            </div>\
          </div>\
        </div>'


                }
                break;
            }
            case 20: {
                subItems =
                    '\
        <div class="col-sm-12 sub-item17">\
          <div class="form-group radio-body clearfix">\
            <div class="d-flex justify-content-start align-items-center">\
              <label for="snowWatch" class="ml-3">توضیح:</label>\
              <textarea row="4" cols="45" class="form-control" style="height: 120px; resize: none;" id="snowWatch1" name="snowWatch"></textarea>\
            </div>\
          </div>\
        </div>\
      ';
                break;
            }

        }
        $(".sub-item-container").append(subItems);

        $("#uploadroaditem").modal({ backdrop: "static", keyboard: false });

        // Show modal
        $("#uploadroaditem").modal("show");

        // Load necessary scripts
        actionAfterShowModal(selectedItem);
    } else {
        // Don't allow user to select option without selecting location
    }
}

function actionAfterShowModal(index) {
    var myInput = document.querySelectorAll("input[type=number]");

    function keyAllowed(key) {
        var keys = [8, 9, 13, 16, 17, 18, 19, 20, 27, 46, 48, 49, 50,
            51, 52, 53, 54, 55, 56, 57, 91, 92, 93
        ];
        if (key && keys.indexOf(key) === -1)
            return false;
        else
            return true;
    }

    myInput.forEach(function (element) {
        element.addEventListener('keypress', function (e) {
            // alert("hiiiiiiiiiiiiiiiiiiiiiiii")
            var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
            if (!keyAllowed(key))
                e.preventDefault();
        }, false);

        // Disable pasting of non-numbers
        element.addEventListener('paste', function (e) {
            var pasteData = e.clipboardData.getData('text/plain');
            if (pasteData.match(/[^0-9]/))
                e.preventDefault();
        }, false);
    })
    switch (index) {
        //this this

        case 1: {
            let selectedSubItemsArray = selectedSubItems.split("-");
            // console.log(selectedSubItemsArray);

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 14; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="reconstruction' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="reconstruction1"]').on("click", function () {
                $(".sub-item1-1").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 1) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction2"]').on("click", function () {
                $(".sub-item1-2").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 2) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction3"]').on("click", function () {
                $(".sub-item1-3").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 3) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction4"]').on("click", function () {
                $(".sub-item1-4").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 4) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction5"]').on("click", function () {
                $(".sub-item1-5").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 5) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction6"]').on("click", function () {
                $(".sub-item1-6").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 6) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction7"]').on("click", function () {
                $(".sub-item1-7").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 6) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction8"]').on("click", function () {
                $(".sub-item1-8").show("slow"); 0
                for (let i = 1; i < 14; i++) {
                    // if (i == 6) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction9"]').on("click", function () {
                $(".sub-item1-9").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 6) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction10"]').on("click", function () {
                $(".sub-item1-10").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 6) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction11"]').on("click", function () {
                $(".sub-item1-11").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 6) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction12"]').on("click", function () {
                $(".sub-item1-12").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 6) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });
            $('input[id="reconstruction13"]').on("click", function () {
                $(".sub-item1-13").show("slow");
                for (let i = 1; i < 14; i++) {
                    // if (i == 6) continue;
                    if (!$("#reconstruction" + i).is(":checked")) {
                        $(".sub-item1-" + i).hide("slow");
                    }
                }
            });


            break;
        }
        case 2: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 20; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="cleaning' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="cleaning1"]').on("click", function () {
                $(".sub-item2-1").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 1) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning2"]').on("click", function () {
                $(".sub-item2-2").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 2) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning3"]').on("click", function () {
                $(".sub-item2-3").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 3) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning4"]').on("click", function () {
                $(".sub-item2-4").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 4) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning5"]').on("click", function () {
                $(".sub-item2-5").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 5) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning6"]').on("click", function () {
                $(".sub-item2-6").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 6) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning7"]').on("click", function () {
                $(".sub-item2-7").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 7) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning8"]').on("click", function () {
                $(".sub-item2-8").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning9"]').on("click", function () {
                $(".sub-item2-9").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning10"]').on("click", function () {
                $(".sub-item2-10").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning11"]').on("click", function () {
                $(".sub-item2-11").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning12"]').on("click", function () {
                $(".sub-item2-12").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning13"]').on("click", function () {
                $(".sub-item2-13").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning14"]').on("click", function () {
                $(".sub-item2-14").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning15"]').on("click", function () {
                $(".sub-item2-15").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning16"]').on("click", function () {
                $(".sub-item2-16").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning17"]').on("click", function () {
                $(".sub-item2-17").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning18"]').on("click", function () {
                $(".sub-item2-18").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            $('input[id="cleaning19"]').on("click", function () {
                $(".sub-item2-19").show("slow");
                for (let i = 1; i < 20; i++) {
                    // if (i == 8) continue;
                    if (!$("#cleaning" + i).is(":checked")) {
                        $(".sub-item2-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 3: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 5; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="signs' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="signs1"]').on("click", function () {
                $(".sub-item3-1").show("slow");
                for (let i = 1; i < 9; i++) {
                    // if (i == 1) continue;
                    if (!$("#signs" + i).is(":checked")) {
                        $(".sub-item3-" + i).hide("slow");
                    }
                }
            });
            $('input[id="signs2"]').on("click", function () {
                $(".sub-item3-2").show("slow");
                for (let i = 1; i < 9; i++) {
                    // if (i == 2) continue;
                    if (!$("#signs" + i).is(":checked")) {
                        $(".sub-item3-" + i).hide("slow");
                    }
                }
            });
            $('input[id="signs3"]').on("click", function () {
                $(".sub-item3-3").show("slow");
                for (let i = 1; i < 9; i++) {
                    // if (i == 3) continue;
                    if (!$("#signs" + i).is(":checked")) {
                        $(".sub-item3-" + i).hide("slow");
                    }
                }
            });
            $('input[id="signs4"]').on("click", function () {
                $(".sub-item3-4").show("slow");
                for (let i = 1; i < 9; i++) {
                    // if (i == 4) continue;
                    if (!$("#signs" + i).is(":checked")) {
                        $(".sub-item3-" + i).hide("slow");
                    }
                }
            });
            $('input[id="signs5"]').on("click", function () {
                $(".sub-item3-5").show("slow");
                for (let i = 1; i < 9; i++) {
                    // if (i == 4) continue;
                    if (!$("#signs" + i).is(":checked")) {
                        $(".sub-item3-" + i).hide("slow");
                    }
                }
            });
            $('input[id="signs6"]').on("click", function () {
                $(".sub-item3-6").show("slow");
                for (let i = 1; i < 9; i++) {
                    // if (i == 4) continue;
                    if (!$("#signs" + i).is(":checked")) {
                        $(".sub-item3-" + i).hide("slow");
                    }
                }
            });
            $('input[id="signs7"]').on("click", function () {
                $(".sub-item3-7").show("slow");
                for (let i = 1; i < 9; i++) {
                    // if (i == 4) continue;
                    if (!$("#signs" + i).is(":checked")) {
                        $(".sub-item3-" + i).hide("slow");
                    }
                }
            });
            $('input[id="signs8"]').on("click", function () {
                $(".sub-item3-8").show("slow");
                for (let i = 1; i < 9; i++) {
                    // if (i == 4) continue;
                    if (!$("#signs" + i).is(":checked")) {
                        $(".sub-item3-" + i).hide("slow");
                    }
                }
            });
            $('input[id="signs9"]').on("click", function () {
                $(".sub-item3-9").show("slow");
                for (let i = 1; i < 9; i++) {
                    // if (i == 4) continue;
                    if (!$("#signs" + i).is(":checked")) {
                        $(".sub-item3-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 4: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 4; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="shield' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        if (value === true) {
                            // Is RadioButton || Checkbox
                            $("#" + key).prop("checked", true);
                        } else {
                            console.log(key, value);
                            $("#" + key).val(value);
                        }
                    }
                }
            }

            $('input[id="shield1"]').on("click", function () {
                $(".sub-item4-1").show("slow");
                for (let i = 1; i < 4; i++) {
                    // if (i == 1) continue;
                    if (!$("#shield" + i).is(":checked")) {
                        $(".sub-item4-" + i).hide("slow");
                    }
                }
            });
            $('input[id="shield2"]').on("click", function () {
                $(".sub-item4-2").show("slow");
                for (let i = 1; i < 4; i++) {
                    // if (i == 2) continue;
                    if (!$("#shield" + i).is(":checked")) {
                        $(".sub-item4-" + i).hide("slow");
                    }
                }
            });
            $('input[id="shield3"]').on("click", function () {
                $(".sub-item4-3").show("slow");
                for (let i = 1; i < 4; i++) {
                    // if (i == 3) continue;
                    if (!$("#shield" + i).is(":checked")) {
                        $(".sub-item4-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 5: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 12; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="lighting' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        if (value === true) {
                            $("#" + key).prop("checked", true);
                        } else {
                            $("#" + key).val(value);
                        }
                    }
                }
            }

            $('input[id="lighting1"]').on("click", function () {
                $(".sub-item5-1").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting2"]').on("click", function () {
                $(".sub-item5-2").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting3"]').on("click", function () {
                $(".sub-item5-3").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting4"]').on("click", function () {
                $(".sub-item5-4").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting5"]').on("click", function () {
                $(".sub-item5-5").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting6"]').on("click", function () {
                $(".sub-item5-6").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting7"]').on("click", function () {
                $(".sub-item5-7").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting8"]').on("click", function () {
                $(".sub-item5-8").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting9"]').on("click", function () {
                $(".sub-item5-9").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting10"]').on("click", function () {
                $(".sub-item5-10").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lighting11"]').on("click", function () {
                $(".sub-item5-11").show("slow");
                for (let i = 1; i < 12; i++) {
                    if (!$("#lighting" + i).is(":checked")) {
                        $(".sub-item5-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 6: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 4; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="lining' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="lining1"]').on("click", function () {
                $(".sub-item6-1").show("slow");
                for (let i = 1; i < 4; i++) {
                    if (!$("#lining" + i).is(":checked")) {
                        $(".sub-item6-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lining2"]').on("click", function () {
                $(".sub-item6-2").show("slow");
                for (let i = 1; i < 4; i++) {
                    if (!$("#lining" + i).is(":checked")) {
                        $(".sub-item6-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lining3"]').on("click", function () {
                $(".sub-item6-3").show("slow");
                for (let i = 1; i < 4; i++) {
                    if (!$("#lining" + i).is(":checked")) {
                        $(".sub-item6-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lining4"]').on("click", function () {
                $(".sub-item6-4").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#lining" + i).is(":checked")) {
                        $(".sub-item6-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lining5"]').on("click", function () {
                $(".sub-item6-5").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#lining" + i).is(":checked")) {
                        $(".sub-item6-" + i).hide("slow");
                    }
                }
            });
            $('input[id="lining6"]').on("click", function () {
                $(".sub-item6-6").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#lining" + i).is(":checked")) {
                        $(".sub-item6-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 7: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 7; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="coloring' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="coloring1"]').on("click", function () {
                $(".sub-item7-1").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#coloring" + i).is(":checked")) {
                        $(".sub-item7-" + i).hide("slow");
                    }
                }
            });
            $('input[id="coloring2"]').on("click", function () {
                $(".sub-item7-2").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#coloring" + i).is(":checked")) {
                        $(".sub-item7-" + i).hide("slow");
                    }
                }
            });
            $('input[id="coloring3"]').on("click", function () {
                $(".sub-item7-3").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#coloring" + i).is(":checked")) {
                        $(".sub-item7-" + i).hide("slow");
                    }
                }
            });
            $('input[id="coloring4"]').on("click", function () {
                $(".sub-item7-4").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#coloring" + i).is(":checked")) {
                        $(".sub-item7-" + i).hide("slow");
                    }
                }
            });
            $('input[id="coloring5"]').on("click", function () {
                $(".sub-item7-5").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#coloring" + i).is(":checked")) {
                        $(".sub-item7-" + i).hide("slow");
                    }
                }
            });
            $('input[id="coloring6"]').on("click", function () {
                $(".sub-item7-6").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#coloring" + i).is(":checked")) {
                        $(".sub-item7-" + i).hide("slow");
                    }
                }
            });
            $('input[id="coloring7"]').on("click", function () {
                $(".sub-item7-7").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#coloring" + i).is(":checked")) {
                        $(".sub-item7-" + i).hide("slow");
                    }
                }
            });
            $('input[id="coloring8"]').on("click", function () {
                $(".sub-item7-8").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#coloring" + i).is(":checked")) {
                        $(".sub-item7-" + i).hide("slow");
                    }
                }
            });
            $('input[id="coloring9"]').on("click", function () {
                $(".sub-item7-9").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#coloring" + i).is(":checked")) {
                        $(".sub-item7-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        ///yasi start bodo
        case 8: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 7; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="washing' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="washing1"]').on("click", function () {
                $(".sub-item8-1").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#washing" + i).is(":checked")) {
                        $(".sub-item8-" + i).hide("slow");
                    }
                }
            });
            $('input[id="washing2"]').on("click", function () {
                $(".sub-item8-2").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#washing" + i).is(":checked")) {
                        $(".sub-item8-" + i).hide("slow");
                    }
                }
            });
            $('input[id="washing3"]').on("click", function () {
                $(".sub-item8-3").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#washing" + i).is(":checked")) {
                        $(".sub-item8-" + i).hide("slow");
                    }
                }
            });
            $('input[id="washing4"]').on("click", function () {
                $(".sub-item8-4").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#washing" + i).is(":checked")) {
                        $(".sub-item8-" + i).hide("slow");
                    }
                }
            });
            $('input[id="washing5"]').on("click", function () {
                $(".sub-item8-5").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#washing" + i).is(":checked")) {
                        $(".sub-item8-" + i).hide("slow");
                    }
                }
            });
            $('input[id="washing6"]').on("click", function () {
                $(".sub-item8-6").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#washing" + i).is(":checked")) {
                        $(".sub-item8-" + i).hide("slow");
                    }
                }
            });
            $('input[id="washing7"]').on("click", function () {
                $(".sub-item8-7").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#washing" + i).is(":checked")) {
                        $(".sub-item8-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 9: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 8; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="securing' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="securing1"]').on("click", function () {
                $(".sub-item9-1").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing2"]').on("click", function () {
                $(".sub-item9-2").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing3"]').on("click", function () {
                $(".sub-item9-3").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing4"]').on("click", function () {
                $(".sub-item9-4").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing5"]').on("click", function () {
                $(".sub-item9-5").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing6"]').on("click", function () {
                $(".sub-item9-6").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing7"]').on("click", function () {
                $(".sub-item9-7").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing8"]').on("click", function () {
                $(".sub-item9-8").show("slow");
                for (let i = 1; i < 16; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing9"]').on("click", function () {
                $(".sub-item9-9").show("slow");
                for (let i = 1; i < 16; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing10"]').on("click", function () {
                $(".sub-item9-10").show("slow");
                for (let i = 1; i < 16; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing11"]').on("click", function () {
                $(".sub-item9-11").show("slow");
                for (let i = 1; i < 16; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing12"]').on("click", function () {
                $(".sub-item9-12").show("slow");
                for (let i = 1; i < 16; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing13"]').on("click", function () {
                $(".sub-item9-13").show("slow");
                for (let i = 1; i < 16; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing14"]').on("click", function () {
                $(".sub-item9-14").show("slow");
                for (let i = 1; i < 16; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });
            $('input[id="securing15"]').on("click", function () {
                $(".sub-item9-15").show("slow");
                for (let i = 1; i < 16; i++) {
                    if (!$("#securing" + i).is(":checked")) {
                        $(".sub-item9-" + i).hide("slow");
                    }
                }
            });

            break;
        }
        case 10: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 7; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="privacy' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        $("#" + key).prop("checked", true);
                    }
                }
            }

            $('input[id="privacy1"]').on("click", function () {
                $(".sub-item10-1").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#privacy" + i).is(":checked")) {
                        $(".sub-item10-" + i).hide("slow");
                    }
                }
            });
            $('input[id="privacy2"]').on("click", function () {
                $(".sub-item10-2").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#privacy" + i).is(":checked")) {
                        $(".sub-item10-" + i).hide("slow");
                    }
                }
            });
            $('input[id="privacy3"]').on("click", function () {
                $(".sub-item10-3").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#privacy" + i).is(":checked")) {
                        $(".sub-item10-" + i).hide("slow");
                    }
                }
            });
            $('input[id="privacy4"]').on("click", function () {
                $(".sub-item10-4").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#privacy" + i).is(":checked")) {
                        $(".sub-item10-" + i).hide("slow");
                    }
                }
            });
            $('input[id="privacy5"]').on("click", function () {
                $(".sub-item10-5").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#privacy" + i).is(":checked")) {
                        $(".sub-item10-" + i).hide("slow");
                    }
                }
            });
            $('input[id="privacy6"]').on("click", function () {
                $(".sub-item10-6").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#privacy" + i).is(":checked")) {
                        $(".sub-item10-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 11: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 8; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="bridge' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        $("#" + key).prop("checked", true);
                    }
                }
            }

            $('input[id="bridge1"]').on("click", function () {
                $(".sub-item11-1").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#bridge" + i).is(":checked")) {
                        $(".sub-item11-" + i).hide("slow");
                    }
                }
            });
            $('input[id="bridge2"]').on("click", function () {
                $(".sub-item11-2").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#bridge" + i).is(":checked")) {
                        $(".sub-item11-" + i).hide("slow");
                    }
                }
            });
            $('input[id="bridge3"]').on("click", function () {
                $(".sub-item11-3").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#bridge" + i).is(":checked")) {
                        $(".sub-item11-" + i).hide("slow");
                    }
                }
            });
            $('input[id="bridge4"]').on("click", function () {
                $(".sub-item11-4").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#bridge" + i).is(":checked")) {
                        $(".sub-item11-" + i).hide("slow");
                    }
                }
            });
            $('input[id="bridge5"]').on("click", function () {
                $(".sub-item11-5").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#bridge" + i).is(":checked")) {
                        $(".sub-item11-" + i).hide("slow");
                    }
                }
            });
            $('input[id="bridge6"]').on("click", function () {
                $(".sub-item11-6").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#bridge" + i).is(":checked")) {
                        $(".sub-item11-" + i).hide("slow");
                    }
                }
            });
            $('input[id="bridge7"]').on("click", function () {
                $(".sub-item11-7").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#bridge" + i).is(":checked")) {
                        $(".sub-item11-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 12: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 8; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="tunnel' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        $("#" + key).prop("checked", true);
                    }
                }
            }

            $('input[id="tunnel1"]').on("click", function () {
                $(".sub-item12-1").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#tunnel" + i).is(":checked")) {
                        $(".sub-item12-" + i).hide("slow");
                    }
                }
            });
            $('input[id="tunnel2"]').on("click", function () {
                $(".sub-item12-2").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#tunnel" + i).is(":checked")) {
                        $(".sub-item12-" + i).hide("slow");
                    }
                }
            });
            $('input[id="tunnel3"]').on("click", function () {
                $(".sub-item12-3").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#tunnel" + i).is(":checked")) {
                        $(".sub-item12-" + i).hide("slow");
                    }
                }
            });
            $('input[id="tunnel4"]').on("click", function () {
                $(".sub-item12-4").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#tunnel" + i).is(":checked")) {
                        $(".sub-item12-" + i).hide("slow");
                    }
                }
            });
            $('input[id="tunnel5"]').on("click", function () {
                $(".sub-item12-5").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#tunnel" + i).is(":checked")) {
                        $(".sub-item12-" + i).hide("slow");
                    }
                }
            });
            $('input[id="tunnel6"]').on("click", function () {
                $(".sub-item12-6").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#tunnel" + i).is(":checked")) {
                        $(".sub-item12-" + i).hide("slow");
                    }
                }
            });
            $('input[id="tunnel7"]').on("click", function () {
                $(".sub-item12-7").show("slow");
                for (let i = 1; i < 8; i++) {
                    if (!$("#tunnel" + i).is(":checked")) {
                        $(".sub-item12-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 13: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 9; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="winterOperation' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="winterOperation1"]').on("click", function () {
                $(".sub-item13-1").show("slow");
                for (let i = 1; i < 9; i++) {
                    if (!$("#winterOperation" + i).is(":checked")) {
                        $(".sub-item13-" + i).hide("slow");
                    }
                }
            });
            $('input[id="winterOperation2"]').on("click", function () {
                $(".sub-item13-2").show("slow");
                for (let i = 1; i < 9; i++) {
                    if (!$("#winterOperation" + i).is(":checked")) {
                        $(".sub-item13-" + i).hide("slow");
                    }
                }
            });
            $('input[id="winterOperation3"]').on("click", function () {
                $(".sub-item13-3").show("slow");
                for (let i = 1; i < 9; i++) {
                    if (!$("#winterOperation" + i).is(":checked")) {
                        $(".sub-item13-" + i).hide("slow");
                    }
                }
            });
            $('input[id="winterOperation4"]').on("click", function () {
                $(".sub-item13-4").show("slow");
                for (let i = 1; i < 9; i++) {
                    if (!$("#winterOperation" + i).is(":checked")) {
                        $(".sub-item13-" + i).hide("slow");
                    }
                }
            });
            $('input[id="winterOperation5"]').on("click", function () {
                $(".sub-item13-5").show("slow");
                for (let i = 1; i < 9; i++) {
                    if (!$("#winterOperation" + i).is(":checked")) {
                        $(".sub-item13-" + i).hide("slow");
                    }
                }
            });
            $('input[id="winterOperation6"]').on("click", function () {
                $(".sub-item13-6").show("slow");
                for (let i = 1; i < 9; i++) {
                    if (!$("#winterOperation" + i).is(":checked")) {
                        $(".sub-item13-" + i).hide("slow");
                    }
                }
            });
            $('input[id="winterOperation7"]').on("click", function () {
                $(".sub-item13-7").show("slow");
                for (let i = 1; i < 9; i++) {
                    if (!$("#winterOperation" + i).is(":checked")) {
                        $(".sub-item13-" + i).hide("slow");
                    }
                }
            });
            $('input[id="winterOperation8"]').on("click", function () {
                $(".sub-item13-8").show("slow");
                for (let i = 1; i < 9; i++) {
                    if (!$("#winterOperation" + i).is(":checked")) {
                        $(".sub-item13-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 14: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 8; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="machinery' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="machinery1"]').on("click", function () {
                $(".sub-item14-1").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            $('input[id="machinery2"]').on("click", function () {
                $(".sub-item14-2").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            $('input[id="machinery3"]').on("click", function () {
                $(".sub-item14-3").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            $('input[id="machinery4"]').on("click", function () {
                $(".sub-item14-4").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            $('input[id="machinery5"]').on("click", function () {
                $(".sub-item14-5").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            $('input[id="machinery6"]').on("click", function () {
                $(".sub-item14-6").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            $('input[id="machinery7"]').on("click", function () {
                $(".sub-item14-7").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            $('input[id="machinery8"]').on("click", function () {
                $(".sub-item14-8").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            $('input[id="machinery9"]').on("click", function () {
                $(".sub-item14-9").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            $('input[id="machinery10"]').on("click", function () {
                $(".sub-item14-10").show("slow");
                for (let i = 1; i < 11; i++) {
                    if (!$("#machinery" + i).is(":checked")) {
                        $(".sub-item14-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 15: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 4; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="tollhouse' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="tollhouse1"]').on("click", function () {
                $(".sub-item15-1").show("slow");
                for (let i = 1; i < 5; i++) {
                    if (!$("#tollhouse" + i).is(":checked")) {
                        $(".sub-item15-" + i).hide("slow");
                    }
                }
            });
            $('input[id="tollhouse2"]').on("click", function () {
                $(".sub-item15-2").show("slow");
                for (let i = 1; i < 5; i++) {
                    if (!$("#tollhouse" + i).is(":checked")) {
                        $(".sub-item15-" + i).hide("slow");
                    }
                }
            });
            $('input[id="tollhouse3"]').on("click", function () {
                $(".sub-item15-3").show("slow");
                for (let i = 1; i < 5; i++) {
                    if (!$("#tollhouse" + i).is(":checked")) {
                        $(".sub-item15-" + i).hide("slow");
                    }
                }
            });
            $('input[id="tollhouse4"]').on("click", function () {
                $(".sub-item15-4").show("slow");
                for (let i = 1; i < 5; i++) {
                    if (!$("#tollhouse" + i).is(":checked")) {
                        $(".sub-item15-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 16: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 10; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="emergency' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="emergency1"]').on("click", function () {
                $(".sub-item16-1").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#emergency" + i).is(":checked")) {
                        $(".sub-item16-" + i).hide("slow");
                    }
                }
            });
            $('input[id="emergency2"]').on("click", function () {
                $(".sub-item16-2").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#emergency" + i).is(":checked")) {
                        $(".sub-item16-" + i).hide("slow");
                    }
                }
            });
            $('input[id="emergency3"]').on("click", function () {
                $(".sub-item16-3").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#emergency" + i).is(":checked")) {
                        $(".sub-item16-" + i).hide("slow");
                    }
                }
            });
            $('input[id="emergency4"]').on("click", function () {
                $(".sub-item16-4").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#emergency" + i).is(":checked")) {
                        $(".sub-item16-" + i).hide("slow");
                    }
                }
            });
            $('input[id="emergency5"]').on("click", function () {
                $(".sub-item16-5").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#emergency" + i).is(":checked")) {
                        $(".sub-item16-" + i).hide("slow");
                    }
                }
            });
            $('input[id="emergency6"]').on("click", function () {
                $(".sub-item16-6").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#emergency" + i).is(":checked")) {
                        $(".sub-item16-" + i).hide("slow");
                    }
                }
            });
            $('input[id="emergency7"]').on("click", function () {
                $(".sub-item16-7").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#emergency" + i).is(":checked")) {
                        $(".sub-item16-" + i).hide("slow");
                    }
                }
            });
            $('input[id="emergency8"]').on("click", function () {
                $(".sub-item16-8").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#emergency" + i).is(":checked")) {
                        $(".sub-item16-" + i).hide("slow");
                    }
                }
            });
            $('input[id="emergency9"]').on("click", function () {
                $(".sub-item16-9").show("slow");
                for (let i = 1; i < 10; i++) {
                    if (!$("#emergency" + i).is(":checked")) {
                        $(".sub-item16-" + i).hide("slow");
                    }
                }
            });
            break;
        }
        case 17: {
            let selectedSubItemsArray = selectedSubItems.split("-");

            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                for (let i = 1; i < 7; i++) {
                    if (selectedSubItemsArray.indexOf(i.toString()) != -1) {
                        $('input[id="seeview' + i + '"]').prop("checked", true);
                        $(".sub-item" + index + "-" + i).show("slow");
                    }
                }

                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        // console.log(key, value);
                        $("#" + key).val(value);
                    }
                }
            }

            $('input[id="seeview1"]').on("click", function () {
                $(".sub-item17-1").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#seeview" + i).is(":checked")) {
                        $(".sub-item17-" + i).hide("slow");
                    }
                }
            });
            $('input[id="seeview2"]').on("click", function () {
                $(".sub-item17-2").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#seeview" + i).is(":checked")) {
                        $(".sub-item17-" + i).hide("slow");
                    }
                }
            });
            $('input[id="seeview3"]').on("click", function () {
                $(".sub-item17-3").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#seeview" + i).is(":checked")) {
                        $(".sub-item17-" + i).hide("slow");
                    }
                }
            });
            $('input[id="seeview4"]').on("click", function () {
                $(".sub-item17-4").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#seeview" + i).is(":checked")) {
                        $(".sub-item17-" + i).hide("slow");
                    }
                }
            });
            $('input[id="seeview5"]').on("click", function () {
                $(".sub-item17-5").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#seeview" + i).is(":checked")) {
                        $(".sub-item17-" + i).hide("slow");
                    }
                }
            });
            $('input[id="seeview6"]').on("click", function () {
                $(".sub-item17-6").show("slow");
                for (let i = 1; i < 7; i++) {
                    if (!$("#seeview" + i).is(":checked")) {
                        $(".sub-item17-" + i).hide("slow");
                    }
                }
            });

            break;
        }
        case 20: {
            if (
                selectedItem == previousSelectedItem ||
                (itemsData != null && selectedItem == itemsData.item)
            ) {
                if (!$.isEmptyObject(subItemsData)) {
                    for (const [key, value] of Object.entries(subItemsData)) {
                        $("#" + key).val(value);
                    }
                }
            }
            break;
        }
    }
}

// Next button click on items modal
//yasiiiiii modal change 
$("#uploadroaditem .btn-next").on("click", function () {
    switch (selectedItem) {
        case 1: {
            saveSelectedSubItems(13, "reconstruction");
            break;
        }
        case 2: {
            saveSelectedSubItems(19, "cleaning");
            break;
        }
        case 3: {
            saveSelectedSubItems(9, "signs");
            break;
        }
        case 4: {
            saveSelectedSubItems(3, "shield");
            break;
        }
        case 5: {
            saveSelectedSubItems(11, "lighting");
            break;
        }
        case 6: {
            saveSelectedSubItems(6, "lining");
            break;
        }
        case 7: {
            saveSelectedSubItems(9, "coloring");
            break;
        }
        case 8: {
            saveSelectedSubItems(7, "washing");
            break;
        }
        case 9: {
            saveSelectedSubItems(15, "securing");
            break;
        }
        case 10: {
            saveSelectedSubItems(6, "privacy");
            break;
        }
        case 11: {
            saveSelectedSubItems(7, "bridge");
            break;
        }
        case 12: {
            saveSelectedSubItems(7, "tunnel");
            break;
        }
        case 13: {
            saveSelectedSubItems(8, "winterOperation");
            break;
        }
        case 14: {
            saveSelectedSubItems(10, "machinery");
            break;
        }
        case 15: {
            saveSelectedSubItems(4, "tollhouse");
            break;
        }
        case 16: {
            saveSelectedSubItems(9, "emergency");
            break;
        }
        case 17: {
            saveSelectedSubItems(6, "seeview");
            break;
        }
        case 20: {
            saveSelectedSubItems(0, "snowWatch");
            break;
        }
        case 19: {
            //saveSelectedSubItems();
            break;
        }
    }
});

$("#uploadroaditem .btn-prev").on("click", function () {
    // subItemsData = {};
    // selectedSubItems = "";
    if ($("#uploadroaditem .btn-createb").css("display") == "none") {
        $("#uploadroaditem").modal("hide");
        $("#vertical-menu").modal("show");
    } else {
        previousSelectedItem = selectedItem;
        $("#uploadroaditem .btn-next").show();
        $("#uploadroaditem .btn-createb").hide();
        showSecondModal();
    }
});

function clearData() {
    // subItemsData = {};
    // selectedSubItems = "";
    $("#uploadroaditem .btn-next").show();
    $("#uploadroaditem .btn-createb").hide();
}

function setSubItem(name, value) {
    subItemsData[name] = value;
    // console.log(subItemsData);
}

function saveSelectedSubItems(
    selectedItemIndex = null,
    selectedItemName = null
) {
    valuevarification = [];
    // Clear subItem & subItemData if they exist
    subItemsData = {};
    selectedSubItems = "";

    if (selectedItem < 17) {
        for (let i = 1; i <= selectedItemIndex; i++) {
            if ($("#" + selectedItemName + i).is(":checked"))
                selectedSubItems += i + "-";
        }
    } else {
        selectedSubItems += 1 + "-";
    }

    // console.log("selectedItem: ", selectedItem);
    // console.log("selectedSubItems: ", selectedSubItems);

    hasSubItemGotValue = true;
    rookeshError = false;
    switch (selectedItem) {
        case 1: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if (i == 7) {
                        if (!$('.sub-item1-7 input[type="checkbox"]').is(":checked")) {
                            rookeshError = true;
                        } else {
                            rookeshError = false;
                            for (let j = 0; j < 11; j++) {
                                if ($("#" + selectedItemName + "7-" + j).is(":checked")) {
                                    if (
                                        (value = $("#" + selectedItemName + "7-" + j + "-1").val())
                                    ) {
                                        valuevarification.push(value)

                                        setSubItem(selectedItemName + i + "-" + j + "-1", value);
                                    } else hasSubItemGotValue = false;
                                    if (
                                        (value = $("#" + selectedItemName + "7-" + j + "-2").val())
                                    ) {
                                        valuevarification.push(value)

                                        setSubItem(selectedItemName + i + "-" + j + "-2", value);
                                    } else hasSubItemGotValue = false;
                                }
                            }
                        }
                    } else {
                        if ((value = $("#" + selectedItemName + i + "-1").val())) {
                            valuevarification.push(value)
                            setSubItem(selectedItemName + i + "-1", value);
                        } else hasSubItemGotValue = false;
                    }
                }
            }
            break;
        }
        case 2: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 3: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 4: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-2-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            // console.log(subItemsData);
            break;
        }
        case 5: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-2-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 6: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 7: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 8: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 9: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 10: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 11: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 12: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }
            break;
        }
        case 13: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }

            break;
        }
        case 14: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }

            break;
        }
        case 15: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if (i == 3) {
                        if ((value = $("#" + selectedItemName + i + "-1").val())) {
                            valuevarification.push(value)
                            setSubItem(selectedItemName + i + "-1", value);
                        } else hasSubItemGotValue = false;
                    }
                    else if (i == 4) {
                        if ((value = $("#" + selectedItemName + i + "-1").val())) {
                            valuevarification.push(value)
                            setSubItem(selectedItemName + i + "-1", value);
                        } else hasSubItemGotValue = false;
                    }
                    else {
                        // Others have 2 subitem data
                        for (let j = 1; j < 3; j++) {
                            if ((value = $("#" + selectedItemName + i + "-" + j).val())) {
                                // console.log(j);
                                valuevarification.push(value)
                                setSubItem(selectedItemName + i + "-" + j, value);
                            } else hasSubItemGotValue = false;
                        }
                    }
                }
            }
            break;
        }
        case 16: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }

            break;
        }
        case 17: {
            for (let i = 1; i <= selectedItemIndex; i++) {
                if ($("#" + selectedItemName + i).is(":checked")) {
                    if ((value = $("#" + selectedItemName + i + "-1").val())) {
                        // console.log(value);
                        valuevarification.push(value)
                        setSubItem(selectedItemName + i + "-1", value);
                    } else hasSubItemGotValue = false;
                }
            }

            break;
        }
        case 20: {
            if ((value = $("#" + selectedItemName + "1").val())) {
                // console.log(value);
                valuevarification.push(value)
                setSubItem(selectedItemName + "1", value);
            } else hasSubItemGotValue = false;
            break;
        }
    }

    let selectedSubItemsArray = selectedSubItems.split("-");
    // console.log("selectedSubItemsArray: ", selectedSubItemsArray);

    if (selectedItem == 1 && rookeshError) {
        alert("یک یا چند مورد از آیتم روکش را انتخاب کنید!");
    } else if (
        selectedSubItemsArray.length < 1 ||
        selectedSubItemsArray[0] == ""
    ) {
        console.log("selectedSubItemsArray[0]", selectedSubItemsArray[0], selectedSubItemsArray.length)
        alert("یک یا چند مورد را انتخاب کنید!");
    } else {
        var selectedlenght = selectedSubItemsArray.length - 1
        var selectedvalue = valuevarification.length

        if (selectedlenght == selectedvalue) {

            showUploadPhotoModal();
        }
        else {
            console.log("selectedSubItemsArray", selectedSubItemsArray, valuevarification)
            console.log("selectedlenght", selectedlenght, selectedvalue)
            alert("لطفا تمامی مقادیر را وارد کنید ");
        }

    }
}

function showUploadPhotoModal() {
    $("#uploadroaditem").modal("hide");

    setTimeout(function () {
        $("#uploadroaditem .btn-next").hide();
        $("#uploadroaditem .btn-createb").show();
        $("#uploadroaditem .modal-title").text("آپلود فایل‌های موردنیاز");
        $("#uploadroaditem .row.sub-item-container").empty();
        addUploadFormToModal();
        $("#uploadroaditem").modal("show");
    }, 350);
}

function addUploadFormToModal() {
    let formItem =
        '\
        <div class="col-6" style="float: right;">\
        <div class="img-box col d-flex justify-content-center" style="margin-bottom: 17px;">\
            <div class="d-flex flex-column">\
                <label class="imgbox d-flex align-items-center justify-content-center" for="deviceImg1add">\
                    <span class="img-title" id="deviceImg1Titleadd">  \
                    عکس قبل از اقدام</span>\
                    <img class="img-preview" id="deviceImg1Previewadd" src="" alt="" />\
                </label>\
                <button class="btn-delete-img btn btn-danger btn-sm" id="deleteDeviceImg1add" disabled><i class="fa fa-trash" style="color: #fff;"></i></button>\
            </div>\
            <input type="file" name="deviceImg1add" id="deviceImg1add" class="img-input d-none" accept=".jpg, .png">\
        </div>\
    </div>\
    <div class="col-6" style="float: right;">\
        <div class="img-box col d-flex justify-content-center" style="margin-bottom: 17px;">\
            <div class="d-flex flex-column">\
                <label class="imgbox d-flex align-items-center justify-content-center" for="deviceImg2add">\
                    <span class="img-title" id="deviceImg2Titleadd">  عکس بعد از اقدام</span>\
                    <img class="img-preview" id="deviceImg2Previewadd" src="" alt="" />\
                </label>\
                <button class="btn-delete-img btn btn-danger btn-sm" id="deleteDeviceImg2add" disabled><i class="fa fa-trash" style="color: #fff;"></i></button>\
            </div>\
            <input type="file" name="deviceImg2add" id="deviceImg2add" class="img-input d-none" accept=".jpg, .png">\
        </div>\
    </div>\
    ';

    $("#uploadroaditem .row.sub-item-container").append(formItem);
}

function showUploadedFiles(input) {
    if (input.files) {
        // var reader = new FileReader();

        // reader.onload = function (e) {
        //   $('#uploadedItems')
        //     .append(input.value);
        // };

        for (let index = 0; index < input.files.length; index++) {
            $("#uploadedItems").append(
                '\
        <div class="row" id="item-' +
                index +
                '">\
        <div class="col-md-6"><span style="margin-right: 12px;">نام: </span><span>' +
                input.files[index].name +
                '</span></div>\
        <div class="col-md-4"><span style="margin-right: 12px;">حجم: </span><span>' +
                input.files[index].size / 1000 +
                'KB</span></div>\
        <div class="col-md-2"><span style="margin-right: 12px; cursor: pointer">&#10006;</span><br></div>\
        </div>\
      '
            );
        }


        // console.log("input.files:");
        // console.log(input.files);

        // reader.readAsDataURL(input.files[0]);
    }
}
function showUploadedFiless(input) {
    if (input.files) {
        // var reader = new FileReader();

        // reader.onload = function (e) {
        //   $('#uploadedItems')
        //     .append(input.value);
        // };

        for (let index = 0; index < input.files.length; index++) {
            $("#uploadedItemss").append(
                '\
        <div class="row" id="item-' +
                index +
                '">\
        <div class="col-md-6"><span style="margin-right: 12px;">نام: </span><span>' +
                input.files[index].name +
                '</span></div>\
        <div class="col-md-4"><span style="margin-right: 12px;">حجم: </span><span>' +
                input.files[index].size / 1000 +
                'KB</span></div>\
        <div class="col-md-2"><span style="margin-right: 12px; cursor: pointer">&#10006;</span><br></div>\
        </div>\
      '
            );
        }


        // console.log("input.files:");
        // console.log(input.files);

        // reader.readAsDataURL(input.files[0]);
    }
}
$("#uploadroaditem .btn-createb").on("click", function () {
    let formData = new FormData();
    console.log("selectedItem", selectedItem)
    console.log("selectedSubItems", selectedSubItems)
    if (sourceLat != null && sourceLng != null)
        formData.append("source_coordinates", [sourceLat, sourceLng]);
    if (destLat != null && destLng != null)
        formData.append("dest_coordinates", [destLat, destLng]);
    if (saveTotalDistance != null)
        formData.append("total_distance", saveTotalDistance);
    if (selectedItem != null) formData.append("item", selectedItem);
    if (selectedSubItems != null) formData.append("sub_items", selectedSubItems);
    let subItemsDataStr = JSON.stringify(subItemsData);
    console.log("subItemsDataStr", subItemsDataStr)

    if (subItemsDataStr.length > 2) {
        formData.append("sub_items_data", subItemsDataStr);
    }

    if (typeof $("#deviceImg1add").get(0).files[0] !== "undefined") {
        formData.append(
            "before_image",
            $("#deviceImg1add").get(0).files[0]
        );
    }
    if (typeof $("#deviceImg2add").get(0).files[0] !== "undefined") {
        formData.append(
            "after_image",
            $("#deviceImg2add").get(0).files[0]
        );
    }


    for (var pair of formData.entries()) {
        console.log(pair[0] + ', ' + pair[1]);
    }
    // console.log("selectedItem: ", selectedItem);
    // console.log("selectedSubItems: ", selectedSubItems);
    // console.log("subItemsData: ", subItemsData);

    let reqUrl = "";
    if (itemsData == null) {
        reqUrl = "/road-items";
    } else reqUrl = "/projects/road-items/" + requestId;

    showLoaderScreen();

    console.log("formdataaaa", formData)
    // for (var value of formData.values()) {
    //   console.log(value);
    // }
    console.log("deviceImg1add", typeof $("#deviceImg1add").get(0).files[0] == "undefined", typeof $("#deviceImg2add").get(0).files[0] == "undefined")
    // console.log("kiki", $("input[name=modalUpFile1]")[0].files.length, $("input[name=modalUpFile]")[0].files.length)
    if ((typeof $("#deviceImg1add").get(0).files[0] == "undefined") || (typeof $("#deviceImg2add").get(0).files[0] == "undefined")) {
        alert("لطفا عکس را وارد کنید.")
        hideLoaderScreen();
        // location.reload()
    } else {
        $("#uploadroaditem .btn-createb").prop("disabled", true);
        $("#uploadroaditem").modal("hide");
        $.ajax({
            url: "https://rms.rmto.ir/road-items-amir",
            type: "POST",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (result) {
                //console.log(result);
                setTimeout(() => {
                    hideLoaderScreen();
                    location.reload()
                }, 2000);
            },
            error: function (error) {
                console.log(error);
                alert("ارتباط اینترنت شما برقرار نیست. لطفا مجدد تلاش کنید.");
                hideLoaderScreen();
                location.reload()

            },
        });
    }
});

function showLoaderScreen() {
    $(".starter-loader-container").css("display", "flex").hide().fadeIn();
}

function hideLoaderScreen() {
    $(".starter-loader-container").fadeOut();
}

//First Add this to extend jQuery
$.extend({
    getUrlVars: function () {
        var vars = [],
            hash;
        var hashes = window.location.href
            .slice(window.location.href.indexOf("?") + 1)
            .split("&");
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split("=");
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    },
    getUrlVar: function (name) {
        return $.getUrlVars()[name];
    },
});

$(document).ready(function () {
    // getLastItemsProjects();
    getdataitem()
    // Getting URL var by its name
    requestId = $.getUrlVar("id");
    let type = $.getUrlVar("type");

    //console.log(requestId);
    //console.log(type);

    if (type == undefined) {
        // It's a new project submission
        projectType = 0;
        $("#org-pin").show();
    } else {
        // It's a project in view mode || in edit mode
        projectType = type;
        getSelectedProject(type, requestId);
    }
});

function getdataitem() {
    $.ajax({
        url: "https://rms.rmto.ir/api/get-items-and-subs",
        type: "GET",
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            console.log("Erss", result)
            appenditems(result.items)
            filleacharray(result.data)

        },
        error: function (error) {
            console.log(error);
        },
    });
}

function appenditems(res) {
    var datashow = ""
    for (var i = 0; i < res.length; i++) {
        datashow = datashow + '<div class="col-sm-6 sub-item">\
      <div class="form-group radio-body clearfix">\
        <div class="icheck-primary d-inline">\
          <input type="radio" id="'+ res[i].item_id + '" name="radiocheck" />\
          <label id="'+ res[i].item_id + '-name" for="' + res[i].item_id + '">' + res[i].item_str + '\
                              </label>\
        </div>\
      </div>\
      </div>'


    }
    $("#modalbodychooseitem").append(datashow)
}
function filleacharray(data) {
    var obj = {};
    for (var i = 0; i < data.length; i++) {
        obj = {
            item: data[i].item,
            item_id: data[i].item_id,
            sub_item: data[i].sub_item,
            sub_item_id: data[i].sub_item_id,
            sub_item_str: data[i].sub_item_str,
            sub_item_unit: data[i].sub_item_unit
        }
        showsubitems.push(obj)
    }
    console.log("test", showsubitems)
    // backhearrrr
}
function getSelectedProject(type, id) {
    showLoaderScreen();
    $.ajax({
        url: "/projects/road-items/" + id,
        type: "GET",
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            hideLoaderScreen();
            //console.log(result);
            showProjectData(result);
        },
        error: function (error) {
            hideLoaderScreen();
            console.log(error);
        },
    });
}

function showProjectData(result) {
    itemsData = result.data;
    sourceLat = result.data.start_lat;
    sourceLng = result.data.start_lng;
    destLat = result.data.end_lat;
    destLng = result.data.end_lng;
    addSourceMarker(2);
    addDestinationMarker(2);

    selectedItem = result.data.item;
    let subItems = "";
    for (let i = 0; i < result.data.sub_items.length; i++) {
        subItems += result.data.sub_items[i] + "-";
    }
    //console.log(subItems);
    selectedSubItems = subItems;
    subItemsData = result.data.sub_items_data;

    map.flyTo([sourceLat, sourceLng - 0.4], 11);
    setTimeout(function () {
        checkMarkersAndDrawPath();
    }, 2000);
}

// function getLastItemsProjects() {
//   $.ajax({
//     url: "/road-items",
//     type: "GET",
//     cache: false,
//     contentType: false,
//     processData: false,
//     success: function (result) {
//       //console.log(result);
//       showLastItemsProjects(result.data);
//     },
//     error: function (error) {
//       console.log(error);
//     },
//   });
// }

// function showLastItemsProjects(data) {
//   for (let i = 0; i < data.length; i++) {
//     let subItem = $('<div class="project-items-list-item"></div>');
//     subItem.append("<span>ش‌پ: " + data[i].id + "</span>");
//     subItem.append("<span>کاربر: " + data[i].user.name + "</span>");
//     //subItem.append('<span>تاریخ:'+data[i].created_at+'</span>');
//     $(".list-project-items").append(subItem);
//     let item = $(".list-project-items>.project-items-list-item").last();
//     setTimeout(function () {
//       item.fadeIn();
//     }, 500);
//   }
// }
var myInput = document.querySelectorAll("input[type=number]");

function keyAllowed(key) {
    var keys = [8, 9, 13, 16, 17, 18, 19, 20, 27, 46, 48, 49, 50,
        51, 52, 53, 54, 55, 56, 57, 91, 92, 93
    ];
    if (key && keys.indexOf(key) === -1)
        return false;
    else
        return true;
}

myInput.forEach(function (element) {
    element.addEventListener('keypress', function (e) {
        alert("hiiiiiiiiiiiiiiiiiiiiiiii")
        var key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
        if (!keyAllowed(key))
            e.preventDefault();
    }, false);

    // Disable pasting of non-numbers
    element.addEventListener('paste', function (e) {
        var pasteData = e.clipboardData.getData('text/plain');
        if (pasteData.match(/[^0-9]/))
            e.preventDefault();
    }, false);
});

// $(".second-menu-img").click(function () {

//   $(".queen-size-nav").toggle({ direction: "right" }, 50);
//   if (
//     $(".second-menu-img").attr("src") ==
//     "./dist/images/new-design/burger-list.svg"
//   ) {
//     $(".second-menu-img").attr("src", "./dist/images/new-design/delete.svg");
//     $(".queen-size-nav").css("position", "absolute");
//     $(".queen-size-nav").css("z-index", "2");
//     $(".queen-size-nav").css("width", "30%");
//     $(".queen-size-nav").css("height", "100%");
//     $(".second-top-menu").css("z-index", "2");
//   } else if (
//     $(".second-menu-img").attr("src") == "./dist/images/new-design/delete.svg"
//   ) {
//     $(".second-menu-img").attr(
//       "src",
//       "./dist/images/new-design/burger-list.svg"
//     );
//     $(".second-top-menu").css("margin-right", "0px");
//     $(".queen-size-nav").css("width", "0%");
//     $(".queen-size-nav").css("height", "0%");
//   }
// });
// $(".queen-res").click(function () {
//   $(".first-step-res").slideToggle(300);
//   if ($(".forth-step-res").css("display") == "block") {
//     $(".forth-step-res").slideUp(300);
//   } else if ($(".sixth-step-res").css("display") == "block") {
//     $(".sixth-step-res").slideUp(300);
//   } else if ($(".seventh-step-res").css("display") == "block") {
//     $(".seventh-step-res").slideUp(300);
//   }
//   if ($(".first-step-res").css("display") == "block") {
//     $(".arrow-changing1").attr(
//       "src",
//       "../dist/images/new-design/arrow-down.svg"
//     );
//   }
//   setTimeout(() => {
//     if ($(".first-step-res").css("display") == "none") {
//       $(".arrow-changing1").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".forth-step-res").css("display") == "none") {
//       $(".arrow-changing2").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".sixth-step-res").css("display") == "none") {
//       $(".arrow-changing3").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".seventh-step-res").css("display") == "none") {
//       $(".arrow-changing4").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
// });
// $(".inside-queen-res").click(function () {
//   $(".second-step-res").slideToggle(300);
//   if ($(".arrow-changing-inside1").attr("src") == "../dist/images/new-design/arrow-left.svg") {
//     $(".arrow-changing-inside1").attr("src", "../dist/images/new-design/arrow-down.svg");
//   }else if ($(".arrow-changing-inside1").attr("src") == "../dist/images/new-design/arrow-down.svg") {
//     $(".arrow-changing-inside1").attr("src", "../dist/images/new-design/arrow-left.svg");
//   }
// });
// $(".again-inside-queen-res").click(function () {
//   $(".third-step-res").slideToggle(300);
//   if ($(".arrow-changing-inside2").attr("src") == "../dist/images/new-design/arrow-left.svg") {
//     $(".arrow-changing-inside2").attr("src", "../dist/images/new-design/arrow-down.svg");
//   }else if ($(".arrow-changing-inside2").attr("src") == "../dist/images/new-design/arrow-down.svg") {
//     $(".arrow-changing-inside2").attr("src", "../dist/images/new-design/arrow-left.svg");
//   }
// });
// $(".second-queen-res").click(function () {
//   $(".forth-step-res").slideToggle(300);
//   if ($(".first-step-res").css("display") == "block") {
//     $(".first-step-res").slideUp(300);
//   } else if ($(".sixth-step-res").css("display") == "block") {
//     $(".sixth-step-res").slideUp(300);
//   } else if ($(".seventh-step-res").css("display") == "block") {
//     $(".seventh-step-res").slideUp(300);
//   }
//     if ($(".forth-step-res").css("display") == "block") {
//     $(".arrow-changing2").attr(
//       "src",
//       "../dist/images/new-design/arrow-down.svg"
//     );
//   }
//   setTimeout(() => {
//     if ($(".forth-step-res").css("display") == "none") {
//       $(".arrow-changing2").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".first-step-res").css("display") == "none") {
//       $(".arrow-changing1").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".sixth-step-res").css("display") == "none") {
//       $(".arrow-changing3").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".seventh-step-res").css("display") == "none") {
//       $(".arrow-changing4").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
// });
// $(".inside-second-queen-res").click(function () {
//   $(".fivth-step-res").slideToggle(300);
//   $(".third-step-res").slideToggle(300);
//   if ($(".arrow-changing-inside3").attr("src") == "../dist/images/new-design/arrow-left.svg") {
//     $(".arrow-changing-inside3").attr("src", "../dist/images/new-design/arrow-down.svg");
//   }else if ($(".arrow-changing-inside3").attr("src") == "../dist/images/new-design/arrow-down.svg") {
//     $(".arrow-changing-inside3").attr("src", "../dist/images/new-design/arrow-left.svg");
//   }
// });
// $(".third-queen-res").click(function () {
//   $(".sixth-step-res").slideToggle(300);
//   if ($(".forth-step-res").css("display") == "block") {
//     $(".forth-step-res").slideUp(300);
//   } else if ($(".first-step-res").css("display") == "block") {
//     $(".first-step-res").slideUp(300);
//   } else if ($(".seventh-step-res").css("display") == "block") {
//     $(".seventh-step-res").slideUp(300);
//   }
//   if ($(".sixth-step-res").css("display") == "block") {
//     $(".arrow-changing3").attr(
//       "src",
//       "../dist/images/new-design/arrow-down.svg"
//     );
//   }
//   setTimeout(() => {
//     if ($(".sixth-step-res").css("display") == "none") {
//       $(".arrow-changing3").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".first-step-res").css("display") == "none") {
//       $(".arrow-changing1").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".forth-step-res").css("display") == "none") {
//       $(".arrow-changing2").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".seventh-step-res").css("display") == "none") {
//       $(".arrow-changing4").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
// });
// $(".forth-queen-res").click(function () {
//   $(".seventh-step-res").slideToggle(300);
//   if ($(".forth-step-res").css("display") == "block") {
//     $(".forth-step-res").slideUp(300);
//   } else if ($(".sixth-step-res").css("display") == "block") {
//     $(".sixth-step-res").slideUp(300);
//   } else if ($(".first-step-res").css("display") == "block") {
//     $(".first-step-res").slideUp(300);
//   }
//   if ($(".seventh-step-res").css("display") == "block") {
//     $(".arrow-changing4").attr(
//       "src",
//       "../dist/images/new-design/arrow-down.svg"
//     );
//   }
//   setTimeout(() => {
//     if ($(".seventh-step-res").css("display") == "none") {
//       $(".arrow-changing4").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".first-step-res").css("display") == "none") {
//       $(".arrow-changing1").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".forth-step-res").css("display") == "none") {
//       $(".arrow-changing2").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
//   setTimeout(() => {
//     if ($(".sixth-step-res").css("display") == "none") {
//       $(".arrow-changing3").attr(
//         "src",
//         "../dist/images/new-design/arrow-left.svg"
//       );
//     }
//   }, 320);
// });
// $(".fivth-queen-res").click(function () {
//   $(".eight-step-res").slideToggle(300);
// });
//upload files


//clear files
$('.btn-delete-img').on('click', function () {
    var parent = $(this).parents('.img-box');

    parent.find('.img-input').val('');
    parent.find('.img-preview').removeAttr('src');
    parent.find('.img-title').css('display', '');
    $(this).attr('disabled', 'disabled')
})
$(document).on('change', '.img-input', function () {
    // alert("hiii")
    var input = this;
    var parent = $(this).parents('.img-box');
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            parent.find('.img-title').css('display', 'none')
            parent.find('.btn-delete-img').removeAttr('disabled');
            console.log("yesss", e.target.result)

            parent.find('.img-preview')
                .attr('src', e.target.result);

        };

        reader.readAsDataURL(input.files[0]);
    }
    deleteImgStatus[parent.find('.btn-delete-img').val() - 1] = false;
    console.log("deleteImgStatus", deleteImgStatus);
})