{% assign available_categories = categories.in_catalog %}

<div class="filter-sidebar">
  <div class="filter-group">
    <div class="filter-group-heading">What are you looking for?</div>
    <div class="filters">
      {% for category in available_categories %}
        <div class="filter-item">
          <label class="filter">
            {{ category.name }}
            <input
              class="filter-checkbox"
							type="checkbox"
							id="{{category.name}}"
							name="{{category.name}}"
              value="{{category.name}}" />
            <span class="filter-checkmark"></span>
          </label>
        </div>
      {% endfor %}
    </div>
  </div>
  <div class="filters-reset np-button" onClick="resetFilters()">Reset all Filters</div>
</div>

<style>
  .filter-sidebar {
    color: #fff;
    padding-left: 32px;
		padding-bottom: 20px;
  }

  .filter-group {
    margin-bottom: 50px;
  }

  .filter-group-heading {
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    margin-bottom: 16px;
  }

  .filter-item label {
    color: #E6E8EB;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .filter-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .filter-item .filter-checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 4px;
  }

  .filter-item .filter-checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  input:checked ~ .filter-checkmark:after {
    display: block;
  }

  .filter-item .filter-checkmark:after {
    left: 8px;
    top: 3px;
    width: 5px;
    height: 10px;
    border-style: solid;
    border-color: #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .filters-reset {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    border: 1px solid #fff;
    cursor: pointer;
    padding: 16px 24px;
    border-radius: 8px;
    color: #fff;
    background-color: transparent;
    width: 100%;
    height: auto;
  }
</style>

<script>
  window.addEventListener("DOMContentLoaded", function() {
    var categoryCheckboxes = document.querySelectorAll('.filter-checkbox');
		categoryCheckboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            filterCourses();
        });
			filterCourses();
		});
	})

  function resetFilters() {
    console.log("resetting filtes")
    const allFilters = document.querySelectorAll("input[type='checkbox']")
    allFilters.forEach(element => {
      element.checked = false;
    });

    const allCourses = document.querySelectorAll('.course-columns');
		console.log(allCourses)
    allCourses.forEach(element => {
      element.style.display = 'flex';
    });
	}

function filterCourses() {
    var selectedCategories = getSelectedCategories();
		console.log(selectedCategories)
    var cards = document.querySelectorAll('.np-card');

    cards.forEach(function (card) {
        var categories = card.getAttribute('categories');
        var categoryMatch = selectedCategories.length === 0 || matchesCategories(categories, selectedCategories);

        if (categoryMatch) {
            card.parentElement.style.display = 'flex';
        } else {
            card.parentElement.style.display = 'none';
        }
    });
}

	function getSelectedCategories() {
    var selectedCategories = [];
    var checkboxes = document.querySelectorAll('.filter-checkbox:checked');
    checkboxes.forEach(function (checkbox) {
        selectedCategories.push(checkbox.id);
    });
    return selectedCategories;
}

function matchesCategories(courseCategories, selectedCategories) {
    var courseCategoriesArray = courseCategories.split('[$]').map(function (category) {
        return category.trim();
    });

    return selectedCategories.some(function (selectedCategory) {
        return courseCategoriesArray.includes(selectedCategory);
    });
}

</script>
