document.addEventListener("DOMContentLoaded", function () {
  //if (document.body.classList.contains("page-template-calculator-page")) {
    addToForm("basic", "car-basic");
    addToForm("vehicleCost", "car-cost");
    addToForm("year", "car-year");
    addToForm("iznos", "car-iznos");
    addToForm("use_type", "car-use");
    addToForm("driveExp", "driver-exp");
    addToForm("vehicleCount", "car-quantity");
    addToForm("inshurens", "car-insurance");
    addToForm("franchizi", "car-franchise");
    addToForm("franchiziTotal", "franchizi-total");
    addToForm("franchiziStill", "car-franchise-steal");
    addToForm("franchiziGlass", "car-franchise-glass");
    addToForm("calcinsurens", "car-repair-place");
    addToForm("duration", "kasko-duration");
    addToForm("procedure", "pay-steps");
    addToForm("truck", "evacuation");
    addToForm("currency", "currency-corridor");
    addToForm("settlement", "kasko-settlement");
    addToForm("additional", "kasko-additional");
  //}
});

document.addEventListener("DOMContentLoaded", function () {
  //if (document.body.classList.contains("page-template-calculator-page")) {
    const radioButtons = document.querySelectorAll('input[name="vehicleType"]');

    radioButtons.forEach((radio) => {
      radio.addEventListener("change", function () {
        if (radio.value == "ltz") {
          addToForm(radio.nextElementSibling.innerText, "car-type");
        }
        let content = document.getElementById("template-content");
        let preloader = null;
        if (content) {
          preloader = content.querySelector(".ajax-preloader");
          if (preloader) {
            preloader.style.display = "flex";
          }
        }

        const selectedValue = this.value;
        loadTemplate(selectedValue);
      });
    });

    // Load default template
    let defaultTemplate = document.querySelector(
      'input[name="vehicleType"]:checked'
    );
    if (defaultTemplate && defaultTemplate.value) {
      loadTemplate(defaultTemplate.value);
    }
  //}
});

function loadTemplate(vehicleType) {
  let content = document.getElementById("template-content");
  let preloader = null;
  if (content && preloader) {
    preloader = content.querySelector(".ajax-preloader");
  }

  const xhr = new XMLHttpRequest();
  xhr.open(
    "POST",
    "/modules/ajax/ajax_kasko_calculator_template.php",
    true
  );
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  xhr.onload = function () {
    if (xhr.status === 200) {
      document.getElementById("template-content").innerHTML = xhr.responseText;
      customSelect();
      selectInit();
      if (preloader) {
        preloader.style.display = "none";
      }
      // selectCheckboxesByIndex([
      //   1, 1, 3, 1, 2, 1, 2, 2, 1, 2, 11, 1, 1, 1, 1, 1,
      // ]);
    }
  };

  // Получаем ID поста из глобальной переменной
  const postId = window.currentPostId || 0; // 0 как значение по умолчанию
  console.log(postId);
  // Отправляем оба параметра
  const data =
    "vehicleType=" +
    encodeURIComponent(vehicleType) +
    "&postId=" +
    encodeURIComponent(postId);
  xhr.send(data);
}

function customSelect() {
  var x, i, j, l, ll, selElmnt, a, b, c;

  x = document.getElementsByClassName("custom-select");

  if (x.length > 0) {
    l = x.length;

    for (i = 0; i < l; i++) {
      selElmnt = x[i].getElementsByTagName("select")[0];

      if (selElmnt) {
        ll = selElmnt.length;

        /* For each element, create a new DIV that will act as the selected item: */
        a = document.createElement("DIV");
        a.setAttribute("class", "select-selected");
        a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
        x[i].appendChild(a);

        /* For each element, create a new DIV that will contain the option list: */
        b = document.createElement("DIV");
        b.setAttribute("class", "select-items select-hide");

        for (j = 0; j < ll; j++) {
          /* For each option in the original select element,
                  create a new DIV that will act as an option item: */
          if (j !== selElmnt.selectedIndex) {
            c = document.createElement("DIV");
            c.innerHTML = selElmnt.options[j].innerHTML;

            c.addEventListener("click", function (e) {
              /* When an item is clicked, update the original select box,
                          and the selected item: */
              var y, i, k, s, h, sl, yl;
              s = this.parentNode.parentNode.getElementsByTagName("select")[0];
              sl = s.length;
              h = this.parentNode.previousSibling;

              for (i = 0; i < sl; i++) {
                if (s.options[i].innerHTML == this.innerHTML) {
                  s.selectedIndex = i;
                  h.innerHTML = this.innerHTML;
                  y =
                    this.parentNode.getElementsByClassName("same-as-selected");
                  yl = y.length;

                  for (k = 0; k < yl; k++) {
                    y[k].removeAttribute("class");
                  }
                  this.setAttribute("class", "same-as-selected");
                  break;
                }
              }
              h.click();

              // Добавьте эту строку для генерации события change:
              var changeEvent = new Event("change", {
                bubbles: true,
              });
              s.dispatchEvent(changeEvent);
            });
            b.appendChild(c);
          }
        }
        x[i].appendChild(b);

        a.addEventListener("click", function (e) {
          /* When the select box is clicked, close any other select boxes,
                  and open/close the current select box: */
          e.stopPropagation();
          closeAllSelect(this);
          this.nextSibling.classList.toggle("select-hide");
          this.classList.toggle("select-arrow-active");
        });
      }
    }

    function closeAllSelect(elmnt) {
      /* A function that will close all select boxes in the document,
          except the current select box: */
      var x,
        y,
        i,
        xl,
        yl,
        arrNo = [];
      x = document.getElementsByClassName("select-items");
      y = document.getElementsByClassName("select-selected");
      xl = x.length;
      yl = y.length;

      for (i = 0; i < yl; i++) {
        if (elmnt == y[i]) {
          arrNo.push(i);
        } else {
          y[i].classList.remove("select-arrow-active");
        }
      }
      for (i = 0; i < xl; i++) {
        if (arrNo.indexOf(i)) {
          x[i].classList.add("select-hide");
        }
      }
    }

    /* If the user clicks anywhere outside the select box,
      then close all select boxes: */
    document.addEventListener("click", function (event) {
      var target = event.target;
      if (!target.classList.contains("select-selected")) {
        closeAllSelect(null);
      }
    });
  }
}

