/**Created Oct 2020 (TigerTMS)
 *
 * File with some helper function
 */

let customer;
//refresh the preview iframe
function refreshPreview() {
  setTimeout(function () {
    var iframe = document.getElementById("preview");
    var iframeOther = document.getElementById("previewOther");
    iframe.src = iframe.src;
    iframeOther.src = iframeOther.src;
  }, 1000);
}

//get the url from the path
async function getURL(path) {
  let pathURL = await firebase
    .storage()
    .ref(path)
    .getDownloadURL()
    .then(function (url) {
      return url;
    });

  return pathURL;
}

function showActiveNavElement(sectionID) {
  document.getElementById("section0").style.display = "none"; //dash
  document.getElementById("section1").style.display = "none"; //main
  document.getElementById("section3").style.display = "none"; //button
  document.getElementById("section10").style.display = "none"; //extra
  document.getElementById("section11").style.display = "none"; //checklist
  document.getElementById("section2").style.display = "none"; //header
  document.getElementById("section4").style.display = "none"; //social media

  document.getElementById("section" + sectionID).style.display = "block";

  document.getElementById("advNav").classList.remove("addOrange");
  document.getElementById("topNav").classList.remove("addOrange");
  document.getElementById("buttonNav").classList.remove("addOrange");
  document.getElementById("checkNav").classList.remove("addOrange");
  document.getElementById("dashNav").classList.remove("addOrange");
  document.getElementById("headNav").classList.remove("addOrange");
  document.getElementById("socialmediaNav").classList.remove("addOrange");

  if (sectionID === 0) {
    document.getElementById("hidePreviewFrame").style.display = "none";
    document.getElementById("section" + sectionID).style.display = "flex";
  } else {
    document.getElementById("section" + sectionID).style.display = "block";
    document.getElementById("hidePreviewFrame").style.display = "block";
  }

  switch (sectionID) {
    case 0:
      document.getElementById("dashNav").classList.add("addOrange");
      break;
    case 1:
      document.getElementById("topNav").classList.add("addOrange");
      break;
    case 2:
      document.getElementById("headNav").classList.add("addOrange");
      break;
    case 3:
      document.getElementById("buttonNav").classList.add("addOrange");
      break;
    case 4:
      document.getElementById("socialmediaNav").classList.add("addOrange");
      break;
    case 10:
      document.getElementById("advNav").classList.add("addOrange");
      break;
    case 11:
      document.getElementById("checkNav").classList.add("addOrange");
      break;
  }

  document.getElementById("header").scrollIntoView({ behavior: "smooth" });
}

//scroll to section2 HEADER CONFIGURATION
function goToHeader() {
  showActiveNavElement(2);
}
//scroll to section3 BUTTON CONFIGURATION
function goToButton() {
  showActiveNavElement(3);
}
//scroll to section10 BUTTON CONFIGURATION
function goToExtras() {
  showActiveNavElement(10);
}
//scroll to section1 BUTTON CONFIGURATION
function goToTop() {
  showActiveNavElement(1);
}
function goToCheck() {
  showActiveNavElement(11);
}
function goToDash() {
  showActiveNavElement(0);
}

function goToSocial() {
  showActiveNavElement(4);
}

//remove all child nodes
function removeAllChildNodes(parent) {
  while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
  }
}

function giveName(name) {
  let p = document.createElement("p");
  p.style.marginTop = "10px";
  p.style.marginBottom = "0px";
  p.textContent = name;
  return p;
}

/**---------------------------- IMAGE HELPER------------------- */
function deleteImg(collection, id, imgPath, hotelUID, uid) {
  if (collection == "header") {
    sessionStorage.setItem("header", "enabled");
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateHeader",
      "customer=" +
        hotelUID +
        "&uid=" +
        uid +
        "&data=" +
        JSON.stringify({ backgroundImage: "" })
    ).then(() => {
      document.getElementById("headerBGimage").style.display = "none";
      document.getElementsByName("deleteHeaderImgPreview")[0].hidden = true;
      document.getElementById("headerUploadFor").style.width = "50%";
      document.getElementById("headerUploadAnim").style.width = "50%";
      document.getElementById("h_logo").value = "";
    });
  } else if (collection == "main") {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateMain",
      "customer=" +
        hotelUID +
        "&uid=" +
        uid +
        "&data=" +
        JSON.stringify({ backgroundImage: "" })
    ).then(() => {
      document.getElementById("mainBGimage").style.display = "none";
      document.getElementsByName("deleteMainImgPreview")[0].hidden = true;
      document.getElementById("mainUploadFor").style.width = "50%";
      document.getElementById("mainUploadAnim").style.width = "50%";
      document.getElementById("fileToUp").value = "";
    });
  }

  // Delete the file
  console.log(imgPath);
  if (typeof imgPath === "string") {
    if (
      imgPath.indexOf("%2Ftemplate%2F") > 0 ||
      imgPath.indexOf(`%2F${hotelUID}%2F`) < 0
    ) {
      return;
    } else {
      firebase
        .storage()
        .refFromURL(imgPath)
        .delete()
        .then(() => {
          refreshPreview();
        });
    }
  } else {
    firebase
      .storage()
      .ref(imgPath)
      .delete()
      .then(() => {
        refreshPreview();
      });
  }

  if (collection !== "main" && collection !== "header") {
    sessionStorage.setItem("buttons", "enabled");
  }
}

function checkMainbackgroundImage(main, hotelUID, uid) {
  if (main.backgroundImage != "") {
    let imgDiv = document.getElementById("mainBGimage");
    let imgPath = main.backgroundImage;
    imgDiv.style.backgroundImage = "url('" + imgPath + "')";
    imgDiv.style.display = "block";
    imgDiv.style.backgroundPosition = "center";

    let deleteButton = document.getElementsByName("deleteMainImgPreview")[0];
    deleteButton.id = "bgImgDelete";
    deleteButton.setAttribute(
      "onclick",
      "deleteImg('main','" +
        main.docID +
        "','" +
        main.backgroundImage +
        "','" +
        hotelUID +
        "','" +
        uid +
        "')"
    );
    deleteButton.hidden = false;
    document.getElementById("mainUploadFor").style.width = "24%";
    document.getElementById("mainUploadAnim").style.width = "24%";
  }
}

function checkHeaderbackgroundImage(header, hotelUID, uid) {
  if (header.backgroundImage != "") {
    let imgDiv = document.getElementById("headerBGimage");
    let imgPath = header.backgroundImage;
    imgDiv.style.backgroundImage = "url('" + imgPath + "')";
    imgDiv.style.display = "block";
    imgDiv.style.backgroundPosition = "center";

    let deleteButton = document.getElementsByName("deleteHeaderImgPreview")[0];
    deleteButton.id = "headerImgDelete";
    deleteButton.setAttribute(
      "onclick",
      "deleteImg('header','" +
        header.docIC +
        "','" +
        header.backgroundImage +
        "','" +
        hotelUID +
        "','" +
        uid +
        "')"
    );
    deleteButton.hidden = false;
    document.getElementById("headerUploadFor").style.width = "24%";
    document.getElementById("headerUploadAnim").style.width = "24%";
  }
}

/** --------------------HIDE HELPER -------------------------- */
// Hide the input fields when change to another BUTTON TYPE
function hideButtonURL() {
  //hide url field
  let bURL = document.getElementById("b_url_div");
  bURL.style.display = "none";
  bURL.required = false;
  document.getElementById("bu_url_div").style.display = "none";
}
function hideMap() {
  if (document.getElementById("mapDetails").style.display === "block") {
    document.getElementById("mapDetails").style.display = "none";
  }
}
function hideNotify() {
  if (document.getElementById("iNotifyDetails").style.display === "block") {
    document.getElementById("iNotifyDetails").style.display = "none";
    document.getElementById("iconPreview").innerHTML = "";
  }
}
function hideSpeed() {
  if (document.getElementById("hideSpeed").style.display === "block") {
    document.getElementById("hideSpeed").style.display = "none";
  }
  if (document.getElementById("hideUpSpeed").style.display === "block") {
    document.getElementById("hideUpSpeed").style.display = "none";
  }
}
function hidePopup() {
  if (document.getElementById("popupDetails").style.display === "block") {
    document.getElementById("popupDetails").style.display = "none";
  }
}
function hideFeedback() {
  if (document.getElementById("feedbackDetails").style.display === "block") {
    document.getElementById("feedbackDetails").style.display = "none";
  }
}

/** EVENT LISTERNER */
//checking if the header status checkbox is checked or not, to show additional information if yes
let headerStatusCheckBox = document.getElementsByName("h_status")[0];
headerStatusCheckBox.addEventListener("click", function () {
  checkboxHeaderCheck();
});

function checkboxHeaderCheck() {
  let headerSubInputs = document.getElementById("headerSubInputs");
  // console.log(headerStatusCheckBox.checked)
  if (headerStatusCheckBox.checked) {
    headerSubInputs.style.display = "block";
  } else {
    headerSubInputs.style.display = "none";
  }
}

document.getElementsByName("social_status")[0].addEventListener("click", () => {
  let socialmediaDiv = document.getElementById("socialmediaDiv");
  if (document.getElementsByName("social_status")[0].checked) {
    socialmediaDiv.style.display = "block";
  } else {
    socialmediaDiv.style.display = "none";
  }
});

/** --------------------INFO PAGE SECTION -------------------------- */

let subObjList = [];
let gArrayFonts = [
  "Arial",
  "Courier",
  "Georgia",
  "Sans-Serif",
  "Tahoma",
  "Times new roman",
  "Serif",
  "Verdana",
  "Impact",
  "Georgia",
  "Monaco",
];
let summernoteBackCol;

