"use strict";

//login
const loginForm = document.getElementById("loginForm");
const logoutButton = document.getElementById("logoutButton");
let langOpt;

//read language cookie, if not there set to 0
if (getCookie("langOpt") === "") {
  document.cookie = "langOpt=en";
}
if (getCookie("langOpt") === "0") {
  document.getElementById("dropdownMenuButtonF").style.display = "none";
} else {
  document.getElementById("dropdownMenuButtonF").style.display = "block";
}
langOpt = getCookie("langOpt");

loginForm.addEventListener("submit", function (e) {
  e.preventDefault();

  document.getElementById("loginBtn").hidden = true;
  document.getElementById("signInAnim").hidden = false;

  let email = loginForm["loginEmail"].value;
  let password = loginForm["loginPassword"].value;

  sendHttpRequest(
    "POST",
    "https://us-central1-seteraguestcloud.cloudfunctions.net/connectionData",
    "email=" + email + "&password=" + password
  ).then((resp) => {
    if (resp !== null) {
      setInit(resp, email, password);
    } else {
      document.getElementById("loginBtn").hidden = false;
      document.getElementById("signInAnim").hidden = true;
      document.getElementById("wrongPw").style.display = "block";
      setTimeout(() => {
        document.getElementById("wrongPw").style.display = "none";
      }, 4000);
    }
  });
});

//logout
logoutButton.addEventListener("click", (e) => {
  e.preventDefault();
  document.cookie = `managedProp=0`;
  auth.signOut().then(() => {
    document.getElementById("dadDiv").style.display = "none";
    sessionStorage.removeItem("tigConf");
    location.reload();
  });
});

document.getElementById("signout2").addEventListener("click", (e) => {
  e.preventDefault();
  document.cookie = `managedProp=0`;
  auth.signOut().then(() => {
    document.getElementById("dadDiv").style.display = "none";
    sessionStorage.removeItem("tigConf");
    location.reload();
  });
});

// expired window logoutButton
const expiredLogout = () =>
  auth.signOut().then(() => {
    document.getElementById("dadDiv").style.display = "none";
    sessionStorage.removeItem("tigConf");
    location.reload();
  });

let monthFeedback = [];