function selectCheckboxesByIndex(indexes) {
  const checkboxGroups = document.querySelectorAll('input[type="checkbox"]');
  const groupedCheckboxes = {};

  // Группируем чекбоксы по имени (name)
  checkboxGroups.forEach((checkbox) => {
    const groupName = checkbox.name;
    if (!groupedCheckboxes[groupName]) {
      groupedCheckboxes[groupName] = [];
    }
    groupedCheckboxes[groupName].push(checkbox);
  });

  // Перебираем группы чекбоксов и выбираем нужный по индексу
  Object.keys(groupedCheckboxes).forEach((groupName, index) => {
    const checkboxes = groupedCheckboxes[groupName];
    const selectedIndex = indexes[index] - 1; // Индексы передаются начиная с 1, а массивы с 0

    if (selectedIndex >= 0 && selectedIndex < checkboxes.length) {
      checkboxes[selectedIndex].checked = true;

      // Генерируем событие change для обновления значений формы
      const changeEvent = new Event("change", { bubbles: true });
      checkboxes[selectedIndex].dispatchEvent(changeEvent);
    }
  });
}

function selectInit() {
  const selectElement = document.getElementById("basic");

  if (selectElement) {
    const allSelectElements = selectElement.querySelectorAll("option");
    selectElement.addEventListener("change", function () {
      const selectedValue = this.value;
      const allTabs = document.querySelectorAll(".usedCount");
      addToForm(allSelectElements[this.value].innerText, "car-type");
      allTabs.forEach((tab) => {
        if (tab.getAttribute("data-tab") === selectedValue) {
          tab.classList.add("usedCount--show");
        } else {
          tab.classList.remove("usedCount--show");
        }
      });
    });
  }
}

function addToForm(fieldsName, addToFormField) {
  let fields = document.querySelectorAll(`[name='${fieldsName}']`);

  if (fields.length > 0 && fields) {
    fields.forEach(function (field) {
      let targetField = document.querySelector(`[name='${addToFormField}']`);

      if (field.type === "checkbox") {
        field.addEventListener("change", function () {
          if (targetField) {
            if (field.checked) {
              let label = field.nextElementSibling;
              if (label && label.tagName.toLowerCase() === "label") {
                targetField.value = label.innerText;
              } else {
                targetField.value = "";
              }
            } else {
              targetField.value = "";
            }
          }
        });
      } else if (field.tagName.toLowerCase() === "select") {
        field.addEventListener("change", function () {
          if (targetField) {
            targetField.value = field.value;
          }
        });
      } else {
        field.addEventListener("input", function () {
          if (targetField) {
            targetField.value = field.value;
          }
        });
      }
    });
  }

  let spanField = document.querySelectorAll(`[data-section='${fieldsName}']`);

  if (spanField && spanField.length > 0) {
    spanField.forEach(function (field) {
      let targetField = document.querySelector(`[name='${addToFormField}']`);

      field.addEventListener("click", function () {
        if (targetField) {
          targetField.value = field.innerText;
        }
      });
    });
  }
}

function addSelectToForm(fieldsName, addToFormField) {
  let selectFieldId = document.getElementById(`${fieldsName}`);
  console.log(selectFieldId);
  if (selectFieldId && selectFieldId.tagName.toLowerCase() === "select") {
    let targetField = document.querySelector(`[name='${addToFormField}']`);
    selectFieldId.addEventListener("change", function () {
      if (targetField) {
        targetField.value = selectFieldId.value;
      }

      if (document.body.classList.contains("page-template-real-estate")) {
        let formHiddenInputs = document.querySelectorAll(
          'input[type="hidden"]'
        );
        if (formHiddenInputs && formHiddenInputs.length > 0) {
          formHiddenInputs.forEach(function (input) {
            input.value = "";
          });
        }
      }
    });
  }
}