{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-learning-paths np-subpage-container np-max-width">
  <div class="np-learning-paths-main">
    <div class="filters-container Lps-filters">
    <div class="filters-heading">APPLY FILTERS<i class="fa fa-chevron-down"></i></div>
    <div class="filters-content">
      <div class="filter-column status-column">
        <div class="filter-column-title">STATUS</div>
        <div class="filters-list">
          <div class="filter-item status-filter">
            <input type="checkbox" name="completed" value="completed">
            <label for="completed">Completed <span></span></label>
          </div>

          <div class="filter-item status-filter">
            <input type="checkbox" name="in-progress" value="in-progress">
            <label for="in-progress">In Progress <span></span></label>
          </div>
        </div>
      </div>
      <div class="filter-column categories-column">
        <div class="filter-column-title">CATEGORY</div>
        <div class="filters-list">
          {% for category in categories.enrolled %}
            <div class="filter-item category-filter">
              <input type="checkbox" name="{{category.name}}" value="{{category.name}}">
              <label for="{{category.name}}">{{category.name}} <span></span></label>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
    {% assign learning_paths_alphabetical = learning_paths.available | sort: "name" %}
    {% include "learning_paths_index", items: learning_paths_alphabetical %}
  </div>
</main>
{% include "footer" %}

<style>
  .np-card-content-vertical {
    padding-bottom: 10px;
  }

  @media (min-width:768px) {
    .learning-path-card .np-card-content-title {
      font-size: 16px;
      margin-top: 10px;
      margin-bottom: 0px;
    }

    .np-learning-path-image {
      align-self: unset !important;
      object-fit: cover !important;
      width: 100% !important;
      min-height: unset !important;
    }

    .learning-path-image-container {
      max-width: 265px;
      display: flex;
      align-items: center;
    }
  }
</style>

<script>
  window.onload = () => {
    let url = new URL(window.location.href);
    let params = new URLSearchParams(url.search);
    if (params.has('category')) {
      let allParams = params.getAll('category')
      allParams.forEach((param) => {
        document.querySelector(`.filter-item input[value='${param}']`).click()
      }) 
    }

    addCountToFilters()
  }

  $("input[type='checkbox']").change(function(e) {
    filterLps()
  })

  $("document").ready(function() {

  document.querySelector(".filters-heading").addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 32 + "px";
    }
  })

  document.querySelector(".filters-heading").click()
})

  function filterLps() {
    // hide all Lps
    $(".lp-column").hide()

    // get all checked filters
    let selectedStatusFilters = []
    let selectedCategoryFilters = []

    $(".status-column input[type='checkbox']:checked").each((index, filter) => {
      selectedStatusFilters.push(filter.value)
    }) 

    $(".categories-column input[type='checkbox']:checked").each((index, filter) => {
      selectedCategoryFilters.push(filter.value)
    }) 

    //loop over Lps and get filters
    $(".lp-column").each((index, lp) => {
      const lpStatus = $(lp).data("progress")
      const courseCategory = $(lp).data("category")

      if (selectedStatusFilters.length && selectedCategoryFilters.length) {
        if($.inArray(courseCategory, selectedCategoryFilters) !== -1 && $.inArray(lpStatus, selectedStatusFilters) !== -1) {
          $(lp).show()
        }
      } else if (!selectedStatusFilters.length && selectedCategoryFilters.length) {
        if($.inArray(courseCategory, selectedCategoryFilters) !== -1) {
          $(lp).show()
        }
      } else if (selectedStatusFilters.length && !selectedCategoryFilters.length) {
        if($.inArray(lpStatus, selectedStatusFilters) !== -1) {
          $(lp).show()
        }
      } else {
        $(lp).show()
      }
    })
  }

  function addCountToFilters() {
    const allFiltersFromLps = []

    $(".lp-column").each((index, course) => {   
      if ($(course).attr("data-progress")) {
        allFiltersFromLps.push($(course).attr("data-progress"))
      }

      if ($(course).attr("data-category")) {
        allFiltersFromLps.push($(course).attr("data-category"))
      }
    })

    $(".filter-item").each((index, filter) => {
      const filterValue = $(filter).find("input").val()
      const filterCount = getFilterCount(filterValue, allFiltersFromLps)


      if ($(filter).hasClass("category-filter")) {
        if (filterCount == 0) {
          $(filter).hide()
        } else {
          $(filter).find("label > span").text(`(${filterCount})`)
        }
      } else {
        $(filter).find("label > span").text(`(${filterCount})`)
      }
    })
  }

  const getFilterCount = (value, array) => {
    let count = 0;

    array.forEach(filter => {
      if (filter == value) { count++; }
    });

    return count
  }
</script>