function CMrun(hotelUID, uid, response) {
  const CLIENTURL = "https://seteraguest.com/content/index.html";

  customer = hotelUID;
  let main;
  let lang;
  let langCount;
  let buttonList = [];
  let subscribeUri;
  let subscribeEncoded;
  let hotelUIDCookie;

  // if multiple properties set data otherwise hide property management
  if (multipleProps) {
    document.getElementById("singlePropAna").style.display = "none";
    document.getElementById("singlePropChar").style.display = "none";
    document.getElementById("groupViewAna").style.display = "block";
    document.getElementById("propertyModTop").style.display = "block";
    document.getElementById("showPropModalBtn").style.display = "block";

    let propDrop = document.getElementsByName("propertyMod");
    let cloneDrop = document.getElementsByName("propertyCloneSet")[0];
    let anaDrop = document.getElementById("propertyModSetAna");

    response = response.sort(comparePropertyName);

    for (let i = 0; i < response.length; i++) {
      var opt = document.createElement("option");
      opt.appendChild(document.createTextNode(response[i].propertyName));
      opt.value = response[i].propertyId;
      opt.name = response[i].propertyName;
      namesAndUid.push({ [opt.value]: opt.name });
      for (let j = 0; j < propDrop.length; j++) {
        propDrop[j].appendChild(opt.cloneNode(true));
      }
      anaDrop.appendChild(opt.cloneNode(true));
      if (response[i].propertyId === getCookie("managedProp")) {
        propertyName = response[i].propertyName;
        propDrop.value = response[i].propertyId;
        anaDrop.value = response[i].propertyId;
        for (let x = 0; x < propDrop.length; x++) {
          propDrop[x].value = response[i].propertyId;
        }
      } else {
        cloneDrop.appendChild(opt.cloneNode(true));
      }
    }
    currentProperty = anaDrop.options[anaDrop.selectedIndex].text;

    for (let i = 0; i < propDrop.length; i++) {
      propDrop[i].addEventListener("change", () => {
        document.getElementById("loadingAnim").style.display = "block";
        document.getElementById("dadDiv").style.display = "none";
        document.cookie = `managedProp=${propDrop[i].value}`;
        location.reload();
      });
    }
    cloneDrop.addEventListener("change", () => {
      if (cloneDrop.value === "0") {
        null;
      } else {
        let toPropertyName = cloneDrop.options[cloneDrop.selectedIndex].text;
        cloneSite(
          uid,
          getCookie("managedProp"),
          cloneDrop.value,
          toPropertyName
        );
      }
    });
    anaDrop.addEventListener("change", () => {
      document.getElementById("dayForm").reset();
      currentProperty = anaDrop.options[anaDrop.selectedIndex].text;
      setAllUserStatistic(anaDrop.value);
      setMonthlyClickStatistic(anaDrop.value);
      setWeeklyClickStatistic(anaDrop.value);
      setDayClicks(anaDrop.value);
      setVoteStatistics(anaDrop.value, uid);
      //setCommentStatistics(anaDrop.value, uid);
    });

    // if property cookie exists set property otherwise show modal for choosing property
    if (getCookie("managedProp") && getCookie("managedProp") !== "0") {
      customer = getCookie("managedProp");
      hotelUID = getCookie("managedProp");
      hotelUIDCookie = getCookie("managedProp");
    } else {
      $("#propModal").modal("show");
    }

    // set property name after its set again
    document.getElementById(
      "managedProp"
    ).textContent = `Currently managing ${propertyName}`;
    document.getElementById(
      "copyPropFrom"
    ).textContent = `Cloning site from ${propertyName}`;

    if (hotelUIDCookie) {
      loadHeaderData(hotelUIDCookie);
      loadMainData(hotelUIDCookie);
      loadButtonData(hotelUIDCookie);
      setAllUserStatistic(hotelUIDCookie);
      setGroupStatistics(uid, namesAndUid);
      setMonthlyClickStatistic(hotelUIDCookie);
      setWeeklyClickStatistic(hotelUIDCookie);
      setDayClicks(hotelUIDCookie);
      setVoteStatistics(hotelUIDCookie, uid);
      //setCommentStatistics(hotelUIDCookie, uid);
    } else if (hotelUID) {
      loadHeaderData(hotelUID);
      loadMainData(hotelUID);
      loadButtonData(hotelUID);
      setAllUserStatistic(hotelUID);
      setMonthlyClickStatistic(hotelUID);
      setWeeklyClickStatistic(hotelUID);
      setDayClicks(hotelUID);
      setVoteStatistics(hotelUID, uid);
      //setCommentStatistics(hotelUID, uid);
    }
  } else {
    document.getElementById("propNameTop").textContent = propertyName;
    document.getElementById("propNameTop").style.display = "block";
    document.getElementById("propManage").hidden = true;
    document.getElementById("multiPropAna").hidden = true;
    document.getElementById("groupViewAna").style.display = "none";
    document.getElementById("grpView").style.display = "none";
    document.getElementById("singlePropAna").style.display = "block";
    document.getElementById("singlePropChar").style.display = "block";
    if (hotelUID) {
      loadHeaderData(hotelUID);
      loadMainData(hotelUID);
      loadButtonData(hotelUID);
      setAllUserStatistic(hotelUID);
      setMonthlyClickStatistic(hotelUID);
      setWeeklyClickStatistic(hotelUID);
      setDayClicks(hotelUID);
      setVoteStatistics(hotelUID, uid);
      //setCommentStatistics(hotelUID, uid);
    }
  }

  document.getElementById("resetCmBtn").textContent += " " + propertyName;

  //file upload (main & header)
  const uploaderMain = document.getElementById("fileToUp");
  const uploaderHeader = document.getElementById("h_logo");

  //forms
  const formMain = document.getElementById("mainForm");
  const formHeader = document.getElementById("headerForm");
  const formButton = document.getElementById("buttonForm");
  const updateButtonForm = document.getElementById("updateButtonForm");

  /** --------------------LOAD SECTION -------------------------- */
  if (sessionStorage.getItem("buttons") === "enabled") {
    goToButton();
    sessionStorage.removeItem("buttons");
  } else if (sessionStorage.getItem("advanced") === "enabled") {
    goToExtras();
    sessionStorage.removeItem("advanced");
  } else {
    if (getCookie("firstlogin")) {
      goToTop();
      document.getElementById("section0").style.display = "none";
      document.cookie = "firstlogin=true;expires=Thu, 01 Jan 1970 00:00:01 GMT";
    } else {
      document.getElementById("section0").style.display = "flex";
    }
  }

  if (localStorage.getItem("es") === "enabled") {
    document.getElementById("setLogS").style.fontSize = "0.75vw";
  }

  function loadButtonData(hotelUID) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newGetButtons",
      "customer=" + hotelUID + "&buttonid=" + langOpt
    ).then((snap) => {
      // sort by id
      for (let x = 0; x < snap.length; x++) {
        for (let y = 0; y < snap.length; y++) {
          if (parseInt(snap[y].id) === x + 1) {
            buttonList.push(snap[y]); //id sorted button list
            if (snap[y].type === "FEEDBACK") {
              //one feedback per laguage
              document.getElementById("showFeedback").remove();
            }
          }
        }
      }
      setDropdown(buttonList);
    });
  }

  function loadHeaderData(hotelUID) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newGetHeader",
      "customer=" + hotelUID
    ).then((header) => {
      setHeader(header);
    });
  }

  function loadMainData(hotelUID) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newGetMain",
      "customer=" + hotelUID
    ).then((mainObj) => {
      main = mainObj;
      if (main.status == "newSite") {
        $("#templateModal").modal("show");
      }

      if (main.licenseid === undefined) {
        main.licenseid = "";
      }
      subscribeUri = `https://www.tigertms.com/solutions/iportal-subscriptions/?hotel_name=${propertyName}&iportal_id=${hotelUID}&email_adress=${useremail}&license_key=${main.licenseid}`;
      subscribeEncoded = encodeURI(subscribeUri);
      if (main.licenseiportalactive || main.licenseiportalactive === "true") {
        document.getElementById("preview").src = CLIENTURL + "?h=" + hotelUID;
        document.getElementById("previewOther").src =
          CLIENTURL + "?h=" + hotelUID;
        document.getElementById("qrCode").src =
          "https://api.qrserver.com/v1/create-qr-code/?data=" +
          CLIENTURL +
          "?h=" +
          hotelUID;
        document.getElementById("qrCodeRedirect").href =
          CLIENTURL + "?h=" + hotelUID;
        grabFontsFromFb(hotelUID);
        loadSocialMediafromJSON();
        setMain(mainObj);
        loadIcons();
        loadWebRTC();
      } else {
        document.getElementById("dadDiv").style.pointerEvents = "none";
        let overlay = document.createElement("div");
        overlay.classList.add("overlay");
        let end = document.createElement("div");
        end.style.pointerEvents = "auto";
        end.classList.add("endDiv");
        end.innerHTML = `<div>${
          langdata.languages[themeLang].strings["freeTrialEnd"] + " "
        }<a href="https://setera.com">setera.com</a>${
          " " + langdata.languages[themeLang].strings["toUpgrade"]
        }</div>
        <div type="button" onclick="expiredLogout()" class="forgotPwP">${
          langdata.languages[themeLang].strings["signout"]
        }</div>`;
        overlay.append(end);
        dadDiv.append(overlay);
      }
    });
  }

  function loadJSON(name, callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open("GET", name + ".json", true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
    };
    xobj.send(null);
  }

  function loadIcons() {
    loadJSON("icons", function (response) {
      // Parse JSON string into object
      var actual_JSON = JSON.parse(response);
      localStorage.setItem("icons", JSON.stringify(actual_JSON));
    });
  }

  function setAllUserStatistic(hotelUID) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/allUserStatistic",
      "customer=" + hotelUID + "&uid=" + uid
    ).then((res) => {
      setMonthly(res);
      setWeek(res);
      setDates(res);
    });
  }

  function setMonthlyClickStatistic(hotelUID) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/allClicksStatistic",
      "customer=" + hotelUID + "&uid=" + uid
    ).then((res) => {
      setMonthlyClicks(res);
    });
  }

  function setWeeklyClickStatistic(hotelUID) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/last7daysClicks",
      "customer=" + hotelUID + "&uid=" + uid
    ).then((res) => {
      setWeeklyClicks(res);
    });
  }

  function setGroupStatistics(uid, namesAndUid) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/groupUsersStatistics",
      "uid=" + uid
    ).then((res) => {
      setGroupCharts(res, namesAndUid);
    });
  }

  function setWeekGroupStatistics(uid, namesAndUid) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/last7daysGroupUsersStatistics",
      "uid=" + uid
    ).then((res) => {
      setGroupCharts(res, namesAndUid, "week");
    });
  }

  function setDayClicks(hotelUID) {
    setDailyClicks(hotelUID, uid);
  }

  function setVoteStatistics(hotelUID, uid) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/getFeedback",
      "customer=" + hotelUID + "&uid=" + uid + "&period=30"
    ).then((res) => {
      setVotes(res);
    });
  }

  /** --------------------------SETTER -------------------------- */

  //render DOM & set value from DB
  function setMain(main) {
    document.getElementsByName("title")[0].value = main.title;
    document.getElementsByName("backgroundColor")[0].value =
      main.backgroundColor;
    document.getElementsByName("split")[0].value = main.split;
    document.getElementsByName("langIconColor")[0].value = main.langIconColor;
    document.getElementsByName("langIconPosition")[0].value =
      main.langIconPosition;
    document.getElementsByName("slide")[0].value = main.slide;
    checkMainbackgroundImage(main, hotelUID, uid);
    let dropdown = document.getElementById("langDropdown");
    let langDDDisplay = document.querySelector(".langDD");
    document.getElementById("preview").src += "?lang=" + langOpt;
    document.getElementById("previewOther").src += "?lang=" + langOpt;
    document.getElementById("licenceNumInput").value = main.licenseid;

    trial = main.licensewebrtcenabled;
    document.getElementById("selectSub").href = subscribeEncoded;
    if (main.licenseisiportaltrial || main.licenseisiportaltrial === "true") {
      var utcSeconds = main.licenseiportaltrialexpirydate._seconds;
      var d = new Date(0);
      d.setUTCSeconds(utcSeconds);
      let correctDate = d.toDateString();
      document.getElementById("trialMsg").innerText =
        langdata.languages[themeLang].strings["freeTrial"] + " " + correctDate;
      document.getElementById("expireSubscribe").href = subscribeEncoded;
    } else {
      document.getElementById("trialMsg").innerText =
        langdata.languages[themeLang].strings["subscribed"];
      document.getElementById("expireSubscribe").href = subscribeEncoded;
    }

    //use lang as global var
    lang = main.lang;
    langCount = main.langCount;

    langDDDisplay.textContent =
      langdata.languages[themeLang].strings["selectLanguage"];

    removeAllChildNodes(dropdown);
    //language name & button count set to dropdown
    main.lang.forEach((lan) => {
      if (lan.name != "") {
        let a = document.createElement("a");
        a.classList.add("dropdown-item", "lang-item");
        a.innerHTML =
          lan.name + "<div class='langCountDiv'>" + lan.counter + "</div>";
        a.addEventListener("click", () => {
          changeLanguage(lan.code);
        });
        dropdown.append(a);
      }
    });
    activeLanguageDD(main.lang);

    document.getElementById(
      "signedInAs"
    ).innerText = ` - ${langdata.languages[themeLang].strings["signedUser"]} ${username}`;

    //social media check
    if (main.socialmedia != undefined || main.socialmedia != "") {
      setSocialmedia(main);
    }

    if (main.slide.value == "0") {
      //toggleBarpositionBelowheader(true);
      toggleBarflowDynamic(true);
    } else if (formMain.slide.value == "1") {
      //toggleBarpositionBelowheader(false);
      toggleBarflowDynamic(false);
    }
  }

  function setHeader(header) {
    document.getElementsByName("h_status")[0].checked = header.status;
    document.getElementsByName("h_backgroundColor")[0].value =
      header.backgroundColor;
    document.getElementsByName("h_logoPosition")[0].value = header.logoPosition;
    if (header.transparent) {
      document.getElementById("hideHeadBgCol").style.display = "block";
    } else {
      document.getElementById("hideHeadBgCol").style.display = "none";
    }
    document.getElementsByName("h_transparent")[0].checked = header.transparent;
    document.getElementsByName("h_3d")[0].checked = header.dimension;
    checkboxHeaderCheck();
    checkHeaderbackgroundImage(header, hotelUID, uid);

    if (header.status) {
      toggleBarpositionBelowheader(true);
    } else {
      toggleBarpositionBelowheader(false);
    }
  }

  /** --------------------SUBMIT EVENT LISTENER -------------------------- */
  document.getElementById("addButtonSubmit").addEventListener("click", () => {
    if (formButton.b_name.value.length === 0) {
      showAlert(langdata.languages[themeLang].strings["uploadPdfCheckName"]);
    }
  });
  //MAIN UPDATE
  formMain.addEventListener("submit", function (e) {
    e.preventDefault();

    document.getElementById("mainSubmitButton").hidden = true;
    document.getElementById("mainSubmitButtonAnim").hidden = false;
    //prevent double click
    let mainSubmitButton = document.getElementById("mainSubmitButton");
    mainSubmitButton.setAttribute("disabled", "true");
    setTimeout(() => {
      mainSubmitButton.removeAttribute("disabled");
    }, 3000);

    let sendObj = {
      title: formMain.title.value,
      backgroundColor: formMain.backgroundColor.value,
      split: formMain.split.value,
      langIconColor: formMain.langIconColor.value,
      langIconPosition: formMain.langIconPosition.value,
      slide: formMain.slide.value,
    };

    //show/ hide social media settings depenp on slide setting
    if (formMain.slide.value == "0") {
      toggleBarflowDynamic(true);
      document.getElementById("socialbarFlowDiv").style.display = "block";
    } else if (formMain.slide.value == "1") {
      toggleBarflowDynamic(false);
      sendObj.social_barflow = "0";
      document.getElementById("socialbarFlowDiv").style.display = "none";
    }

    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateMain",
      "customer=" +
        hotelUID +
        "&uid=" +
        uid +
        "&data=" +
        encodeURIComponent(JSON.stringify(sendObj))
    ).then(() => {
      refreshPreview();
      document.getElementById("mainSubmitButton").hidden = false;
      document.getElementById("mainSubmitButtonAnim").hidden = true;
    });
  });

  //HEADER UPDATE
  formHeader.addEventListener("submit", function (e) {
    e.preventDefault();

    document.getElementById("headerSubmitButton").hidden = true;
    document.getElementById("headerSubmitButtonAnim").hidden = false;
    //prevent double click
    let headerSubmitButton = document.getElementById("headerSubmitButton");
    headerSubmitButton.setAttribute("disabled", "true");
    setTimeout(() => {
      headerSubmitButton.removeAttribute("disabled");
    }, 3000);

    let sendObj = {
      backgroundColor: formHeader.h_backgroundColor.value,
      status: formHeader.h_status.checked,
      logoPosition: formHeader.h_logoPosition.value,
      transparent: formHeader.h_transparent.checked,
      dimension: formHeader.h_3d.checked,
    };

    if (formHeader.h_status.checked) {
      toggleBarpositionBelowheader(true);
    } else {
      toggleBarpositionBelowheader(false);
    }

    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateHeader",
      "customer=" +
        hotelUID +
        "&uid=" +
        uid +
        "&data=" +
        JSON.stringify(sendObj)
    ).then(() => {
      refreshPreview();
      document.getElementById("headerSubmitButton").hidden = false;
      document.getElementById("headerSubmitButtonAnim").hidden = true;
    });
  });

  // delete button image (preview)
  //new button
  document
    .getElementById("deleteAddImgPreview")
    .addEventListener("click", () => {
      document.getElementById("b_backgroundImage").value = "";
      document.getElementById("addPreviewImage").remove();
      document.getElementById("deleteAddImgPreview").style.display = "none";
      document.getElementById("bgTransHide").style.display = "block";
      document.getElementById("overlayHide").style.display = "none";
      document.getElementById("b_backgroundImageL").style.width = "50%";
      document.getElementById("bgColTog").textContent =
        langdata.languages[themeLang].strings["backgroundColor"];
      document.getElementById("bgColToHide").style.display = "block";
    });

  //edit button
  document
    .getElementById("deleteAddImgPreview2")
    .addEventListener("click", () => {
      document.getElementById("bu_backgroundImage").value = "";
      document.getElementsByClassName(
        "subbuttonPreview"
      )[0].style.backgroundImage = "";
      document.getElementById("deleteAddImgPreview2").style.display = "none";
      updateButtonForm.bu_img_url.value = "";
      document.getElementById("bgUTransHide").style.display = "block";
      document.getElementById("overlayUHide").style.display = "none";
      document.getElementById("bu_backgroundImageL").style.width = "50%";
      document.getElementById("bgColTogg").textContent =
        langdata.languages[themeLang].strings["backgroundColor"];
      // document.getElementById("overlayU-toggle").checked = true;
      document.getElementById("bggColToHide").style.display = "block";
    });

  //BUTTON ADD
  formButton.addEventListener("submit", function (e) {
    e.preventDefault();

    let imageInput = e.target[21].files[0];
    let buttonType = formButton.b_type.value;

    document.getElementById("addButtonSubmit").hidden = true;
    document.getElementById("addButtonSubmitAnim").hidden = false;

    //prevent double click
    let addButtonSubmit = document.getElementById("addButtonSubmit");
    addButtonSubmit.addEventListener("click", () => {
      if (formButton.b_name.value === 0) {
        showAlert(langdata.languages[themeLang].strings["uploadPdfCheckName"]);
        document.getElementById("addButtonSubmit").hidden = false;
        document.getElementById("addButtonSubmitAnim").hidden = true;
      }
    });
    addButtonSubmit.setAttribute("disabled", "true");
    setTimeout(() => {
      addButtonSubmit.removeAttribute("disabled");
    }, 3000);

    //default properties to send
    let sendObj = {
      id: formButton.b_id.value,
      name: formButton.b_name.value,
      font: formButton.b_font.value,
      fontColor: formButton.b_fontColor.value,
      iconColor: formButton.b_iconColor.value,
      backgroundColor: formButton.b_backgroundColor.value,
      icon: formButton.b_icon.value,
      type: formButton.b_type.value,
      style: formButton.b_style.value,
      fontSize: formButton.b_fontSize.value,
      opacity: formButton.b_opacity.value,
      iconPos: formButton.b_iconPos.value,
      iconSize: formButton.b_iconSize.value,
      shadowStyle: formButton.b_shadow.value,
      buttonRadius: formButton.b_radius.value,
      colorTransparency: formButton.b_colInput.value,
      overlayToggle: formButton.overlayToggle.checked,
    };

    //checking BUTTON TYPE
    if (buttonType == "LINK") {
      let urlValue = formButton.b_url.value;
      if (document.getElementById("emailRadio").checked === true) {
        urlValue = "mailto:" + urlValue;
      } else if (document.getElementById("telRadio").checked === true) {
        urlValue = "tel:" + urlValue;
      }
      sendObj.onClick =
        "myhref('" + urlValue + " , " + formButton.b_window.value + "')";
    } else if (buttonType == "SPEEDDIAL") {
      sendObj.onClick = "generateSpeedDial(this)";
      sendObj.extension = formButton.d_number.value;
    } else if (buttonType == "MAP") {
      sendObj.onClick = "generateMap(this)";
      sendObj.lat = formButton.lat.value;
      sendObj.lng = formButton.lng.value;
      sendObj.mapBgCol = document.getElementById("mapBgCol").value;
    } else if (buttonType == "Messaging") {
      sendObj.onClick =
        "myhref('https://wa.me/" + formButton.phoneInput.value + " " + "')";
      // removed subscribe message ?text=subscribe until we bring back inotify
    } else if (buttonType == "POPUP") {
      $(".subMenuButton").removeClass("redMarked");
      sendObj.onClick = "generateContent(this)";
      sendObj.p_divColor = formButton.p_divColor.value;
      sendObj.p_text = $("#summernote").summernote("code");
      sendObj.subObj = subObjList;
      subObjList = [];
      sendObj.summernoteBackCol =
        document.getElementsByName("p_divColor")[0].value;
    } else if (buttonType == "FEEDBACK") {
      sendObj.onClick = "generateFeedback(this)";
      const questions = document.getElementsByClassName("question_holder");
      let question_list = [];
      for (let x = 0; x < questions.length; x++) {
        question_list.push(questions[x].textContent);
      }
      sendObj.questions = question_list;
      sendObj = { ...sendObj, ...getFeedbackSettings() };
    } else {
      showAlert("Unknow button type");
      return;
    }

    //send the sendObj { all properties } to Firebase and add to buttonList

    //checking whether button background image is set
    if (imageInput != undefined && !imageInput.type.endsWith("gif")) {
      checkImgFilePromise(imageInput)
        .then(() => {
          let storageRef = firebase
            .storage()
            .ref(
              "images/" +
                hotelUID +
                "/" +
                "button" +
                "/" +
                sendObj.name +
                "." +
                imageInput.type.replace("image/", "")
            );
          storageRef.put(imageInput).then(() => {
            getURL(storageRef.location.path).then((fullPath) => {
              sendObj.backgroundImage = fullPath;

              sendHttpRequest(
                "POST",
                "https://us-central1-seteraguestcloud.cloudfunctions.net/newSetButton",
                "customer=" +
                  hotelUID +
                  "&uid=" +
                  uid +
                  "&buttonid=" +
                  langOpt +
                  "&data=" +
                  encodeURIComponent(JSON.stringify(sendObj))
              ).then(() => {
                buttonList.push(sendObj);

                //remove the entries in the dropdown and set it again
                document.getElementById("buttonForm").reset();
                document.getElementById("buttonForm").style.display = "none";
                sessionStorage.setItem("buttons", "enabled");
                location.reload();
              });
            });
          });
        })
        .catch((e) => console.log(e));
    } else {
      // console.log("Add new button wihtout background");
      sendObj.backgroundImage = "";
      sendHttpRequest(
        "POST",
        "https://us-central1-seteraguestcloud.cloudfunctions.net/newSetButton",
        "customer=" +
          hotelUID +
          "&uid=" +
          uid +
          "&buttonid=" +
          langOpt +
          "&data=" +
          encodeURIComponent(JSON.stringify(sendObj))
      ).then(() => {
        buttonList.push(sendObj);

        document.getElementById("buttonForm").reset();
        document.getElementById("buttonForm").style.display = "none";
        sessionStorage.setItem("buttons", "enabled");
        location.reload();
      });
    }
  });

  //BUTTON UPDATE
  updateButtonForm.addEventListener("submit", function (e) {
    e.preventDefault();
    let updateFormButton = document.getElementById("updateButtonForm");
    //let hiddenIMGfield = document.getElementsByName("bu_img")[0];
    let docID = updateButtonForm.bu_id.value;
    let id = updateButtonForm.bu_posID.value;
    let buttonType = updateButtonForm.bu_type.value;
    // console.log(e.target);
    let imageInput = e.target[22].files[0];

    document.getElementById("updateButtonSubmit").hidden = true;
    document.getElementById("updateButtonSubmitAnim").hidden = false;
    //prevent double click
    let updateButtonSubmit = document.getElementById("updateButtonSubmit");
    updateButtonSubmit.setAttribute("disabled", "true");
    setTimeout(() => {
      updateButtonSubmit.removeAttribute("disabled");
    }, 3000);

    let sendObj = {
      id: updateButtonForm.bu_posID.value,
      name: updateFormButton.bu_name.value,
      font: updateButtonForm.bu_font.value,
      fontColor: updateFormButton.bu_fontColor.value,
      iconColor: updateFormButton.bu_iconColor.value,
      backgroundColor: updateFormButton.bu_backgroundColor.value,
      icon: updateFormButton.bu_icon.value,
      type: updateFormButton.bu_type.value,
      style: updateFormButton.bu_style.value,
      fontSize: updateButtonForm.bu_fontSize.value,
      opacity: updateButtonForm.bu_opacity.value,
      iconPos: updateButtonForm.bu_iconPos.value,
      iconSize: updateButtonForm.bu_iconSize.value,
      shadowStyle: updateButtonForm.bu_shadow.value,
      buttonRadius: updateButtonForm.bu_radius.value,
      colorTransparency: updateButtonForm.bu_colInput.value,
      overlayToggle: updateButtonForm.overlayToggleU.checked,
    };

    //check if old image should be deleted
    if (updateButtonForm.bu_img_url.value === "") {
      for (let x = 0; x < buttonList.length; x++) {
        if (
          buttonList[x].docID === updateButtonForm.bu_id.value &&
          buttonList[x].backgroundImage != ""
        ) {
          deleteImg(
            "buttons",
            updateButtonForm.bu_id.value,
            buttonList[x].backgroundImage,
            hotelUID,
            uid
          );
        }
      }
    }
    //checking BUTTON TYPE
    if (buttonType == "LINK") {
      let urlValue = updateButtonForm.bu_url.value;
      if (document.getElementById("emailRadioU").checked === true) {
        urlValue = "mailto:" + urlValue;
      } else if (document.getElementById("telRadioU").checked === true) {
        urlValue = "tel:" + urlValue;
      }

      sendObj.onClick =
        "myhref('" + urlValue + " , " + updateButtonForm.bu_window.value + "')";
    } else if (buttonType == "POPUP") {
      $(".subMenuButton").removeClass("redMarked");
      sendObj.onClick = "generateContent(this)";
      sendObj.p_divColor = updateFormButton.p_divColor.value;
      // sendObj.p_divColor = updateFormButton.p_divColor.value;
      sendObj.p_text = $("#summernote").summernote("code");
      sendObj.subObj = subObjList;
      // sendObj.tabO = document.getElementsByName("p_window")[0].value;
      sendObj.summernoteBackCol =
        document.getElementsByName("p_divColor")[0].value;
    } else if (buttonType == "SPEEDDIAL") {
      sendObj.onClick = "generateSpeedDial(this)";
      sendObj.extension = updateFormButton.du_number.value;
    } else if (buttonType == "Messaging") {
      let phoneInput = document.getElementById("iNotifyNumber");
      sendObj.onClick =
        "myhref('https://wa.me/" + phoneInput.value + " " + "')";
      // removed subscribe message ?text=subscribe until we bring back inotify
    } else if (buttonType == "MAP") {
      sendObj.onClick = "generateMap(this)";
      sendObj.lat = updateButtonForm.lat.value;
      sendObj.lng = updateButtonForm.lng.value;
      sendObj.mapBgCol = document.getElementById("mapBgCol").value;
    } else if (buttonType === "FEEDBACK") {
      const questions = document.getElementsByClassName("question_holder");
      let question_list = [];
      for (let x = 0; x < questions.length; x++) {
        question_list.push(questions[x].textContent);
      }
      sendObj = { ...sendObj, ...getFeedbackSettings() };
      sendObj.questions = question_list;
    } else {
      console.alert("Not supported button type");
    }

    //checking button background image
    if (imageInput != undefined && !imageInput.type.endsWith("gif")) {
      checkImgFilePromise(imageInput)
        .then(() => {
          let storageRef = firebase
            .storage()
            .ref(
              "images/" +
                hotelUID +
                "/" +
                "button" +
                "/" +
                sendObj.name +
                "." +
                imageInput.type.replace("image/", "")
            );
          storageRef.put(imageInput).then(() => {
            //upload the image and use the full url to store it
            getURL(storageRef.location.path).then((fullPath) => {
              //upload the image and use the full url to store it
              sendObj.backgroundImage = fullPath;
              sendHttpRequest(
                "POST",
                "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateButton",
                "customer=" +
                  hotelUID +
                  "&buttonid=" +
                  langOpt +
                  "&uid=" +
                  uid +
                  "&docID=" +
                  docID +
                  "&data=" +
                  encodeURIComponent(JSON.stringify(sendObj))
              ).then(() => {
                // console.log("button has been updated");
                showButtonsSetup(sendObj);
                document.getElementById("dropdownMenuButton").textContent =
                  sendObj.name;
                setDropdown(buttonList);
                refreshPreview();
                document.getElementById("updateButtonSubmit").hidden = false;
                document.getElementById("updateButtonSubmitAnim").hidden = true;
              });
            });
          });
        })
        .catch((e) => console.log(e));
    } else {
      //keep the old image setup (image url)
      if (updateButtonForm.bu_img_url.value != "") {
        sendObj.backgroundImage = updateButtonForm.bu_img_url.value;
      } else {
        sendObj.backgroundImage = "";
      }
      sendHttpRequest(
        "POST",
        "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateButton",
        "customer=" +
          hotelUID +
          "&buttonid=" +
          langOpt +
          "&uid=" +
          uid +
          "&docID=" +
          docID +
          "&data=" +
          encodeURIComponent(JSON.stringify(sendObj))
      ).then(() => {
        document.querySelector(".buttonDD").textContent =
          updateButtonForm.bu_name.value;
        document.getElementById("dropdownMenuButton").textContent =
          sendObj.name;
        setDropdown(buttonList);
        refreshPreview();
        document.getElementById("updateButtonSubmit").hidden = false;
        document.getElementById("updateButtonSubmitAnim").hidden = true;
      });
    }

    //update button list
    buttonList[id - 1] = sendObj;
    buttonList[id - 1].docID = docID;
    //remove dropdown entries and set them again with new one
    emptyButtonDD();
  });

  document
    .getElementById("deleteButtonConfirm")
    .addEventListener("click", () => {
      deleteButton();
    });

  let bStyle = document.getElementsByName("b_style")[0];
  let bShadow = document.getElementsByName("b_shadowDiv")[0];
  bStyle.addEventListener("change", () => {
    if (bStyle.value === "2") {
      bShadow.hidden = false;
    } else {
      bShadow.hidden = true;
    }
  });
  let buStyle = document.getElementsByName("bu_style")[0];
  let buShadow = document.getElementsByName("bu_shadowDiv")[0];
  buStyle.addEventListener("change", () => {
    if (buStyle.value === "2") {
      buShadow.hidden = false;
    } else {
      buShadow.hidden = true;
    }
  });

  /** --------------------IMAGE UPLOAD EVENT LISTENER -------------------------- */

  // main background UPLOADER
  uploaderMain.addEventListener("change", (e) => {
    //get the file
    let file = e.target.files[0];

    if (file.type.endsWith("gif")) {
      showAlert(
        file.type + " " + langdata.languages[themeLang].strings["fileTypeNot"]
      );
    } else {
      checkImgFilePromise(file)
        .then(() => {
          //create a store ref
          document.getElementById("mainUploadFor").hidden = true;
          document.getElementById("mainUploadAnim").hidden = false;
          let storageRef = firebase
            .storage()
            .ref(
              "images/" +
                hotelUID +
                "/" +
                "main" +
                "." +
                file.type.replace("image/", "")
            );

          //upload file
          storageRef.put(file).then(() => {
            getURL(storageRef.location.path_).then((fullPath) => {
              let sendObj = {
                backgroundImage: fullPath,
              };
              sendHttpRequest(
                "POST",
                "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateMain",
                "customer=" +
                  hotelUID +
                  "&uid=" +
                  uid +
                  "&data=" +
                  encodeURIComponent(JSON.stringify(sendObj))
              ).then(() => {
                main.backgroundImage = fullPath;
                document.getElementById("mainUploadAnim").hidden = true;
                document.getElementById("mainUploadFor").hidden = false;
                checkMainbackgroundImage(main, hotelUID, uid);
                refreshPreview();
              });
            });
          });
        })
        .catch((e) => console.log(e));
    }
  });
  // header background UPLOADER
  uploaderHeader.addEventListener("change", (e) => {
    //get the file
    let file = e.target.files[0];
    console.log(file);
    if (file.type.endsWith("gif")) {
      showAlert(
        file.type + " " + langdata.languages[themeLang].strings["fileTypeNot"]
      );
    } else {
      checkImgFilePromise(file)
        .then(() => {
          document.getElementById("headerUploadFor").hidden = true;
          document.getElementById("headerUploadAnim").hidden = false;
          //create a store ref
          let storageRef = firebase
            .storage()
            .ref(
              "images/" +
                hotelUID +
                "/" +
                "header" +
                "." +
                file.type.replace("image/", "")
            );

          storageRef.put(file).then(() => {
            getURL(storageRef.location.path_).then((fullPath) => {
              let sendObj = {
                backgroundImage: fullPath,
              };
              sendHttpRequest(
                "POST",
                "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateHeader",
                "customer=" +
                  hotelUID +
                  "&uid=" +
                  uid +
                  "&data=" +
                  encodeURIComponent(JSON.stringify(sendObj))
              ).then(() => {
                header.backgroundImage = fullPath;
                document.getElementById("headerUploadFor").hidden = false;
                document.getElementById("headerUploadAnim").hidden = true;
                checkHeaderbackgroundImage(header, hotelUID, uid);
                refreshPreview();
              });
            });
          });
        })
        .catch((e) => console.log(e));
    }
  });

  /**--------------------DROPDOWN TYPE SELECTION  -------------------------- */

  document
    .getElementsByClassName("forText")[0]
    .addEventListener("click", () => {
      document.getElementsByName("buttonSelect")[0].textContent =
        langdata.languages[themeLang].strings["buttonList"];
    });
  document.getElementById("showLink").addEventListener("click", () => {
    document.getElementById("updateButtonForm").style.display = "none";
    showLink();
  });
  document.getElementById("showPopup").addEventListener("click", () => {
    document.getElementById("updateButtonForm").style.display = "none";
    showPopup(hotelUID);
  });
  document.getElementById("showMap").addEventListener("click", () => {
    document.getElementById("updateButtonForm").style.display = "none";
    showMap();
  });
  document.getElementById("showDial").addEventListener("click", () => {
    document.getElementById("updateButtonForm").style.display = "none";
    showDial();
  });
  document.getElementById("showNotify").addEventListener("click", () => {
    document.getElementById("updateButtonForm").style.display = "none";
    showNotify();
  });
  document.getElementById("showFeedback").addEventListener("click", () => {
    document.getElementById("updateButtonForm").style.display = "none";
    showFeedback();
  });

  /**--------------------EVENT LISTENER -------------------------- */
  document.getElementById("deleteButtMsg").addEventListener("click", () => {
    let name = updateButtonForm.bu_name.value;
    document.getElementById("deleteBtnMsg").textContent =
      langdata.languages[themeLang].strings["deleteConfirm"] +
      " " +
      name +
      " " +
      langdata.languages[themeLang].strings["btn"];
  });

  document.getElementById("pdfButton").addEventListener("click", () => {
    const formButton = document.getElementById("buttonForm");
    let buttonName = formButton.b_name.value;
    if (!buttonName) {
      showAlert(langdata.languages[themeLang].strings["uploadPdfCheckName"]);
    } else {
      $("#uploadPdfModal").modal("show");
      showPDFUploadDiv("new");
    }
  });
  document.getElementById("pdfButton2").addEventListener("click", () => {
    const updateButtonForm = document.getElementById("updateButtonForm");
    let buttonName = updateButtonForm.bu_name.value;
    if (!buttonName) {
      showAlert(langdata.languages[themeLang].strings["uploadPdfCheckName"]);
    } else {
      $("#uploadPdfModal").modal("show");
      showPDFUploadDiv("edit");
    }
  });

  document.getElementById("changeOrder").addEventListener("click", () => {
    changePosition();
  });
  document.getElementById("openIcon1").addEventListener("click", () => {
    openIconDiv("0", 1);
  });
  document.getElementById("openIcon2").addEventListener("click", () => {
    openIconDiv("0", 2);
  });
  document.getElementById("d_add").addEventListener("click", () => {
    addPhone();
  });
  document.getElementById("copyStyle").addEventListener("click", () => {
    copyStyle();
  });
  document.getElementById("copyStyle2").addEventListener("click", () => {
    copyStyle2();
  });

  document.getElementById("addMitelUser").addEventListener("click", () => {
    addUser(document.getElementById("addMitelUser").name);
    setTimeout(() => {
      document.getElementById("addUserMitel").style.display = "none";
    }, 500);
  });
  document.getElementById("addTelepoUser").addEventListener("click", () => {
    addUser(document.getElementById("addTelepoUser").name);
    setTimeout(() => {
      document.getElementById("addUserTelepo").style.display = "none";
    }, 500);
  });

  document.getElementById("addNecUser").addEventListener("click", () => {
    addUser(document.getElementById("addNecUser").name);
    setTimeout(() => {
      document.getElementById("addUserNec").style.display = "none";
    }, 500);
  });
  document.getElementById("delMitelUser").addEventListener("click", () => {
    deleteUser("mitel");
  });
  document.getElementById("delNecUser").addEventListener("click", () => {
    deleteUser("nec");
  });
  document.getElementById("delTelepoUser").addEventListener("click", () => {
    deleteUser("telepo");
  });

  // document.getElementById("loadWebRTC").addEventListener("click", () => {
  //   loadWebRTC();
  // });
  document.getElementById("showAddTelepo").addEventListener("click", () => {
    document.getElementById("addUserTelepo").style.display = "block";
  });
  document.getElementById("showAddMitel").addEventListener("click", () => {
    document.getElementById("addUserMitel").style.display = "block";
  });
  document.getElementById("showAddNec").addEventListener("click", () => {
    document.getElementById("addUserNec").style.display = "block";
  });

  document.getElementById("add_question").addEventListener("click", () => {
    addQuestion("new");
  });

  //icon preview
  document.getElementsByName("b_iconColor")[0].addEventListener("input", () => {
    document.getElementById("iconPreview").style.color =
      document.getElementsByName("b_iconColor")[0].value;
  });
  document
    .getElementsByName("b_backgroundColor")[0]
    .addEventListener("input", () => {
      document.getElementById("iconPreview").style.background =
        document.getElementsByName("b_backgroundColor")[0].value;
    });

  document
    .getElementsByName("bu_iconColor")[0]
    .addEventListener("change", () => {
      document.getElementById("iconPreview2").style.color =
        document.getElementsByName("bu_iconColor")[0].value;
    });
  document
    .getElementsByName("bu_backgroundColor")[0]
    .addEventListener("change", () => {
      document.getElementById("iconPreview2").style.background =
        document.getElementsByName("bu_backgroundColor")[0].value;
    });

  Array.from(document.getElementsByClassName("copyLang")).forEach(function (
    element
  ) {
    element.addEventListener("click", () => {
      copyAllButtonData(element.value, uid);
    });
  });

  document.getElementById("resetCmBtn").addEventListener("click", () => {
    resetContentManager(hotelUID, uid);
  });

  /**------------------------------ SETTERS  ------------------------------------ */
  //insert the buttons from DB into the dropdown
  function setDropdown(list) {
    for (let x = 0; x < list.length; x++) {
      let dropdown = document.getElementById("buttonDropdown");
      let a = document.createElement("a");
      a.classList.add("dropdown-item");
      a.addEventListener("click", () => {
        showButtonsSetup(list[x]);
      });
      a.textContent = list[x].name;
      dropdown.append(a);
    }
  }
  /**----------------------------------UPDATE FORM ------------------------------------ */
  // let appMarkers;

  //generate new form for "update" button
  function showButtonsSetup(button) {
    document.getElementsByClassName("forText")[0].textContent =
      langdata.languages[themeLang].strings["buttonType"];
    let docID = button.docID;
    let deleteButton = document.createElement("input");
    let imgDiv = document.createElement("div");

    //show update form
    let buttonForm = document.getElementById("buttonForm");
    let updateButtonForm = document.getElementById("updateButtonForm");

    //empty hidden img url field
    updateButtonForm.bu_img_url.value = "";

    let buttonDD = document.querySelector(".buttonDD");
    buttonDD.textContent = button.name;

    updateButtonForm.style.display = "block";
    buttonForm.style.display = "none";
    document.getElementById("iconPreview").textContent = "";

    //get input fields
    let name = document.getElementsByName("bu_name")[0];
    let type = document.getElementsByName("bu_type")[0];
    let fontColor = document.getElementsByName("bu_fontColor")[0];
    let backgroundColor = document.getElementsByName("bu_backgroundColor")[0];
    let icon = document.getElementsByName("bu_icon")[0];
    let iconColor = document.getElementsByName("bu_iconColor")[0];
    let buttonURL = document.getElementsByName("bu_url")[0];
    let buttonID = document.getElementsByName("bu_id")[0];
    let style = document.getElementsByName("bu_style")[0];
    let hiddenIMGfield = document.getElementsByName("bu_img")[0];
    let iconPreview = document.getElementById("iconPreview2");
    let posID = document.getElementsByName("bu_posID")[0];
    let fontSize = document.getElementsByName("bu_fontSize")[0];
    let opacityField = document.getElementsByName("bu_amountInput")[0];
    let opacity = document.getElementsByName("bu_opacity")[0];
    let font = document.getElementsByName("bu_font")[0];
    let iconSize = document.getElementsByName("bu_iconSize")[0];
    let phoneNum = document.getElementsByName("du_number")[0];
    let fontFamily = document.getElementsByName("bu_font")[0];
    let shadowStyle = document.getElementsByName("bu_shadow")[0];
    let emailRadio = document.getElementById("emailRadioU");
    let telRadio = document.getElementById("telRadioU");
    let urlRadio = document.getElementById("urlRadioU");
    let borderRadius = document.getElementsByName("bu_radius")[0];
    let amountRadius = document.getElementsByName("bu_amountRadius")[0];
    let colOpacity = document.getElementsByName("bu_colOpacity")[0];
    let colOpacityInput = document.getElementsByName("bu_colInput")[0];
    let overlayToggle = document.getElementsByName("overlayToggleU")[0];
    let mapBgCol = document.getElementById("mapBgCol");

    //image delete button
    deleteButton.type = "button";
    deleteButton.classList.add("blackButton2");
    deleteButton.setAttribute(
      "onClick",
      "deleteImg('buttons" +
        langOpt +
        "' ,'" +
        docID +
        "','" +
        button.backgroundImage +
        "','" +
        hotelUID +
        "','" +
        uid +
        "')"
    );

    let tab;
    if (
      button.onClick.slice(-3, -2) === "1" ||
      button.onClick.slice(-3, -2) === "2"
    ) {
      tab = button.onClick.slice(-3, -2);
    }

    if (parseInt(tab) === 1) {
      document.getElementsByName("bu_window")[0].value = "1";
    } else {
      document.getElementsByName("bu_window")[0].value = "2";
    }

    //set value
    let index = button.onClick.indexOf(",");
    let corWeb = button.onClick.slice(0, index);
    buttonURL.value = corWeb.substring(8, button.onClick.length - 2);

    // set radio buttons and remove prefix
    let tel = corWeb.match(/tel:/g);
    let mailto = corWeb.match(/mailto:/g);
    if (tel) {
      telRadio.checked = true;
      buttonURL.value = buttonURL.value.slice(4, -1);
      setDestinationText("telephone", "update");
    } else if (mailto) {
      emailRadio.checked = true;
      buttonURL.value = buttonURL.value.slice(7, -1);
      setDestinationText("emailAdd", "update");
    } else {
      urlRadio.checked = true;
      setDestinationText("webUrl", "update");
    }

    name.value = button.name;
    type.value = button.type;
    fontColor.value = button.fontColor;
    backgroundColor.value = button.backgroundColor;
    iconPreview.innerHTML = button.icon;
    icon.value = button.icon;
    if (button.icon) {
      document.getElementById("bu_iconHide").style.display = "block";
    } else {
      document.getElementById("bu_iconHide").style.display = "none";
    }

    iconColor.value = button.iconColor;
    buttonID.value = docID;
    style.value = button.style;
    hiddenIMGfield.value = button.backgroundImage;
    posID.value = button.id;
    fontSize.value = button.fontSize;
    opacityField.value = button.opacity;
    opacity.value = button.opacity;
    font.value = button.font;
    summernoteBackCol = button.summernoteBackCol;
    mapBgCol.value = button.mapBgCol;
    if (button.overlayToggle !== true && button.overlayToggle !== false) {
      overlayToggle.checked = true;
    } else {
      overlayToggle.checked = button.overlayToggle;
    }

    // default values for newly added styles that old users dont have
    if (!button.iconSize) {
      iconSize.value = "40";
    } else {
      iconSize.value = button.iconSize;
    }

    if (!button.shadowStyle) {
      shadowStyle.value = "2";
    } else {
      shadowStyle.value = button.shadowStyle;
    }

    if (!button.colorTransparency && !button.opacity) {
      colOpacity.value = "100";
      colOpacityInput.value = "100";
    } else if (button.colorTransparency) {
      colOpacity.value = button.colorTransparency;
      colOpacityInput.value = button.colorTransparency;
    } else if (button.opacity) {
      // cover old user opacity
      colOpacity.value = button.opacity;
      colOpacityInput.value = button.opacity;
    }

    if (!button.buttonRadius) {
      borderRadius.value = "5";
      amountRadius.value = "5";
    } else {
      borderRadius.value = button.buttonRadius;
      amountRadius.value = button.buttonRadius;
    }

    let buShadow = document.getElementsByName("bu_shadowDiv")[0];
    if (button.style === "2") {
      buShadow.hidden = false;
    } else {
      buShadow.hidden = true;
    }

    // checks if font has been deleted and sets default if not deleted uses right font
    let defaultFont = "Arial";
    Array.from(document.querySelector("#b_font").options).forEach(function (
      option_element
    ) {
      let option_value = option_element.value;

      if (option_value === button.font) {
        defaultFont = button.font;
      }
    });
    fontFamily.value = defaultFont;
    //

    if (button.extension === undefined) {
      phoneNum.value = "";
    } else {
      phoneNum.value = button.extension;
    }

    document.getElementById("iconPreview2").style.backgroundColor =
      button.backgroundColor;
    document.getElementById("iconPreview2").style.color = button.iconColor;

    //remove image preview from previous button
    if (document.getElementById("updatePreview") != null) {
      document.getElementById("updatePreview").remove();
    }

    if (document.getElementsByClassName("infoDiv")[0] != undefined) {
      document.getElementById("bu_url_div").style.display = "block";
      deleteInfo();
    }

    //check if BG image is set
    if (button.backgroundImage != "") {
      if (updateButtonForm.bu_img_url) {
        updateButtonForm.bu_img_url.value = button.backgroundImage;
      } else {
        updateButtonForm.bu_img_url.value = button.backgroundImage;
      }
      document.getElementById("bu_backgroundImageL").style.width = "24%";
      document.getElementById("bgUTransHide").style.display = "none";
      document.getElementById("overlayUHide").style.display = "block";
      document.getElementById("bgColTogg").textContent =
        langdata.languages[themeLang].strings["overlayBGCol"];
    } else {
      updateButtonForm.bu_img_url.value = "";
      document.getElementById("bgUTransHide").style.display = "block";
      document.getElementById("overlayUHide").style.display = "none";
      document.getElementById("bgColTogg").textContent =
        langdata.languages[themeLang].strings["backgroundColor"];
    }

    //TYPE CHECK
    if (button.type == "POPUP") {
      hideButtonURL(); //remove redirection URL
      showInfo(hotelUID);
      hideMap();
      hideSpeed();
      hideNotify();

      let buttonForm = document.getElementById("updateButtonForm");
      let subButton = document.getElementById("deleteButtMsg");
      let text = document.getElementById("summernote");
      let divColor = document.getElementsByName("p_divColor")[0];
      let popup = document.getElementById("popupDetails");

      popup.style.display = "block";
      buttonForm.insertBefore(popup, subButton);

      text.innerHTML = button.p_text;
      divColor.value = button.p_divColor;

      subObjList = undefined;
      subObjList = button.subObj;
      let firstsubButton = true;
      for (let x = 0; x < subObjList.length; x++) {
        //console.log(button.subObj);
        if (subObjList[x].type != "DELETED") {
          subButtonCreated(x);
          document.getElementById("subButtonDD").value = "";
          document.getElementById("typeSelectionDD").style.display = "none";
          document.getElementById("subButTypeText").style.display = "none";
          document.getElementById("subButTypeT").style.display = "none";

          //remove doule DOM entries (summernote bug)
          setTimeout(() => {
            if (document.getElementById("subMenu" + x) !== null) {
              document.getElementById("subMenu" + x).remove();
            }
          }, 1000);
        }
      }
    } else if (button.type === "SPEEDDIAL") {
      hideMap();
      hideNotify();
      hideButtonURL();
      hidePopup();

      if (!trial || trial === "false") {
        hideSpeed();
        let buttonForm = document.getElementById("updateButtonForm");
        document.getElementById("hideUpSpeed").style.display = "none";
        buttonForm.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 phoneList = document.getElementById("speedDialList");
        removeAllChildNodes(phoneList);
        let speedDialDiv = document.getElementById("speedDialSection");
        let buttonForm = document.getElementById("updateButtonForm");
        let addButton = document.getElementById("deleteButtMsg");

        // speedDialDiv.style.display = "block";
        document.getElementById("hideUpSpeed").style.display = "block";
        buttonForm.insertBefore(speedDialDiv, addButton);

        if (button.callNumbers) {
          button.callNumbers.forEach((callNum) => {
            renderNewPhone(callNum);
          });
        }
      }
    } else if (button.type == "MAP") {
      hideButtonURL();
      hideSpeed();
      hideNotify();
      hidePopup();
      document.getElementsByName("b_type")[0].value = "MAP";

      let searchInput = document.createElement("input");

      let lat = document.createElement("input");
      let lng = document.createElement("input");
      let updateButtonForm = document.getElementById("updateButtonForm");
      let updateButton = document.getElementById("deleteButtMsg");

      let mapDetails = document.getElementById("mapDetails");

      //check if a map details is already there
      if (document.getElementById("mapDetails") != null) {
        document.getElementById("mapDetails").remove();
      }

      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");

      lat.value = parseFloat(button.lat);
      lng.value = parseFloat(button.lng);

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

      // mapDetails.style.display = "block";
      updateButtonForm.insertBefore(mapDetails, updateButton);

      const map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: parseFloat(button.lat), lng: parseFloat(button.lng) },
        zoom: 13,
      });

      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(71, 71),
            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();
          }
        });
      }, 1000);

      document.getElementById("mapDetails").style.display = "block";
    } else if (button.type === "Messaging") {
      hideButtonURL();
      hideMap();
      hideSpeed();
      hidePopup();
      document.getElementById("iNotify").style.display = "block";

      let addButton = document.getElementById("deleteButtMsg");
      let buttonForm = document.getElementById("updateButtonForm");
      let iNotify = document.getElementById("iNotifyDetails");
      let b_url_div = document.getElementById("bu_url_div");

      let phoneInput = document.getElementById("iNotifyNumber");

      phoneInput.value = button.onClick.slice(22, -2);

      iNotify.style.display = "block";
      buttonForm.insertBefore(iNotify, addButton);
    } else if (button.type == "LINK") {
      hideNotify();
      hideSpeed();
      hideMap();
      hidePopup();
      document.getElementById("bu_url_div").style.display = "block";
    } else if (button.type === "FEEDBACK") {
      hideNotify();
      hideSpeed();
      hideMap();
      hideButtonURL();
      hidePopup();

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

      if (feedbackDiv.style.display === "none") {
        feedbackDiv.style.display = "block";
        buttonForm.insertBefore(feedbackDiv, addButton);

        for (let x = 0; x < button.questions.length; x++) {
          addQuestion("update", button.questions[x]);
        }

        setFeedbackSettings(button);
      }
    }
    document.getElementsByName("bu_backgroundImage")[0].value = "";
    renderUpdateButtonPreview(document.getElementById("updateButtonForm"));
  }

  //delete the current selected button
  function deleteButton() {
    let updateButtonForm = document.getElementById("updateButtonForm");
    let docID = updateButtonForm.bu_id.value;
    let posID = updateButtonForm.bu_posID.value;
    let sendList = [];

    for (let x = 0; x < buttonList.length; x++) {
      if (posID < buttonList[x].id) {
        buttonList[x].id = buttonList[x].id - 1;
      }

      if (posID - 1 != x) {
        sendList.push(buttonList[x].docID);
      }
    }

    document.getElementById("deleteButtonConfirm").hidden = true;
    document.getElementById("deleteButtonConfirmAnim").hidden = false;

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

  document.getElementById("buttonTypeDD").addEventListener("click", () => {
    showAddButton();
    subObjList = [];
  });

  //show add button form and type dropdown (new button)
  function showAddButton() {
    // reset icon preview
    let iconParent = document.getElementById("iconPreview");
    iconParent.style.background = "black";
    iconParent.style.color = "white";
    iconParent.innerHTML = "";

    // save id value and set again after form reset
    let type = document.getElementsByName("b_type")[0].value;
    document.getElementById("buttonForm").reset();
    document.getElementsByName("b_type")[0].value = type;
    let posID = document.getElementsByName("b_id")[0];
    posID.value = buttonList.length + 1;
  }

  //show overlay and PDF div
  function showPDFUploadDiv(type) {
    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);
        storageRef
          .put(file)
          .then(() => {
            clearInterval(progress);

            getURL(storageRef.location.path).then(function (resp) {
              pdfURLinput.value = resp;
              innerDiv.style.width = "100%";
              setURL();
            });
          })
          .then(() => {
            let value;
            if (type === "new") {
              value = "new";
              document.getElementById("urlRadio").checked = true;
            } else if (type === "edit") {
              value = "update";
              document.getElementById("urlRadioU").checked = true;
            }
            setDestinationText("webUrl", value);
          });
      } else {
        showAlert(langdata.languages[themeLang].strings["fileTypeNot"]);
      }
    });
  }

  function changePosition() {
    let buttonPositionDiv = document.getElementById("displayButtonPosition");
    let setButton = document.getElementById("applyPositions");
    setButton.setAttribute("onClick", "savePosition('" + hotelUID + "')");

    if (document.getElementById("buttonPositions")) {
      document.getElementById("buttonPositions").remove();
    }

    let ol = document.createElement("ol");
    ol.id = "buttonPositions";
    ol.classList.add("example");
    ol.style.paddingRight = "10px";

    for (let x = 0; x < buttonList.length; x++) {
      let li = document.createElement("li");
      li.classList.add("change-item");
      let hiddenDocId = document.createElement("input");
      hiddenDocId.type = "hidden";
      hiddenDocId.value = buttonList[x].docID;
      li.textContent = buttonList[x].name;
      li.append(hiddenDocId);
      ol.append(li);
    }
    $(function () {
      $("ol.example").sortable();
    });
    buttonPositionDiv.append(ol);
  }

  /** --------------------ICON SECTION -------------------------- */
  // save the id in global in order to remember if we are in add or update button list
  let savedFormID;

  // icon type change
  let iconSelectionD = document.getElementById("iconSelectionD");
  iconSelectionD.addEventListener("change", () => {
    openIconDiv(iconSelectionD.value, savedFormID);
  });

  // open icon div
  function openIconDiv(iconID, formID) {
    savedFormID = formID;
    let iconDiv = document.getElementById("iconDiv");
    // remove previous appended icons
    removeAllChildNodes(iconDiv);
    let iconsToAppend = document.createElement("div");
    let parsedIconID = parseInt(iconID);
    // parse icons
    let icons = JSON.parse(localStorage.getItem("icons"));
    // get icon collection according to id
    for (let x = 0; x < icons[parsedIconID][iconID].length; x++) {
      let svgDiv = document.createElement("div");
      svgDiv.classList.add("col-2", "svg");
      svgDiv.style.maxWidth = "10%";
      svgDiv.setAttribute("onClick", "setIcon(this, " + savedFormID + ")");
      let svg = icons[parsedIconID][iconID][x].svg;
      svgDiv.innerHTML = svg;
      iconsToAppend.append(svgDiv);
    }
    // add class to icons
    iconsToAppend.classList.add("row");
    iconsToAppend.style.margin = "auto";
    iconsToAppend.style.justifyContent = "center";
    //appending
    iconDiv.append(iconsToAppend);
  }

  //add phone into the list and empty the form
  function addPhone() {
    let phoneName = document.getElementsByName("d_name")[0];
    let phoneNumber = document.getElementsByName("d_number")[0];
    let icon = document.getElementById("iconInput3");

    if (phoneName.value == "" || phoneNumber.value == "" || icon == "") {
      alert("All Speed Dial properties are required");
    } else {
      renderNewPhone({
        extension: phoneNumber.value,
        name: phoneName.value,
        svg: icon.value,
      });
    }
  }

  function renderNewPhone(obj) {
    let speedDialList = document.getElementById("speedDialList");
    //create
    let numberDiv = document.createElement("div");
    let innerNumber = document.createElement("div");
    let innerName = document.createElement("div");
    let innerIcon = document.createElement("div");
    let p = document.createElement("p");

    innerName.textContent = obj.name;
    innerNumber.textContent = obj.extension;
    innerIcon.innerHTML = obj.svg;
    p.innerHTML =
      '<svg xmlns="http://www.w3.org/2000/svg" style="width:40px;height:40px;" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16"><path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/></svg>';

    innerName.style.display = "inline-block";
    innerNumber.style.display = "inline-block";
    innerName.style.padding = "5px";
    innerNumber.style.padding = "5px";
    innerIcon.style.width = "20%";
    innerIcon.style.marginLeft = "40%";
    p.classList.add("deleteIt");

    numberDiv.setAttribute("phoneName", obj.name);
    numberDiv.setAttribute("phoneNumber", obj.extension);
    numberDiv.setAttribute("phoneIcon", obj.svg);

    numberDiv.classList.add("w30", "phone-item");
    numberDiv.setAttribute("onclick", "removeEle(this)");

    numberDiv.append(innerName);
    numberDiv.append(innerNumber);
    numberDiv.append(innerIcon);
    numberDiv.append(p);

    speedDialList.append(numberDiv);

    setTimeout(() => {
      document.getElementsByName("d_name")[0].value = "";
      document.getElementsByName("d_number")[0].value = "";
      document.getElementById("iconInput3").value = "";
      document.getElementById("iconPreview3").innerHTML = "";
    }, 500);
  }

  function copyStyle() {
    let iconDiv = document.getElementById("copyStyleDiv");
    removeAllChildNodes(iconDiv);

    for (let x = 0; x < buttonList.length; x++) {
      let btn = document.createElement("input");
      btn.type = "button";
      btn.value = buttonList[x].name;
      btn.addEventListener("click", () => {
        copyThisStyle(x);
        $("#copyStyleModal").modal("hide");
      });
      iconDiv.append(btn);
      btn.classList.add("copyStyleBtn");
    }
  }

  function copyStyle2() {
    let iconDiv = document.getElementById("copyStyleDiv");
    removeAllChildNodes(iconDiv);

    for (let x = 0; x < buttonList.length; x++) {
      let btn = document.createElement("input");
      btn.type = "button";
      btn.value = buttonList[x].name;
      if (
        document.getElementsByName("bu_name")[0].value === buttonList[x].name
      ) {
        btn.hidden = true;
      }
      btn.addEventListener("click", () => {
        copyThisStyle2(x);
        $("#copyStyleModal").modal("hide");
      });
      iconDiv.append(btn);
      btn.classList.add("copyStyleBtn");
    }
  }

  function copyThisStyle(id) {
    buttonForm.b_icon.value = buttonList[id].icon;
    buttonForm.b_iconSize.value = buttonList[id].iconSize;
    buttonForm.b_iconPos.value = buttonList[id].iconPos;
    buttonForm.b_style.value = buttonList[id].style;
    buttonForm.b_iconColor.value = buttonList[id].iconColor;
    buttonForm.b_font.value = buttonList[id].font;
    buttonForm.b_fontColor.value = buttonList[id].fontColor;
    buttonForm.b_fontSize.value = buttonList[id].fontSize;
    buttonForm.b_backgroundColor.value = buttonList[id].backgroundColor;
    buttonForm.b_opacity.value = buttonList[id].opacity;
    buttonForm.b_amountInput.value = buttonList[id].opacity;
    buttonForm.b_shadow.value = buttonList[id].shadowStyle;
    buttonForm.overlayToggle.checked = buttonList[id].overlayToggle;

    if (buttonList[id].buttonRadius) {
      buttonForm.b_amountRadius.value = buttonList[id].buttonRadius;
      buttonForm.b_radius.value = buttonList[id].buttonRadius;
    } else {
      buttonForm.b_amountRadius.value = "5";
      buttonForm.b_radius.value = "5";
    }
    if (buttonList[id].colorTransparency) {
      buttonForm.b_colOpacity.value = buttonList[id].colorTransparency;
      buttonForm.b_colInput.value = buttonList[id].colorTransparency;
    } else if (buttonList[id].opacity) {
      // cover old user opacity
      buttonForm.b_colOpacity.value = buttonList[id].opacity;
      buttonForm.b_colInput.value = buttonList[id].opacity;
      //
    }

    document.getElementById("iconPreview").innerHTML = buttonList[id].icon;
    document.getElementById("iconPreview").style.color =
      buttonList[id].iconColor;
    document.getElementById("iconPreview").style.background =
      buttonList[id].backgroundColor;

    let bShadow = document.getElementsByName("b_shadowDiv")[0];
    if (buttonList[id].style == "2") {
      bShadow.hidden = false;
    }

    let event = new Event("change");
    buttonForm.dispatchEvent(event);
  }

  function copyThisStyle2(id) {
    updateButtonForm.bu_opacity.value = buttonList[id].opacity;
    updateButtonForm.bu_icon.value = buttonList[id].icon;
    updateButtonForm.bu_fontSize.value = buttonList[id].fontSize;
    updateButtonForm.bu_style.value = buttonList[id].style;
    updateButtonForm.bu_backgroundColor.value = buttonList[id].backgroundColor;
    updateButtonForm.bu_iconColor.value = buttonList[id].iconColor;
    updateButtonForm.bu_fontColor.value = buttonList[id].fontColor;
    updateButtonForm.bu_font.value = buttonList[id].font;
    updateButtonForm.bu_iconPos.value = buttonList[id].iconPos;
    updateButtonForm.bu_iconSize.value = buttonList[id].iconSize;
    updateButtonForm.bu_amountInput.value = buttonList[id].opacity;
    updateButtonForm.bu_shadow.value = buttonList[id].shadowStyle;
    updateButtonForm.overlayToggleU.checked = buttonList[id].overlayToggle;

    if (buttonList[id].buttonRadius) {
      updateButtonForm.bu_radius.value = buttonList[id].buttonRadius;
      updateButtonForm.bu_amountRadius.value = buttonList[id].buttonRadius;
    } else {
      updateButtonForm.bu_radius.value = "5";
      updateButtonForm.bu_amountRadius.value = "5";
    }
    if (buttonList[id].colorTransparency) {
      updateButtonForm.bu_colOpacity.value = buttonList[id].colorTransparency;
      updateButtonForm.bu_colInput.value = buttonList[id].colorTransparency;
    } else if (buttonList[id].opacity) {
      // cover old user opacity
      updateButtonForm.bu_colOpacity.value = buttonList[id].opacity;
      updateButtonForm.bu_colInput.value = buttonList[id].opacity;
      //
    }

    document.getElementById("iconPreview2").innerHTML = buttonList[id].icon;
    document.getElementById("iconPreview2").style.color =
      buttonList[id].iconColor;
    document.getElementById("iconPreview2").style.background =
      buttonList[id].backgroundColor;

    let buShadow = document.getElementsByName("bu_shadowDiv")[0];
    if (buttonList[id].style === "2") {
      buShadow.hidden = false;
    }

    renderUpdateButtonPreview(updateButtonForm);
  }

  buttonForm.addEventListener("change", () => {
    let name = buttonForm.b_name.value;
    let icon = buttonForm.b_icon.value;
    let iconSize = buttonForm.b_iconSize.value;
    let iconPos = buttonForm.b_iconPos.value;
    let style = buttonForm.b_style.value;
    let iconColor = buttonForm.b_iconColor.value;
    let font = buttonForm.b_font.value;
    let fontColor = buttonForm.b_fontColor.value;
    let fontSize = buttonForm.b_fontSize.value;
    let backgroundColor = buttonForm.b_backgroundColor.value;
    let opacity = buttonForm.b_opacity.value;
    let shadowStyle = buttonForm.b_shadow.value;
    let buttonRadius = buttonForm.b_radius.value;
    let colorTransparency = buttonForm.b_colOpacity.value;
    let overlayToggle = buttonForm.overlayToggle.checked;

    let btnDiv = document.createElement("div");
    let subbtnDiv = document.createElement("div");
    let btnP = document.createElement("p");
    let img = document.createElement("img");

    img.id = "addPreviewImage";

    //get row / bodyDiv div
    let bodyDiv = document.getElementById("buttonPreview");

    //set icon and font
    if (iconPos === "2") {
      btnP.innerHTML =
        "<span style='font-Family: " +
        font +
        ";font-Size:" +
        fontSize +
        "px" +
        ";color:" +
        fontColor +
        "'>" +
        name +
        "</span>" +
        "<span id=btnPP" +
        " style=' display: block;color:" +
        iconColor +
        "'>" +
        icon +
        "</span>";
    } else {
      btnP.innerHTML =
        "<span id=btnPP" +
        " style=' display: block;color:" +
        iconColor +
        "'>" +
        icon +
        "</span>" +
        "<span style='font-Family: " +
        font +
        ";font-Size:" +
        fontSize +
        "px" +
        ";color:" +
        fontColor +
        "'>" +
        name +
        "</span>";
    }

    btnP.style.color = fontColor;
    subbtnDiv.style.borderRadius = buttonRadius + "%";

    // upload & set backgroundImage
    if (document.getElementsByName("b_backgroundImage")[0].files[0]) {
      let file = document.getElementsByName("b_backgroundImage")[0].files[0];
      if (file.type.endsWith("gif")) {
        showAlert(langdata.languages[themeLang].strings["fileTypeNot"]);
      } else {
        document.getElementById("b_backgroundImageL").style.width = "24%";
        document.getElementById("deleteAddImgPreview").style.display = "inline";
        if (overlayToggle) {
          let rgbaCol = convertToRGB(backgroundColor, 25);
          subbtnDiv.style.backgroundImage =
            `linear-gradient(rgba${rgbaCol}, rgba${rgbaCol}), url('` +
            URL.createObjectURL(file) +
            "')";
          document.getElementById("bgColToHide").style.display = "block";
        } else {
          subbtnDiv.style.backgroundImage =
            "url(" + URL.createObjectURL(file) + ")";
          document.getElementById("bgColToHide").style.display = "none";
        }
        subbtnDiv.style.backgroundSize = "cover";
        document.getElementById("bgTransHide").style.display = "none";
        document.getElementById("overlayHide").style.display = "block";
        document.getElementById("bgColTog").textContent =
          langdata.languages[themeLang].strings["overlayBGCol"];
      }
    }

    //3D Button effect
    if (style === "2") {
      if (shadowStyle === "1") {
        subbtnDiv.style.boxShadow =
          "rgba(255, 255, 255, 0.2) -1px -1px 10px, rgba(0, 0, 0, 0.6) 3px 3px 5px";
        subbtnDiv.setAttribute("class", "threed_buttonShadow1");
      } else if (shadowStyle === "2") {
        subbtnDiv.style.boxShadow =
          "rgba(255, 255, 255, 0.2) -1px -1px 10px, rgba(0, 0, 0, 0.6) 6px 6px 8px";
        subbtnDiv.setAttribute("class", "threed_buttonShadow2");
      } else if (shadowStyle === "3") {
        subbtnDiv.style.boxShadow =
          "rgba(255, 255, 255, 0.2) -1px -1px 10px, rgba(0, 0, 0, 0.6) 9px 9px 10px";
        subbtnDiv.setAttribute("class", "threed_buttonShadow2");
      } else {
        subbtnDiv.style.boxShadow =
          "rgba(255, 255, 255, 0.2) -1px -1px 10px, rgba(0, 0, 0, 0.6) 12px 12px 10px";
        subbtnDiv.setAttribute("class", "threed_buttonShadow3");
      }
    }

    if (opacity != "") {
      subbtnDiv.style.opacity = opacity + "%";
    }

    btnDiv.classList.add("buttonPreview");
    subbtnDiv.classList.add("subbuttonPreview");

    // remove elements
    while (bodyDiv.firstChild) {
      bodyDiv.removeChild(bodyDiv.firstChild);
    }

    let split = document.getElementsByName("split")[0].value;
    if (split === "1") {
      subbtnDiv.style.width = "50%";
    } else if (split === "2") {
      subbtnDiv.style.width = "30%";
    } else {
      subbtnDiv.style.width = "20%";
    }

    // background colour opacity
    if (colorTransparency) {
      let colWithTrans = convertToRGB(backgroundColor, colorTransparency);
      subbtnDiv.style.backgroundColor = "rgba" + colWithTrans;
    } else {
      subbtnDiv.style.backgroundColor = backgroundColor; //background color
    }

    // append elements
    subbtnDiv.appendChild(btnP);
    btnDiv.appendChild(subbtnDiv);
    subbtnDiv.append(img);
    bodyDiv.appendChild(btnDiv);

    if (document.getElementById("btnPP").childNodes[0]) {
      document.getElementById("btnPP").childNodes[0].style.height = iconSize;
    }
  });

  const convertToRGB = (hex, opacity) => {
    let newOpacity = parseInt(opacity) / 100;
    let newHex = hex.substring(1);
    let aRgbHex = newHex.match(/.{1,2}/g);
    let a = parseInt(aRgbHex[0], 16);
    let b = parseInt(aRgbHex[1], 16);
    let c = parseInt(aRgbHex[2], 16);

    var aRgb = `(${a}, ${b}, ${c}, ${newOpacity})`;
    return aRgb;
  };

  updateButtonForm.addEventListener("change", () => {
    renderUpdateButtonPreview(updateButtonForm);
  });

  function renderUpdateButtonPreview(updateButtonForm) {
    let name = updateButtonForm.bu_name.value;
    let icon = updateButtonForm.bu_icon.value;
    let iconSize = updateButtonForm.bu_iconSize.value;
    let iconPos = updateButtonForm.bu_iconPos.value;
    let style = updateButtonForm.bu_style.value;
    let iconColor = updateButtonForm.bu_iconColor.value;
    let font = updateButtonForm.bu_font.value;
    let fontColor = updateButtonForm.bu_fontColor.value;
    let fontSize = updateButtonForm.bu_fontSize.value;
    let backgroundColor = updateButtonForm.bu_backgroundColor.value;
    let opacity = updateButtonForm.bu_opacity.value;
    let shadowStyle = updateButtonForm.bu_shadow.value;
    let buttonRadius = updateButtonForm.bu_radius.value;
    let colorTransparency = updateButtonForm.bu_colOpacity.value;
    let overlayToggle = updateButtonForm.overlayToggleU.checked;

    let btnDiv = document.createElement("div");
    let subbtnDiv = document.createElement("div");
    let btnP = document.createElement("p");

    //get row / bodyDiv div
    let bodyDiv = document.getElementById("updateButtonPreview");
    document.getElementById("deleteAddImgPreview2").style.display = "none";

    //set icon and font
    if (iconPos === "2") {
      btnP.innerHTML =
        "<span style='font-Family: " +
        font +
        ";font-Size:" +
        fontSize +
        "px" +
        ";color:" +
        fontColor +
        "'>" +
        name +
        "</span>" +
        "<span id=btnPPP" +
        " style=' display: block; color:" +
        iconColor +
        "'>" +
        icon +
        "</span>";
    } else {
      btnP.innerHTML =
        "<span id=btnPPP" +
        " style='display: block;color:" +
        iconColor +
        "'>" +
        icon +
        "</span>" +
        "<span style='font-Family: " +
        font +
        ";font-Size:" +
        fontSize +
        "px" +
        ";color:" +
        fontColor +
        "'>" +
        name +
        "</span>";
    }

    btnP.style.color = fontColor;
    subbtnDiv.style.borderRadius = buttonRadius + "%";

    //check & set backgroundImage
    if (updateButtonForm.bu_img_url.value != "") {
      document.getElementById("deleteAddImgPreview2").style.display = "inline";
      if (overlayToggle) {
        let rgbaCol = convertToRGB(backgroundColor, 25);
        subbtnDiv.style.backgroundImage =
          `linear-gradient(rgba${rgbaCol}, rgba${rgbaCol}), url('` +
          updateButtonForm.bu_img_url.value +
          "')";
        // subbtnDiv.style.opacity = "0.75";
        document.getElementById("bggColToHide").style.display = "block";
      } else {
        subbtnDiv.style.backgroundImage =
          "url(" + updateButtonForm.bu_img_url.value + ")";
        document.getElementById("bggColToHide").style.display = "none";
      }
      subbtnDiv.style.backgroundSize = "cover";
    }

    //upload & set backgroundImage
    if (document.getElementsByName("bu_backgroundImage")[0].files[0]) {
      let file = document.getElementsByName("bu_backgroundImage")[0].files[0];
      if (file.type.endsWith("gif")) {
        showAlert(langdata.languages[themeLang].strings["fileTypeNot"]);
      } else {
        document.getElementById("bu_backgroundImageL").style.width = "24%";
        document.getElementById("deleteAddImgPreview2").style.display =
          "inline";
        if (overlayToggle) {
          let rgbaCol = convertToRGB(backgroundColor, 25);
          subbtnDiv.style.backgroundImage =
            `linear-gradient(rgba${rgbaCol}, rgba${rgbaCol}), url('` +
            URL.createObjectURL(file) +
            "')";
          document.getElementById("bggColToHide").style.display = "block";
        } else {
          subbtnDiv.style.backgroundImage =
            "url(" + URL.createObjectURL(file) + ")";
          document.getElementById("bggColToHide").style.display = "none";
        }

        subbtnDiv.style.backgroundSize = "cover";
        document.getElementById("bgUTransHide").style.display = "none";
        document.getElementById("overlayUHide").style.display = "block";
        document.getElementById("bgColTogg").textContent =
          langdata.languages[themeLang].strings["overlayBGCol"];
      }
    }

    //3D Button effect
    if (style === "2") {
      if (shadowStyle === "1") {
        subbtnDiv.style.boxShadow =
          "rgba(255, 255, 255, 0.2) -1px -1px 10px, rgba(0, 0, 0, 0.6) 3px 3px 5px";
        subbtnDiv.setAttribute("class", "threed_buttonShadow1");
      } else if (shadowStyle === "2") {
        subbtnDiv.style.boxShadow =
          "rgba(255, 255, 255, 0.2) -1px -1px 10px, rgba(0, 0, 0, 0.6) 6px 6px 8px";
        subbtnDiv.setAttribute("class", "threed_buttonShadow2");
      } else if (shadowStyle === "3") {
        subbtnDiv.style.boxShadow =
          "rgba(255, 255, 255, 0.2) -1px -1px 10px, rgba(0, 0, 0, 0.6) 9px 9px 10px";
        subbtnDiv.setAttribute("class", "threed_buttonShadow2");
      } else {
        subbtnDiv.style.boxShadow =
          "rgba(255, 255, 255, 0.2) -1px -1px 10px, rgba(0, 0, 0, 0.6) 12px 12px 10px";
        subbtnDiv.setAttribute("class", "threed_buttonShadow3");
      }
    }

    btnDiv.classList.add("buttonPreview");
    subbtnDiv.classList.add("subbuttonPreview");

    let split = document.getElementsByName("split")[0].value;
    if (split === "1") {
      subbtnDiv.style.width = "50%";
    } else if (split === "2") {
      subbtnDiv.style.width = "30%";
    } else {
      subbtnDiv.style.width = "20%";
    }

    // background colour opacity
    if (colorTransparency) {
      let colWithTrans = convertToRGB(backgroundColor, colorTransparency);
      subbtnDiv.style.backgroundColor = "rgba" + colWithTrans;
    } else {
      subbtnDiv.style.backgroundColor = backgroundColor; //background color
    }

    // remove elements
    while (bodyDiv.firstChild) {
      bodyDiv.removeChild(bodyDiv.firstChild);
    }

    // append elements
    subbtnDiv.appendChild(btnP);
    btnDiv.appendChild(subbtnDiv);
    bodyDiv.appendChild(btnDiv);

    if (document.getElementById("btnPPP").childNodes[0]) {
      document.getElementById("btnPPP").childNodes[0].style.height = iconSize;
    }
  }

  function loadDefaultTemplates(id) {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/getTemplate",
      "customer=" + hotelUID + "&uid=" + uid + "&templateid=" + id
    );
  }

  // Saves imported fonts on firebase
  document.getElementById("importFont").addEventListener("click", () => {
    let addedFont = document.getElementsByName("importFont")[0].value;
    let fontURL = document.getElementsByName("importFontURL")[0].value;

    // checks if both fields are filled and link is formatted properly to pass check
    if (
      fontURL.endsWith('"stylesheet">') &&
      addedFont.length !== 0 &&
      fontURL.length !== 0
    ) {
      let sendObj = { [addedFont]: fontURL };
      sendHttpRequest(
        "POST",
        "https://us-central1-seteraguestcloud.cloudfunctions.net/setFont",
        "customer=" +
          hotelUID +
          "&uid=" +
          uid +
          "&buttonid=" +
          langOpt +
          "&data=" +
          encodeURIComponent(JSON.stringify(sendObj))
      );

      document.getElementById("succMsg").style.display = "block";
      setTimeout(() => {
        document.getElementById("succMsg").style.display = "none";
        sessionStorage.setItem("advanced", "enabled");
        location.reload();
      }, 2000);
      // if either of the text fields are empty , show appropriate error message
    } else if (addedFont.length === 0 || fontURL.length === 0) {
      document.getElementById("unSuccMsg").style.display = "block";
      setTimeout(() => {
        document.getElementById("unSuccMsg").style.display = "none";
      }, 3000);
      // if link is not formatted properly , show appropriate error message
    } else if (!fontURL.endsWith('"stylesheet">')) {
      document.getElementById("unSuccFormMsg").style.display = "block";
      setTimeout(() => {
        document.getElementById("unSuccFormMsg").style.display = "none";
      }, 3000);
    }
  });

  // Grabs all font data and appends them on available font list
  const grabFontsFromFb = (hotelUID) => {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/getFonts",
      "customer=" + hotelUID
    ).then((snap) => {
      if (snap) {
        let urls = [];
        let fonts = [];
        for (const [key, value] of Object.entries(snap)) {
          urls.push(value);
          fonts.push(key);
        }
        // Appends all font import links
        urls.forEach(
          (url) => (document.getElementById("importedFonts").innerHTML += url)
        );
        fonts.forEach((font) => {
          // appends options on list
          document.getElementById(
            "b_font"
          ).innerHTML += `<option style="font-family:${font};" value="${font}">${font}</option>`;
          document.getElementById(
            "bu_font"
          ).innerHTML += `<option style="font-family:${font};" value="${font}">${font}</option>`;
          document.getElementById(
            "importedFontsSec"
          ).innerHTML += `<option style="font-family:${font};" value="${font}">${font}</option>`;
          document.getElementById(
            "feedback_font"
          ).innerHTML += `<option style="font-family:${font};" value="${font}">${font}</option>`;
          gArrayFonts.push(font);
        });
      }
    });
  };

  // Deletes font from firebase
  document.getElementById("delImportFont").addEventListener("click", () => {
    let fontToDel = document.getElementById("importedFontsSec").value;
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/delFont",
      "customer=" + hotelUID + "&fontName=" + fontToDel
    ).then(() => {
      document.getElementById("succDelMsg").style.display = "block";
      setTimeout(() => {
        document.getElementById("succDelMsg").style.display = "none";
        location.reload();
      }, 2000);
    });
  });

  //--------------PBX------------

  // Saves webrtc settings to firebase
  document.getElementById("saveToFB").addEventListener("click", () => {
    let chosenPbx = document.getElementById("pbxTypeSel").value;
    let realm = document.getElementsByName("rtcrealm:" + chosenPbx);
    let wss = document.getElementsByName("rtcwss:" + chosenPbx);
    let address = document.getElementsByName("rtcPbxAdress:" + chosenPbx);
    let wsp = document.getElementsByName("rtWSP:" + chosenPbx);
    let url = document.getElementsByName("rtcURL:" + chosenPbx);
    let sendObj = {};
    let newUsers = [];

    let usersList = document.getElementById("newUser:" + chosenPbx);
    for (let x = 0; x < usersList.length; x++) {
      let obj = {};
      obj.user = usersList[x].attributes.username.value;
      obj.password = usersList[x].attributes.password.value;
      newUsers.push(obj);
    }

    if (chosenPbx === "mitel") {
      sendObj = {
        users: newUsers,
        type: chosenPbx,
        wss: wss[0].value,
        pbxIp: address[0].value,
        wss_port: wsp[0].value,
        api_url: url[0].value,
      };
    } else {
      sendObj = {
        users: newUsers,
        realm: realm[0].value,
        type: chosenPbx,
        wss: wss[0].value,
      };
    }

    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/setWebRTC",
      "customer=" +
        hotelUID +
        "&uid=" +
        uid +
        "&buttonid=" +
        langOpt +
        "&data=" +
        JSON.stringify(sendObj)
    ).then(() => {
      sessionStorage.setItem("advanced", "enabled");
      location.reload();
    });
  });

  function loadWebRTC() {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/getWebRTC",
      "customer=" + hotelUID
    ).then((rtcSet) => {
      if (rtcSet) {
        rtcType(rtcSet);
        testCaller(rtcSet);
        document.getElementById("pbxTypeSel").value = rtcSet.type;
        setPBX(rtcSet.type);
      }
    });
  }

  $(document).ready(function () {
    document.getElementById("loadingAnim").style.display = "none";
    document.getElementById("dadDiv").style.display = "block";
  });

  // set group statistics 7 days/30 days
  let changeDaysForGroup = document.getElementsByName("timeRadio");
  for (let i = 0; i < changeDaysForGroup.length; i++) {
    changeDaysForGroup[i].addEventListener("change", () => {
      if (changeDaysForGroup[i].value === "30") {
        setGroupStatistics(uid, namesAndUid);
      } else {
        setWeekGroupStatistics(uid, namesAndUid);
      }
    });
  }

  //social media
  function setSocialmedia(main) {
    const social_status = main.social_status;
    const socialObj = main.socialmedia;

    document.getElementById("socialbarBackgroundcolor").value =
      main.social_barbackgroundcolor;
    document.getElementById("socialbarOpacity_number").value =
      main.social_baropacity;
    document.getElementById("socialbarOpacity_range").value =
      main.social_baropacity;
    document.getElementById("socialBarLocation").value = parseInt(
      main.social_barposition
    );
    document.getElementById("socialIconsLocation").value = parseInt(
      main.social_iconsposition
    );
    document.getElementById("socialbarSize").value = parseInt(
      main.social_barsize
    );
    document.getElementById("socialbarFlow").value = parseInt(
      main.social_barflow
    );

    if (social_status !== undefined && social_status === true) {
      document.getElementById("social-toggle").checked = true;
      document.getElementById("socialmediaDiv").style.display = "block";
    }

    setTimeout(() => {
      for (let name in socialObj) {
        //update the <option> tag with the already configured values
        let option = document.querySelector(
          `#socialDropdown option[value="${name}"]`
        );
        if (option !== "null" && socialObj[name].url !== undefined) {
          option.setAttribute("url", socialObj[name].url);
          option.setAttribute("color", socialObj[name].iconColor);
          option.setAttribute("background", socialObj[name].backgroundColor);
          option.setAttribute("posid", socialObj[name].id);
          option.textContent += " ✔️";
        }
      }
    }, 500);
  }

  document.getElementById("addSocialMedia").addEventListener("click", () => {
    let socialurl = document.getElementById("social_url").value;
    const iconcolor = document.getElementById("social_color").value;
    const backgroundcolor = document.getElementById("social_background").value;
    const icon = document.getElementById("social_icon").innerHTML;
    const name = document.getElementById("social_name").value;

    let id = getIconPositionID(name);

    if (socialurl == "") {
      showAlert("Please enter an URL");
      return;
    }

    if (!socialurl.startsWith("http") || !socialurl.startsWith("https")) {
      socialurl = "//" + socialurl;
    }

    let tempObj = {};
    tempObj.icon = icon;
    tempObj.iconColor = iconcolor;
    tempObj.backgroundColor = backgroundcolor;
    tempObj.url = socialurl;
    tempObj.id = id;

    let tempObj2 = {};
    tempObj2[name] = tempObj;

    let sendObj = {};
    sendObj.socialmedia = tempObj2;
    sendObj.social_status = document.getElementById("social-toggle").checked;

    showLoadingButton(true, document.getElementById("addSocialMedia"));

    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateMain",
      "customer=" +
        hotelUID +
        "&uid=" +
        uid +
        "&data=" +
        encodeURIComponent(JSON.stringify(sendObj))
    )
      .then(() => {
        refreshPreview();

        const selectedOption = document.querySelector(
          `#socialDropdown option[value='${name}']`
        );
        selectedOption.setAttribute("url", socialurl);
        selectedOption.setAttribute("background", backgroundcolor);
        selectedOption.setAttribute("color", iconcolor);
        selectedOption.setAttribute("posid", id);
        if (selectedOption.textContent.indexOf("✔️") < 0) {
          selectedOption.textContent += " ✔️";
        }

        document.getElementById("removeSocialMedia").style.display = "inline";
        showLoadingButton(
          false,
          document.getElementById("addSocialMedia"),
          "Submit"
        );
        console.log(id);
        if (id != "1") {
          showChangeDiv(true);
        }
      })
      .catch(() => {
        showAlert("ERROR: Adding social media failed");
      });
  });

  document.getElementById("removeSocialMedia").addEventListener("click", () => {
    const name = document.getElementById("social_name").value;
    const selectedOption = document.querySelector(
      `#socialDropdown option[value='${name}']`
    );
    const posid = document.getElementById("social_iconposition").value;
    const allconfigured = document.querySelectorAll(
      "#socialDropdown option[posid]"
    );

    let tempObj2 = {};
    tempObj2[name] = {};

    //decrement the id of following social media
    if (posid !== allconfigured.length) {
      for (let x = 0; x < allconfigured.length; x++) {
        if (allconfigured[x].getAttribute("posid") - posid > 0) {
          let actualPosId = allconfigured[x].getAttribute("posid");
          tempObj2[allconfigured[x].value] = { id: actualPosId - 1 };
          allconfigured[x].setAttribute("posid", actualPosId - 1);
        }
      }
    }

    showLoadingButton(true, document.getElementById("removeSocialMedia"));

    let sendObj = {};
    sendObj.socialmedia = tempObj2;

    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateMain",
      "customer=" +
        hotelUID +
        "&uid=" +
        uid +
        "&data=" +
        encodeURIComponent(JSON.stringify(sendObj))
    )
      .then(() => {
        refreshPreview();
        selectedOption.removeAttribute("url");
        selectedOption.removeAttribute("background");
        selectedOption.removeAttribute("color");
        selectedOption.removeAttribute("posid");
        selectedOption.textContent = selectedOption.textContent.replace(
          " ✔️",
          ""
        );

        document.getElementById("social_color").value = "#ffffff";
        document.getElementById("social_background").value = "#000000";
        document.getElementById("social_url").value = "";

        document.getElementById("social_icon").style.color = "#ffffff";
        document.getElementById("social_icon").style.backgroundColor =
          "#000000";
        resetSocialDiv();
        document.getElementById("removeSocialMedia").style.display = "none";
        showLoadingButton(
          false,
          document.getElementById("removeSocialMedia"),
          "Remove"
        );
        showChangeDiv(false);
      })
      .catch(() => {
        showAlert("ERROR: Deleting social media failed");
      });
  });

  function loadSocialMediafromJSON() {
    loadJSON("social_media", (response) => {
      const socialDropdown = document.getElementById("socialDropdown");
      response = JSON.parse(response);
      for (let x = 0; x < response.length; x++) {
        let option = document.createElement("option");
        option.textContent = response[x].name;
        option.value = response[x].name;
        option.setAttribute("icon", response[x].icon);
        option.setAttribute("color", response[x].color);
        option.setAttribute("background", response[x].background);

        socialDropdown.append(option);
      }
      socialDropdown.addEventListener("change", (e) => {
        rendeSelectedSocial(e);
      });
    });
  }

  function rendeSelectedSocial(e) {
    let selectedOption = document.querySelector(
      `#socialDropdown option[value='${e.target.value}']`
    );

    const name = document.getElementById("social_name");
    const iconColor = document.getElementById("social_color");
    const backgroundColor = document.getElementById("social_background");
    const icon = document.getElementById("social_icon");
    const iconposition = document.getElementById("social_iconposition");

    icon.innerHTML = selectedOption.getAttribute("icon");
    iconColor.value = selectedOption.getAttribute("color");
    backgroundColor.value = selectedOption.getAttribute("background");
    name.value = selectedOption.value;
    iconposition.value = getIconPositionID(name.value);

    icon.style.backgroundColor = selectedOption.getAttribute("background");
    icon.style.color = selectedOption.getAttribute("color");

    if (
      selectedOption.getAttribute("url") !== undefined &&
      selectedOption.getAttribute("url") !== "" &&
      selectedOption.getAttribute("url") !== null
    ) {
      document.getElementById("social_url").value =
        selectedOption.getAttribute("url");

      document.getElementById("removeSocialMedia").style.display = "inline";
      showChangeDiv(true);
    } else {
      document.getElementById("removeSocialMedia").style.display = "none";
      document.getElementById("social_url").value = "";
      showChangeDiv(false);
    }

    loadIconOrderDD(getIconPositionID(name.value));
  }

  document.getElementById("social-toggle").addEventListener("click", () => {
    let sendObj = {};

    sendObj.social_status = document.getElementById("social-toggle").checked;
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateMain",
      "customer=" +
        hotelUID +
        "&uid=" +
        uid +
        "&data=" +
        encodeURIComponent(JSON.stringify(sendObj))
    ).then(() => {
      refreshPreview();
    });
  });

  function getIconPositionID(name) {
    let idcount = document.querySelectorAll(
      `#socialDropdown option[url]`
    ).length;

    let idconfigured = document
      .querySelector(`#socialDropdown option[value="${name}"]`)
      .getAttribute("posid");

    //new or already configured
    if (idconfigured === null) {
      return idcount + 1;
    } else {
      return idconfigured;
    }
  }

  //fill the dropdown menu with all configured sm except the selected one
  function loadIconOrderDD(selectedID) {
    const positionselect = document.getElementById("social_positionselect");
    const availableIDs = document.querySelectorAll(
      `#socialDropdown option[posid]`
    );

    positionselect.innerHTML = "";

    for (let x = 0; x < availableIDs.length; x++) {
      const option = document.createElement("option");

      if (availableIDs[x].getAttribute("posid") !== selectedID) {
        option.value = availableIDs[x].getAttribute("posid");
        option.textContent = availableIDs[x].getAttribute("posid");
        option.setAttribute("name", availableIDs[x].value);

        positionselect.append(option);
      }
    }
    if (availableIDs.length < 2) {
      showChangeDiv(false);
    }
  }

  function resetSocialDiv() {
    document.getElementById("socialDropdown").value = "empty";
    document.getElementById("social_iconposition").value = "";
    document.getElementById("social_url").textContent = "";
    document.getElementById("social_color").value = "white";
    document.getElementById("social_background").value = "black";
    document.getElementById("social_icon").innerHTML = "";
  }

  function showChangeDiv(status) {
    if (status) {
      document.getElementById("social_change_position_div").style.display =
        "inline-block";
    } else {
      document.getElementById("social_change_position_div").style.display =
        "none";
    }
  }

  function toggleBarpositionBelowheader(status) {
    if (status) {
      document.querySelector(
        "#socialBarLocation option[value='2']"
      ).style.display = "block";
    } else {
      document.querySelector(
        "#socialBarLocation option[value='2']"
      ).style.display = "none";
    }
  }

  function toggleBarflowDynamic(status) {
    if (status) {
      document.querySelector("#socialbarFlow option[value='1']").style.display =
        "block";
    } else {
      document.querySelector("#socialbarFlow option[value='1']").style.display =
        "none";
    }
  }

  //change icon order
  document
    .getElementById("social_change_position_button")
    .addEventListener("click", () => {
      const destPosition = document.getElementById(
        "social_positionselect"
      ).value;
      const destName = document.querySelector(
        `#socialDropdown option[posid="${destPosition}"]`
      ).value;

      const sourcPosition = document.getElementById(
        "social_iconposition"
      ).value;
      const sourcName = document.getElementById("social_name").value;

      showLoadingButton(
        true,
        document.getElementById("social_change_position_button")
      );

      let tempObj2 = {};
      tempObj2[destName] = { id: sourcPosition };
      tempObj2[sourcName] = { id: destPosition };

      let sendObj = {};
      sendObj.socialmedia = tempObj2;

      sendHttpRequest(
        "POST",
        "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateMain",
        "customer=" +
          hotelUID +
          "&uid=" +
          uid +
          "&data=" +
          encodeURIComponent(JSON.stringify(sendObj))
      ).then(() => {
        refreshPreview();
        showLoadingButton(
          false,
          document.getElementById("social_change_position_button"),
          "Change"
        );
        //update UI
        document.getElementById("social_iconposition").value = destPosition;
        document
          .querySelector(`#socialDropdown option[value="${destName}"]`)
          .setAttribute("posid", sourcPosition);
        document
          .querySelector(`#socialDropdown option[value="${sourcName}"]`)
          .setAttribute("posid", destPosition);
        loadIconOrderDD(destPosition);
      });
    });

  document
    .getElementById("submit_socialbarbackground")
    .addEventListener("click", () => {
      const barbackgroundcolor = document.getElementById(
        "socialbarBackgroundcolor"
      ).value;
      const opacity = document.getElementById("socialbarOpacity_number").value;
      const position = document.getElementById("socialBarLocation").value;
      const size = document.getElementById("socialbarSize").value;
      const icons_position = document.getElementById(
        "socialIconsLocation"
      ).value;
      const flow = document.getElementById("socialbarFlow").value;

      showLoadingButton(
        true,
        document.getElementById("submit_socialbarbackground")
      );

      let sendObj = {};

      sendObj.social_barbackgroundcolor = barbackgroundcolor;
      sendObj.social_baropacity = opacity;
      sendObj.social_barposition = position;
      sendObj.social_iconsposition = icons_position;
      sendObj.social_barsize = size;
      sendObj.social_barflow = flow;

      sendHttpRequest(
        "POST",
        "https://us-central1-seteraguestcloud.cloudfunctions.net/newUpdateMain",
        "customer=" +
          hotelUID +
          "&uid=" +
          uid +
          "&data=" +
          encodeURIComponent(JSON.stringify(sendObj))
      )
        .then(() => {
          refreshPreview();
          showLoadingButton(
            false,
            document.getElementById("submit_socialbarbackground"),
            "Submit"
          );
        })
        .catch(() => {
          showAlert("ERROR: Changing social media bar settings");
        });
    });

  document
    .getElementById("socialBarLocation")
    .addEventListener("change", (e) => {
      if (e.target.value == 2) {
        document.getElementById("socialbarFlow").style.display = "none";
        document.getElementById("socialbarFlowText").style.display = "none";
        document.getElementById("socialbarFlowDiv").style.display = "none";
      } else {
        document.getElementById("socialbarFlow").style.display = "block";
        document.getElementById("socialbarFlowText").style.display = "contents";
        document.getElementById("socialbarFlowDiv").style.display = "block";
      }
    });

  //customer feedback
  function addQuestion(status, question) {
    if (document.getElementsByClassName("question_holder").length < 10) {
      const textarea = document.getElementById("question");
      const questionPool = document.getElementById("question_pool");

      let qDiv = document.createElement("div");
      let removeBtn = document.createElement("button");
      let upBtn = document.createElement("button");
      let downBtn = document.createElement("button");

      qDiv.classList.add("question_holder");

      if (status === "new") {
        //check if the question is already configured
        let allQuestions = document.getElementsByClassName("question_holder");
        if (allQuestions.length === 0) {
          qDiv.textContent = textarea.value;
        } else {
          for (let x = 0; x < allQuestions.length; x++) {
            if (allQuestions[x].textContent === textarea.value) {
              showAlert("Question already in use");
              return;
            } else {
              qDiv.textContent = textarea.value;
            }
          }
        }
      } else if (status === "update") {
        qDiv.textContent = question;
      }

      removeBtn.classList.add("remove_question");
      removeBtn.type = "button";
      removeBtn.innerHTML =
        '<i class="fas fa-times" style="pointer-events: none;"></i>';

      upBtn.innerHTML =
        '<i class="fas fa-chevron-up" style="pointer-events: none;"></i>';
      downBtn.innerHTML =
        '<i class="fas fa-chevron-down" style="pointer-events: none;"></i>';

      upBtn.classList.add("up_and_down");
      downBtn.classList.add("up_and_down");

      upBtn.style.left = "5px";
      downBtn.style.left = "30px";

      upBtn.type = "button";
      downBtn.type = "button";

      qDiv.append(removeBtn);
      qDiv.append(downBtn);
      qDiv.append(upBtn);
      questionPool.append(qDiv);

      textarea.value = "";

      removeBtn.addEventListener("click", (e) => {
        e.target.parentElement.remove();
      });

      upBtn.addEventListener("click", (e) => {
        if (e.target.parentElement.previousElementSibling !== null) {
          document
            .getElementById("question_pool")
            .insertBefore(
              e.target.parentElement,
              e.target.parentElement.previousElementSibling
            );
        }
      });

      downBtn.addEventListener("click", (e) => {
        if (e.target.parentElement.nextElementSibling !== null) {
          document
            .getElementById("question_pool")
            .insertBefore(
              e.target.parentElement.nextElementSibling,
              e.target.parentElement
            );
        }
      });
    } else {
      showAlert("Max. 10 questions");
    }
  }

  function getFeedbackSettings() {
    const f_email = document.getElementById("feedback_email").value;
    const f_title = document.getElementById("feedback_title").value;
    const f_success = document.getElementById("feedback_success").value;
    const f_background = document.getElementById("feedback_background").value;
    const f_innerbackground = document.getElementById(
      "feedback_innerbackground"
    ).value;
    const f_buttoncolor = document.getElementById("feedback_buttoncolor").value;
    const f_starcolor = document.getElementById("feedback_starcolor").value;
    const f_navcolor = document.getElementById("feedback_navcolor").value;
    const f_font = document.getElementById("feedback_font").value;
    const f_fontsize = document.getElementById("feedback_fontsize").value;
    const f_fontcolor = document.getElementById("feedback_fontcolor").value;

    return {
      f_email: f_email,
      f_title: f_title,
      f_success: f_success,
      f_background: f_background,
      f_innerbackground: f_innerbackground,
      f_buttoncolor: f_buttoncolor,
      f_starcolor: f_starcolor,
      f_navcolor: f_navcolor,
      f_font: f_font,
      f_fontsize: f_fontsize,
      f_fontcolor: f_fontcolor,
    };
  }

  function setFeedbackSettings(settingObj) {
    const f_email = document.getElementById("feedback_email");
    const f_title = document.getElementById("feedback_title");
    const f_success = document.getElementById("feedback_success");
    const f_background = document.getElementById("feedback_background");
    const f_innerbackground = document.getElementById(
      "feedback_innerbackground"
    );
    const f_buttoncolor = document.getElementById("feedback_buttoncolor");
    const f_starcolor = document.getElementById("feedback_starcolor");
    const f_navcolor = document.getElementById("feedback_navcolor");
    const f_font = document.getElementById("feedback_font");
    const f_fontsize = document.getElementById("feedback_fontsize");
    const f_fontcolor = document.getElementById("feedback_fontcolor");

    if (settingObj.f_email) {
      f_email.value = settingObj.f_email;
    }
    if (settingObj.f_title) {
      f_title.value = settingObj.f_title;
    }
    if (settingObj.f_success) {
      f_success.value = settingObj.f_success;
    }
    if (settingObj.f_background) {
      f_background.value = settingObj.f_background;
    }
    if (settingObj.f_innerbackground) {
      f_innerbackground.value = settingObj.f_innerbackground;
    }
    if (settingObj.f_buttoncolor) {
      f_buttoncolor.value = settingObj.f_buttoncolor;
    }
    if (settingObj.f_starcolor) {
      f_starcolor.value = settingObj.f_starcolor;
    }
    if (settingObj.f_navcolor) {
      f_navcolor.value = settingObj.f_navcolor;
    }
    if (settingObj.f_font) {
      f_font.value = settingObj.f_font;
    }
    if (settingObj.f_fontsize) {
      f_fontsize.value = settingObj.f_fontsize;
    }
    if (settingObj.f_fontcolor) {
      f_fontcolor.value = settingObj.f_fontcolor;
    }
  }

  //template v1
  const templatePreviews = document.getElementsByClassName("templatePreview");
  for (let x = 0; x < templatePreviews.length; x++) {
    templatePreviews[x].addEventListener("click", (e) => {
      document.getElementById("selectedTemplate").value = e.target.dataset.id;

      if (0 < e.target.dataset.id && 6 > e.target.dataset.id) {
        $("#templateConfirmModal").modal("show");
      }
    });
  }

  document.getElementById("templateYES").addEventListener("click", () => {
    const id = document.getElementById("selectedTemplate").value;

    document.cookie = "firstlogin=true";
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/getTemplate",
      "customer=" + hotelUID + "&uid=" + uid + "&templateid=" + id
    ).then(() => {
      location.reload();
    });
  });
  document.getElementById("templateNO").addEventListener("click", () => {
    document.getElementById("selectedTemplate").value = 0;
    $("#templateConfirmModal").modal("hide");
  });
}