//Pop-Up Properties
function showInfo(hotelUID) {
  let count = 0;
  let buttonForm;
  let submitButton;
  if (document.getElementsByClassName("infoDiv")[0]) {
    deleteInfo();
  }

  //update button form
  if (document.getElementById("buttonForm").style.display == "none") {
    buttonForm = document.getElementById("updateButtonForm");
    submitButton = document.getElementById("updateButtonSubmit");
  }
  //add button form
  else {
    buttonForm = document.getElementById("buttonForm");
    submitButton = document.getElementById("addButtonSubmit");
  }

  let details = document.getElementById("popupDetails");
  let br = document.createElement("br");

  //info Div
  let infoDiv = document.createElement("div");
  infoDiv.classList.add("infoDiv");

  // summernote = text rich editor (3rd party)
  let summernote = document.createElement("div");
  summernote.setAttribute("id", "summernote");
  summernote.name = "summernote";

  let p1 = document.createElement("p");
  p1.textContent = langdata.languages[themeLang].strings["contentSize"];
  p1.setAttribute("class", "inline");
  let p1d = document.createElement("div");
  p1d.setAttribute("class", "inline");
  let p1dTitle = langdata.languages[themeLang].strings["contentSizeT"];
  p1d.innerHTML =
    `<svg
      xmlns="http://www.w3.org/2000/svg"
      data-toggle="tooltip"
      width="18"
      height="18"
      fill="currentColor"
      class="bi bi-question-square info"
      viewBox="0 0 16 16"
      
    ><title>` +
    p1dTitle +
    `</title>
    <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
    </svg>`;

  //add sub button
  let addButton = document.createElement("button");
  addButton.id = "addButton";
  addButton.type = "button";
  addButton.textContent = langdata.languages[themeLang].strings["newSubButton"];
  addButton.classList.add("blackButton", "w30");
  addButton.style.width = "50%";

  let pParentTag = document.createElement("p");
  pParentTag.id = "p_parent";
  pParentTag.textContent = langdata.languages[themeLang].strings["mainWindow"];

  let divColor = document.createElement("input");
  let p4 = document.createElement("p");
  p4.textContent = langdata.languages[themeLang].strings["backgroundColor"];
  p4.setAttribute("class", "inline");
  let p4d = document.createElement("div");
  p4d.setAttribute("class", "inline");
  p4d.innerHTML = `<svg
      xmlns="http://www.w3.org/2000/svg"
      data-toggle="tooltip"
      width="18"
      height="18"
      fill="currentColor"
      class="bi bi-question-square info"
      viewBox="0 0 16 16"
      id="p1dT"
    >
    <title>
    </title>
      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
    </svg>`;
  p4.dataset.key = "backgroundColor";

  let subWidth = document.createElement("input");
  subWidth.type = "number";
  subWidth.min = "0";
  subWidth.max = "100";
  subWidth.classList.add("opacity_view", "form-control", "w30");
  subWidth.name = "subbuttonWidth";
  let pWidth = document.createElement("p");
  pWidth.textContent = langdata.languages[themeLang].strings["subWidth"];
  pWidth.setAttribute("class", "inline");
  let pWidthDiv = document.createElement("div");
  pWidthDiv.setAttribute("class", "inline");
  pWidthDiv.innerHTML = `<svg
      xmlns="http://www.w3.org/2000/svg"
      data-toggle="tooltip"
      width="18"
      height="18"
      fill="currentColor"
      class="bi bi-question-square info"
      viewBox="0 0 16 16"
      id="pWidthTitle"
    >
    <title>
    </title>
      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
    </svg>`;

  divColor.classList.add("form-control", "w30");
  divColor.type = "color";
  divColor.name = "p_divColor";

  if (localStorage.getItem("darkMode") === "enabled") {
    p1.style.color = "white";
    p4.style.color = "white";
    pParentTag.style.color = "white";
    pWidth.style.color = "white";
  }

  infoDiv.append(pParentTag);
  infoDiv.append(summernote);
  infoDiv.append(br);
  p4.append(p4d);
  infoDiv.append(p4);
  infoDiv.append(divColor);
  infoDiv.append(document.createElement("br"));
  pWidth.append(pWidthDiv);
  infoDiv.append(pWidth);
  infoDiv.append(document.createElement("br"));
  infoDiv.append(subWidth);
  infoDiv.append(document.createElement("br"));
  infoDiv.append(addButton);
  infoDiv.append(document.createElement("br"));
  infoDiv.append(document.createElement("br"));
  details.append(infoDiv);
  //init summernote
  $(document).ready(function () {
    $("#summernote").summernote({
      disableDragAndDrop: true,
      fontNames: gArrayFonts,
      fontNamesIgnoreCheck: gArrayFonts,
      followingToolbar: false,
      dialogsInBody: true,
      dialogsFade: true,
      fontSizes: [
        "8",
        "9",
        "10",
        "12",
        "14",
        "16",
        "18",
        "20",
        "22",
        "24",
        "26",
        "28",
        "30",
        "32",
        "34",
        "36",
        "38",
        "40",
      ],
      maximumImageFileSize: 1000 * 1024,
      callbacks: {
        onChange: function (contents, $editable) {
          let subBtnAmount;
          let subButtonDD = document.getElementById("subButtonDD");

          if (contents.match(/id="subMenu/g) === null) {
            subBtnAmount = 0;
          } else {
            subBtnAmount = contents.match(/id="subMenu/g).length;
          }

          //check if a subbutton has been deleted, if yes modify the subObjList (list of all subbuttons)
          if (subButtonDD) {
            if (subButtonDD.length > subBtnAmount) {
              for (let x = 0; x < subButtonDD.length; x++) {
                if (contents.indexOf("subMenu" + subButtonDD[x].value) == -1) {
                  subObjList[subButtonDD[x].value].type = "DELETED";
                  subButtonDD[x].remove();
                }
              }
            }
          }
        },
        onImageUpload: (files) => {
          checkImgFilePromise(files[0]).then(() => {
            //create a store ref
            let storageRef = firebase
              .storage()
              .ref("images/" + hotelUID + "/popupImages/" + files[0].name);

            storageRef.put(files[0]).then(() => {
              getURL(storageRef.location.path_).then((fullPath) => {
                $("#summernote").summernote(
                  "insertImage",
                  fullPath,
                  files[0].name
                );
              });
            });
          });
        },
        onImageUploadError: (msg) => {
          showAlert(msg + " (1MB)");
        },
        onMediaDelete: (target) => {
          firebase.storage().refFromURL(target[0].currentSrc).delete();
        },
      },
      toolbar: [
        ["style", ["bold", "italic", "underline", "clear"]],
        ["font", ["fontname", "color"]],
        ["fontsize", ["fontsize"]],
        ["para", ["ul", "ol", "paragraph"]],
        ["height", ["height"]],
        ["insert", ["picture"]],
      ],
    });

    $("#summernote").summernote("fontName", "Arial");
    $("#summernote").summernote("fontSize", "24");

    //new popup => remove <br> tag
    if (document.getElementById("updateButtonForm").style.display === "none") {
      let removeFirstBR = document
        .getElementsByClassName("note-editable")[0]
        .innerHTML.replace("<br>", "");
      document.getElementsByClassName("note-editable")[0].innerHTML =
        removeFirstBR;
    }

    if (localStorage.getItem("darkMode") === "enabled") {
      document.getElementsByClassName("note-editing-area")[0].style.background =
        "white";
    }

    // check if background col exists and set it else set white
    if (summernoteBackCol) {
      document.getElementsByName("p_divColor")[0].value = summernoteBackCol;
      document.getElementsByClassName(
        "note-editing-area"
      )[0].style.backgroundColor = summernoteBackCol;
    } else {
      document.getElementsByName("p_divColor")[0].value = "#ffffff";
    }

    subWidth.value = "60";
    if (document.getElementsByClassName("subMenuButton").length > 0) {
      if (document.getElementsByClassName("subMenuButton")[0].style.width) {
        document.getElementsByName("subbuttonWidth")[0].value = document
          .getElementsByClassName("subMenuButton")[0]
          .style.width.slice(0, -1);
      } else {
        document.getElementsByName("subbuttonWidth")[0].value = "60";
      }
    } else {
      document.getElementsByName("subbuttonWidth")[0].value = "60";
    }
  });

  addButton.addEventListener("click", () => {
    count = subObjList.length;
    if (document.getElementById("subMenu" + count)) {
      count++;
    }
    let button = document.createElement("input");
    button.type = "button";
    button.classList.add(
      "btn",
      "btn-primary",
      "subMenuButton",
      "disablePointer",
      "redMarked"
    );
    button.style.width =
      document.getElementsByName("subbuttonWidth")[0].value + "%";
    button.id = "subMenu" + count;

    button.value = "Sub Button " + count;

    subButtonCreated(count);
    subObjList.push({ type: "", name: "sub Button" + " " + count });
    let markupStr = $("#summernote").summernote("code");
    markupStr = markupStr.concat(button.outerHTML + "<br>");
    $("#summernote").summernote("code", markupStr);
    // when adding new subbutton set select back to 0 option
    try {
      document.getElementById("typeSelectionDD").selectedIndex = 0;
    } catch (error) {
      null;
    }
  });

  buttonForm.insertBefore(details, submitButton);

  document
    .getElementsByName("subbuttonWidth")[0]
    .addEventListener("change", () => {
      let subButtons = document.getElementsByClassName("subMenuButton");
      let numToLoop = subButtons.length;
      let widthAmmount;
      if (document.getElementsByName("subbuttonWidth")[0].value > 100) {
        widthAmmount = "100";
      } else {
        widthAmmount = document.getElementsByName("subbuttonWidth")[0].value;
      }
      for (let i = 0; i < numToLoop; i++) {
        subButtons[i].style.width = widthAmmount + "%";
      }
    });

  document.getElementsByName("p_divColor")[0].addEventListener("change", () => {
    document.getElementsByClassName(
      "note-editing-area"
    )[0].style.backgroundColor =
      document.getElementsByName("p_divColor")[0].value;
    if (document.getElementsByClassName("note-editing-area")[1]) {
      document.getElementsByClassName(
        "note-editing-area"
      )[1].style.backgroundColor =
        document.getElementsByName("p_divColor")[0].value;
    }
  });

  hideButtonURL();
  setSumTooltips(themeLang);
}

function subButtonCreated(subButtonId) {
  if (document.getElementById("subButtonDD")) {
    let ddOption = document.createElement("option");
    ddOption.id = "ddOption";
    ddOption.value = subButtonId;
    if (subObjList[subButtonId] !== undefined) {
      ddOption.textContent = subObjList[subButtonId].name;
    } else {
      ddOption.textContent = "Sub Button" + " " + subButtonId;
    }
    $("#subDiv").remove();
    $(".subMenuButton").removeClass("redMarked");
    document.getElementById("subButtonDD").append(ddOption);
    document.getElementById("subButtonDD").value = subButtonId;
  } else {
    let infoDiv = document.getElementsByClassName("infoDiv")[0];
    //create or add new button to the dropdown
    let subButtonDD = document.createElement("select");
    subButtonDD.setAttribute("id", "subButtonDD");
    subButtonDD.classList.add("form-control", "w30");

    let ddOption = document.createElement("option");
    ddOption.id = "ddOption";
    ddOption.value = subButtonId;
    if (subObjList[subButtonId] !== undefined) {
      ddOption.textContent = subObjList[subButtonId].name;
    } else {
      ddOption.textContent = "Sub Button" + " " + subButtonId;
    }

    //create dropdown for type selection
    let typeSelectionDD = document.createElement("select");
    typeSelectionDD.setAttribute("id", "typeSelectionDD");
    typeSelectionDD.classList.add("form-control", "w30");

    let typeLink = document.createElement("option");
    let typePopup = document.createElement("option");
    let typeSpeeddial = document.createElement("option");

    typeLink.setAttribute("id", "typeLink");
    typePopup.setAttribute("id", "typePopup");
    typeSpeeddial.setAttribute("id", "typeSpeeddial");

    typeLink.textContent = "LINK";
    typePopup.textContent = "POPUP";
    typeSpeeddial.textContent = "SPEEDDIAL";

    let selectType = document.createElement("option");
    selectType.textContent =
      langdata.languages[themeLang].strings["selectType"];

    typeSelectionDD.append(selectType);
    typeSelectionDD.append(typeLink);
    typeSelectionDD.append(typePopup);
    typeSelectionDD.append(typeSpeeddial);

    let subDDName = document.createElement("p");
    subDDName.textContent = langdata.languages[themeLang].strings["subButList"];
    subDDName.setAttribute("class", "inline");
    let subDDNameDiv = document.createElement("div");
    subDDNameDiv.setAttribute("class", "inline");
    subDDNameDiv.innerHTML = `<svg
      xmlns="http://www.w3.org/2000/svg"
      data-toggle="tooltip"
      width="18"
      height="18"
      fill="currentColor"
      class="bi bi-question-square info"
      viewBox="0 0 16 16"
      id="subButListT"
    >
    <title>
      </title>
      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
    </svg>`;

    let subDDType = document.createElement("p");
    subDDType.textContent = langdata.languages[themeLang].strings["subButType"];
    subDDType.setAttribute("class", "inline");
    subDDType.id = "subButTypeText";
    let subDDTypeDiv = document.createElement("div");
    subDDTypeDiv.setAttribute("class", "inline");
    subDDTypeDiv.innerHTML = `<svg
      xmlns="http://www.w3.org/2000/svg"
      data-toggle="tooltip"
      width="18"
      height="18"
      fill="currentColor"
      class="bi bi-question-square info"
      viewBox="0 0 16 16"
      id="subButTypeT"
    >
    <title>
      </title>
      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
    </svg>`;

    //delete subbuton
    let deleteSubButton = document.createElement("input");
    deleteSubButton.type = "button";
    deleteSubButton.value = langdata.languages[themeLang].strings["deleteSub"];
    deleteSubButton.classList.add("blackButton", "w30");
    deleteSubButton.style.width = "50%";
    deleteSubButton.addEventListener("click", () => {
      deleteSubButtonFunc(subButtonDD.value);
    });

    if (localStorage.getItem("darkMode") === "enabled") {
      subDDName.style.color = "white";
      subDDType.style.color = "white";
    }

    subButtonDD.append(ddOption);
    infoDiv.append(subDDName);
    infoDiv.append(subDDNameDiv);
    infoDiv.append(document.createElement("br"));
    infoDiv.append(subButtonDD);
    infoDiv.append(document.createElement("br"));
    infoDiv.append(subDDType);
    infoDiv.append(subDDTypeDiv);
    infoDiv.append(document.createElement("br"));
    infoDiv.append(typeSelectionDD);
    infoDiv.append(document.createElement("br"));
    infoDiv.append(deleteSubButton);

    typeSelectionDD.addEventListener("change", (e) => {
      const subButtonID = document.getElementById("subButtonDD").value;
      if (e.target.value == "LINK") {
        createSubBtnLINK(subButtonID);
      } else if (e.target.value == "POPUP") {
        createSubMenuEditor(subButtonID);
      } else if (e.target.value == "SPEEDDIAL") {
        createSubBtnDial(subButtonID);
      }
    });

    subButtonDD.addEventListener("change", (e) => {
      let buttonID = e.target.value;
      $(".subMenuButton").removeClass("redMarked");
      let selectedBtn = document.getElementById("subMenu" + buttonID);
      selectedBtn.classList.add("redMarked");
      if (document.getElementById("subDiv")) {
        document.getElementById("subDiv").remove();
      }
      let typeSelectionDD2 = document.getElementById("typeSelectionDD");
      typeSelectionDD2.style.display = "block";
      document.getElementById("subButTypeText").style.display = "inline";
      document.getElementById("subButTypeT").style.display = "inline";

      typeSelectionDD2[0].selected = true;
      //already configured
      if (subObjList[buttonID] !== undefined) {
        for (let x = 0; x < typeSelectionDD2.length; x++) {
          if (
            0 <=
            typeSelectionDD2[x].textContent.indexOf(subObjList[buttonID].type)
          ) {
            typeSelectionDD2[x].selected = true;
            if (subObjList[buttonID].type == "LINK") {
              createSubBtnLINK(buttonID);
            } else if (subObjList[buttonID].type == "POPUP") {
              createSubMenuEditor(buttonID);
            } else if (subObjList[buttonID].type == "SPEEDDIAL") {
              createSubBtnDial(buttonID);
            } else {
              typeSelectionDD2[0].selected = true;
            }
          }
        }
      }
    });
  }

  setNewSubTtips(themeLang);
}

function createSubBtnLINK(subButtonId) {
  if (document.getElementById("subDiv")) {
    document.getElementById("subDiv").remove();
  }

  let infoDiv = document.getElementsByClassName("infoDiv")[0];

  let subDiv = document.createElement("div");
  subDiv.id = "subDiv";

  let p = document.createElement("span");
  p.id = "pSub" + subButtonId;

  // set text colour for dark mode
  let colour;
  if (localStorage.getItem("darkMode") === "enabled") {
    colour = "white";
  } else {
    colour = "black";
  }

  // window dropdown
  let dropdownDiv = document.createElement("div");
  let dropdownText = document.createElement("p");
  dropdownText.style.marginBottom = "0";
  dropdownText.textContent = langdata.languages[themeLang].strings["openLink"];
  let selectWindow = document.createElement("select");
  selectWindow.name = "p_window" + subButtonId;
  selectWindow.classList.add("form-control", "w30", "inline", "w30");

  let sameWindow = document.createElement("option");
  sameWindow.text = langdata.languages[themeLang].strings["sameWindow"];
  sameWindow.value = "1";
  let newTab = document.createElement("option");
  newTab.text = langdata.languages[themeLang].strings["newTab"];
  newTab.value = "2";
  selectWindow.appendChild(sameWindow);
  selectWindow.appendChild(newTab);
  let p3 = document.createElement("p");
  p3.setAttribute("class", "inline");
  let p3d = document.createElement("div");
  p3d.setAttribute("class", "inline");
  p3d.innerHTML = `<svg
      xmlns="http://www.w3.org/2000/svg"
      data-toggle="tooltip"
      width="18"
      height="18"
      fill="currentColor"
      class="bi bi-question-square info"
      viewBox="0 0 16 16"
      id="p3dTitle"
       ><title></title>
      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
    </svg>`;

  // pdf upload button
  let upPdf = document.createElement("p");
  upPdf.textContent = langdata.languages[themeLang].strings["uploadPDF"];
  upPdf.setAttribute("class", "inline");
  let pdfButtonDiv = document.createElement("div");
  let p5d = document.createElement("div");
  p5d.setAttribute("class", "inline");
  p5d.innerHTML = `<svg
      xmlns="http://www.w3.org/2000/svg"
      data-toggle="tooltip"
      width="18"
      height="18"
      fill="currentColor"
      class="bi bi-question-square info"
      viewBox="0 0 16 16"
      id="p5dTitle"
       ><title></title>
      <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
    </svg>`;

  pdfButtonDiv.innerHTML =
    '<button type="button" id="pdfUpload3" class="blackButton w30" style="width: 50%"></button>';
  //

  p.textContent = langdata.languages[themeLang].strings["destinationWebUrl"];
  if (localStorage.getItem("darkMode") === "enabled") {
    upPdf.style.color = "white";
    p.style.color = "white";
    dropdownText.style.color = "white";
  }

  let linkInput = document.createElement("input");
  linkInput.id = "linkInput";
  linkInput.type = "text";
  linkInput.placeholder = "www.tigertms.com";
  linkInput.classList.add("form-control", "w30");

  p3.append(p3d);
  dropdownText.append(p3);
  dropdownDiv.append(dropdownText);
  dropdownDiv.append(selectWindow);
  dropdownDiv.id = "p_openLinkH" + subButtonId;
  dropdownDiv.append(document.createElement("br"));
  infoDiv.append(subDiv);

  let bgColor = document.getElementById("subMenu" + subButtonId).style
    .backgroundColor;
  let fontCol = document.getElementById("subMenu" + subButtonId).style.color;

  let popupLinkDiv = document.createElement("div");
  popupLinkDiv.innerHTML = `<div id="popupLinkDiv">
            <div class="inline" data-key="linkType" style="color:${colour}">
                Link Type</div><svg xmlns="http://www.w3.org/2000/svg" data-toggle="tooltip" width="18" height="18"
                fill="currentColor" class="bi bi-question-square info" viewBox="0 0 16 16" id="linkTtips">
                <path
                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                <path
                    d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
            </svg>
            <br>
            <input type="radio" id="urlRadioUP${subButtonId}" name="linkTypeUP${subButtonId}" value="webUrl" checked>
            <label for="urlRadioUP${subButtonId}" data-key="webUrl" style="color:${colour}">Website URL</label>
            <svg xmlns="http://www.w3.org/2000/svg" data-toggle="tooltip" width="18" height="18" fill="currentColor"
                class="bi bi-question-square info" viewBox="0 0 16 16" id="webUrlDestTips">
                <path
                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                <path
                    d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
            </svg><br>
            <input type="radio" id="emailRadioUP${subButtonId}" name="linkTypeUP${subButtonId}" value="emailAdd">
            <label for="emailRadioUP${subButtonId}" data-key="emailAdd" style="color:${colour}">Email Address</label>
            <svg xmlns="http://www.w3.org/2000/svg" data-toggle="tooltip" width="18" height="18" fill="currentColor"
                class="bi bi-question-square info" viewBox="0 0 16 16" id="emailAddDestTips">
                <path
                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                <path
                    d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
            </svg><br>
            <input type="radio" id="telRadioUP${subButtonId}" name="linkTypeUP${subButtonId}" value="telephone">
            <label for="telRadioUP${subButtonId}" data-key="telephone" style="color:${colour}">Telephone Number</label>
            <svg xmlns="http://www.w3.org/2000/svg" data-toggle="tooltip" width="18" height="18" fill="currentColor"
                class="bi bi-question-square info" viewBox="0 0 16 16" id="telephoneDestTips">
                <path
                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                <path
                    d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
            </svg>
            <br></br>`;

  renderSubBtnModifier(subButtonId, bgColor, fontCol);
  subDiv.append(popupLinkDiv);
  subDiv.append(p);
  subDiv.append(linkInput);
  subDiv.append(document.createElement("br"));
  subDiv.append(dropdownDiv);
  subDiv.append(document.createElement("br"));
  subDiv.append(upPdf);
  subDiv.append(p5d);
  subDiv.append(document.createElement("br"));
  subDiv.append(pdfButtonDiv);
  subDiv.append(document.createElement("br"));

  document.getElementById("pdfUpload3").textContent =
    langdata.languages[themeLang].strings["pdf"];

  document.getElementById("pdfUpload3").addEventListener("click", () => {
    const formButton = document.getElementById("buttonForm");
    const updateButtonForm = document.getElementById("updateButtonForm");

    if (formButton.style.display === "block") {
      $("#uploadPdfModal").modal("show");
      showPDFUploadDivHelper("new", subButtonId);
    } else if (updateButtonForm.style.display === "block") {
      $("#uploadPdfModal").modal("show");
      showPDFUploadDivHelper("edit", subButtonId);
    } else {
      showAlert(langdata.languages[themeLang].strings["uploadPdfCheckName"]);
    }
  });

  let subButtonName = document.getElementsByClassName("subButtonName")[0];

  subObjList[subButtonId].type = "LINK";
  if (
    subObjList[subButtonId].name === "" ||
    subObjList[subButtonId].name === undefined
  ) {
    subObjList[subButtonId].name = "sub Button" + " " + subButtonId;
    subButtonName.value = "sub Button" + " " + subButtonId;
  } else {
    subButtonName.value = subObjList[subButtonId].name;
  }

  if (
    subObjList[subButtonId].link === "" ||
    subObjList[subButtonId].link === undefined
  ) {
    subObjList[subButtonId].link = "";
  } else {
    linkInput.value = subObjList[subButtonId].link;
    if (subObjList[subButtonId].link.slice(-1) === "1") {
      selectWindow.value = "1";
      linkInput.value = subObjList[subButtonId].link.slice(0, -3);
    } else if (subObjList[subButtonId].link.slice(-1) === "2") {
      selectWindow.value = "2";
      linkInput.value = subObjList[subButtonId].link.slice(0, -3);
    }
  }

  let emailRadio = document.getElementById("emailRadioUP" + subButtonId);
  let telRadio = document.getElementById("telRadioUP" + subButtonId);
  let urlRadio = document.getElementById("urlRadioUP" + subButtonId);
  // set radio buttons and remove prefix
  let tel = linkInput.value.match(/tel:/g);
  let mailto = linkInput.value.match(/mailto:/g);
  if (tel) {
    telRadio.checked = true;
    linkInput.value = linkInput.value.slice(4);
    setDestinationText("telephone", "popup", subButtonId);
  } else if (mailto) {
    emailRadio.checked = true;
    linkInput.value = linkInput.value.slice(7);
    setDestinationText("emailAdd", "popup", subButtonId);
  } else {
    urlRadio.checked = true;
    setDestinationText("webUrl", "popup", subButtonId);
  }

  document
    .getElementsByName("p_window" + subButtonId)[0]
    .addEventListener("change", () => {
      let prefix;
      if (emailRadio.checked) {
        prefix = "mailto:";
      } else if (telRadio.checked) {
        prefix = "tel:";
      } else {
        prefix = "";
      }
      let currentSubBtn = document.getElementById("subMenu" + subButtonId);
      let linkInputWithTab = `${prefix + linkInput.value}, ${
        selectWindow.value
      }`;
      currentSubBtn.setAttribute(
        "onClick",
        "myhref('" +
          prefix +
          linkInput.value +
          " , " +
          selectWindow.value +
          "')"
      );
      subObjList[subButtonId].link = linkInputWithTab;
      subObjList[subButtonId].type = "LINK";
    });

  linkInput.addEventListener("change", () => {
    let prefix;
    if (emailRadio.checked) {
      prefix = "mailto:";
    } else if (telRadio.checked) {
      prefix = "tel:";
    } else {
      prefix = "";
    }
    let currentSubBtn = document.getElementById("subMenu" + subButtonId);
    let linkInputWithTab = `${prefix + linkInput.value}, ${selectWindow.value}`;
    currentSubBtn.setAttribute(
      "onClick",
      "myhref('" + prefix + linkInput.value + " , " + selectWindow.value + "')"
    );
    subObjList[subButtonId].link = linkInputWithTab;
    subObjList[subButtonId].type = "LINK";
  });

  let radioLinkBtnsUP = document.getElementsByName("linkTypeUP" + subButtonId);
  for (let i = 0; i < radioLinkBtnsUP.length; i++) {
    radioLinkBtnsUP[i].addEventListener("change", () => {
      setDestinationText(radioLinkBtnsUP[i].value, "popup", subButtonId);
      let prefix;
      if (emailRadio.checked) {
        prefix = "mailto:";
      } else if (telRadio.checked) {
        prefix = "tel:";
      } else {
        prefix = "";
      }
      let currentSubBtn = document.getElementById("subMenu" + subButtonId);
      let linkInputWithTab = `${prefix + linkInput.value}, ${
        selectWindow.value
      }`;
      currentSubBtn.setAttribute(
        "onClick",
        "myhref('" +
          prefix +
          linkInput.value +
          " , " +
          selectWindow.value +
          "')"
      );
      subObjList[subButtonId].link = linkInputWithTab;
      subObjList[subButtonId].type = "LINK";
    });
  }
  setLinkSubTtips(themeLang);
}

function createSubMenuEditor(editorID) {
  if (document.getElementById("subDiv")) {
    document.getElementById("subDiv").remove();
  }

  let subDiv = document.createElement("div");
  infoDiv = document.getElementsByClassName("infoDiv")[0];

  subDiv.id = "subDiv";

  let p1 = document.createElement("p");
  if (localStorage.getItem("darkMode") === "enabled") {
    p1.style.color = "white";
  }
  p1.textContent = langdata.languages[themeLang].strings["contentSize"];
  p1.setAttribute("class", "inline");
  let p1d = document.createElement("div");
  p1d.setAttribute("class", "inline");
  let p1dTitle = langdata.languages[themeLang].strings["contentSizeT"];
  p1d.innerHTML =
    `<svg
      xmlns="http://www.w3.org/2000/svg"
      data-toggle="tooltip"
      width="18"
      height="18"
      fill="currentColor"
      class="bi bi-question-square info"
      viewBox="0 0 16 16"
    ><title>` +
    p1dTitle +
    `</title>
    <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
    </svg>`;
  //

  let p = document.createElement("p");
  p.id = "p_parent";
  p.textContent = langdata.languages[themeLang].strings["subWindow"];
  if (localStorage.getItem("darkMode") === "enabled") {
    p.style.color = "white";
  }
  infoDiv.append(subDiv);

  let bgColor = document.getElementById("subMenu" + editorID).style
    .backgroundColor;
  let fontCol = document.getElementById("subMenu" + editorID).style.color;

  renderSubBtnModifier(editorID, bgColor, fontCol);

  //sub editor
  let summernote2 = document.createElement("div");
  summernote2.setAttribute("id", "summernote" + editorID + "");
  summernote2.classList.add("subSummernode");
  summernote2.name = "summernote" + editorID + "";
  subDiv.append(document.createElement("br"));
  subDiv.append(p);
  subDiv.append(summernote2);

  $("#summernote" + editorID).summernote({
    disableDragAndDrop: true,
    fontNames: gArrayFonts,
    fontNamesIgnoreCheck: gArrayFonts,
    followingToolbar: false,
    dialogsInBody: true,
    fontNames: gArrayFonts,
    fontNamesIgnoreCheck: gArrayFonts,
    followingToolbar: false,
    dialogsInBody: true,
    dialogsFade: true,
    fontSizes: [
      "8",
      "9",
      "10",
      "12",
      "14",
      "16",
      "18",
      "20",
      "22",
      "24",
      "26",
      "28",
      "30",
      "32",
      "34",
      "36",
      "38",
      "40",
    ],
    callbacks: {
      onImageUpload: (files) => {
        checkImgFilePromise(files[0])
          .then(() => {
            //create a store ref
            let storageRef = firebase
              .storage()
              .ref("images/" + hotelUID + "/popupImages/" + files[0].name);

            storageRef.put(files[0]).then(() => {
              getURL(storageRef.location.path_).then((fullPath) => {
                $("#summernote" + editorID).summernote(
                  "insertImage",
                  fullPath,
                  files[0].name
                );
              });
            });
          })
          .catch((e) => console.log(e));
      },
      onImageUploadError: (msg) => {
        showAlert(msg + " (1MB)");
      },
      onMediaDelete: (target) => {
        firebase.storage().refFromURL(target[0].currentSrc).delete();
      },
    },
    toolbar: [
      ["style", ["bold", "italic", "underline", "clear"]],
      ["font", ["fontname", "color"]],
      ["fontsize", ["fontsize"]],
      ["para", ["ul", "ol", "paragraph"]],
      ["height", ["height"]],
      ["insert", ["picture"]],
    ],
  });

  $("#summernote" + editorID).summernote("fontName", "Arial");
  $("#summernote" + editorID).summernote("fontSize", "24");

  let subButtonName = document.getElementsByClassName("subButtonName")[0];

  subObjList[editorID].type = "POPUP";
  if (
    subObjList[editorID].name === "" ||
    subObjList[editorID].name === undefined
  ) {
    subObjList[editorID].name = "sub Button" + " " + editorID;
    subButtonName.value = "sub Button" + " " + editorID;
  } else {
    subButtonName.value = subObjList[editorID].name;
  }

  if (subObjList[editorID].content === "") {
    subObjList[editorID].content = "";
  } else {
    $("#summernote" + editorID).summernote(
      "code",
      subObjList[editorID].content
    );
  }

  // summernote.change
  $("#summernote" + editorID).on(
    "summernote.change",
    function (we, contents, $editable) {
      subObjList[editorID].content = contents;
      subObjList[editorID].type = "POPUP";
      subObjList[editorID].name =
        document.getElementsByClassName("subButtonName")[0].value;
      let currentSubBtn = document.getElementById("subMenu" + editorID);
      currentSubBtn.setAttribute("onClick", "openSubMenu('" + editorID + "')");
    }
  );

  $(document).ready(function () {
    if (localStorage.getItem("darkMode") === "enabled") {
      document.getElementsByClassName("note-editing-area")[1].style.background =
        "white";
    }
  });

  $(document).ready(function () {
    document.getElementsByClassName(
      "note-editing-area"
    )[1].style.backgroundColor =
      document.getElementsByName("p_divColor")[0].value;
  });
}

function createSubBtnDial(subButtonId) {
  if (document.getElementById("subDiv")) {
    document.getElementById("subDiv").remove();
  }

  let subDiv = document.createElement("div");
  infoDiv = document.querySelector(".infoDiv");

  let extension = document.createElement("input");
  extension.id = "extension";
  extension.type = "text";
  extension.classList.add("form-control", "w30");

  let p = document.createElement("p");
  p.id = "pExtension";
  p.textContent = langdata.languages[themeLang].strings["extensionNum"];
  if (localStorage.getItem("darkMode") === "enabled") {
    p.style.color = "white";
  }

  subDiv.id = "subDiv";
  infoDiv.append(subDiv);

  let bgColor = document.getElementById("subMenu" + subButtonId).style
    .backgroundColor;
  let fontCol = document.getElementById("subMenu" + subButtonId).style.color;

  renderSubBtnModifier(subButtonId, bgColor, fontCol);

  subDiv.append(p);
  subDiv.append(extension);

  let subButtonName = document.getElementsByClassName("subButtonName")[0];

  subObjList[subButtonId].type = "SPEEDDIAL";
  if (
    subObjList[subButtonId].name === "" ||
    subObjList[subButtonId].name === undefined
  ) {
    subObjList[subButtonId].name = "sub Button" + " " + subButtonId;
    subButtonName.value = "sub Button" + " " + subButtonId;
  } else {
    subButtonName.value = subObjList[subButtonId].name;
  }

  if (
    subObjList[subButtonId].extension === "" ||
    subObjList[subButtonId].extension === undefined
  ) {
    subObjList[subButtonId].extension = "";
  } else {
    extension.value = subObjList[subButtonId].extension;
  }

  extension.addEventListener("change", () => {
    let currentSubBtn = document.getElementById("subMenu" + subButtonId);
    currentSubBtn.setAttribute(
      "onClick",
      "callFromPopup('" + extension.value + "')"
    );
    subObjList[subButtonId].extension = extension.value;
  });
}

function renderSubBtnModifier(buttonID, bgColor, fontCol) {
  let subDiv = document.getElementById("subDiv");
  let innnerDiv = document.createElement("div");
  innnerDiv.id = "subConfig";
  let subProps = document.createElement("p");
  subProps.id = "subPropsText";
  //input field for button name
  let subMenueButtonName = document.createElement("input");
  subMenueButtonName.type = "text";
  subMenueButtonName.classList.add("form-control", "subButtonName", "w30");
  subMenueButtonName.placeholder =
    langdata.languages[themeLang].strings["buttonName"];
  subMenueButtonName.addEventListener("change", () => {
    document.getElementById("subMenu" + buttonID).value =
      subMenueButtonName.value;
    subObjList[buttonID].name = subMenueButtonName.value;
    $("#subButtonDD option:selected")[0].textContent = subMenueButtonName.value;
    subProps.textContent =
      document.getElementById("subMenu" + buttonID).value +
      " " +
      langdata.languages[themeLang].strings["subProps"];
  });

  subProps.textContent =
    document.getElementById("subMenu" + buttonID).value +
    " " +
    langdata.languages[themeLang].strings["subProps"];

  // button bg color
  let subMenuButtonColor = document.createElement("input");
  subMenuButtonColor.type = "color";
  subMenuButtonColor.name = "subMenuButtonColor";

  subMenuButtonColor.classList.add("form-control", "subButtonName", "w30");
  subMenuButtonColor.addEventListener("change", () => {
    document.getElementById("subMenu" + buttonID).style.backgroundColor =
      subMenuButtonColor.value;
    document.getElementById("subMenu" + buttonID).style.border = "0px";
  });

  // font color
  let textCol = document.getElementById("subMenu" + buttonID).style.color;
  let subMenuButtonTextColor = document.createElement("input");
  subMenuButtonTextColor.type = "color";
  subMenuButtonTextColor.name = "subMenuButtonTextColor";
  if (textCol) {
    subMenuButtonTextColor.value = textCol;
  } else {
    subMenuButtonTextColor.value = "#ffffff";
  }
  subMenuButtonTextColor.classList.add("form-control", "subButtonName", "w30");
  subMenuButtonTextColor.addEventListener("change", () => {
    document.getElementById("subMenu" + buttonID).style.color =
      subMenuButtonTextColor.value;
    document.getElementById("subMenu" + buttonID).style.border = "0px";
  });

  let buttonNameInput = document.createElement("span");
  buttonNameInput.textContent =
    langdata.languages[themeLang].strings["popButtonName"];
  let buttonBgInput = document.createElement("span");
  buttonBgInput.textContent =
    langdata.languages[themeLang].strings["buttonBgColor"];
  let buttonColInput = document.createElement("span");
  buttonColInput.textContent =
    langdata.languages[themeLang].strings["btnFontCol"];

  let styledHr = document.createElement("hr");

  if (localStorage.getItem("darkMode") === "enabled") {
    buttonNameInput.style.color = "white";
    buttonBgInput.style.color = "white";
    buttonColInput.style.color = "white";
    subProps.style.color = "white";
    styledHr.style.backgroundColor = "white";
  }

  subDiv.append(innnerDiv);
  innnerDiv.append(styledHr);
  innnerDiv.append(document.createElement("br"));
  innnerDiv.append(subProps);
  innnerDiv.append(document.createElement("br"));
  innnerDiv.append(buttonNameInput);
  innnerDiv.append(subMenueButtonName);
  innnerDiv.append(document.createElement("br"));
  innnerDiv.append(buttonBgInput);
  innnerDiv.append(subMenuButtonColor);
  innnerDiv.append(document.createElement("br"));
  innnerDiv.append(buttonColInput);
  innnerDiv.append(subMenuButtonTextColor);
  innnerDiv.append(document.createElement("br"));

  // check if button and font color exist, convert to hex and apply to inputs
  if (bgColor) {
    const bgColorToHex = RGBToHex(bgColor);
    document.getElementsByName("subMenuButtonColor")[0].value = bgColorToHex;
  } else {
    document.getElementsByName("subMenuButtonColor")[0].value = "#007bff";
  }
  if (fontCol) {
    const fontColToHex = RGBToHex(fontCol);
    document.getElementsByName("subMenuButtonTextColor")[0].value =
      fontColToHex;
  } else {
    document.getElementsByName("subMenuButtonTextColor")[0].value = "#ffffff";
  }
}

function deleteSubButtonFunc(buttonID) {
  document.getElementById("subMenu" + buttonID).remove();
  document.getElementById("typeSelectionDD").value =
    langdata.languages[themeLang].strings["selectType"];
  let subButtonDD = document.getElementById("subButtonDD");
  for (let x = 0; x < subButtonDD.options.length; x++) {
    if (subButtonDD.options[x].value == buttonID) {
      subButtonDD.options[x].remove();
    }
  }
  if (document.getElementById("subDiv")) {
    document.getElementById("subDiv").remove();
  }
  subObjList[buttonID].type = "DELETED";
}

//delete info/pop up div
function deleteInfo() {
  document.getElementsByClassName("infoDiv")[0].remove();
}

function RGBToHex(rgb) {
  // Choose correct separator
  let sep = rgb.indexOf(",") > -1 ? "," : " ";
  // Turn "rgb(r,g,b)" into [r,g,b]
  rgb = rgb.substr(4).split(")")[0].split(sep);

  let r = (+rgb[0]).toString(16),
    g = (+rgb[1]).toString(16),
    b = (+rgb[2]).toString(16);

  if (r.length == 1) r = "0" + r;
  if (g.length == 1) g = "0" + g;
  if (b.length == 1) b = "0" + b;

  return "#" + r + g + b;
}

/** -------------------------------- BUTTON TYPES (SHOW)-------------------------------------- */
function showLink() {
  hideNotify();
  hideMap();
  hideSpeed();
  hidePopup();
  document.getElementsByClassName("forText")[0].textContent =
    langdata.languages[themeLang].strings["link"];

  let buttonForm = document.getElementById("buttonForm");
  let buttonType = document.getElementsByName("b_type")[0];
  let b_url_div = document.getElementById("b_url_div");

  buttonForm.style.display = "block";
  buttonType.value = "LINK";

  if (document.getElementsByClassName("infoDiv")[0]) {
    deleteInfo(); //if there is info box from previous, then delete it
  }

  //show URL field
  if (b_url_div.style.display === "none") {
    b_url_div.style.display = "block";
  }
}
function showPopup(hotelUID) {
  hideNotify();
  hideMap();
  hideSpeed();
  hidePopup();
  hideFeedback();

  document.getElementsByClassName("forText")[0].textContent =
    langdata.languages[themeLang].strings["popup"];
  let buttonForm = document.getElementById("buttonForm");
  let buttonType = document.getElementsByName("b_type")[0];
  let popDiv = document.getElementById("popupDetails");
  let addButton = document.getElementById("addButtonSubmit");

  buttonForm.style.display = "block";
  buttonType.value = "POPUP";

  popDiv.style.display = "block";
  buttonForm.insertBefore(popDiv, addButton);
  showInfo(hotelUID);
}
function showNotify() {
  showLink();
  hideButtonURL();
  hideMap();
  hideSpeed();
  hidePopup();
  hideFeedback();

  document.getElementsByClassName("forText")[0].textContent =
    langdata.languages[themeLang].strings["iPortalMessaging"];
  document.getElementsByName("b_type")[0].value = "Messaging";
  document.getElementById("iNotifyDetails").style.display = "block";
  let b_url_div = document.getElementById("b_url_div");
  // let hiddenIconField = document.getElementsByName("b_icon")[0];
  // let iconPreview = document.getElementById("iconPreview");
  let addButton = document.getElementById("addButtonSubmit");
  let buttonForm = document.getElementById("buttonForm");
  let iNotify = document.getElementById("iNotifyDetails");
  let phoneInput = document.getElementById("iNotifyNumber");

  b_url_div.style.display = "none";

  // hiddenIconField.value =
  //   '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 160.64 144.37"><defs><style>.cls-1{fill:#ff5722;}.cls-2{fill:#ffb700;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M31.74,65.22a68.29,68.29,0,0,1,9.32-34.37A58.14,58.14,0,0,0,0,86.33v52.76a5.29,5.29,0,0,0,5.29,5.28h52.9A57.74,57.74,0,0,0,92.3,133.26,68.61,68.61,0,0,1,31.74,65.22Z"></path><path class="cls-2" d="M99.13,0A60.26,60.26,0,0,0,50.36,25.1l-.43.55a65.23,65.23,0,0,0-12.3,38.48c0,35.43,27.53,64.13,61.5,64.13h55.92a5.72,5.72,0,0,0,5.59-5.83V64.13C160.64,28.71,133.11,0,99.13,0Z"></path></g></g></svg>';
  // iconPreview.innerHTML =
  //   '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 160.64 144.37"><defs><style>.cls-1{fill:#ff5722;}.cls-2{fill:#ffb700;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M31.74,65.22a68.29,68.29,0,0,1,9.32-34.37A58.14,58.14,0,0,0,0,86.33v52.76a5.29,5.29,0,0,0,5.29,5.28h52.9A57.74,57.74,0,0,0,92.3,133.26,68.61,68.61,0,0,1,31.74,65.22Z"></path><path class="cls-2" d="M99.13,0A60.26,60.26,0,0,0,50.36,25.1l-.43.55a65.23,65.23,0,0,0-12.3,38.48c0,35.43,27.53,64.13,61.5,64.13h55.92a5.72,5.72,0,0,0,5.59-5.83V64.13C160.64,28.71,133.11,0,99.13,0Z"></path></g></g></svg>';

  // phoneInput.placeholder = "123456789";

  document.getElementById("iNotify").style.display = "block";
  // document.getElementById("messagingName").textContent = "whatsApp";
  // document.getElementById("iNotifyNumber").value = "+44 7932 079699";
  // document.getElementsByName("msgType")[0].textContent = "whatsApp";

  iNotify.style.display = "block";
  buttonForm.insertBefore(iNotify, addButton);

  //add phone number into hidden b_url field with whats URL
  phoneInput.addEventListener("change", (e) => {
    let b_url = document.getElementsByName("b_url")[0];
    b_url.value = "https://wa.me/" + phoneInput.value;
    //  + "?text=subscribe";
  });
}

let trial;
let helperMarkers;

function showDial() {
  hideButtonURL();
  hideMap();
  hideNotify();
  hidePopup();
  hideFeedback();

  document.getElementsByName("b_type")[0].value = "SPEEDDIAL";
  document.getElementsByClassName("forText")[0].textContent =
    langdata.languages[themeLang].strings["speedDial"];

  if (!trial || trial === "false") {
    hideSpeed();
    document.getElementById("hideSpeed").style.display = "none";
    document.getElementById("hideUpSpeed").style.display = "none";
    buttonForm.style.display = "none";
    // addButton.style.display = "none";
    let overlay = document.createElement("div");
    overlay.classList.add("overlay");
    let end = document.createElement("div");
    end.classList.add("endDiv");
    end.textContent = langdata.languages[themeLang].strings["disabledDial"];
    overlay.setAttribute(
      "onclick",
      'document.getElementsByClassName("overlay")[0].remove()'
    );
    overlay.append(end);
    dadDiv.append(overlay);
  } else {
    let buttonForm = document.getElementById("buttonForm");
    let addButton = document.getElementById("addButtonSubmit");

    document.getElementById("hideSpeed").style.display = "block";
    document.getElementById("hideUpSpeed").style.display = "block";
    buttonForm.style.display = "block";
    addButton.style.display = "block";
  }
}
function showMap() {
  showLink();
  hideButtonURL();
  hideNotify();
  hideSpeed();
  hideFeedback();

  document.getElementsByClassName("forText")[0].textContent =
    langdata.languages[themeLang].strings["map"];
  document.getElementsByName("b_type")[0].value = "MAP";
  let mapDetails = document.getElementById("mapDetails");

  let addButton = document.getElementById("addButtonSubmit");
  // let mapDiv = document.createElement("div");
  let searchInput = document.createElement("input");
  let lat = document.createElement("input");
  let lng = document.createElement("input");
  let buttonForm = document.getElementById("buttonForm");

  // mapDiv.setAttribute("id", "map");
  searchInput.setAttribute("id", "searchInput");
  searchInput.type = "text";
  searchInput.classList.add("controls");
  lat.type = "hidden";
  lng.type = "hidden";
  lat.name = "lat";
  lng.name = "lng";
  lat.setAttribute("id", "lat");
  lng.setAttribute("id", "lng");

  mapDetails.append(searchInput);
  mapDetails.append(document.createElement("br"));

  mapDetails.append(lat);
  mapDetails.append(lng);

  buttonForm.insertBefore(mapDetails, addButton);

  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 50.83972, lng: -1.78072 },
    zoom: 13,
    mapTypeId: "satellite",
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(searchInput);

  //searchInput add to DOM before execute
  setTimeout(() => {
    const input = document.getElementById("searchInput");
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);

    const autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo("bounds", map);
    // Set the data fields to return when the user selects a place.
    autocomplete.setFields(["address_components", "geometry", "icon", "name"]);

    const infowindow = new google.maps.InfoWindow();
    const marker = new google.maps.Marker({
      map,
      anchorPoint: new google.maps.Point(0, -29),
    });

    autocomplete.addListener("place_changed", function () {
      infowindow.close();
      marker.setVisible(false);
      let place = autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry!");
        return;
      }

      //If place has a geometry, then present it on a map
      if (place.geometry.viewpoint) {
        map.fitBounds(place.geometry.viewpoint);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
      }

      marker.setIcon({
        url: place.icon,
        size: new google.maps.Size(30, 30),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
      });
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);

      let address = "";
      if (place.address_components) {
        address = [
          (place.address_components[0] &&
            place.address_components[0].short_name) ||
            "",
          (place.address_components[1] &&
            place.address_components[1].short_name) ||
            "",
          (place.address_components[2] &&
            place.address_components[2].short_name) ||
            "",
        ].join(" ");
      }

      infowindow.setContent(
        "<div style='color: black;'><strong>" +
          place.name +
          "</strong></div>" +
          "<div style='color: black;'><strong>" +
          address +
          "</strong></div>"
      );
      infowindow.open(map, marker);

      //Location details
      for (let i = 0; i < place.address_components.length; i++) {
        lat.value = place.geometry.location.lat();
        lng.value = place.geometry.location.lng();
      }
    });
  }, 1400);
  mapDetails.style.display = "block";
}
function showFeedback() {
  hideButtonURL();
  hideMap();
  hideNotify();
  hidePopup();
  hideSpeed();

  document.getElementsByName("b_type")[0].value = "FEEDBACK";
  document.getElementsByClassName("forText")[0].textContent =
    langdata.languages[themeLang].strings["customerFeedback"];

  let buttonForm = document.getElementById("buttonForm");
  let feedbackDiv = document.getElementById("feedbackDetails");
  let addButton = document.getElementById("addButtonSubmit");

  buttonForm.style.display = "block";
  feedbackDiv.style.display = "block";

  buttonForm.insertBefore(feedbackDiv, addButton);
}

