<div class="mo-search-wrapper">
  <select class="dashboard-filter-select filter-wrapper uk-text-bold mo-active-filter-prog"
    id='course-by-status-select'>
    <option class="mo-filter-item" value="none" style="padding-bottom:10px" selected disabled>Filter by progress
    </option>
    <option class="mo-filter-item" value="all">All</option>
    <option class="mo-filter-item" value="not-started">Not Started</option>
    <option class="mo-filter-item" value="in-progress">In Progress</option>
    <option class="mo-filter-item" value="completed">Completed</option>
  </select>
</div>

<script>
  let selectByStatusOfCourse = document.getElementById('course-by-status-select')

  selectByStatusOfCourse.addEventListener('click', filterCoursesByStatus())

  function filterCoursesByStatus() {
    setTimeout(() => {
      if ($('.carousel').parent().parent().is(":visible"))
        filterCourseCardsInCarousel()
      else
        filterCourseCardsInCatalog()
    }, 100);
  }

  function filterCourseCardsInCatalog() {
    $(".dashboard-filter-select").change(function () {
      let numberOfCoursesInGrid = 0
      hideNoCourseMessage()
      showAllCardsInCatalog()
      let statusOfFilter = this.value
      $('.np-catalog-courses').children().each(function () {
        let courseCard = $(this)
        let courseProgress = courseCard.find('.progress-info').text()
        courseCard.addClass('col-lg-4')
        if (statusOfFilter === "in-progress") {
          if (courseProgress !== "Started")
            hideCardInCatalog(courseCard)
          else
            numberOfCoursesInGrid++
        }
        else if (statusOfFilter === "not-started") {
          if (courseProgress !== "Not started")
            hideCardInCatalog(courseCard)
          else
            numberOfCoursesInGrid++
        }
        else if (statusOfFilter === "completed") {
          if (courseProgress !== "Completed")
            hideCardInCatalog(courseCard)
          else
            numberOfCoursesInGrid++
        }
      })
      if (numberOfCoursesInGrid === 1) {
        $('.np-catalog-courses').children().each(function () {
          $(this).removeClass('col-lg-4')
        })
      }
      else if (numberOfCoursesInGrid === 0) {
        if (statusOfFilter === "all") {
          hideNoCourseMessage()
        }
        else {
          showNoCourseMessage()
        }
      }
    })
  }

  function showNoCourseMessage() {
    $('.no-course-message').css('display', 'block')
  }

  function hideNoCourseMessage() {
    $('.no-course-message').css('display', 'none')
  }


  function filterCourseCardsInCarousel() {
    setTimeout(() => {
      addCourseSlideClass();
    }, 100);
    $("#course-by-status-select").change(function () {
      let numberOfCoursesInCarousel = 0
      hideNoCourseMessage()
      showAllCardsInCarousel()
      let status = this.value
      $('.carousel').slick('unslick')
      $(".progress-info").each(function () {
        let progress = $(this).text()
        if (status === "in-progress") {
          if (progress !== "Started")
            hideCardInCarousel($(this))
          else
            numberOfCoursesInCarousel++
        }
        else if (status === "not-started") {
          if (progress !== "Not started")
            hideCardInCarousel($(this))
          else
            numberOfCoursesInCarousel++
        }
        else if (status === "completed") {
          if (progress !== "Completed")
            hideCardInCarousel($(this))
          else
            numberOfCoursesInCarousel++
        }
      })
      if (numberOfCoursesInCarousel === 0) {
        if (status === "all") {
          hideNoCourseMessage()
          initializeCarousel('.carousel', 3);
        }
        else {
          showNoCourseMessage()
        }
      }
      else
        initializeCarousel('.carousel', 3);
    });
  }

  function addCourseSlideClass() {
    $(".slick-track").children().each(function () {
      $(this).addClass("course-slide")
    })
  }

  function hideCardInCarousel(progressInfo) {
    progressInfo.parents().each(function () {
      var courseCard = $(this)
      if (courseCard.hasClass("course-slide")) {
        courseCard.css("display", "none")
        courseCard.appendTo(courseCard.parent().parent());
      }
    })
  }

  function showAllCardsInCarousel() {
    $(".carousel").each(function () {
      var carousel = $(this)
      carousel.siblings().each(function () {
        var sibling = $(this)
        if (sibling.hasClass("course-slide")) {
          sibling.css('display', 'block')
          sibling.appendTo(carousel)
        }
      })
    })
  }

  function hideCardInCatalog(courseCard) {
    courseCard.css('display', 'none')
  }

  function showAllCardsInCatalog() {
    $('.np-catalog-courses').children().each(function () {
      $(this).css('display', 'block')
    })
  }

  $(document).ready(function () {
    hideNoCourseMessage()
  });
</script>