document.getElementById("social_color").addEventListener("change", () => {
  document.getElementById("social_icon").style.color =
    document.getElementById("social_color").value;
});

document.getElementById("social_background").addEventListener("change", () => {
  document.getElementById("social_icon").style.backgroundColor =
    document.getElementById("social_background").value;
});

function addUser(type) {
  let user = document.getElementsByName("rtcuser:" + type)[0];
  let password = document.getElementsByName("rtcpassword:" + type)[0];

  if (user.value == "" || password.value == "") {
    alert("Username and password properties are required");
  } else {
    renderNewUser({
      user: user.value,
      password: password.value,
      type: type,
    });
  }
}

function renderNewUser(obj, type) {
  if (type) {
    document.getElementById(
      "newUser:" + type
    ).innerHTML += `<option class="user-item" username=${obj.user} password=${obj.password}>${obj.user}</option>`;
  } else {
    document.getElementById(
      "newUser:" + obj.type
    ).innerHTML += `<option class="user-item" username=${obj.user} password=${obj.password}>${obj.user}</option>`;
  }
  document.getElementById(
    "testCallList"
  ).innerHTML += `<option class="user-item" username=${obj.user} password=${obj.password}>${obj.user}</option>`;

  if (obj.type) {
    setTimeout(() => {
      document.getElementsByName("rtcuser:" + obj.type)[0].value = "";
      document.getElementsByName("rtcpassword:" + obj.type)[0].value = "";
    }, 500);
  }
}

