<script>
  window.addEventListener("DOMContentLoaded", function() {

    reorderContentAlphabetical()

    document.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
      checkbox.addEventListener("change", () => {filterCourses()})
    })

    let params = new URLSearchParams(document.location.search);
    params.forEach(function(param) {
      document.querySelector(`.filter-checkbox[data-filter="${param}"]`).checked = true
    })

    document.querySelector(".clear-filters").addEventListener("click", (e) => {
      e.preventDefault()
      clearAllFilters()
    })
  })

  function clearAllFilters() {
    const filterableCards = document.querySelectorAll(".filterable-card");
    filterableCards.forEach((card) => {
       card.style.display = "flex"
    })

    document.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
      checkbox.checked = false
    })
  }

  function reorderContentAlphabetical() {
    let filterableCards = document.querySelectorAll(".filterable-card");

    let filterableCardsArray = Array.from(filterableCards);

    filterableCardsArray.sort((a, b) => {
        let textA = a.querySelector('h3').textContent.trim().toLowerCase();
        let textB = b.querySelector('h3').textContent.trim().toLowerCase();
        if (textA < textB) return -1;
        if (textA > textB) return 1;
        return 0;
    });

    let parentElement = filterableCards[0].parentNode; 
    filterableCardsArray.forEach(element => parentElement.appendChild(element));
  }

  function filterCourses() {
    let selectedTypeFilters = []
    let selectedRoleFilters = []
    let selectedFeatureFilters = []
    let selectedLanguageFilters = []
    const checkboxFilters = document.querySelectorAll(".filter-checkbox")

    checkboxFilters.forEach((checkbox) => {
      if (checkbox.checked) {
        if (checkbox.classList.contains("type-filter")) {
          selectedTypeFilters.push(checkbox.getAttribute("data-filter"))
        } else if (checkbox.classList.contains("role-filter")) {
          selectedRoleFilters.push(checkbox.getAttribute("data-filter"))
        } else if (checkbox.classList.contains("feature-filter")) {
          selectedFeatureFilters.push(checkbox.getAttribute("data-filter"))
        }  else if (checkbox.classList.contains("language-filter")) {
          selectedLanguageFilters.push(checkbox.getAttribute("data-filter"))
        }
      }
    })

    // console.log("Type Filters: ", selectedTypeFilters)
    // console.log("Role Filters: ", selectedRoleFilters)
    // console.log("Feature Filters: ", selectedFeatureFilters)
    // console.log("Language Filters: ", selectedLanguageFilters)
    // console.log("===========")

    const filterableCards = document.querySelectorAll(".filterable-card")

    filterableCards.forEach((card) => {
      const cardCategories = card.getAttribute("data-categories")
      const cardType = card.getAttribute("data-type")

      if 
        (
          (!selectedTypeFilters.length || selectedTypeFilters.some(part => cardType.includes(part))) && 
          (!selectedRoleFilters.length || selectedRoleFilters.some(part => cardCategories.includes(part))) && 
          (!selectedFeatureFilters.length || selectedFeatureFilters.some(part => cardCategories.includes(part))) && 
          (!selectedLanguageFilters.length || selectedLanguageFilters.some(part => cardCategories.includes(part)))
        ) {
        card.style.display = "flex"
      } else {
        card.style.display = "none"
      }     
    })

  }
</script>