/** OTHERs */
//set the icon to preview div
function setIcon(ele, x) {
  let iconPreviewDiv;
  let iconInput;
  let iconToEmpty;
  let iconBtnPreview;
  let iconDivHide;
  var event = new Event("change");

  //add button
  if (x === 1) {
    iconBtnPreview = document.getElementById("buttonForm");
    iconPreviewDiv = document.getElementById("iconPreview");
    iconInput = document.getElementById("iconInput");
    iconToEmpty = document.getElementById("btnPP");
    iconDivHide = document.getElementById("b_iconHide");
  }
  //Update button
  else if (x === 2) {
    iconBtnPreview = document.getElementById("updateButtonForm");
    iconPreviewDiv = document.getElementById("iconPreview2");
    iconInput = document.getElementById("iconInput2");
    iconToEmpty = document.getElementById("btnPPP");
    iconDivHide = document.getElementById("bu_iconHide");
  }
  //children undefined => when the empty icon is selected
  if (ele.children[0] == undefined) {
    iconPreviewDiv.innerHTML = "";
    iconInput.value = "";
    iconToEmpty.innerHTML = "";
    iconDivHide.style.display = "none";
  } else {
    iconPreviewDiv.innerHTML = ele.children[0].outerHTML;
    iconInput.value = ele.children[0].outerHTML;
    iconBtnPreview.dispatchEvent(event);
    iconDivHide.style.display = "block";
  }
  document.getElementById("iconSelectionD").value = "0";
  $("#iconModal").modal("hide");
}

