<div class="np-filter" tabindex="0">
  <div class="dropdown">
    <select
      class="category-filter-dropdown np-input"
      type="text"
      name="category-filter-dropdown"
      id="category-filter-dropdown"
      onchange="filterByCategory()"
    >
      {% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
      <option class="category-filter-entry" value="Default" selected>All Categories</option>

      {% for category in sorted_categories %}
        {% assign renderCat = false %}

        {% for course in courses.enrolled %}
          {% for course_category in course.categories %}
            {% if course_category.id == category.id %}
              {% assign renderCat = true %}
            {% endif %}
          {% endfor %}
        {% endfor %}

        {% comment %} Need to iterate over all filterable categories, target all searched cards, check if cat exists, render if found  {% endcomment %}

        {% comment %} Need to generate category entires dynamically? Might not be possible because liquid is server side. Would need to pull all cats before load but all Searched Results after render {% endcomment %}

        {%if renderCat %}
          <option class="category-filter-entry" value="{{ category.name }}">{{ category.name }}</option>
        {% endif %}
      {% endfor %}
    </select>
  </div>
</div>

<script>
  $('document').ready(function(){
    let allCategoryFilters = document.querySelectorAll('.category-filter-entry');
    let allSearchedResults = document.querySelectorAll('.course-card');
    for(let i = 1; i < allCategoryFilters.length; i++){
      let catFound = false;
      for(let j = 0; j < allSearchedResults.length; j++){

        if(allSearchedResults[j].dataset.categories.indexOf(allCategoryFilters[i].getAttribute('value')) > -1){
          catFound = true;
        }
      }

      if(!catFound){
        // if(allCategoryFilters[i].textContent != 'All Categories'){
        //   allCategoryFilters[i].style.display = 'none';
        // }
        allCategoryFilters[i].style.display = 'none';
      }
    }
  });

  let filterByCategory = () => {
    // console.log(event.target.value);

    let allLearning = document.querySelector('.np-catalog-courses').children;

    // console.log(allLearning);

    for(let i = 0; i < allLearning.length; i++){
      if(event.target.value == 'Default'){
        // if(!allLearning[i].classList.contains('hidden-by-search')){
        //   allLearning[i].style.display = 'block';
        // }

        if(!allLearning[i].classList.contains('hidden-by-product')){
          allLearning[i].style.display = 'block';
        }
        allLearning[i].classList.remove('filtered');
    } else {
			console.log(allLearning[i].dataset)
        if(allLearning[i].dataset.categories.indexOf(event.target.value) == -1){
          allLearning[i].style.display = 'none';
          allLearning[i].classList.add('filtered');
        } else {
          // if(!allLearning[i].classList.contains('hidden-by-search')){
          //   allLearning[i].style.display = 'block';
          // }

          if(!allLearning[i].classList.contains('hidden-by-product')){
            allLearning[i].style.display = 'block';
          }
          allLearning[i].classList.remove('filtered');
        };
      };
    };
  }
</script>
