{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
<main class="np-main np-courses np-subpage-container np-max-width">
  <div class="row row-with-thumbnails">
    <div class="col-xs-12">
      <div class="filters-container courses-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 class="filter-item status-filter">
                <input
                  type="checkbox"
                  name="in-progress"
                  value="not-started">
                <label for="not-started">Not Started
                  <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 %}
                <script>
                  console.log("{{category.name}}")
                </script>
                <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>
    </div>
  </div>


  {% include "courses_index", class: "col-xs-12 col-sm-6 col-md-4 col-lg-3 course-column" %}
</main>
{% include "footer" %}

<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()
    addActiveNavigationClass()

  }

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

  $("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 filterCourses() {

// hide all courses
    $(".course-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 courses and get filters
    $(".course-column").each((index, course) => {
      const courseStatus = $(course).data("progress")
      const courseCategory = $(course).data("category")

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

  function addCountToFilters() {
    const allFiltersFromCourses = []

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

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

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

      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
  }

  function addActiveNavigationClass() {
    $('a[href="/app/courses"]').addClass("np-sub-navigation-content-item-active").removeClass("np-sub-navigation-content-item-inactive")
  }
</script>