function savePosition(hotelUID) {
  let liste = document.getElementsByClassName("change-item");
  //get the current language id
  let langOpt = getCookie("langOpt");
  let sendList = [];

  for (let x = 0; x < liste.length; x++) {
    sendList.push(liste[x].children[0].value);
  }

  document.getElementById("applyPositions").hidden = true;
  document.getElementById("applyPositionsAnim").hidden = false;

  sendHttpRequest(
    "POST",
    "https://us-central1-seteraguestcloud.cloudfunctions.net/changePosition",
    "customer=" + hotelUID + "&buttonid=" + langOpt + "&btnList=" + sendList
  ).then(() => {
    location.reload();
  });
}

//get cookie function
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

//change language cookie
function changeLanguage(x) {
  document.cookie = "langOpt=" + x;
  setTimeout(() => {
    sessionStorage.setItem("buttons", "enabled");
    location.reload();
  }, 1000);
}

//set the active language in the dropdown (just view)
function activeLanguageDD(lang) {
  let langOpt = getCookie("langOpt");
  let aLangs = document.getElementsByClassName("lang-item");
  for (let x = 0; x < aLangs.length; x++) {
    aLangs[x].classList.remove("active");
  }

  let activeLang;
  lang.forEach((lan) => {
    if (langOpt === lan.code) {
      activeLang = lan.name;
      document.getElementById("copyingAll").textContent =
        langdata.languages[themeLang].strings["copyingAll"] + " " + lan.name;
      document.getElementById("copyTo" + activeLang).style.display = "none";
    }
  });

  for (let x = 0; x < aLangs.length; x++) {
    if (aLangs[x].textContent.slice(0, -1) === activeLang) {
      aLangs[x].classList.add("active");
      document.getElementsByClassName("langDD")[0].textContent = aLangs[
        x
      ].textContent.slice(0, -1);
    }
  }
}
//delete the file from the path
function deleteFile(path) {
  // Create a reference to the file to delete
  var desertRef = firebase.storage().ref(path);

  // Delete the file
  desertRef.delete().then(function () {
    // File deleted successfully
    location.reload();
  });
  // .catch(function (error) {
  //   console.log("Error during deleting");
  // });
}

