{% include "header" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
  <div class="np-catalog-header-wrapper col-xs-12 col-md-9">
    <div class="np-catalog-header">
      <div class="np-resource-title np-catalog-title">Browse Our Video Catalog</div>
      <div class="catalog-search">
        <form action="{% route search %}" method="get" data-test="desktop-search">
          <input
            aria-label="search"
            class="np-catalog-search"
            type="text"
            name="q"
            placeholder="search"
          />
          <i class="np-header-search-icon fa fa-search"></i>
        </form>
      </div>
    </div>
    </div>
  </div>
  <div class="np-hidden-desktop">
    <div class="mobile-filter-button">
      Filter
    </div>
  </div>

  <div class="catalog-content-wrapper">
    <div class="row">
      <div class="col-xs-12 col-md-3">
        {% include "video_catalog_filters" %}
      </div>

      <div class="col-xs-12 col-md-9">
        {% include "video_sub_filters" %}
        {% include "video_courses_catalog" %}
      </div>
    </div>
  </div>

</main>
{% include "footer" %}

<script>

const checkboxFilters = document.querySelectorAll("input[type='checkbox']");
const allItems = document.querySelectorAll(".catalog-item");

document.querySelector(".mobile-filter-button").addEventListener("click", function() {
  document.querySelector(".catalog-filters").classList.toggle("show")
})

document.querySelector(".close-tray").addEventListener("click", function() {
  document.querySelector(".catalog-filters").classList.toggle("show")
})

document.getElementById("clearAll").addEventListener("click", showAll);

checkboxFilters.forEach(function(checkbox) {
  checkbox.addEventListener('change', (event) => {
    filterAllItems(event.target)
  })
})

document.querySelectorAll(".sub-filter").forEach(function(subFilter) {
  subFilter.addEventListener('click', (event) => {
    
    filterSubItems(event.target)
  })
})

function showAll() {
  const catalogItems = document.querySelectorAll(".catalog-item");
  catalogItems.forEach((item) => item.style.display = "flex")  // show all courses
  checkboxFilters.forEach((filter) => filter.checked = false)  // Uncheck all filters

   clearAllSubFilters()

  document.querySelectorAll(".sub-filter-group").forEach((subFilter) => {
    subFilter.classList.remove("active")
  })
}

function filterAllItems(target) {
  allItems.forEach((item) => item.style.display = "none")  // show all courses

  // uncheck all other filters 
  checkboxFilters.forEach(function(checkbox) {
    if (checkbox != target) {
      checkbox.checked = false
    }
  })

  // show sub filters, if any
  document.querySelectorAll(".sub-filter-group").forEach((subFilterGroup) => {
    subFilterGroup.classList.remove("active")

    if (target.getAttribute("name") == subFilterGroup.getAttribute("data-parent")) {
      subFilterGroup.classList.add("active")
    }
  })

  clearAllSubFilters()

  let checkedFiltersCount = 0
  let checkedFilters = []
  checkboxFilters.forEach((filter) => {  
    if (filter.checked) {
      checkedFiltersCount++
      checkedFilters.push(filter.name)
    }
  }) 

  allItems.forEach((course) => {
    var includesAllCategories = checkedFilters.every(item => course.dataset.filters.includes(item));
    if (includesAllCategories) {
      course.style.display = "flex"
    }
  })
 
  if (checkedFiltersCount == 0) {
    allItems.forEach((item) => item.style.display = "flex")
  }
}

function filterSubItems(subItem) {
  clearAllSubFilters()
  subItem.classList.add("active")
  allItems.forEach((item) => item.style.display = "none")
  let checkedFilter = ""

  checkboxFilters.forEach((filter) => {  
    if (filter.checked) {
      checkedFilter = filter
    }
  }) 

  // get active main filter and filter by that and this
  allItems.forEach((video) => {
    if (video.dataset.filters.includes(subItem.textContent.toUpperCase()) && video.dataset.filters.includes(checkedFilter.name)) {
      video.style.display = "flex"
    }
  })
}

function clearAllSubFilters() {
  document.querySelectorAll(".sub-filter").forEach((subFilter) => {
    subFilter.classList.remove("active")
  })
}
</script>

<style>
  .np-catalog.np-main {
    padding: 0 24px;
  }

  .np-catalog-header-wrapper {
    justify-content: center;
    margin-bottom:32px;
  }

  .np-catalog-header {
    align-items: center;
  }

  .catalog-content-wrapper .np-catalog-courses {
    margin-top:0;
  }

  .mobile-filter-button {
    background-color:#D9D9D9;
    color:#000000;
    padding: 4px 16px;
    margin-bottom:20px;
    cursor:pointer;
    display: inline-block;
  }

  @media (min-width:1440px) {
    .np-catalog.np-main {
      padding: 0;
    }

    .np-catalog-header-wrapper {
      margin-bottom:50px;
    }
  }
</style>