function replaceInputWithDropdown(targetId, dataset, facsId = null){
  const nativeContainer = document.getElementById(targetId).parentNode
  document.getElementById(targetId).style.display = "none"
  const selector = document.createElement("select")
  selector.id = facsId
  for (let optionName in dataset) {
    const option = document.createElement("option")
    option.innerHTML = optionName
    option.value = optionName
    selector.appendChild(option)
  }
  nativeContainer.appendChild(selector)
  return selector
}

function createSimplifiedDropdown(targetId, dataset, facsId = null){
  const nativeContainer = document.getElementById(targetId).parentNode
  document.getElementById(targetId).style.display = "none"
  const selector = document.createElement("select")
  selector.id = facsId
  dataset.forEach(optionName => {
    const option = document.createElement("option")
    option.innerHTML = optionName
    option.value = optionName
    selector.appendChild(option)
  })
  nativeContainer.appendChild(selector)
  return selector
}

function createCustomCheckbox(container, id, labelText){
  container.childNodes.forEach(elem => {
    elem.style.display = "none"
  })
  const checkboxWrapper = document.createElement("div")
  const checkbox = document.createElement("input")
  checkbox.type = "checkbox"
  checkbox.id = id
  const checkboxLabel = document.createElement("label")
  checkboxLabel.htmlFor = id
  checkboxLabel.style.display = "inline"
  checkboxLabel.style.marginLeft = "5px"
  checkboxLabel.appendChild(labelText)
  checkboxWrapper.appendChild(checkbox)
  checkboxWrapper.appendChild(checkboxLabel)
  container.appendChild(checkboxWrapper)
  return checkbox
}

function createCustomDates(nativeList){
  var customDateCollection = []
  nativeList.forEach((dateNativeField, index) => {
    dateNativeField.parentNode.style.display = "none"
    const dateField = document.createElement("input")
    const elemId = "date_custom_" + (index + 1)
    dateField.id = elemId
    const controlWrapper = document.createElement("span")
    controlWrapper.id = "controls_" + index
    controlWrapper.style.marginLeft = "5px"
    controlWrapper.style.minWidth = "50px"
    controlWrapper.style.display = "inline-block"

    const addLocationWrapper = document.createElement("div")
    addLocationWrapper.id = "addtable_wrapper_" + (index+1)
    const addLocationHeader = document.createElement("div")
    addLocationHeader.className += "addloc-header"
    addLocationHeader.style.textColor = "lightgrey"
    addLocationHeader.style.fontSize = "16px"
    const addLocationArrow = document.createElement("span")
    addLocationHeader.appendChild(addLocationArrow)
    addLocationArrow.innerHTML = "►"
    addLocationHeader.innerHTML += "Click here to select additional locations"
    const addLocationTableContainer = document.createElement("div")
    addLocationTableContainer.id = "addtable_" + (index+1)
    addLocationTableContainer.className += "addtable-container"
    jQuery(addLocationTableContainer).hide()
    addLocationHeader.onclick = function(){
      console.log(addLocationArrow.innerHTML, addLocationArrow.innerHTML === "►")
      addLocationArrow.innerHTML = (addLocationArrow.innerHTML === "►") ? "▼" : "►"
      jQuery(addLocationTableContainer).toggle(200)
    }
    addLocationWrapper.appendChild(addLocationHeader)
    addLocationWrapper.appendChild(addLocationTableContainer)

    dateNativeField.parentNode.parentNode.append(dateField)
    dateNativeField.parentNode.parentNode.append(controlWrapper)
    dateNativeField.parentNode.parentNode.append(addLocationWrapper)
    if (index > 0) dateNativeField.parentNode.parentNode.style.display = "none"
    customDateCollection.push(dateField)
    jQuery("#"+elemId).datepicker({
      dateFormat: "yy-mm-dd",
      firstDay: 1
    })
  })
  return customDateCollection
}

  function createInputWithRestrictions(elem, pattern){
const parent = elem.parentNode
const input = document.createElement("input")
if (pattern) input.pattern = pattern
elem.style.display = "none"
parent.appendChild(input)
return input
}