const rtcType = (rtcSet) => {
  if (rtcSet.type) {
    if (rtcSet.type === "mitel") {
      if (rtcSet.pbxIp) {
        document.getElementById("rtcPbxAdress:" + rtcSet.type).value =
          rtcSet.pbxIp;
      }
      if (rtcSet.wss_port) {
        document.getElementById("rtWSP:" + rtcSet.type).value = rtcSet.wss_port;
      }
      if (rtcSet.api_url) {
        document.getElementById("rtcURL:" + rtcSet.type).value = rtcSet.api_url;
      }
    }
    if (rtcSet.type !== "mitel") {
      if (rtcSet.realm) {
        document.getElementById("rtcrealm:" + rtcSet.type).value = rtcSet.realm;
      }
    }
    if (rtcSet.wss) {
      document.getElementById("rtcwss:" + rtcSet.type).value = rtcSet.wss;
    }
    rtcSet.users.forEach((user) => {
      renderNewUser(user, rtcSet.type);
    });
  }
};

const deleteUser = (type) => {
  let userList = document.getElementById("newUser:" + type);
  for (let i = 0; i < userList.length; i++) {
    if (userList.options[i].value === userList.value) {
      userList.remove(i);
    }
  }
};

document.getElementById("dlQrCode").addEventListener("click", () => {
  downloadImage();
});

