<div class="filter-container">
  <div class="card-content-title filter-heading">
    Filters
  </div>
  <div class="filter-content">
      <h4 class=" filtter-topic plan-filter" style="">
          Plan
      </h4>
      <div class="category-filter-container" style="order: -1;order: 1;">
          <input type="checkbox" class="category-filter" id="Starter=button">Starter
      </div>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="Growth=button">Growth
      </div>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="Scale=button">Scale
      </div>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="Premier=button">Premier
      </div>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="Trial=button">Trial
      </div>
      <h4 class=" filtter-topic difficulty-filter" style="">
          Difficulty
      </h4>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="Beginner=button">Beginner
      </div>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="Intermediate=button">Intermediate
      </div>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="Advanced=button">Advanced
      </div>
      <h4 class=" filtter-topic time-filter" style="">
          Duration
      </h4>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="<10 min=button">&lt;10 min
      </div>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="15-30 min=button">15-30 min
      </div>
      <div class="category-filter-container">
          <input type="checkbox" class="category-filter" id="30 min - 1 hour=button">30+ min
      </div>
  </div>
</div>

<style>
  .active-checkbox {
    color: red
  }
</style>

<script>

  const obj = {}

  window.addEventListener('DOMContentLoaded', (event) => {
    let allCategories = "{{categories.in_catalog | map: 'name' | join: "|"}}"
    console.log(allCategories);
    Array.from(document.querySelectorAll(".category-filter")).forEach((item) => {
      let filterName =  item.id.split("=")[0];
      console.log(filterName)
      if (allCategories.includes(filterName.trim())) {
        obj[filterName] = false;
        item.addEventListener("click", filterBy)
     }
     else item.parentElement.remove();
    })
  })

  function clearAll() {
    resetFilters()
    showAll()
  }

  function filterBy(event) {
    changeCheckboxValue(event.target.id)
    changeCheckboxColor(event.target.id)
    hideAll()
    showItemIfSelected()
    showItemsIfNoneSelected()
  }

  function changeCheckboxColor(categoryCheckBoxId) {
    var element = document.getElementById(categoryCheckBoxId)
    var classes = element.classList

    if (classes.contains("active-checkbox"))
      classes.remove("active-checkbox")
    else
      classes.add("active-checkbox")
  }

  function changeCheckboxValue(categoryId) {
    for (const [key, value] of Object.entries(obj)) {
      if (categoryId.includes(key)) {
        if (obj[key] == true)
          obj[key] = false
        else
          obj[key] = true
      }
    }
  }

  function showItemsIfNoneSelected() {
    var anyTrue = false

    for (const [key, value] of Object.entries(obj)) {
      if (value == true) {
        anyTrue = true
        break
      }
    }

    if (anyTrue == false)
      showAll()
  }

  function resetFilters() {
    resetFiltersValue()
    removeActiveClassFromAllFilters()
  }

  function removeActiveClassFromAllFilters() {
    Array.from(document.querySelectorAll(".category-filter")).forEach((checkBox) => {
      checkBox.classList.remove("active-checkbox")
    })
  }

  function resetFiltersValue() {
    for (const [key, value] of Object.entries(obj)) {
      obj[key] = false
    }
  }

  function showAll() {
    Array.from(document.querySelectorAll(".course-card")).forEach((item) => {
      item.parentNode.style.removeProperty('display');
    })
  }

  function hideAll() {
    Array.from(document.querySelectorAll(".course-card")).forEach((item) => {
      item.parentNode.style.display = 'none'
    })
  }

  function showItemIfSelected() {
    Array.from(document.querySelectorAll(".course-card")).forEach((card) => {
      Array.from(card.querySelectorAll(".course-category")).forEach((category) => {
        console.log(category.innerHTML.trim())
        console.log(category.innerText.trim())
        console.log(obj[category.innerText.trim()])

        console.log("=======")
        if (obj[category.innerText.trim()] == true)
          showItem(category.parentNode)
      })
    })
  }

  function showItem(item) {
    item.parentNode.style.removeProperty("display")
  }
</script>

<style>
  .filter-container {
    background: #F5F5F5;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    border-radius: 10px;
    max-width: 285px;
  }
  .filter-heading {
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 12px;
    color: #808080;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    width: 100%;
  }
  .filtter-topic {
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #001B38;
    font-size: 1rem;
    margin-top: 18px;
    margin-bottom: 14px;
  }
  .category-filter-container {
    display: flex;
    margin: 0.3rem 0;
  }
  .filteer-btns {
    display: flex; 
    gap: 1rem;
    margin: 1rem 0;
  }
  .category-filter {
    margin-right: 0.5rem;
  }
  .filter-content {
    text-align: left;
    width: 100%;
  }
</style>