// ===============================================================
// SEND INPUT BEFORE AJAX
// ===============================================================
// Select all elements with id starting with 'navItem-' within the #sidebar div
var navItems = document.querySelectorAll('[name="sidebar"] [id^="navItem-"]');

navItems.forEach(function (navItem) {
  navItem.addEventListener("htmx:confirm", function (event) {
    event.preventDefault();

    // Get the page id
    var layout_id = navItem.getAttribute("hx-target");
    var pageDiv = document.querySelector(layout_id);
    var current_page = pageDiv.querySelector('[name="current_page"]');
    var current_page_id = current_page.id;

    if (pageDiv) {
      var elementsWithId = current_page.querySelectorAll("[id]");
      var elementsInfo = [];

      elementsWithId.forEach(function (element) {
        // Skip elements with id starting with 'datagrid-'
        if (element.id.startsWith("datagrid-")) {
          return;
        }

        let value = "";
        let method = "";

        switch (element.tagName) {
          case "INPUT":
            if (element.type === "checkbox") {
              value = element.checked; // For checkboxes
              method = "checked";
            } else if (element.type === "radio") {
              value = element.checked;
              method = "checked";
            } else if (element.type === "file") {
              value = element.files.length > 0 ? Array.from(element.files).map((file) => file.name) : []; // Array of file names
              method = "files";
            } else {
              value = element.value; // For other input types
              method = "value";
            }
            break;
          case "TEXTAREA":
            value = element.value; // For textareas
            method = "value";
            break;
          case "SELECT":
            value = element.multiple
              ? Array.from(element.selectedOptions).map((option) => option.value) // Multiple selections
              : element.value; // Single selection
            method = "value";
            break;
          default:
            if (element.isContentEditable) {
              value = element.innerText.trim(); // For contenteditable elements
              method = "innerText";
            } else {
              value = element.textContent; // For other elements
              method = "textContent";
            }
            break;
        }

        elementsInfo.push({
          id: element.id,
          type: element.tagName.toLowerCase(), // Element type in lowercase
          value: value,
          method: method,
        });
      });

      var result = {
        dl_id: layout_id.replace("#page_", ""),
        page_id: current_page_id,
        state: elementsInfo,
      };

      // Post the elementInfo to the specified URL
      fetch("/pages/store_state", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(result),
      })
        .then((response) => {
          event.detail.issueRequest(true);
        })
        .catch((error) => {
          console.error("Error:", error); // Handle errors if any occur
          event.detail.issueRequest(true);
        });
    }
  });
});