function applyFilter(
  masterSelectId,
  detailSelectId,
  dataAttribute,
  selectedDetail = null,
) {
  var masterSelect = document.getElementById(masterSelectId);
  var detailSelect = document.getElementById(detailSelectId);
  var originalDetailOptions = Array.from(detailSelect.options).slice(1); // Preserve original options except the first one

  function filterDetails() {
    var selectedMaster = masterSelect.value;

    // Remove all current options except the first one (Todos)
    while (detailSelect.options.length > 1) {
      detailSelect.remove(1);
    }

    // Add back the filtered options based on the data attribute
    originalDetailOptions.forEach(function (option) {
      if (
        selectedMaster === "Todos" ||
        option.getAttribute(dataAttribute) === selectedMaster
      ) {
        detailSelect.add(option.cloneNode(true));
      }
    });

    // Seleciona o item previamente escolhido, se houver
    if (selectedDetail) {
      detailSelect.value = selectedDetail;
    }
  }

  // Apply filtering when master select changes
  masterSelect.addEventListener("change", function () {
    selectedDetail = ""; // Clear the selected detail when master changes
    filterDetails();
  });

  // Initial filter on page load
  filterDetails();
}
function injectCSS(prefix, x = true, y = true) {
  const style = document.createElement("style");
  let css = `
        .${prefix}-dropdown-menu {
            display: none;
            max-height: 300px;
            overflow-y: auto;
            position: absolute;
            z-index: 1000;
        }
         .${prefix}-dropdown-item {
            cursor: pointer;
            padding: 8px;
            background-color:rgb(255, 255, 255); /* Definir a cor de fundo */
            color: inherit; /* Preserva a cor do texto definida globalmente */
            text-decoration: none; /* Remove o sublinhado */
        }
        .${prefix}-dropdown-item:hover {
            background-color: #f0f0f0;
        }
    `;
  if (x) {
    css += `
            .drop {
                position: relative;
                bottom: 30px;
            }
        `;
  }
  if (y) {
    css += `
            #${prefix} {
                top: 10px; /* Deslocamento de 10px para baixo */
            }
        `;
  }
  style.textContent = css;
  document.head.appendChild(style);
}