function copyURL() {
  /* Get the text field */
  var copyText = document.getElementById("pdfURLinput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /*For mobile devices*/

  /* Copy the text inside the text field */
  document.execCommand("copy");
}

function setURL(url, id) {
  if (document.getElementById("linkInput")) {
    subObjList[id].link = url + ", 1";

    document
      .getElementById("subMenu" + id)
      .setAttribute("onClick", "myhref('" + url + "', 1)");
    document.getElementById("linkInput").value =
      document.getElementById("pdfURLinput").value;
  } else {
    if (document.getElementById("buttonForm").style.display != "none") {
      document.getElementsByName("b_url")[0].value =
        document.getElementById("pdfURLinput").value;
    } else {
      document.getElementsByName("bu_url")[0].value =
        document.getElementById("pdfURLinput").value;
    }
  }
  $("#uploadPdfModal").modal("hide");
}

function removeEle(obj) {
  obj.remove();
}

function emptyLangDD() {
  let dd = document.getElementById("langDropdown");
  let len = dd.children.length;
  for (let x = 0; x < len; x++) {
    dd.children[0].remove();
  }
}

function emptyButtonDD() {
  let dd = document.getElementById("buttonDropdown");
  let len = dd.children.length;
  for (let x = 0; x < len; x++) {
    dd.children[0].remove();
  }
}

//HTTPS request
const sendHttpRequest = (method, url, data) => {
  const promise = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);

    xhr.responseType = "json";
    if (data) {
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    xhr.onload = () => {
      resolve(xhr.response);
    };
    xhr.send(data);
  });
  return promise;
};

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