// click to download image function
async function downloadImage() {
  let imageSrc = document.getElementById("qrCode").src;
  const image = await fetch(imageSrc);
  const imageBlog = await image.blob();
  const imageURL = URL.createObjectURL(imageBlog);

  const link = document.createElement("a");
  link.href = imageURL;
  link.download = "iPortal QR Code";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// show / hide password
document.getElementById("showPassword").addEventListener("click", () => {
  if (document.getElementById("loginPassword").type === "text") {
    document.getElementById("loginPassword").type = "password";
  } else {
    document.getElementById("loginPassword").type = "text";
  }
});

const resetContentManager = (hotelUID, uid) => {
  let resetButton = document.getElementById("resetCmBtn");
  resetButton.addEventListener("click", () => {
    resetButton.disabled = true;
    resetContentManagerDone(hotelUID, uid);
  });

  sendHttpRequest(
    "POST",
    "https://us-central1-seteraguestcloud.cloudfunctions.net/resetSite",
    "customer=" + hotelUID + "&uid=" + uid
  ).then(() => {
    document.cookie = "langOpt=en";
    location.reload();
  });
};

let langCodes = [
  {
    en: "English",
    de: "German",
    it: "Italian",
    fr: "French",
    es: "Spanish",
    ru: "Russian",
    ar: "Arabic",
    cn: "Chinese",
    tr: "Turkish",
    jp: "Japanese",
  },
];
let months;
//  = [
//   "",
//   "January",
//   "February",
//   "March",
//   "April",
//   "May",
//   "June",
//   "July",
//   "August",
//   "September",
//   "October",
//   "November",
//   "December",
// ];

const setMonthly = (data) => {
  let totVisits = document.getElementById("totVisits");
  let uniVisits = document.getElementById("uniVisits");
  let aveVisits = document.getElementById("aveVisits");
  let deskVisits = document.getElementById("deskUsers");
  let mobVisits = document.getElementById("mobUsers");
  let langUsersDiv = document.getElementById("langUsersInputs");
  let andrUsers = document.getElementById("andrUsers");
  let iosUsers = document.getElementById("iosUsers");
  let totalVisits = 0;
  let uniqueVisits = 0;
  let averageVisits = 0;
  let desktopVisits = 0;
  let mobileVisits = 0;
  let androidVisits = 0;
  let iosVisits = 0;
  let visitsByLang = {
    en: 0,
    de: 0,
    it: 0,
    fr: 0,
    es: 0,
    ru: 0,
    ar: 0,
    cn: 0,
    tr: 0,
    jp: 0,
  };
  let visitsByHour = [
    {
      0: 0,
      1: 0,
      2: 0,
      3: 0,
      4: 0,
      5: 0,
      6: 0,
      7: 0,
      8: 0,
      9: 0,
      10: 0,
      11: 0,
      12: 0,
      13: 0,
      14: 0,
      15: 0,
      16: 0,
      17: 0,
      18: 0,
      19: 0,
      20: 0,
      21: 0,
      22: 0,
      23: 0,
    },
  ];
  let datesForChart = [];
  let visitsForChart = [];
  let totalVisitsForChart = [];
  let nextMonthVisits = [];
  let nextYearVisits = [];
  let deciderMonth = 0;
  let deciderYear = 0;
  // find smallest month and year
  for (let i = 0; i < Object.keys(data).length; i++) {
    let year = parseInt(Object.keys(data)[i].slice(4));
    let month = parseInt(Object.keys(data)[i].slice(2, 4));
    if (deciderYear === 0) {
      deciderYear = year;
    } else if (deciderYear > year) {
      deciderYear = parseInt(Object.keys(data)[i].slice(4));
    }
    if (deciderYear === year) {
      if (deciderMonth === 0) {
        deciderMonth = month;
      } else if (deciderMonth > month) {
        deciderMonth = parseInt(Object.keys(data)[i].slice(2, 4));
      }
    }
  }

  let objectKeys = Object.keys(data);
  for (let i = 0; i < objectKeys.length; i++) {
    let year = parseInt(objectKeys[i].slice(4));
    let month = parseInt(objectKeys[i].slice(2, 4));
    if (parseInt(deciderYear) < year) {
      nextYearVisits.push(objectKeys[i]);
      objectKeys.splice(i, 1);
      i--;
    } else if (deciderYear === year && deciderMonth < month) {
      nextMonthVisits.push(objectKeys[i]);
      objectKeys.splice(i, 1);
      i--;
    }
  }

  let perfectlySorted = objectKeys
    .sort()
    .concat(nextMonthVisits.sort(), nextYearVisits.sort());

  for (let i = 0; i < perfectlySorted.length; i++) {
    if (i === perfectlySorted.length - 1) {
      let index = perfectlySorted[0].slice(2, 4);
      let otherIndex = perfectlySorted[i].slice(2, 4);
      if (index.charAt(0) === "0") {
        index = perfectlySorted[0].slice(3, 4);
      }
      if (otherIndex.charAt(0) === "0") {
        otherIndex = perfectlySorted[perfectlySorted.length - 1].slice(3, 4);
      }
      let month = months[index];
      let otherMonth = months[otherIndex];
      if (month && otherMonth) {
        lastThirty = `${perfectlySorted[0].slice(0, 2)} ${month} ${
          langdata.languages[themeLang].strings["to"]
        } ${perfectlySorted[i].slice(0, 2)} ${otherMonth}`;
      }
    }

    var date = [
      perfectlySorted[i].slice(0, 2),
      " ",
      months[parseInt(perfectlySorted[i].slice(2, 4))].slice(0, 3),
    ].join("");
    let newKey = perfectlySorted[i];
    datesForChart.push(date);
    if (data[newKey].totalUsers) {
      totalVisits += parseInt(data[newKey].totalUsers);
      totalVisitsForChart.push(parseInt(data[newKey].totalUsers));
    } else {
      totalVisitsForChart.push(0);
    }
    if (data[newKey].uniqueUsers) {
      uniqueVisits += parseInt(data[newKey].uniqueUsers);
      visitsForChart.push(parseInt(data[newKey].uniqueUsers));
    } else {
      visitsForChart.push(0);
    }
    if (data[newKey].platform_Win32) {
      desktopVisits += parseInt(data[newKey].platform_Win32);
    }
    if (data[newKey].platform_MACIntel) {
      desktopVisits += parseInt(data[newKey].platform_MACIntel);
      androidVisits += parseInt(data[newKey].platform_MACIntel);
    }
    if (data[newKey].platform_iPhone) {
      mobileVisits += parseInt(data[newKey].platform_iPhone);
      iosVisits += parseInt(data[newKey].platform_iPhone);
    }
    if (data[newKey].platform_Android) {
      mobileVisits += parseInt(data[newKey].platform_Android);
    }
    const langUsers = ts("lang_", data[newKey]);
    for (let langKey of Object.keys(langUsers)) {
      let key = Object.keys(langUsers[langKey])[0];
      visitsByLang[key] += Object.values(langUsers[langKey])[0];
    }
    const hoursUsers = ts("hours_", data[newKey]);
    for (let hourKey of Object.keys(hoursUsers)) {
      let key = Object.keys(hoursUsers[hourKey])[0];
      visitsByHour[0][key] += parseInt(Object.values(hoursUsers[hourKey])[0]);
    }
  }
  removeAllChildNodes(langUsersDiv);
  for (let key of Object.keys(visitsByLang)) {
    if (visitsByLang[key] != 0) {
      let langInput = document.createElement("input");
      langInput.classList.add("form-control", "w30");
      langInput.type = "number";
      langInput.value = visitsByLang[key];
      langInput.readOnly = true;
      let langName = langCodes[0][key];
      langUsersDiv.append(langName);
      langUsersDiv.append(document.createElement("br"));
      langUsersDiv.append(langInput);
      langUsersDiv.append(document.createElement("br"));
    }
  }
  // hourly visits chart
  let allHoursArray = [];
  for (let x = 0; x < 24; x++) {
    allHoursArray[x] = visitsByHour[0][x];
  }

  document.getElementById("mymonthChartDivInner").innerHTML =
    '<canvas id="mymonthChart"></canvas>';
  var ctx = document.getElementById("mymonthChart").getContext("2d");
  new Chart(ctx, {
    type: "line",
    data: {
      labels: [
        "12am",
        "1am",
        "2am",
        "3am",
        "4am",
        "5am",
        "6am",
        "7am",
        "8am",
        "9am",
        "10am",
        "11am",
        "12pm",
        "1pm",
        "2pm",
        "3pm",
        "4pm",
        "5pm",
        "6pm",
        "7pm",
        "8pm",
        "9pm",
        "10pm",
        "11pm",
      ],
      datasets: [
        {
          label: langdata.languages[themeLang].strings["totalVisitsByH"],
          data: allHoursArray,
          backgroundColor: ["rgba(255,69,0,0.8)"],
          borderColor: ["rgba(255,69,0,1.0)"],
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
      plugins: {
        legend: {
          onClick: null,
        },
        title: {
          display: true,
          text: `${currentProperty} - ${lastThirty}`,
        },
      },
    },
  });
  // visits by dates chart
  document.getElementById("mymonthChartVisitDivInner").innerHTML =
    '<canvas id="mymonthChartVisit"></canvas>';
  var ctxD = document.getElementById("mymonthChartVisit").getContext("2d");
  new Chart(ctxD, {
    type: "line",
    data: {
      labels: datesForChart,
      datasets: [
        {
          label: langdata.languages[themeLang].strings["uniVisitsByD"],
          data: visitsForChart,
          backgroundColor: ["rgba(255,183,0)"],
          borderColor: ["rgba(255,183,0)"],
          borderWidth: 1,
        },
        {
          label: langdata.languages[themeLang].strings["totVisitsByD"],
          data: totalVisitsForChart,
          backgroundColor: ["rgba(255,69,0,1.0)"],
          borderColor: ["rgba(255,69,0,1.0)"],
          borderWidth: 1,
        },
      ],
    },
    options: {
      plugins: {
        title: {
          display: true,
          text: `${currentProperty} - ${lastThirty}`,
        },
      },
    },
  });
  andrUsers.value = androidVisits;
  iosUsers.value = iosVisits;
  totVisits.value = totalVisits;
  uniVisits.value = uniqueVisits;
  averageVisits = totalVisits / uniqueVisits;
  if (averageVisits) {
    aveVisits.value = averageVisits.toFixed(1);
  }
  deskVisits.value = desktopVisits;
  mobVisits.value = mobileVisits;
  let restVisits = totalVisits - uniqueVisits;

  if (uniqueVisits || restVisits) {
    document.getElementById("mymonthPieDivInner").innerHTML =
      '<canvas id="mymonthPie" ></canvas>';
    var ctxP = document.getElementById("mymonthPie").getContext("2d");
    new Chart(ctxP, {
      type: "doughnut",
      plugins: [ChartDataLabels],
      data: {
        labels: [
          `${langdata.languages[themeLang].strings["uniVisits"]}: ${uniqueVisits}`,
          `${langdata.languages[themeLang].strings["repeVisits"]}: ${restVisits}`,
        ],
        datasets: [
          {
            data: [uniqueVisits, restVisits],
            backgroundColor: ["rgba(255,183,0)", "rgba(231,114,35)"],
            hoverOffset: 4,
          },
        ],
      },
      options: {
        plugins: {
          legend: {
            onClick: null,
          },
          datalabels: {
            formatter: (value, ctx) => {
              let sum = 0;
              let dataArr = ctx.chart.data.datasets[0].data;
              dataArr.map((data) => {
                sum += data;
              });
              let percentage = 0;
              if (value === 0) {
                null;
              } else {
                percentage = ((value * 100) / sum).toFixed(2) + "%";
              }
              return percentage;
            },
            color: "#fff",
          },
          title: {
            display: true,
            text: `${currentProperty} - ${lastThirty}`,
          },
        },
      },
    });
  } else {
    document.getElementById("downloadMPChart").style.display = "none";
  }
};

const setWeek = (data) => {
  let totVisits = document.getElementById("totVisitsW");
  let uniVisits = document.getElementById("uniVisitsW");
  let aveVisits = document.getElementById("aveVisitsW");
  let deskVisits = document.getElementById("deskUsersW");
  let mobVisits = document.getElementById("mobUsersW");
  let langUsersDiv = document.getElementById("langUsersInputsW");
  let andrUsers = document.getElementById("andrUsersW");
  let iosUsers = document.getElementById("iosUsersW");
  let datesForChart = [];
  let visitsForChart = [];
  let totalVisitsForChart = [];
  let totalVisits = 0;
  let uniqueVisits = 0;
  let averageVisits = 0;
  let desktopVisits = 0;
  let mobileVisits = 0;
  let androidUsers = 0;
  let iOSusers = 0;
  let visitsByLang = {
    en: 0,
    de: 0,
    it: 0,
    fr: 0,
    es: 0,
    ru: 0,
    ar: 0,
    cn: 0,
    tr: 0,
    jp: 0,
  };
  let visitsByHour = [
    {
      0: 0,
      1: 0,
      2: 0,
      3: 0,
      4: 0,
      5: 0,
      6: 0,
      7: 0,
      8: 0,
      9: 0,
      10: 0,
      11: 0,
      12: 0,
      13: 0,
      14: 0,
      15: 0,
      16: 0,
      17: 0,
      18: 0,
      19: 0,
      20: 0,
      21: 0,
      22: 0,
      23: 0,
    },
  ];
  let nextMonthVisits = [];
  let nextYearVisits = [];
  let deciderMonth = 0;
  let deciderYear = 0;
  // find smallest month and year
  for (let i = 0; i < Object.keys(data).length; i++) {
    let year = parseInt(Object.keys(data)[i].slice(4));
    let month = parseInt(Object.keys(data)[i].slice(2, 4));
    if (deciderYear === 0) {
      deciderYear = year;
    } else if (deciderYear > year) {
      deciderYear = parseInt(Object.keys(data)[i].slice(4));
    }
    if (deciderYear === year) {
      if (deciderMonth === 0) {
        deciderMonth = month;
      } else if (deciderMonth > month) {
        deciderMonth = parseInt(Object.keys(data)[i].slice(2, 4));
      }
    }
  }

  let objectKeys = Object.keys(data);
  for (let i = 0; i < objectKeys.length; i++) {
    let year = parseInt(objectKeys[i].slice(4));
    let month = parseInt(objectKeys[i].slice(2, 4));
    if (parseInt(deciderYear) < year) {
      nextYearVisits.push(objectKeys[i]);
      objectKeys.splice(i, 1);
      i--;
    } else if (deciderYear === year && deciderMonth < month) {
      nextMonthVisits.push(objectKeys[i]);
      objectKeys.splice(i, 1);
      i--;
    }
  }

  let perfectlySorted = objectKeys
    .sort()
    .concat(nextMonthVisits.sort(), nextYearVisits.sort());

  /* if (Object.keys(data).length < 7) {
    for (let i = 0; i < perfectlySorted.length; i++) {
      if (i === perfectlySorted.length - 1) {
        let index = perfectlySorted[0].slice(2, 4);
        let otherIndex = perfectlySorted[i].slice(2, 4);
        if (index.charAt(0) === "0") {
          index = perfectlySorted[0].slice(3, 4);
        }
        if (otherIndex.charAt(0) === "0") {
          otherIndex = perfectlySorted[perfectlySorted.length - 1].slice(3, 4);
        }
        let month = months[index];

        let otherMonth = months[otherIndex];

        if (month && otherMonth) {
          console.log(perfectlySorted);
          lastSeven = `${perfectlySorted[0].slice(0, 2)} ${month} ${
            langdata.languages[themeLang].strings["to"]
          } ${perfectlySorted[i].slice(0, 2)} ${otherMonth}`;
        }
      }

      let newKey = perfectlySorted[i];
      var date = [
        perfectlySorted[i].slice(0, 2),
        " ",
        months[parseInt(perfectlySorted[i].slice(2, 4))].slice(0, 3),
      ].join("");
      datesForChart.push(date);
      if (data[newKey].uniqueUsers) {
        uniqueVisits += parseInt(data[newKey].uniqueUsers);
        visitsForChart.push(parseInt(data[newKey].uniqueUsers));
      } else {
        visitsForChart.push(0);
      }
      if (data[newKey].totalUsers) {
        totalVisits += parseInt(data[newKey].totalUsers);
        totalVisitsForChart.push(parseInt(data[newKey].totalUsers));
      } else {
        totalVisitsForChart.push(0);
      }

      if (data[newKey].platform_Win32) {
        desktopVisits += parseInt(data[newKey].platform_Win32);
      }
      if (data[newKey].platform_MACIntel) {
        desktopVisits += parseInt(data[newKey].platform_MACIntel);
      }
      if (data[newKey].platform_iPhone) {
        mobileVisits += parseInt(data[newKey].platform_iPhone);
        iOSusers += parseInt(data[newKey].platform_iPhone);
      }
      if (data[newKey].platform_Android) {
        mobileVisits += parseInt(data[newKey].platform_Android);
        androidUsers += parseInt(data[newKey].platform_Android);
      }
      const langUsers = ts("lang_", data[newKey]);
      for (let langKey of Object.keys(langUsers)) {
        let key = Object.keys(langUsers[langKey])[0];
        visitsByLang[key] += Object.values(langUsers[langKey])[0];
      }
      const hoursUsers = ts("hours_", data[newKey]);
      for (let hourKey of Object.keys(hoursUsers)) {
        let key = Object.keys(hoursUsers[hourKey])[0];
        visitsByHour[0][key] += parseInt(Object.values(hoursUsers[hourKey])[0]);
      }
    }
  } else {*/
  for (let i = 7; i > 0; i--) {
    let length = perfectlySorted.length - i;
    let newKey = perfectlySorted[length];

    if (i === 1) {
      let index = perfectlySorted[perfectlySorted.length - 7].slice(2, 4);
      let otherIndex = perfectlySorted[perfectlySorted.length - 1].slice(2, 4);

      if (index.charAt(0) === "0") {
        index = perfectlySorted[perfectlySorted.length - 7].slice(3, 4);
      }
      if (otherIndex.charAt(0) === "0") {
        otherIndex = perfectlySorted[perfectlySorted.length - 1].slice(3, 4);
      }

      let month = months[index];
      let otherMonth = months[otherIndex];

      if (month && otherMonth) {
        lastSeven = `${perfectlySorted[perfectlySorted.length - 7].slice(
          0,
          2
        )} ${month} ${
          langdata.languages[themeLang].strings["to"]
        } ${perfectlySorted[perfectlySorted.length - 1].slice(
          0,
          2
        )} ${otherMonth}`;
      }
    }

    var date = [
      newKey.slice(0, 2),
      " ",
      months[parseInt(newKey.slice(2, 4))].slice(0, 3),
    ].join("");

    datesForChart.push(date);
    if (data[newKey].totalUsers) {
      totalVisits += parseInt(data[newKey].totalUsers);
      totalVisitsForChart.push(parseInt(data[newKey].totalUsers));
    } else {
      totalVisitsForChart.push(0);
    }
    if (data[newKey].uniqueUsers) {
      uniqueVisits += parseInt(data[newKey].uniqueUsers);
      visitsForChart.push(parseInt(data[newKey].uniqueUsers));
    } else {
      visitsForChart.push(0);
    }
    if (data[newKey].platform_Win32) {
      desktopVisits += parseInt(data[newKey].platform_Win32);
    }
    if (data[newKey].platform_MACIntel) {
      desktopVisits += parseInt(data[newKey].platform_MACIntel);
    }
    if (data[newKey].platform_iPhone) {
      mobileVisits += parseInt(data[newKey].platform_iPhone);
    }
    if (data[newKey].platform_Android) {
      mobileVisits += parseInt(data[newKey].platform_Android);
    }
    const langUsers = ts("lang_", data[newKey]);
    for (let langKey of Object.keys(langUsers)) {
      let key = Object.keys(langUsers[langKey])[0];
      visitsByLang[key] += Object.values(langUsers[langKey])[0];
    }
    const hoursUsers = ts("hours_", data[newKey]);
    for (let hourKey of Object.keys(hoursUsers)) {
      let key = Object.keys(hoursUsers[hourKey])[0];
      visitsByHour[0][key] += parseInt(Object.values(hoursUsers[hourKey])[0]);
    }
  }
  //}
  removeAllChildNodes(langUsersDiv);
  for (let key of Object.keys(visitsByLang)) {
    if (visitsByLang[key] != 0) {
      let langInput = document.createElement("input");
      langInput.classList.add("form-control", "w30");
      langInput.type = "number";
      langInput.value = visitsByLang[key];
      langInput.readOnly = true;
      let langName = langCodes[0][key];
      langUsersDiv.append(langName);
      langUsersDiv.append(document.createElement("br"));
      langUsersDiv.append(langInput);
      langUsersDiv.append(document.createElement("br"));
    }
  }
  andrUsers.value = androidUsers;
  iosUsers.value = iOSusers;
  totVisits.value = totalVisits;
  uniVisits.value = uniqueVisits;
  averageVisits = totalVisits / uniqueVisits;
  if (averageVisits) {
    aveVisits.value = averageVisits.toFixed(1);
  }
  deskVisits.value = desktopVisits;
  mobVisits.value = mobileVisits;
  let restVisits = totalVisits - uniqueVisits;
  // visits by hours chart
  let allHoursArray = [];
  for (let x = 0; x < 24; x++) {
    allHoursArray[x] = visitsByHour[0][x];
  }

  document.getElementById("myweekChartDivInner").innerHTML =
    '<canvas id="myweekChart" ></canvas>';
  var ctx = document.getElementById("myweekChart").getContext("2d");
  new Chart(ctx, {
    type: "line",
    data: {
      labels: [
        "12am",
        "1am",
        "2am",
        "3am",
        "4am",
        "5am",
        "6am",
        "7am",
        "8am",
        "9am",
        "10am",
        "11am",
        "12pm",
        "1pm",
        "2pm",
        "3pm",
        "4pm",
        "5pm",
        "6pm",
        "7pm",
        "8pm",
        "9pm",
        "10pm",
        "11pm",
      ],
      datasets: [
        {
          label: langdata.languages[themeLang].strings["totalVisitsByH"],
          data: allHoursArray,
          backgroundColor: ["rgba(255,69,0,0.8)"],
          borderColor: ["rgba(255,69,0,1.0)"],
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
      plugins: {
        legend: {
          onClick: null,
        },
        title: {
          display: true,
          text: `${currentProperty} - ${lastSeven}`,
        },
      },
    },
  });
  // visits by dates chart
  document.getElementById("myweekChartVisitDivInner").innerHTML =
    '<canvas id="myweekChartVisit"></canvas>';
  var ctxD = document.getElementById("myweekChartVisit").getContext("2d");
  new Chart(ctxD, {
    type: "line",
    data: {
      labels: datesForChart,
      datasets: [
        {
          label: langdata.languages[themeLang].strings["uniVisitsByD"],
          data: visitsForChart,
          backgroundColor: ["rgba(255,183,0)"],
          borderColor: ["rgba(255,183,0)"],
          borderWidth: 1,
        },
        {
          label: langdata.languages[themeLang].strings["totVisitsByD"],
          data: totalVisitsForChart,
          backgroundColor: ["rgba(255,69,0,1.0)"],
          borderColor: ["rgba(255,69,0,1.0)"],
          borderWidth: 1,
        },
      ],
    },
    options: {
      plugins: {
        title: {
          display: true,
          text: `${currentProperty} - ${lastSeven}`,
        },
      },
    },
  });

  // pie chart
  if (uniqueVisits || restVisits) {
    document.getElementById("myweekPieDivInner").innerHTML =
      '<canvas id="myweekPie" ></canvas>';
    var ctxP = document.getElementById("myweekPie").getContext("2d");
    new Chart(ctxP, {
      type: "doughnut",
      plugins: [ChartDataLabels],
      data: {
        labels: [
          `${langdata.languages[themeLang].strings["uniVisits"]}: ${uniqueVisits}`,
          `${langdata.languages[themeLang].strings["repeVisits"]}: ${restVisits}`,
        ],
        datasets: [
          {
            data: [uniqueVisits, restVisits],
            backgroundColor: ["rgba(255,183,0)", "rgba(231,114,35)"],
            hoverOffset: 4,
          },
        ],
      },
      options: {
        plugins: {
          legend: {
            onClick: null,
          },
          datalabels: {
            formatter: (value, ctx) => {
              let sum = 0;
              let dataArr = ctx.chart.data.datasets[0].data;
              dataArr.map((data) => {
                sum += data;
              });
              let percentage = 0;
              if (value === 0) {
                null;
              } else {
                percentage = ((value * 100) / sum).toFixed(2) + "%";
              }
              return percentage;
            },
            color: "#fff",
          },
          title: {
            display: true,
            text: `${currentProperty} - ${lastSeven}`,
          },
        },
      },
    });
  } else {
    document.getElementById("downloadDPChart").style.display = "none";
    document.getElementById("myweekPieDiv").hidden = true;
  }
};

const setDates = (data) => {
  let nextMonthVisits = [];
  let nextYearVisits = [];
  let deciderMonth = 0;
  let deciderYear = 0;

  // find smallest month and year
  for (let i = 0; i < Object.keys(data).length; i++) {
    let year = parseInt(Object.keys(data)[i].slice(4));
    let month = parseInt(Object.keys(data)[i].slice(2, 4));
    if (deciderYear === 0) {
      deciderYear = year;
    } else if (deciderYear > year) {
      deciderYear = parseInt(Object.keys(data)[i].slice(4));
    }
    if (deciderYear === year) {
      if (deciderMonth === 0) {
        deciderMonth = month;
      } else if (deciderMonth > month) {
        deciderMonth = parseInt(Object.keys(data)[i].slice(2, 4));
      }
    }
  }

  let objectKeys = Object.keys(data);
  for (let i = 0; i < objectKeys.length; i++) {
    let year = parseInt(objectKeys[i].slice(4));
    let month = parseInt(objectKeys[i].slice(2, 4));
    if (parseInt(deciderYear) < year) {
      nextYearVisits.push(objectKeys[i]);
      objectKeys.splice(i, 1);
      i--;
    } else if (deciderYear === year && deciderMonth < month) {
      nextMonthVisits.push(objectKeys[i]);
      objectKeys.splice(i, 1);
      i--;
    }
  }

  let perfectlySorted = objectKeys
    .sort()
    .concat(nextMonthVisits.sort(), nextYearVisits.sort());

  let days = document.getElementById("dailyAnalytics");
  removeAllChildNodes(days);
  var opt = document.createElement("option");
  opt.value = null;
  opt.appendChild(
    document.createTextNode(
      `${langdata.languages[themeLang].strings["selDate"]}`
    )
  );
  days.append(opt);

  for (let key of perfectlySorted) {
    let day = key.slice(0, 2);
    let index = key.slice(2, 4);
    if (index.charAt(0) === "0") {
      index = key.slice(3, 4);
    }
    let month = months[index];
    let year = key.slice(4);
    var opt = document.createElement("option");
    opt.value = key;
    opt.appendChild(document.createTextNode(`${day} ${month} ${year}`));
    days.append(opt);
  }

  dateChosen = days.options[days.selectedIndex].text;

  document.getElementById("mydayChartDivInner").innerHTML =
    '<canvas id="mydayChart" ></canvas>';
  var ctx = document.getElementById("mydayChart").getContext("2d");
  var myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: [
        "12am",
        "1am",
        "2am",
        "3am",
        "4am",
        "5am",
        "6am",
        "7am",
        "8am",
        "9am",
        "10am",
        "11am",
        "12pm",
        "1pm",
        "2pm",
        "3pm",
        "4pm",
        "5pm",
        "6pm",
        "7pm",
        "8pm",
        "9pm",
        "10pm",
        "11pm",
      ],
      datasets: [
        {
          label: langdata.languages[themeLang].strings["visitsByH"],
          data: [
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            0,
          ],
          backgroundColor: ["rgba(255,69,0,0.8)"],
          borderColor: ["rgba(255,69,0,1.0)"],
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
      plugins: {
        legend: {
          onClick: null,
        },
        title: {
          display: true,
          text: `${currentProperty}`,
        },
      },
    },
  });

  document.getElementById("mydayPieDivInner").innerHTML =
    '<canvas id="mydayPie" style="display: none"></canvas>';
  var ctxP = document.getElementById("mydayPie").getContext("2d");
  var myPie = new Chart(ctxP, {
    type: "doughnut",
    plugins: [ChartDataLabels],
    data: {
      labels: [
        langdata.languages[themeLang].strings["uniVisits"],
        langdata.languages[themeLang].strings["repeVisits"],
      ],
      datasets: [
        {
          data: [0, 0],
          backgroundColor: ["rgba(255,183,0)", "rgba(231,114,35)"],
          hoverOffset: 4,
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          onClick: null,
        },
        datalabels: {
          formatter: (value, ctx) => {
            let sum = 0;
            let dataArr = ctx.chart.data.datasets[0].data;
            dataArr.map((data) => {
              sum += data;
            });
            let percentage = 0;
            if (value === 0) {
              null;
            } else {
              percentage = ((value * 100) / sum).toFixed(2) + "%";
            }
            return percentage;
          },
          color: "#fff",
        },
        title: {
          display: true,
          text: `${currentProperty}`,
        },
      },
    },
  });
  days.addEventListener("change", () => {
    if (days.value !== "null") {
      dateChosen = days.options[days.selectedIndex].text;
      let dayData = data[days.value];
      let hours = ts("hours_", dayData);
      let allHoursArray = [];
      for (let x = 0; x < 24; x++) {
        for (let y = 0; y < hours.length; y++) {
          if (x == parseInt(Object.keys(hours[y]))) {
            allHoursArray[x] = hours[y][x];
            break;
          } else {
            allHoursArray[x] = 0;
          }
        }
      }
      myChart.data.datasets[0].data = allHoursArray;
      myChart.options.plugins.title.text = `${currentProperty} ${dateChosen}`;
      myChart.update();
      let totVisits = document.getElementById("totVisitsD");
      let uniVisits = document.getElementById("uniVisitsD");
      let aveVisits = document.getElementById("aveVisitsD");
      let deskVisits = document.getElementById("deskUsersD");
      let mobVisits = document.getElementById("mobUsersD");
      let langUsersDiv = document.getElementById("langUsersInputsD");
      let andrUsers = document.getElementById("andrUsersD");
      let iosUsers = document.getElementById("iosUsersD");
      let androidUsers = 0;
      let iOSusers = 0;
      let totalVisits = 0;
      let uniqueVisits = 0;
      let averageVisits = 0;
      let desktopVisits = 0;
      let mobileVisits = 0;
      let visitsByLang = {
        en: 0,
        de: 0,
        it: 0,
        fr: 0,
        es: 0,
        ru: 0,
        ar: 0,
        cn: 0,
        tr: 0,
        jp: 0,
      };
      if (dayData.totalUsers) {
        totalVisits += parseInt(dayData.totalUsers);
      }
      if (dayData.uniqueUsers) {
        uniqueVisits += parseInt(dayData.uniqueUsers);
      }
      if (dayData.platform_Win32) {
        desktopVisits += parseInt(dayData.platform_Win32);
      }
      if (dayData.platform_MACIntel) {
        desktopVisits += parseInt(dayData.platform_MACIntel);
      }
      if (dayData.platform_iPhone) {
        mobileVisits += parseInt(dayData.platform_iPhone);
        iOSusers += parseInt(dayData.platform_iPhone);
      }
      if (dayData.platform_Android) {
        mobileVisits += parseInt(dayData.platform_Android);
        androidUsers += parseInt(dayData.platform_Android);
      }
      const langUsers = ts("lang_", dayData);
      for (let langKey of Object.keys(langUsers)) {
        let key = Object.keys(langUsers[langKey])[0];
        visitsByLang[key] += Object.values(langUsers[langKey])[0];
      }
      removeAllChildNodes(langUsersDiv);
      for (let key of Object.keys(visitsByLang)) {
        if (visitsByLang[key] != 0) {
          let langInput = document.createElement("input");
          langInput.classList.add("form-control", "w30");
          langInput.type = "number";
          langInput.value = visitsByLang[key];
          langInput.readOnly = true;
          let langName = langCodes[0][key];
          langUsersDiv.append(langName);
          langUsersDiv.append(document.createElement("br"));
          langUsersDiv.append(langInput);
          langUsersDiv.append(document.createElement("br"));
        }
      }
      andrUsers.value = androidUsers;
      iosUsers.value = iOSusers;
      totVisits.value = totalVisits;
      uniVisits.value = uniqueVisits;
      averageVisits = totalVisits / uniqueVisits;
      if (averageVisits) {
        aveVisits.value = averageVisits.toFixed(1);
      }
      deskVisits.value = desktopVisits;
      mobVisits.value = mobileVisits;
      let restVisits = totalVisits - uniqueVisits;
      myPie.data.labels = myPie.data.datasets[0].label = [
        `${langdata.languages[themeLang].strings["uniVisits"]}: ${uniqueVisits}`,
        `${langdata.languages[themeLang].strings["repeVisits"]}: ${restVisits}`,
      ];

      if (uniqueVisits || restVisits) {
        document.getElementById("mydayPie").style.display = "block";
        document.getElementById("downloadDPChart").style.display = "block";
      }
      myPie.data.datasets[0].data = [uniqueVisits, restVisits];
      myPie.options.plugins.title.text = `${currentProperty} ${dateChosen}`;
      myPie.update();
    }
  });
};

const setMonthlyClicks = (data) => {
  let labels = [];
  let clicks = [];
  let totClicks = 0;
  let langs = [];
  let clicksForLang = {
    en: 0,
    de: 0,
    it: 0,
    fr: 0,
    es: 0,
    ru: 0,
    ar: 0,
    cn: 0,
    tr: 0,
    jp: 0,
  };

  for (let key of Object.keys(data)) {
    if (key !== "lastCheckDate") {
      let langCode = key.slice(0, 2);
      clicksForLang[langCode] += data[key];
      langs.push(langCode);
      let btnName = key.slice(3);
      totClicks += data[key];
      clicks.push(data[key]);
      labels.push(btnName);
    }
  }

  document.getElementById("totClicks").value = totClicks;

  // clear multiple lang codes and only keep 1 of each
  const uniqueLangs = langs.filter((x, i, a) => a.indexOf(x) == i);

  let clicksByLang = document.getElementById("clicksByLang");
  removeAllChildNodes(clicksByLang);
  uniqueLangs.forEach((lang) => {
    let clicksInput = document.createElement("input");
    clicksInput.classList.add("form-control", "w30");
    clicksInput.type = "number";
    clicksInput.value = clicksForLang[lang];
    clicksInput.readOnly = true;
    let clicksName = langCodes[0][lang];
    clicksByLang.append(clicksName);
    clicksByLang.append(document.createElement("br"));
    clicksByLang.append(clicksInput);
    clicksByLang.append(document.createElement("br"));
  });

  $(document).ready(function () {
    setTimeout(() => {
      document.getElementById("mymonthBarDivInner").innerHTML =
        '<canvas id="mymonthBars"></canvas>';
      var ctxB = document.getElementById("mymonthBars").getContext("2d");
      new Chart(
        ctxB,
        {
          type: "bar",
          plugins: [ChartDataLabels],
          data: {
            labels: labels,
            datasets: [
              {
                label: langdata.languages[themeLang].strings["btnClicks"],
                data: clicks,
                backgroundColor: ["rgba(255,69,0,0.8)"],
                borderColor: ["rgba(255,69,0,1.0)"],
                borderWidth: 1,
              },
            ],
          },
          options: {
            plugins: {
              legend: {
                onClick: null,
              },
              datalabels: {
                color: "#ffffff",
              },
              title: {
                display: true,
                text: `${currentProperty} - ${lastThirty}`,
              },
            },
            indexAxis: "y",
            responsive: true,
          },
        },
        1000
      );
      // set average clicks after value of unique visits has been set
      let amount = totClicks / document.getElementById("uniVisits").value;
      if (amount) {
        document.getElementById("aveClicks").value = amount.toFixed(1);
      }
    }, 1000);
  });
};

const setWeeklyClicks = (data) => {
  let labels = [];
  let clicks = [];
  let totClicks = 0;
  let langs = [];
  let clicksForLang = {
    en: 0,
    de: 0,
    it: 0,
    fr: 0,
    es: 0,
    ru: 0,
    ar: 0,
    cn: 0,
    tr: 0,
    jp: 0,
  };
  for (let key of Object.keys(data)) {
    if (key !== "lastCheckDate") {
      let langCode = key.slice(0, 2);
      clicksForLang[langCode] += data[key];
      langs.push(langCode);
      let btnName = key.slice(3);
      totClicks += data[key];
      clicks.push(data[key]);
      labels.push(btnName);
    }
  }
  document.getElementById("totClicksW").value = totClicks;
  // set average clicks after value of unique visits has been set
  $(document).ready(function () {
    setTimeout(() => {
      let amount = totClicks / document.getElementById("uniVisitsW").value;
      if (amount) {
        document.getElementById("aveClicksW").value = amount.toFixed(1);
      }
    }, 1000);
  });
  // clear multiple lang codes and only keep 1 of each
  const uniqueLangs = langs.filter((x, i, a) => a.indexOf(x) == i);
  let clicksByLang = document.getElementById("clicksByLangW");
  removeAllChildNodes(clicksByLang);
  uniqueLangs.forEach((lang) => {
    let clicksInput = document.createElement("input");
    clicksInput.classList.add("form-control", "w30");
    clicksInput.type = "number";
    clicksInput.value = clicksForLang[lang];
    clicksInput.readOnly = true;
    let clicksName = langCodes[0][lang];
    clicksByLang.append(clicksName);
    clicksByLang.append(document.createElement("br"));
    clicksByLang.append(clicksInput);
    clicksByLang.append(document.createElement("br"));
  });

  $(document).ready(function () {
    setTimeout(() => {
      document.getElementById("myweekBarDivInner").innerHTML =
        '<canvas id="myweekBar"></canvas>';
      var ctxB = document.getElementById("myweekBar").getContext("2d");
      new Chart(ctxB, {
        type: "bar",
        plugins: [ChartDataLabels],
        data: {
          labels: labels,
          datasets: [
            {
              label: langdata.languages[themeLang].strings["btnClicks"],
              data: clicks,
              backgroundColor: ["rgba(255,69,0,0.8)"],
              borderColor: ["rgba(255,69,0,1.0)"],
              borderWidth: 1,
            },
          ],
        },
        options: {
          plugins: {
            legend: {
              onClick: null,
            },
            datalabels: {
              color: "#ffffff",
            },
            title: {
              display: true,
              text: `${currentProperty} - ${lastSeven}`,
            },
          },
          indexAxis: "y",
          responsive: true,
        },
      });
    }, 1000);
  });
};

const setDailyClicks = (hotelUID, uid) => {
  document.getElementById("mydayBarDivInner").innerHTML =
    '<canvas id="mydayBar"></canvas>';
  var ctxB = document.getElementById("mydayBar").getContext("2d");
  let barChart = new Chart(ctxB, {
    type: "bar",
    plugins: [ChartDataLabels],
    data: {
      labels: [],
      datasets: [
        {
          label: langdata.languages[themeLang].strings["btnClicks"],
          data: [],
          backgroundColor: ["rgba(255,69,0,0.8)"],
          borderColor: ["rgba(255,69,0,1.0)"],
          borderWidth: 1,
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          onClick: null,
        },
        datalabels: {
          color: "#ffffff",
        },
        title: {
          display: true,
          text: `${currentProperty}`,
        },
      },
      indexAxis: "y",
      responsive: true,
    },
  });
  document.getElementById("dailyAnalytics").addEventListener("change", () => {
    sendHttpRequest(
      "POST",
      "https://us-central1-seteraguestcloud.cloudfunctions.net/clickStatistic",
      "customer=" +
        hotelUID +
        "&uid=" +
        uid +
        "&date=" +
        document.getElementById("dailyAnalytics").value
    ).then((data) => {
      let labels = [];
      let clicks = [];
      let totClicks = 0;
      let langs = [];
      let clicksForLang = {
        en: 0,
        de: 0,
        it: 0,
        fr: 0,
        es: 0,
        ru: 0,
        ar: 0,
        cn: 0,
        tr: 0,
        jp: 0,
      };

      if (data) {
        for (let key of Object.keys(data)) {
          if (key !== "lastCheckDate") {
            let langCode = key.slice(0, 2);
            clicksForLang[langCode] += data[key];
            langs.push(langCode);
            let btnName = key.slice(3);
            totClicks += data[key];
            clicks.push(data[key]);
            labels.push(btnName);
          }
        }
      }

      document.getElementById("totClicksD").value = totClicks;
      // set average clicks after value of unique visits has been set
      $(document).ready(function () {
        setTimeout(() => {
          let amount = totClicks / document.getElementById("uniVisitsD").value;
          if (amount) {
            document.getElementById("aveClicksD").value = amount.toFixed(1);
          }
        }, 1000);
      });
      // clear multiple lang codes and only keep 1 of each
      const uniqueLangs = langs.filter((x, i, a) => a.indexOf(x) == i);
      let clicksByLang = document.getElementById("clicksByLangD");
      removeAllChildNodes(clicksByLang);
      uniqueLangs.forEach((lang) => {
        let clicksInput = document.createElement("input");
        clicksInput.classList.add("form-control", "w30");
        clicksInput.type = "number";
        clicksInput.value = clicksForLang[lang];
        clicksInput.readOnly = true;
        let clicksName = langCodes[0][lang];
        clicksByLang.append(clicksName);
        clicksByLang.append(document.createElement("br"));
        clicksByLang.append(clicksInput);
        clicksByLang.append(document.createElement("br"));
      });
      barChart.data.labels = labels;
      barChart.data.datasets[0].data = clicks;
      barChart.options.plugins.title.text = `${currentProperty} ${dateChosen}`;
      barChart.update();

      //feedback
      let date = document.getElementById("dailyAnalytics").value;
      let startdate = new Date();
      startdate.setHours(0);
      startdate.setDate(date.slice(0, 2));
      startdate.setMonth(date.slice(2, 4) - 1);
      startdate.setFullYear(date.slice(4));

      let enddate = new Date();
      enddate.setHours(23);
      enddate.setDate(date.slice(0, 2));
      enddate.setMonth(date.slice(2, 4) - 1);
      enddate.setFullYear(date.slice(4));

      monthFeedback.forEach((dayData) => {
        let dataDate = new Date(dayData.timestamp._seconds * 1000);
        if (dataDate > startdate && dataDate < enddate) {
          hideFeedbackDepth();
          setFeedbackResult(dayData, document.getElementById("totalVotesD"));
          document
            .getElementById("showInDepthFD")
            .addEventListener("click", () => {
              renderFeedbackDepth(
                dayData,
                document.getElementById("inDepthFD")
              );
            });
        }
      });
    });
  });
};

const setGroupCharts = (data, namesAndUid, week) => {
  let labels = [];
  let visits = [];
  let totalVisits = [];
  let correctPeriod = lastSeven;

  for (let i = 0; i < namesAndUid.length; i++) {
    let key = Object.keys(namesAndUid[i])[0];
    labels.push(Object.values(namesAndUid[i])[0]);
    if (data[key]) {
      if (data[key].uniqueUsers) {
        visits.push(data[key].uniqueUsers);
      } else {
        visits.push(0);
      }
    }
    if (data[key]) {
      if (data[key].totalUsers) {
        totalVisits.push(data[key].totalUsers);
      } else {
        totalVisits.push(0);
      }
    }
  }

  if (week === "week") {
    correctPeriod = lastSeven;
  } else {
    correctPeriod = lastThirty;
  }

  setTimeout(() => {
    document.getElementById("mygroupBarDiv").innerHTML =
      '<div class="groupBarSt"><canvas id="mygroupBar"></canvas></div>';
    var ctxB = document.getElementById("mygroupBar").getContext("2d");
    let groupChart = new Chart(ctxB, {
      type: "bar",
      plugins: [ChartDataLabels],
      data: {
        labels: labels,
        datasets: [
          {
            label: langdata.languages[themeLang].strings["uniByProp"],
            data: visits,
            backgroundColor: ["rgba(255,69,0,0.8)"],
            borderColor: ["rgba(255,69,0,1.0)"],
            borderWidth: 1,
          },
          {
            label: langdata.languages[themeLang].strings["totByProp"],
            data: totalVisits,
            backgroundColor: ["rgba(128,128,128,0.8)"],
            borderColor: ["rgba(128,128,128,1.0)"],
            borderWidth: 1,
          },
        ],
      },
      options: {
        plugins: {
          datalabels: {
            color: "#ffffff",
          },
          title: {
            display: true,
            text: `${groupName} ${correctPeriod}`,
          },
        },
        indexAxis: "y",
        responsive: true,
      },
    });
  }, 1000);
};

function setVotes(data) {
  let allDateArray = [];
  let voteDateArray = [];
  let voteTotalArray = [];
  let voteUniqueArray = [];

  if (data.length > 0) {
    data.forEach((dayData) => {
      let d = new Date(dayData.timestamp._seconds * 1000);
      let totalVoteAmount = 0;
      let uniqueVoteAmount = 0;
      let tempObj = {};

      Object.keys(dayData).forEach((key) => {
        if (dayData[key].uid) {
          tempObj[dayData[key].uid] = 1; //tempObj length === unique user
        }
      });
      uniqueVoteAmount = Object.keys(tempObj).length;
      totalVoteAmount = Object.keys(dayData).length - 1;

      voteDateArray.push(d.toDateString());
      voteTotalArray.push(totalVoteAmount);
      voteUniqueArray.push(uniqueVoteAmount);
    });
  }

  let monthTotal = [];
  let monthUnique = [];
  let monthDate = [];

  for (let x = 0; x < 30; x++) {
    let d = new Date(Date.now() - x * 24 * 60 * 60 * 1000);
    d = d.toDateString();
    if (voteDateArray.includes(d)) {
      let position = voteDateArray.findIndex((a) => {
        return a === d;
      });
      monthTotal.push(voteTotalArray[position]);
      monthUnique.push(voteUniqueArray[position]);
    } else {
      monthTotal.push(0);
      monthUnique.push(0);
    }
    monthDate.push(d);
  }

  monthDate = monthDate.map((date) => {
    return date.split(" ")[2] + " " + date.split(" ")[1];
  });
  monthDate.reverse();
  monthUnique.reverse();
  monthTotal.reverse();

  renderFeedbackChart("month", monthDate, monthTotal, monthUnique);
  renderFeedbackChart(
    "week",
    monthDate.slice(-7),
    monthTotal.slice(-7),
    monthUnique.slice(-7)
  );
}

function renderFeedbackChart(type, date, total, unique) {
  if (type == "month") {
    var ctx = document.getElementById("mymonthChartFeedback").getContext("2d");
  } else if (type == "week") {
    var ctx = document.getElementById("myweekChartFeedback").getContext("2d");
  }

  let _title;
  type == "month" ? (_title = lastThirty) : (_title = lastSeven);

  new Chart(ctx, {
    type: "line",
    data: {
      labels: date,
      datasets: [
        {
          label: langdata.languages[themeLang].strings["totalVotesByD"],
          data: total,
          backgroundColor: ["rgba(255,183,0)"],
          borderColor: ["rgba(255,183,0)"],
          borderWidth: 1,
        },
        {
          label: langdata.languages[themeLang].strings["uniqueVotesByD"],
          data: unique,
          backgroundColor: ["rgba(255,69,0,1.0)"],
          borderColor: ["rgba(255,69,0,1.0)"],
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
      plugins: {
        legend: {
          onClick: null,
        },
        title: {
          display: true,
          text: `${currentProperty} - ${_title}`,
        },
      },
    },
  });
}

/*
feedback_off
const setMonthFeedbackChart = (monthResultforChart, period) => {
  console.log(monthResultforChart);
  const lastMonthDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
  let monthDateArray = [];
  let monthDataArray = [];
  console.log(period);

  //array containg the date <==> vote amout
  let _dateArray = [];
  let _dataArray = [];

  for (let x = 0; x < monthResultforChart.length; x++) {
    let temp = monthResultforChart[x];
    let total = 0;
    Object.keys(temp).forEach((key) => {
      if (key !== "timestamp") {
        Object.keys(temp[key]).forEach((key2) => {
          total += temp[key][key2];
        });
      }
    });
    let d2 = new Date(temp.timestamp._seconds * 1000);
    _dateArray.push(d2.toDateString());
    _dataArray.push(total);
  }

  for (let x = 0; x < period; x++) {
    let d = new Date(Date.now() - x * 24 * 60 * 60 * 1000);
    d = d.toDateString();
    if (_dateArray.includes(d)) {
      let position = _dateArray.findIndex((a) => {
        return a === d;
      });
      monthDataArray.push(_dataArray[position]);
    } else {
      monthDataArray.push(0);
    }
    monthDateArray.push(d);
  }

  let monthDateArray2 = monthDateArray.map((date) => {
    return date.split(" ")[2] + " " + date.split(" ")[1];
  });

  monthDateArray2.reverse();
  monthDataArray.reverse();

  if (period == 30) {
    var ctx = document.getElementById("mymonthChartFeedback").getContext("2d");
  } else if (period == 7) {
    var ctx = document.getElementById("myweekChartFeedback").getContext("2d");
  }

  new Chart(ctx, {
    type: "line",
    data: {
      labels: monthDateArray2,
      datasets: [
        {
          label: langdata.languages[themeLang].strings["totalVotesByH"],
          data: monthDataArray,
          backgroundColor: ["rgba(255,69,0,0.8)"],
          borderColor: ["rgba(255,69,0,1.0)"],
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
      plugins: {
        legend: {
          onClick: null,
        },
        title: {
          display: true,
          //text: `${currentProperty} ${lastThirty}`,
        },
      },
    },
  });
};

const setVotesWeek = (data) => {
  const today = new Date();
  today.setHours(0);
  today.setMinutes(30);

  const lastDayDate = new Date(Date.now() - 1 * 24 * 60 * 60 * 1000);
  lastDayDate.setHours(0);
  lastDayDate.setMinutes(30);

  const lastWeekDate = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
  lastWeekDate.setHours(0);
  lastWeekDate.setMinutes(30);

  let dayResult = {};
  let weekResult = {};
  let weekResultforChart = [];

  if (Object.keys(data).length !== 0) {
    data.forEach((oneDayData) => {
      let d = new Date(oneDayData.timestamp._seconds * 1000);

      if (d > lastWeekDate) {
        weekResultforChart.push(oneDayData);
        Object.keys(oneDayData).forEach((key) => {
          let temp = { ...oneDayData[key] };
          delete temp.timestamp;
          if (weekResult.hasOwnProperty(key)) {
            Object.keys(temp).forEach((key2) => {
              weekResult[key][key2] = weekResult[key][key2] + temp[key2];
            });
          } else {
            weekResult[key] = temp;
          }
          delete weekResult.timestamp;
        });
      }
    });
    setMonthFeedbackChart(weekResultforChart, 7);
  }

  setFeedbackResult(weekResult, document.getElementById("totalVotesW"));

  document.getElementById("showInDepthFW").addEventListener("click", () => {
    renderFeedbackDepth(weekResult, document.getElementById("inDepthFW"));
  });
};

const setVotesMonth = (data) => {
  let monthResult = {};
  let monthResultforChart = [];
  if (Object.keys(data).length !== 0) {
    const lastMonthDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
    lastMonthDate.setHours(0);
    lastMonthDate.setMinutes(30);

    data.forEach((oneDayData) => {
      let d = new Date(oneDayData.timestamp._seconds * 1000);

      if (d > lastMonthDate) {
        monthResultforChart.push(oneDayData);
        Object.keys(oneDayData).forEach((key) => {
          if (key !== "timestamp") {
            let temp = { ...oneDayData[key] };
            if (monthResult.hasOwnProperty(key)) {
              Object.keys(temp).forEach((key2) => {
                monthResult[key][key2] = monthResult[key][key2] + temp[key2];
              });
            } else {
              monthResult[key] = temp;
            }
            delete monthResult.timestamp;
          }
        });
      }
    });
    setMonthFeedbackChart(monthResultforChart, 30);
  }

  setFeedbackResult(monthResult, document.getElementById("totalVotes"));
  document.getElementById("showInDepthF").addEventListener("click", () => {
    renderFeedbackDepth(monthResult, document.getElementById("inDepthF"));
  });
};

//set the total votes
function setFeedbackResult(data, element) {
  let totalVotes = 0;
  Object.keys(data).forEach((key) => {
    if (key !== "timestamp") {
      Object.values(data[key]).forEach((value) => {
        totalVotes += value;
      });
    }
  });
  element.value = totalVotes;
}

//render the depth infrmation div
function renderFeedbackDepth(data, element) {
  if (element.style.display == "none") {
    element.append(document.createElement("hr"));
    element.append(document.createElement("br"));
    Object.keys(data).forEach((key) => {
      if (key !== "timestamp") {
        let span = document.createElement("span");
        span.textContent = key;

        let input = document.createElement("input");
        input.type = "text";
        input.readOnly = true;
        input.classList.add("form-control", "w30");
        input.style.marginBottom = "15px";

        let totalVotes = 0;
        let totalRate = 0;
        //calculate averange
        Object.keys(data[key]).forEach((key2) => {
          totalVotes += data[key][key2];
          totalRate += data[key][key2] * key2;
        });
        let averangeRate = totalRate / totalVotes;
        averangeRate = averangeRate.toFixed(2);
        input.value = "Ø " + averangeRate + "  (votes: " + totalVotes + ")";

        element.append(span);
        element.append(input);
        element.style.display = "block";
      }
    });
  } else {
    removeAllChildNodes(element);
    element.style.display = "none";
  }
}

function hideFeedbackDepth() {
  removeAllChildNodes(document.getElementById("inDepthFD"));
  removeAllChildNodes(document.getElementById("inDepthFW"));
  removeAllChildNodes(document.getElementById("inDepthF"));
}

//comment
function setComments(comments) {
  if (Object.keys(comments).length > 0) {
    let newCommentList = [];
    for (let x = 0; x < comments.length; x++) {
      Object.keys(comments[x]).forEach((key) => {
        if (key !== "timestamp") {
          newCommentList.push(comments[x][key]);
        }
      });
    }
    let cC = new CommentControler(newCommentList);
    let commentLeft = document.getElementById("commentLeft");
    let commentRight = document.getElementById("commentRight");

    commentRight.addEventListener("click", () => {
      cC.next();
    });

    commentLeft.addEventListener("click", () => {
      cC.back();
    });
  }
}

class CommentControler {
  constructor(comments) {
    this.comments = comments;
    this.counter = 0;
    document.getElementById("commentContent").textContent =
      this.comments[this.counter].comment;

    document.getElementById("commentInfo").textContent = this.getDate(
      this.comments[this.counter].timestamp
    );
  }

  next() {
    if (this.counter < this.comments.length - 1) {
      this.counter++;
      document.getElementById("commentContent").textContent =
        this.comments[this.counter].comment;

      document.getElementById("commentInfo").textContent = this.getDate(
        this.comments[this.counter].timestamp
      );
    }
  }

  back() {
    if (this.counter > 0) {
      this.counter--;
      document.getElementById("commentContent").textContent =
        this.comments[this.counter].comment;

      document.getElementById("commentInfo").textContent = this.getDate(
        this.comments[this.counter].timestamp
      );
    }
  }

  getDate(timestamp) {
    let d = new Date(timestamp);
    //return `${d.getHours()}:${d.getMinutes()} - ${d.getDay()}.${d.getMonth()}.${d.getFullYear()}`;
    return d.toDateString();
  }
}

function extractComment(obj) {
  let returnObj = {};
  Object.keys(obj).forEach((key) => {
    if (key !== "timestamp") {
      returnObj = obj[key];
    }
  });
  return returnObj;
}*/

document.getElementById("showInDepth").addEventListener("click", () => {
  let inDepth = document.getElementById("inDepth");
  if (inDepth.style.display === "none") {
    inDepth.style.display = "block";
    document.getElementById("showInDepth").textContent =
      langdata.languages[themeLang].strings["hideInDepth"];
  } else {
    inDepth.style.display = "none";
    document.getElementById("showInDepth").textContent =
      langdata.languages[themeLang].strings["showInDepth"];
  }
});

document.getElementById("showInDepthD").addEventListener("click", () => {
  let inDepth = document.getElementById("inDepthD");
  if (inDepth.style.display === "none") {
    inDepth.style.display = "block";
    document.getElementById("showInDepthD").textContent =
      langdata.languages[themeLang].strings["hideInDepth"];
  } else {
    inDepth.style.display = "none";
    document.getElementById("showInDepthD").textContent =
      langdata.languages[themeLang].strings["showInDepth"];
  }
});

document.getElementById("showInDepthW").addEventListener("click", () => {
  let inDepth = document.getElementById("inDepthW");
  if (inDepth.style.display === "none") {
    inDepth.style.display = "block";
    document.getElementById("showInDepthW").textContent =
      langdata.languages[themeLang].strings["hideInDepth"];
  } else {
    inDepth.style.display = "none";
    document.getElementById("showInDepthW").textContent =
      langdata.languages[themeLang].strings["showInDepth"];
  }
});

document.getElementById("showInDepthCW").addEventListener("click", () => {
  let inDepth = document.getElementById("inDepthCW");
  if (inDepth.style.display === "none") {
    inDepth.style.display = "block";
    document.getElementById("showInDepthCW").textContent =
      langdata.languages[themeLang].strings["hideClick"];
  } else {
    inDepth.style.display = "none";
    document.getElementById("showInDepthCW").textContent =
      langdata.languages[themeLang].strings["showClick"];
  }
});
document.getElementById("showInDepthCD").addEventListener("click", () => {
  let inDepth = document.getElementById("inDepthCD");
  if (inDepth.style.display === "none") {
    inDepth.style.display = "block";
    document.getElementById("showInDepthCD").textContent =
      langdata.languages[themeLang].strings["hideClick"];
  } else {
    inDepth.style.display = "none";
    document.getElementById("showInDepthCD").textContent =
      langdata.languages[themeLang].strings["showClick"];
  }
});
document.getElementById("showInDepthC").addEventListener("click", () => {
  let inDepth = document.getElementById("inDepthCM");
  if (inDepth.style.display === "none") {
    inDepth.style.display = "block";
    document.getElementById("showInDepthC").textContent =
      langdata.languages[themeLang].strings["hideClick"];
  } else {
    inDepth.style.display = "none";
    document.getElementById("showInDepthC").textContent =
      langdata.languages[themeLang].strings["showClick"];
  }
});

function ts(name, obj) {
  let arr = [];
  for (let x in obj) {
    if (x.indexOf(name) > -1) {
      let a = x.replace(name, "");
      let p = name + a;
      let b = obj[p];
      let o = {};
      o[a] = b;
      arr.push(o);
    }
  }
  return arr;
}

const setMonthLang = (lang) => {
  months = langdata.languages[lang].strings["allMonths"];
};