function initDropdownFilter(
  prefix,
  nome_id = false,
  referencia = null,
  all_cod = true,
) {
  injectCSS(prefix);
  const filterInputId = `${prefix}_input`;
  const dropdownId = `${prefix}_dropdown`;
  const selectAllId = `${prefix}select_all`;
  const setorHiddenInputId = `${prefix}selecionados`;
  const checkboxSelector = `.${prefix}-checkbox`;
  const dropdownItemSelector = `.${prefix}-dropdown-item`;
  const filterInput = document.getElementById(filterInputId);
  const dropdown = document.getElementById(dropdownId);
  const selectAllCheckbox = document.getElementById(selectAllId);
  const setorHiddenInput = document.getElementById(setorHiddenInputId);
  const functionName = `toggleSelectAll${prefix}`; // Concatena o nome da função
  const functionDelete = `toggleDeleteAll${prefix}`; // Concatena o nome da função
  const functionUpdateName = `updateSelectedItems${prefix}`; // Concatena o nome da função

  // Função para pegar parâmetros da URL
  function getParameterByName(name) {
    const url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
    const results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return "";
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

  const setorIdsFromURL = getParameterByName(prefix);
  const selectedIdsFromURL = setorIdsFromURL ? setorIdsFromURL.split(",") : [];

  // Exibir ou ocultar o dropdown
  filterInput.addEventListener("click", function () {
    dropdown.style.display =
      dropdown.style.display === "block" ? "none" : "block";
  });

  // Filtrar elementos no dropdown
  filterInput.addEventListener("input", function () {
    const filterValue = this.value.toLowerCase();
    const items = dropdown.querySelectorAll(dropdownItemSelector);

    let selectedFilial = [];
    if (referencia) {
      // Verifica se referencia foi passada
      const filialDropdown = document.getElementById(referencia);
      selectedFilial = filialDropdown.value.split(","); // Lista de IDs de filiais selecionadas
    }

    const shownVendors = new Set(); // Conjunto para armazenar IDs de vendedores já exibidos

    items.forEach(function (item) {
      const itemText = item.textContent.toLowerCase();
      const vendedorId = item
        .querySelector(`#${dropdownId} ${checkboxSelector}`)
        .getAttribute(`data-${prefix}-id`); // ID do vendedor

      let dataReferencia = null;
      if (referencia) {
        dataReferencia = item
          .querySelector(`#${dropdownId} ${checkboxSelector}`)
          .getAttribute(`data-referencia-${prefix}`);
      }

      const shouldShow =
        selectedFilial.includes("Todos") ||
        selectedFilial.includes(dataReferencia);

      if (
        itemText.includes(filterValue) &&
        (!referencia || (shouldShow && !shownVendors.has(vendedorId)))
      ) {
        item.style.display = "block"; // Exibe o item
        if (referencia) shownVendors.add(vendedorId); // Adiciona o vendedor ao conjunto para evitar repetição
      } else {
        item.style.display = "none"; // Oculta o item
      }
    });

    dropdown.style.display = filterValue ? "block" : "none";
  });

  window[functionDelete] = function () {
    const checkboxes = document.querySelectorAll(
      `#${dropdownId} ${checkboxSelector}`,
    );
    checkboxes.forEach((checkbox) => (checkbox.checked = false)); // Desmarca todos os checkboxes
    window[functionUpdateName](); // Atualiza a lista de selecionados
  };

  // Selecionar ou desmarcar todos os checkboxes
  window[functionName] = function (selectAllCheckbox) {
    const checkboxes = document.querySelectorAll(
      `#${dropdownId} ${checkboxSelector}`,
    );
    checkboxes.forEach(
      (checkbox) => (checkbox.checked = selectAllCheckbox.checked),
    );
    window[functionUpdateName]();
  };

  window[functionUpdateName] = function () {
    const selectedCheckboxes = Array.from(
      document.querySelectorAll(`#${dropdownId} ${checkboxSelector}`),
    ).filter((checkbox) => checkbox.checked);

    const selectedNames = selectedCheckboxes.map((checkbox) =>
      checkbox.getAttribute(`data-${prefix}-name`),
    );
    const selectedIds = selectedCheckboxes.map((checkbox) => {
      return nome_id
        ? checkbox.getAttribute(`data-${prefix}-name`)
        : checkbox.getAttribute(`data-${prefix}-id`);
    });

    filterInput.value = selectedNames.join(", ");

    if (all_cod) {
      // Para o filtro de filial queremos sempre enviar
      // todos os IDs selecionados, mesmo quando todas
      // as filiais estiverem marcadas, para que a URL
      // reflita corretamente a seleção e o front
      // consiga recarregar o estado após o submit.
      if (prefix === "filial") {
        setorHiddenInput.value = selectedIds.join(",");
      } else {
        if (selectedCheckboxes.length !== checkboxes.length) {
          setorHiddenInput.value = selectedIds.join(",");
        } else {
          setorHiddenInput.value = "";
        }
      }
    } else {
      setorHiddenInput.value = selectedIds.join(",");
    }

    const clearButton = document.getElementById(`${prefix}_clear_btn`);

    if (clearButton) {
      clearButton.style.display =
        selectedCheckboxes.length > 0 ? "inline" : "none";
    }
    //selectAllCheckbox.checked = selectedCheckboxes.length === document.querySelectorAll(`#${dropdownId} ${checkboxSelector}`).length;
  };

  const checkboxes = document.querySelectorAll(
    `#${dropdownId} ${checkboxSelector}`,
  );
  checkboxes.forEach((checkbox) => {
    // Adiciona evento 'change' para sincronizar checkboxes apenas ao desmarcar
    checkbox.addEventListener("change", function () {
      if (!this.checked) {
        // Apenas executa quando desmarcar
        const checkboxId = this.getAttribute(`data-${prefix}-id`);

        // Selecionar todos os checkboxes com o mesmo ID
        const relatedCheckboxes = document.querySelectorAll(
          `#${dropdownId} ${checkboxSelector}[data-${prefix}-id="${checkboxId}"]`,
        );
        relatedCheckboxes.forEach((relatedCheckbox) => {
          relatedCheckbox.checked = false;
        });

        // Atualizar os itens selecionados
        window[functionUpdateName]();
      }
    });

    // Aplicar seleção inicial com base nos IDs da URL
    const setorId = nome_id
      ? checkbox.getAttribute(`data-${prefix}-name`)
      : checkbox.getAttribute(`data-${prefix}-id`);

    if (selectedIdsFromURL.includes(setorId)) {
      checkbox.checked = true;
    }
  });

  window[functionUpdateName]();

  document.addEventListener("click", function (e) {
    if (!filterInput.contains(e.target) && !dropdown.contains(e.target)) {
      dropdown.style.display = "none";
    }
  });

  if (referencia) {
    const filialDropdown = document.getElementById(referencia);
    filialDropdown.addEventListener("change", function () {
      const selectedFilial = this.value.split(","); // Lista de IDs de filiais selecionadas
      const items = dropdown.querySelectorAll(dropdownItemSelector);

      const shownVendors = new Set(); // Conjunto para armazenar IDs de vendedores já exibidos

      items.forEach(function (item) {
        const dataReferencia = item
          .querySelector(`#${dropdownId} ${checkboxSelector}`)
          .getAttribute(`data-referencia-${prefix}`);
        const vendedorId = item
          .querySelector(`#${dropdownId} ${checkboxSelector}`)
          .getAttribute(`data-${prefix}-id`); // ID do vendedor

        // Verifica se "Todos" está selecionado ou se o `dataReferencia` está incluído na lista de filiais
        const shouldShow =
          selectedFilial.includes("Todos") ||
          selectedFilial.includes(dataReferencia);

        // Exibe o item apenas se a condição for verdadeira e o vendedor ainda não foi exibido
        if (shouldShow && !shownVendors.has(vendedorId)) {
          item.style.display = "block";
          shownVendors.add(vendedorId); // Adiciona o vendedor ao conjunto para evitar repetição
        } else {
          item.style.display = "none";
        }
      });
    });

    // Dispara o evento change manualmente ao inicializar
    filialDropdown.dispatchEvent(new Event("change"));
  }
}

function initDropdownFilterSilmples(nomeFiltro, referencia = null, ids = true) {
  injectCSS(nomeFiltro, false);
  const inputId = nomeFiltro.toLowerCase();
  const dropdownId = inputId + "dropdown";
  const codInputId = "cod" + inputId;

  const input = document.getElementById(inputId);
  const dropdown = document.getElementById(dropdownId);
  const codInput = document.getElementById(codInputId);

  // Evento de foco no campo para exibir o dropdown
  input.addEventListener("focus", function () {
    dropdown.style.display = "block";
  });

  // Evento de entrada de texto para filtrar os itens do dropdown
  input.addEventListener("input", function () {
    const filterValue = this.value.toLowerCase();
    const selectedFilial = referencia
      ? document.getElementById(referencia).value
      : null;
    const items = dropdown.querySelectorAll(`.${nomeFiltro}-dropdown-item`);

    const uniqueNames = new Set();

    //  Se o campo input estiver vazio, limpa o codInput também
    if (!filterValue) {
      codInput.value = "";
    }

    items.forEach(function (item) {
      const vendedorFilial = item.getAttribute(`data-referencia-${nomeFiltro}`);
      const vendedorNome = item
        .getAttribute(`data-nome-${nomeFiltro}`)
        .toLowerCase();

      if (ids) {
        if (
          vendedorNome.includes(filterValue) &&
          (selectedFilial.includes(",") || vendedorFilial === selectedFilial)
        ) {
          if (!uniqueNames.has(vendedorNome)) {
            item.style.display = "block";
            uniqueNames.add(vendedorNome);
          } else {
            item.style.display = "none";
          }
        } else {
          item.style.display = "none";
        }
        dropdown.style.display = filterValue ? "block" : "none";
      } else {
        if (
          vendedorNome.includes(filterValue) &&
          (selectedFilial == "Todos" || vendedorFilial === selectedFilial)
        ) {
          if (!uniqueNames.has(vendedorNome)) {
            item.style.display = "block";
            uniqueNames.add(vendedorNome);
          } else {
            item.style.display = "none";
          }
        } else {
          item.style.display = "none";
        }
        dropdown.style.display = filterValue ? "block" : "none";
      }
    });
  });

  dropdown.addEventListener("click", function (e) {
    if (e.target.classList.contains(`${nomeFiltro}-dropdown-item`)) {
      const selectedId = e.target.getAttribute(`data-id-${nomeFiltro}`);
      const selectedName = e.target.getAttribute(`data-nome-${nomeFiltro}`);

      input.value = selectedName;
      codInput.value = selectedName;
      dropdown.style.display = "none";
    }
  });

  document.addEventListener("click", function (e) {
    if (!input.contains(e.target) && !dropdown.contains(e.target)) {
      dropdown.style.display = "none";
    }
  });

  // Função para filtrar os itens com base na filial
  function filterItemsByFilial() {
    const selectedFilial = document.getElementById(referencia ?? null).value;
    const items = dropdown.querySelectorAll(`.${nomeFiltro}-dropdown-item`); // Seleciona todos os itens com a classe dropdown-item

    const uniqueNames = new Set();

    items.forEach(function (item) {
      const vendedorFilial = item.getAttribute(`data-referencia-${nomeFiltro}`);
      const vendedorNome = item.getAttribute(`data-nome-${nomeFiltro}`);

      if (selectedFilial.includes(",")) {
        if (!uniqueNames.has(vendedorNome)) {
          item.style.display = "block";
          uniqueNames.add(vendedorNome);
        } else {
          item.style.display = "none";
        }
      } else {
        if (vendedorFilial === selectedFilial) {
          item.style.display = "block";
        } else {
          item.style.display = "none";
        }
      }
    });
  }

  // Filtragem inicial quando a página carrega
  if (referencia !== null) {
    filterItemsByFilial();

    document
      .getElementById(referencia ?? null)
      .addEventListener("change", filterItemsByFilial);
  }

  // 🔥 Pré-seleção automática se já existir valor no codInput
  if (codInput.value) {
    const items = dropdown.querySelectorAll(`.${nomeFiltro}-dropdown-item`);
    items.forEach(function (item) {
      const selectedId = item.getAttribute(`data-id-${nomeFiltro}`);
      const selectedName = item.getAttribute(`data-nome-${nomeFiltro}`);

      if (selectedId === codInput.value) {
        input.value = selectedName; // mostra o nome no campo visível
      }
    });
  }
}