document.getElementById("pbxTypeSel").addEventListener("click", () => {
  let pbx = document.getElementById("pbxTypeSel").value;

  document.getElementById("mitel").style.display = "none";
  document.getElementById("telepo").style.display = "none";
  document.getElementById("nec").style.display = "none";
  document.getElementById("webRtcSave").style.display = "none";

  if (pbx) {
    document.getElementById(pbx).style.display = "block";
    document.getElementById("webRtcSave").style.display = "block";
  }
});

const setPBX = (pbx) => {
  if (pbx > 0) {
    document.getElementById(pbx).style.display = "block";
    document.getElementById("webRtcSave").style.display = "block";
  }
};

function callTimer() {
  let sec = 0;
  let min = 0;
  callingTimer = setInterval(() => {
    document.getElementById("callTimer").innerHTML = min + ":" + sec;
    sec++;
    sec = sec < 10 ? "0" + sec : sec;
    if (sec === 60) {
      min++;
      sec = 0;
    }
  }, 1000);
}

let userToCall;

const testCaller = (rtcSet) => {
  let factory = new SwitchFactory();
  let pbx = factory.createClient(rtcSet.type, rtcSet);

  let overlay1 = document.createElement("div");
  let contenDiv1 = document.createElement("div");
  overlay1.classList.add("overlay1");
  contenDiv1.classList.add("speedDiv", "contentDiv1");

  let hangUpButton = document.createElement("div");
  let callMsg = document.createElement("div");
  let callTimerDisplay = document.createElement("div");
  let bigDiv1 = document.createElement("div");

  callMsg.id = "callMsg";

  callTimerDisplay.id = "callTimer";
  hangUpButton.innerHTML = `<svg
      style="color:red"
      svg width="1em"
      aria-hidden="true"
      focusable="false"
      data-prefix="fas"
      data-icon="phone-slash"
      class="svg-inline--fa fa-phone-slash fa-w-20"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 640 512"
    >
      <path
        fill="currentColor"
        d="M268.2 381.4l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48c-10.7 4.6-16.5 16.1-13.9 27.5l24 104c2.5 10.8 12.1 18.6 23.4 18.6 100.7 0 193.7-32.4 269.7-86.9l-80-61.8c-10.9 6.5-22.1 12.7-33.6 18.1zm365.6 76.7L475.1 335.5C537.9 256.4 576 156.9 576 48c0-11.2-7.7-20.9-18.6-23.4l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-12.2 26.1-27.9 50.3-46 72.8L45.5 3.4C38.5-2 28.5-.8 23 6.2L3.4 31.4c-5.4 7-4.2 17 2.8 22.4l588.4 454.7c7 5.4 17 4.2 22.5-2.8l19.6-25.3c5.4-6.8 4.1-16.9-2.9-22.3z"
      ></path>
    </svg>`;
  hangUpButton.onclick = function close() {
    try {
      pbx.hangup();
      clearInterval(callingTimer);
      let overlayDiv = document.getElementsByClassName("overlay1");
      overlayDiv[0].remove();
    } catch (error) {
      clearInterval(callingTimer);
      let overlayDiv = document.getElementsByClassName("overlay1");
      overlayDiv[0].remove();
    }
  };

  document.getElementById("testCallButton").addEventListener("click", () => {
    if (document.getElementById("testCallDiv").style.display === "block") {
      document.getElementById("testCallDiv").style.display = "none";
    } else {
      document.getElementById("testCallDiv").style.display = "block";
    }
  });

  document.getElementById("call").addEventListener("click", () => {
    let userTestList = document.getElementById("testCallList");

    for (let i = 0; i < userTestList.length; i++) {
      if (userTestList.options[i].value === userTestList.value) {
        userToCall = {
          password: userTestList[i].attributes.password.value,
          user: userTestList[i].attributes.username.value,
        };
      }
    }

    pbx.init();
    callMsg.innerHTML = langdata.languages[themeLang].strings["calling"];
    callTimerDisplay.innerHTML = "0:0";
    overlay1.appendChild(contenDiv1);
    document.body.append(overlay1);
    bigDiv1.append(callMsg);
    bigDiv1.append(callTimerDisplay);
    bigDiv1.append(hangUpButton);
    contenDiv1.append(bigDiv1);
    callTimer();
    setTimeout(() => {
      let testNum = document.getElementById("testNum").value;
      pbx.call(testNum);
    }, 1000);
  });
};

document.getElementById("copyToClipboard").addEventListener("click", () => {
  copyInput();
});

function copyInput() {
  /* Get the text field */
  var copyText = document.getElementById("licenceNumInput");
  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  /* Copy the text inside the text field */
  document.execCommand("copy");
  showAlert(langdata.languages[themeLang].strings["copyToClip"]);
}