function createDocumentSection(target, todayGlobal){
  target.parentNode.childNodes.forEach(node => {
    node.style.display = "none"
  })
  const documentTextWrapper = document.createElement("div")
  const documentTextHeader = document.createElement("div")
  documentTextHeader.style.fontSize = "16px"
  const headerArrow = document.createElement("span")
  headerArrow.innerHTML = "▼"
  const headerTitle = document.createElement("span")
  headerTitle.innerHTML = "Текст документа (click to view)"
  documentTextHeader.appendChild(headerArrow)
  documentTextHeader.appendChild(headerTitle)
  const documentTextContent = document.createElement("div")
  documentTextHeader.onclick = function(){
    documentTextContent.hidden = !documentTextContent.hidden
    headerArrow.innerHTML = (headerArrow.innerHTML === "►" ? "▼" : "►")
  }
  documentTextContent.style.width = "600px"
  documentTextContent.style.margin = "15px"
  documentTextContent.insertAdjacentHTML('beforeend', '<div style="text-align: center">         <b>Заява на допуск до користування Простором Товариства з обмеженою відповідальністю «ТекХостинг» (далі – ТОВ «ТекХостинг»)</b>       </div>       <br>       <div style="text-align: justify">         <p>           Я, <b>фізична особа-підприємець</b> {{ current_user.phone }}, прошу допустити мене до користування офісним простором ТОВ «ТекХостинг» (далі – Простір), що знаходиться за адресою: <span id="doc-address"></span>.         </p>         <br>         <p>           <b>Я підтверджую</b>, що на момент надання мені доступу до користування Простором:           <ul>             <li>у мене відсутні будь-які ознаки ГРВІ, а саме: підвищена температура тіла (більше 37,2 С), кашель, утруднене дихання тощо;</li>             <li>я ознайомлений(а) з рекомендаціями МОЗ та ВООЗ щодо попередження зараження COVID-19 та їх дотримуюсь;</li>             <li>протягом останніх 14 днів я не перебував(ла) за межами України та не контактував(ла) з особами, щодо яких наявна підозра/хворими на COVID-19.</li>           </ul>         </p>         <br>         <p>           <b>Я зобов’язуюсь</b> під час користування Простором дотримуватися посилених санітарно-гігієнічних норм, а також рекомендацій МОЗ та ВООЗ щодо запобігання поширенню COVID-19, а саме:           <ul>             <li>носити медичну маску/респіратор;</li>             <li>ретельно мити руки з милом протягом 20-40 сек. та регулярно обробляти їх антисептичним засобом під час перебування в Просторі;</li>             <li>дотримуватися дистанції min 1,5 (півтора) метри від інших відвідувачів Простору.</li>           </ul>         </p>       </div><br>       <div>         <b>Дата</b>: ' + todayGlobal + '       </div>')
  documentTextContent.hidden = true
  documentTextWrapper.appendChild(documentTextHeader)
  documentTextWrapper.appendChild(documentTextContent)
  target.parentNode.appendChild(documentTextWrapper)
  return documentTextContent
}

function createAdditionalOfficeSelectors(ids, datalist){
  var list = []
  ids.forEach((id, index) => {
    const newID = "additional_office_" + (index+1)
    const selector = replaceInputWithDropdown(id, datalist, newID)
    selector.parentNode.style.display = "none"
    if (index > 0) selector.parentNode.childNodes.item("LABEL").style.display = "none"
    list.push(selector)
  })
  return list
}

function calcDateLimits(thisWeek){
  const nowDate = new Date()
  var limits = []
  if (thisWeek) {
    const dateMin = nowDate.toISOString().split("T")[0]
    const nowWeekDay = nowDate.getDay()
    const daysToAdd = !nowWeekDay ? 0 : 7 - nowWeekDay
    nowDate.setDate(nowDate.getDate() + daysToAdd)
    const dateMax = nowDate.toISOString().split("T")[0]
    limits.push(dateMin)
    limits.push(dateMax)
  } else {
    const nowWeekDay = nowDate.getDay()
    const daysToAdd = !nowWeekDay ? 1 : 7 - nowWeekDay + 1
    nowDate.setDate(nowDate.getDate() + daysToAdd)
    const dateMin = nowDate.toISOString().split("T")[0]
    nowDate.setDate(nowDate.getDate() + 6)
    const dateMax = nowDate.toISOString().split("T")[0]
    limits.push(dateMin)
    limits.push(dateMax)
  }
  return limits
}

function reverseForFS(date){
  if (!date) return null
  const vals = date.split("-")
  //return `${vals[2]}-${vals[1]}-${vals[0]}`
  return vals[2]+"-"+vals[1]+"-"+vals[0]
}

function getElemList(idList){
  var collection = []
  idList.forEach(id => {
    collection.push(document.getElementById(id))
  })
  return collection
}

function createCapacityDisplay(nextElement){
  const wrapper = document.createElement("div")
  wrapper.style.border = "3px solid #70c9e9"
  wrapper.style.minHeight = "100px"
  wrapper.style.width = "250px"
  wrapper.style.margin = "5px 0px 5px 0px"
  wrapper.style.padding = "5px"
  const mainWrapper = nextElement.parentNode
  mainWrapper.insertBefore(wrapper, nextElement)
  wrapper.hidden = true
  return wrapper
}