// const setMsging = (type) => {
//   document.getElementById("iNotify").style.display = "block";
//   document.getElementById("messagingName").textContent = type;
//   document.getElementsByName("msgType")[0].textContent = type;
//   if (type === "whatsApp") {
//     document.getElementById("iNotifyNumber").value = "+44 7932 079699";
//   } else {
//     document.getElementById("iNotifyNumber").value = "";
//   }
// };

document.getElementById("addButtonSubmit").addEventListener("click", () => {
  localStorage.setItem("buttons", "true");
});

document.getElementById("applyPositions").addEventListener("click", () => {
  sessionStorage.setItem("buttons", "enabled");
});
const setPercent = () => {
  let count = 0;

  if (localStorage.getItem("main")) {
    count += 33;
  }
  if (localStorage.getItem("header")) {
    count += 33;
  }
  if (localStorage.getItem("buttons")) {
    count += 34;
  }

  document.getElementsByName("progressBarCheck")[0].textContent = count + "%";
  document.getElementsByName("progressBarCheck")[0].style.height = count + "%";
  document.getElementsByName("progressBarCheck")[0].style.top =
    Math.abs(count - 100) + "%";
  if (
    localStorage.getItem("main") &&
    localStorage.getItem("header") &&
    localStorage.getItem("buttons")
  ) {
    document.getElementById("progBar").style.display = "none";
  } else {
    document.getElementById("progBar").style.display = "block";
  }
};

setPercent();

// show forgot password
document.getElementById("forgotPw").addEventListener("click", () => {
  document.getElementById("resetEmail").value = "";
  document.getElementById("login").style.display = "none";
  document.getElementById("forgotPwBox").style.display = "block";
  document.getElementById("resetPwBox").style.display = "block";
  document.getElementById("pwResetMsg").style.display = "none";
});
// show login
document.getElementById("backToLog").addEventListener("click", () => {
  document.getElementById("forgotPwBox").style.display = "none";
  document.getElementById("login").style.display = "block";
});

const copyAllButtonData = (copyTo, uid) => {
  let copyFrom = getCookie("langOpt");
  sendHttpRequest(
    "POST",
    "https://us-central1-seteraguestcloud.cloudfunctions.net/copyButtons",
    "customer=" +
      customer +
      "&uid=" +
      uid +
      "&copyFrom=" +
      copyFrom +
      "&copyTo=" +
      copyTo
  ).then(() => {
    sessionStorage.setItem("buttons", "enabled");
    location.reload();
  });
};

const resetPassword = () => {
  let email = document.getElementById("resetEmail").value.trim();
  if (email.length !== 0) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/ProcessSendResetEmailPasswordEvents",
      "useremail=" + email
    );
    document.getElementById("resetPwBox").style.display = "none";
    document.getElementById("pwResetMsg").style.display = "block";
  } else {
    document.getElementById("enterEmail").style.display = "block";
    setTimeout(() => {
      document.getElementById("enterEmail").style.display = "none";
    }, 3000);
  }
};

const cloneSite = (uid, fromPropertyId, toPropertyId, toPropertyName) => {
  $("#approveCloning").modal("show");
  let approveClone = document.getElementById("approveClone");
  let approveCloningMsg = document.getElementById("approveCloningMsg");
  approveCloningMsg.textContent = `${langdata.languages[themeLang].strings["cloneApp"]}`;
  let approveCloningProp = document.getElementById("approveCloningProp");
  approveCloningProp.textContent = toPropertyName;
  approveCloningProp.style.color = "#e77223";
  approveClone.addEventListener("click", () => {
    approveClone.style.display = "none";
    document.getElementById("cloneInAnim").hidden = false;
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/cloneSite",
      "uid=" +
        uid +
        "&fromPropertyId=" +
        fromPropertyId +
        "&toPropertyId=" +
        toPropertyId
    ).then(() => {
      location.reload();
    });
  });
};

function showCallStatus(msg) {
  if (document.getElementById("callMsg") !== null) {
    document.getElementById("callMsg").textContent = msg;
  }
  setTimeout(() => {
    clearInterval(callingTimer);
    if (document.getElementsByClassName("speedDiv")[0]) {
      document.getElementsByClassName("speedDiv")[0].remove();
    }
    if (document.getElementsByClassName("overlay1")[0]) {
      document.getElementsByClassName("overlay1")[0].remove();
    }
  }, 3000);
}

function showAlert(text) {
  let alertDiv = document.createElement("div");
  alertDiv.classList.add(
    "alert",
    "alert-danger",
    "alert-dismissible",
    "fade",
    "show"
  );
  alertDiv.role = "alert";
  alertDiv.textContent = text;

  alertDiv.style.position = "fixed";
  alertDiv.style.width = "100%";
  alertDiv.style.top = "0px";
  alertDiv.style.textAlign = "center";
  alertDiv.style.zIndex = "1000";

  document.body.append(alertDiv);
  setTimeout(() => {
    alertDiv.remove();
  }, 4000);
}

const details = document.querySelectorAll("details");

// Add the onclick listeners.
details.forEach((targetDetail) => {
  targetDetail.addEventListener("click", () => {
    // Close all the details that are not targetDetail.
    details.forEach((detail) => {
      if (detail !== targetDetail) {
        detail.removeAttribute("open");
      }
    });
  });
});

function checkImgFilePromise(file) {
  return new Promise((resolve, reject) => {
    let fileSize = file.size;
    let fileType = file.type;

    if (fileSize < 5 * 1024 * 1024) {
      if (fileType.includes("image/")) {
        resolve();
      } else {
        showAlert(langdata.languages[themeLang].strings["fileType"]);
        reject();
      }
    } else {
      showAlert(langdata.languages[themeLang].strings["fileSize"]);
      reject();
    }
  });
}

function showPDFUploadDivHelper(type, id) {
  const allowedExtensions = /(\.pdf|\.PDF)$/i;
  const formButton = document.getElementById("buttonForm");
  const updateButtonForm = document.getElementById("updateButtonForm");
  let pdfURLinput = document.getElementById("pdfURLinput");
  let fileInput = document.getElementById("PDFfileinput");
  let innerDiv = document.getElementById("pdfInnerProgress");
  let progress;
  innerDiv.style.width = "0%";

  let buttonName = "";
  if (type === "new") {
    buttonName = formButton.b_name.value;
  } else if (type === "edit") {
    buttonName = updateButtonForm.bu_name.value;
  }

  fileInput.addEventListener(
    "change",
    (e) => {
      e.preventDefault();
      if (allowedExtensions.exec(fileInput.value)) {
        let count = 0;
        progress = setInterval(() => {
          if (count < 75) {
            count += 25;
            innerDiv.style.width = count + "%";
          }
        }, 1000);

        let file = e.target.files[0];
        let storageRef = firebase
          .storage()
          .ref(
            "PDF/" +
              hotelUID +
              "/" +
              buttonName +
              Math.random(100).toString().slice(2, 5)
          );
        storageRef
          .put(file)
          .then(() => {
            clearInterval(progress);

            getURL(storageRef.location.path).then(function (resp) {
              pdfURLinput.value = resp;
              innerDiv.style.width = "100%";
              setURL(resp, id);
            });
          })
          .then(() => {
            document.getElementById("urlRadioUP" + id).checked = true;
            setDestinationText("webUrl", "popup", id);
          });
      } else {
        showAlert(langdata.languages[themeLang].strings["fileTypeNot"]);
      }
    },
    { once: true }
  );
}

let radioLinkBtns = document.getElementsByName("linkType");
for (let i = 0; i < radioLinkBtns.length; i++) {
  radioLinkBtns[i].addEventListener("change", () => {
    setDestinationText(radioLinkBtns[i].value);
  });
}

let radioLinkBtnsU = document.getElementsByName("linkTypeU");
for (let i = 0; i < radioLinkBtnsU.length; i++) {
  radioLinkBtnsU[i].addEventListener("change", () => {
    setDestinationText(radioLinkBtnsU[i].value, "update");
  });
}

let radioLinkBtnsUP = document.getElementsByName("linkTypeUP");
for (let i = 0; i < radioLinkBtnsUP.length; i++) {
  radioLinkBtnsUP[i].addEventListener("change", () => {
    setDestinationText(radioLinkBtnsUP[i].value, "popup");
  });
}

let analyticsRadio = document.getElementsByName("analyticsRadio");
for (let i = 0; i < analyticsRadio.length; i++) {
  analyticsRadio[i].addEventListener("change", () => {
    showAnalyticsSection(analyticsRadio[i].value);
  });
}

const showAnalyticsSection = (section) => {
  console.log(section);
  document.getElementById("day").style.display = "none";
  document.getElementById("week").style.display = "none";
  document.getElementById("month").style.display = "none";

  document.getElementById("mydayChartDiv").style.display = "none";
  document.getElementById("myweekChartDiv").style.display = "none";
  document.getElementById("mymonthChartDiv").style.display = "none";

  document.getElementById("mydayPieDiv").style.display = "none";
  document.getElementById("myweekPieDiv").style.display = "none";
  document.getElementById("mymonthPieDiv").style.display = "none";

  document.getElementById("mymonthChartVisitDiv").style.display = "none";
  document.getElementById("myweekChartVisitDiv").style.display = "none";

  document.getElementById("mymonthBarDiv").style.display = "none";
  document.getElementById("myweekBarDiv").style.display = "none";
  document.getElementById("mydayBarDiv").style.display = "none";

  document.getElementById("mymonthChartFeedbackDiv").style.display = "none";
  document.getElementById("myweekChartFeedbackDiv").style.display = "none";

  if (section !== "day") {
    document.getElementById("my" + section + "ChartVisitDiv").style.display =
      "block";
    document.getElementById("my" + section + "ChartFeedback").style.display =
      "block";
  }

  document.getElementById(section).style.display = "block";
  document.getElementById(`my${section}BarDiv`).style.display = "block";
  document.getElementById("my" + section + "ChartDiv").style.display = "block";
  document.getElementById(`my${section}PieDiv`).style.display = "block";
  //document.getElementById("my" + section + "ChartFeedbackDiv").style.display =
  //  "block";
};

const setDestinationText = (value, update, id) => {
  let placeholder;
  if (value === "telephone") {
    placeholder = "+358 20 1500 800";
  } else if (value === "emailAdd") {
    placeholder = "support@setera.com";
  } else {
    placeholder = "www.setera.com";
  }

  if (update === "update") {
    document.getElementById("destinationTextU").textContent =
      langdata.languages[themeLang].strings["destination"] +
      " " +
      langdata.languages[themeLang].strings[value];
    document.getElementsByName("bu_url")[0].placeholder = placeholder;

    if (value === "telephone" || value === "emailAdd") {
      document.getElementById("bu_openLinkH").style.display = "none";
    } else {
      document.getElementById("bu_openLinkH").style.display = "block";
    }
  } else if (update === "popup") {
    document.getElementById("pSub" + id).textContent =
      langdata.languages[themeLang].strings["destination"] +
      " " +
      langdata.languages[themeLang].strings[value];
    document.getElementById("linkInput").placeholder = placeholder;
    if (value === "telephone" || value === "emailAdd") {
      document.getElementById("p_openLinkH" + id).style.display = "none";
    } else {
      document.getElementById("p_openLinkH" + id).style.display = "block";
    }
  } else {
    document.getElementById("destinationText").textContent =
      langdata.languages[themeLang].strings["destination"] +
      " " +
      langdata.languages[themeLang].strings[value];
    document.getElementsByName("b_url")[0].placeholder = placeholder;
    if (value === "telephone" || value === "emailAdd") {
      document.getElementById("b_openLinkH").style.display = "none";
    } else {
      document.getElementById("b_openLinkH").style.display = "block";
    }
  }
};

// set zoom level for iframe, only works on live versions
document.getElementById("previewOther").addEventListener("load", () => {
  let value = "100%";
  let mainV = "100%";
  if (windowWidth < 1300) {
    value = "80%";
    mainV = "90%";
  }
  try {
    document
      .getElementById("preview")
      .contentWindow.document.getElementById("headerImg").style.height = "20vh";
    document
      .getElementById("preview")
      .contentWindow.document.getElementById("bodyDiv").style.zoom = value;
    document
      .getElementById("preview")
      .contentWindow.document.getElementById("mainDiv").style.zoom = mainV;
    document
      .getElementById("previewOther")
      .contentWindow.document.getElementById("mainDiv").style.zoom = "80%";
    document
      .getElementById("previewOther")
      .contentWindow.document.getElementById("bodyDiv").style.zoom = "70%";
  } catch (error) {
    null;
  }
});

// preview device sizes and zoom
let smartphone = document.getElementById("smartphone");
let smartphoneContent = document.getElementById("smartphoneContent");
let previewDevice = document.getElementsByName("previewDevice")[0];
let previewDeviceZoom = document.getElementsByName("previewDeviceZoom")[0];
let windowWidth = window.innerWidth;

previewDevice.addEventListener("change", () => {
  if (previewDevice.value == 1) {
    smartphone.style.height = "568px";
    smartphoneContent.style.height = "468px";
    smartphone.style.width = "320px";
    smartphone.style.zoom = "80%";
    previewDeviceZoom.value = "80";
  } else if (previewDevice.value == 2) {
    smartphone.style.height = "667px";
    smartphoneContent.style.height = "567px";
    smartphone.style.width = "375px";
    smartphone.style.zoom = "80%";
    previewDeviceZoom.value = "80";
  } else if (previewDevice.value == 3) {
    smartphone.style.height = "736px";
    smartphoneContent.style.height = "636px";
    smartphone.style.width = "414px";
    smartphone.style.zoom = "70%";
    previewDeviceZoom.value = "70";
  } else if (previewDevice.value == 4) {
    smartphone.style.height = "812px";
    smartphoneContent.style.height = "712px";
    smartphone.style.width = "375px";
    smartphone.style.zoom = "60%";
    previewDeviceZoom.value = "60";
  } else if (previewDevice.value == 5) {
    smartphone.style.height = "1024px";
    smartphoneContent.style.height = "924px";
    smartphone.style.width = "768px";
    smartphone.style.zoom = "60%";
    previewDeviceZoom.value = "60";
  } else if (previewDevice.value == 6) {
    smartphone.style.height = "1366px";
    smartphoneContent.style.height = "1266px";
    smartphone.style.width = "1024px";
    smartphone.style.zoom = "40%";
    previewDeviceZoom.value = "40";
  } else if (previewDevice.value == 7) {
    smartphone.style.height = "653px";
    smartphoneContent.style.height = "553px";
    smartphone.style.width = "280px";
    smartphone.style.zoom = "90%";
    previewDeviceZoom.value = "90";
  } else if (previewDevice.value == 8) {
    smartphone.style.height = "740px";
    smartphoneContent.style.height = "640px";
    smartphone.style.width = "360px";
    smartphone.style.zoom = "80%";
    previewDeviceZoom.value = "80";
  } else if (previewDevice.value == 9) {
    smartphone.style.height = "915px";
    smartphoneContent.style.height = "815px";
    smartphone.style.width = "412px";
    smartphone.style.zoom = "70%";
    previewDeviceZoom.value = "70";
  } else if (previewDevice.value == 10) {
    smartphone.style.height = "640px";
    smartphoneContent.style.height = "540px";
    smartphone.style.width = "360px";
    smartphone.style.zoom = "90%";
    previewDeviceZoom.value = "90";
  } else if (previewDevice.value == 11) {
    smartphone.style.height = "844px";
    smartphoneContent.style.height = "744px";
    smartphone.style.width = "390px";
    smartphone.style.zoom = "70%";
    previewDeviceZoom.value = "70";
  } else if (previewDevice.value == 12) {
    smartphone.style.height = "1280px";
    smartphoneContent.style.height = "1180px";
    smartphone.style.width = "800px";
    smartphone.style.zoom = "50%";
    previewDeviceZoom.value = "50";
  }
  setPreviewZoom();
});

previewDeviceZoom.addEventListener("change", () => {
  setPreviewZoom();
});

const setPreviewZoom = () => {
  let parsedValue = parseInt(previewDeviceZoom.value);
  let parsedMinus = parsedValue;

  if (parsedMinus < 40) {
    parsedMinus = 50;
  }

  if (previewDevice.value == 6 && parsedMinus > 70) {
    smartphone.style.zoom = "70%";
    parsedMinus = "70";
  } else if (previewDevice.value == 5 && parsedMinus >= 90) {
    smartphone.style.zoom = "90%";
    parsedMinus = "90";
  } else {
    smartphone.style.zoom = previewDeviceZoom.value + "%";
  }

  parsedMinus.toString();

  try {
    //   document
    //     .getElementById("previewOther")
    //     .contentWindow.document.getElementById("body").style.zoom = "75%";
    //   document
    //     .getElementById("previewOther")
    //     .contentWindow.document.getElementById("bodyDiv").style.zoom = "75%";
    if (previewDevice.value == 6 || previewDevice.value == 5) {
      document
        .getElementById("previewOther")
        .contentWindow.document.getElementById("mainDiv").style.zoom = "100%";
      document
        .getElementById("previewOther")
        .contentWindow.document.getElementById("bodyDiv").style.zoom = "100%";
      // document
      //   .getElementById("previewOther")
      //   .contentWindow.document.getElementById("mainDiv").style.zoom = "100%";
    } else {
      // if (parseInt(previewDeviceZoom.value) < 75) {
      //   document
      //     .getElementById("previewOther")
      //     .contentWindow.document.getElementById("bodyDiv").style.zoom =
      //     previewDeviceZoom.value + "%";
      // } else {
      document
        .getElementById("previewOther")
        .contentWindow.document.getElementById("mainDiv").style.zoom = "80%";
      document
        .getElementById("previewOther")
        .contentWindow.document.getElementById("bodyDiv").style.zoom = "70%";
      // }
      // document
      //   .getElementById("previewOther")
      //   .contentWindow.document.getElementById("mainDiv").style.zoom =
      //   previewDeviceZoom.value + "%";
    }
  } catch (error) {
    null;
  }
};
//

// disable enter key press to avoid accidental form submit but still work for login page
$("#dadDiv").keypress(function (event) {
  if (event.which == "13") {
    event.preventDefault();
  }
});

$("#copyPropModal").on("hidden.bs.modal", function () {
  document.getElementsByName("propertyCloneSet")[0].value = "0";
});
$("#approveCloning").on("hidden.bs.modal", function () {
  document.getElementsByName("propertyCloneSet")[0].value = "0";
});

document
  .getElementsByName("h_transparent")[0]
  .addEventListener("change", () => {
    if (document.getElementsByName("h_transparent")[0].checked) {
      document.getElementById("hideHeadBgCol").style.display = "block";
    } else {
      document.getElementById("hideHeadBgCol").style.display = "none";
    }
  });

// download chart image event listeners
document.getElementById("downloadChart").addEventListener("click", function () {
  /*Get image of canvas element*/
  var url_base64jp = document
    .getElementById("mymonthChartVisit")
    .toDataURL("image/png");
  /*get download button (tag: <a></a>) */
  var a = document.getElementById("downloadChart");
  /*insert chart image url to download button (tag: <a></a>) */
  a.href = url_base64jp;
});

document
  .getElementById("downloadMHChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("mymonthChart")
      .toDataURL("image/png");
    var a = document.getElementById("downloadMHChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadMPChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("mymonthPie")
      .toDataURL("image/png");
    var a = document.getElementById("downloadMPChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadWeekChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("myweekChartVisit")
      .toDataURL("image/png");
    var a = document.getElementById("downloadWeekChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadWPChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("myweekPie")
      .toDataURL("image/png");
    var a = document.getElementById("downloadWPChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadWHChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("myweekChart")
      .toDataURL("image/png");
    var a = document.getElementById("downloadWHChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadDayChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("mydayChart")
      .toDataURL("image/png");
    var a = document.getElementById("downloadDayChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadDPChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("mydayPie")
      .toDataURL("image/png");
    var a = document.getElementById("downloadDPChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadMBChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("mymonthBars")
      .toDataURL("image/png");
    var a = document.getElementById("downloadMBChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadMWChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("myweekBar")
      .toDataURL("image/png");
    var a = document.getElementById("downloadMWChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadMDChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("mydayBar")
      .toDataURL("image/png");
    var a = document.getElementById("downloadMDChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadMonthFeedbackChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("mymonthChartFeedback")
      .toDataURL("image/png");
    var a = document.getElementById("downloadMonthFeedbackChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadWeekFeedbackChart")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("myweekChartFeedback")
      .toDataURL("image/png");
    var a = document.getElementById("downloadWeekFeedbackChart");
    a.href = url_base64jp;
  });

document
  .getElementById("downloadGroupBar")
  .addEventListener("click", function () {
    var url_base64jp = document
      .getElementById("mygroupBar")
      .toDataURL("image/png");
    var a = document.getElementById("downloadGroupBar");
    a.href = url_base64jp;
  });

document.getElementById("showPropModalBtn").addEventListener("click", () => {
  $("#propModal").modal("show");
});

// toggle group/single property view
let changeAnalyticsView = document.getElementsByName("propSelRadio");
for (let i = 0; i < changeAnalyticsView.length; i++) {
  changeAnalyticsView[i].addEventListener("change", () => {
    if (changeAnalyticsView[i].value === "single") {
      document.getElementById("singlePropAna").style.display = "block";
      document.getElementById("singlePropChar").style.display = "block";
      document.getElementById("groupViewAna").style.display = "none";
    } else {
      document.getElementById("singlePropAna").style.display = "none";
      document.getElementById("singlePropChar").style.display = "none";
      document.getElementById("groupViewAna").style.display = "block";
    }
  });
}
document.getElementById("singleVieww").addEventListener("change", () => {
  document.getElementById("singleView").checked = true;
});
document.getElementById("groupView").addEventListener("change", () => {
  document.getElementById("groupVieww").checked = true;
});

function showLoadingButton(status, button, text) {
  if (status) {
    let span1 = document.createElement("span");
    let span2 = document.createElement("span");

    button.innerHTML = "";

    span1.classList.add("spinner-border", "spiner-border-sm");
    span1.setAttribute("role", "status");
    span1.setAttribute("aria-hidden", "true");
    span1.style.height = "1rem";
    span1.style.width = "1rem";

    span2.classList.add("sr-only");

    button.append(span1);
    button.append(span2);
  } else {
    button.innerHTML = text;
  }
}

function comparePropertyName(a, b) {
  if (
    a.propertyName.replace(/[0-9]/g, "") == b.propertyName.replace(/[0-9]/g, "")
  ) {
    return (
      a.propertyName.replace(/[a-zA-Z]/g, "") -
      b.propertyName.replace(/[a-zA-Z]/g, "")
    );
  }

  if (a.propertyName < b.propertyName) {
    return -1;
  }
  if (a.propertyName > b.propertyName) {
    return 1;
  }
  return 0;
}