<div class="homepage-filter">
  <div class="homepage-filter-container">
    <div class="homepage-filter-text">
      Layout
    </div>
    <i class="far fa-angle-down"></i>
  </div>
  
  <div class="homepage-dropdown" style="display: none;">
    <div class="homepage-dropdown-container">
      <div class="homepage-dropdown-header">
        SORT
      </div>
      <div class="sort-homepage-dropdown-filters-container">
        <div class="filter-item" id="name-filter">
          <span class="filter-icons">A-Z</span>
          Alphabetical
          <i class="fas fa-check check-filter" style="display: none;"></i>
        </div>
        <div class="filter-item" id="level-filter">
          <i class="fas fa-exchange fa-rotate-90 filter-icons"></i>
          Course level
          <i class="fas fa-check check-filter" style="display: none;"></i>
        </div>
        <div class="filter-item" id="status-filter">
          <svg class="filter-icons" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_4528_105311)">
              <path d="M5.25 5.75V2.75C5.25 2.55109 5.32902 2.36032 5.46967 2.21967C5.61032 2.07902 5.80109 2 6 2H15.75C15.9489 2 16.1397 2.07902 16.2803 2.21967C16.421 2.36032 16.5 2.55109 16.5 2.75V12.5C16.5 12.6989 16.421 12.8897 16.2803 13.0303C16.1397 13.171 15.9489 13.25 15.75 13.25H12.75V16.2448C12.75 16.6617 12.4133 17 11.9948 17H2.25525C2.15604 17.0001 2.05779 16.9806 1.96611 16.9427C1.87444 16.9048 1.79114 16.8492 1.72099 16.779C1.65084 16.7089 1.59521 16.6256 1.55729 16.5339C1.51937 16.4422 1.4999 16.344 1.5 16.2448L1.50225 6.50525C1.50225 6.08825 1.839 5.75 2.2575 5.75H5.25ZM6.75 5.75H11.9948C12.4118 5.75 12.75 6.08675 12.75 6.50525V11.75H15V3.5H6.75V5.75ZM6.37725 14L10.6193 9.75725L9.55875 8.69675L6.37725 11.879L4.785 10.2875L3.7245 11.348L6.37725 14Z" fill="#4F4C4E"/>
            </g>
            <defs>
              <clipPath id="clip0_4528_105311">
                <rect width="18" height="18" fill="white" transform="translate(0 0.5)"/>
              </clipPath>
            </defs>
          </svg>
          Status
          <i class="fas fa-check check-filter" style="display: none;"></i>
        </div>
      </div>
      <div class="filter-line"></div>
      <div class="homepage-dropdown-header">
        VIEW
      </div>
      <div class="view-homepage-dropdown-filters-container">
        <div class="filter-item" id="grid-filter">
          <i class="fas fa-th-large filter-icons"></i>
          Grid
          <i class="fas fa-check check-filter" style="display: none;"></i>
        </div>
        <div class="filter-item" id="list-filter">
          <i class="fas fa-bars filter-icons"></i>
          List
          <i class="fas fa-check check-filter" style="display: none;"></i>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    document.querySelector(".homepage-filter-container").addEventListener("click", (e) => {
      if (document.querySelector(".homepage-filter-container").classList.contains("open")) {
        document.querySelector(".homepage-dropdown").style.display = "none"
        document.querySelector(".homepage-filter-container").classList.remove("open")
      } else {
        document.querySelector(".homepage-dropdown").style.removeProperty("display")
        document.querySelector(".homepage-filter-container").classList.add("open")
      }
    })

   document.addEventListener('click', (clickEvent) => {
      hideDropdown(clickEvent)
    });

    Array.from(document.querySelectorAll(".sort-homepage-dropdown-filters-container .filter-item")).forEach((item) => {
      item.addEventListener('click', (clickEvent) => {
        hideSortChecks()
        showCheck(item)
      })
    })

    Array.from(document.querySelectorAll(".view-homepage-dropdown-filters-container .filter-item")).forEach((item) => {
      item.addEventListener('click', (clickEvent) => {
        hideViewChecks()
        showCheck(item)
      })
    })

    document.getElementById("grid-filter").addEventListener("click", (clickEvent) => {
      changeToGrid()
    })

    document.getElementById("list-filter").addEventListener("click", (clickEvent) => {
      changeToList()
    })

    document.getElementById("status-filter").addEventListener("click", (clickEvent) => {
      sortCoursesByStatus()
    })

    document.getElementById("name-filter").addEventListener("click", (clickEvent) => {
      sortCoursesByName()
    })

    document.getElementById("level-filter").addEventListener("click", (clickEvent) => {
      sortCoursesByLevel()
    })

    sortCoursesByStatus()
  })

  function changeToList() {
    Array.from(document.querySelectorAll(".course-container")).forEach((item) => {
      item.classList.remove("col-md-6")
      item.classList.remove("col-lg-4")
      item.classList.add("list-card")
      document.querySelector(".list-filter-headers").style.removeProperty("display")
    })
  }

  function changeToGrid() {
    Array.from(document.querySelectorAll(".course-container")).forEach((item) => {
      item.classList.add("col-md-6")
      item.classList.add("col-lg-4")
      item.classList.remove("list-card")
      document.querySelector(".list-filter-headers").style.display = "none";
    })
  }

  function hideViewChecks() {
    Array.from(document.querySelectorAll(".view-homepage-dropdown-filters-container .check-filter")).forEach((item) => {
      item.style.display = "none"
    })
  }

  function hideSortChecks() {
    Array.from(document.querySelectorAll(".sort-homepage-dropdown-filters-container .check-filter")).forEach((item) => {
      item.style.display = "none"
    })
  }

  function showCheck(item) {
    item.querySelector(".check-filter").style.removeProperty("display")
  }

  function hideDropdown(event) {
    const outsideClick = !document.querySelector(".homepage-filter").contains(event.target);

    if (outsideClick) {
      document.querySelector(".homepage-dropdown").style.display = "none"
      document.querySelector(".homepage-filter-container").classList.remove("open")
    } 
  }

  function statusComparator(a, b) {
    if (a.dataset.status > b.dataset.status)
      return -1;
    if (a.dataset.status < b.dataset.status)
      return 1;
    return 0;
  }
    
  function sortCoursesByStatus() {
    var subjects = document.querySelectorAll(".list-of-courses div[data-status]");
    var subjectsArray = Array.from(subjects);
    let sorted = subjectsArray.sort(statusComparator);
    sorted.forEach(e => document.querySelector(".list-of-courses").appendChild(e));

    var catalogSubjects = document.querySelectorAll(".list-of-catalog-courses div[data-status]");
    var catalogSubjectsArray = Array.from(catalogSubjects);
    let catalogSorted = catalogSubjectsArray.sort(statusComparator);
    catalogSorted.forEach(e => document.querySelector(".list-of-catalog-courses").appendChild(e));
  }

  function nameComparator(a, b) {
    if (a.dataset.name < b.dataset.name)
      return -1;
    if (a.dataset.name > b.dataset.name)
      return 1;
    return 0;
  }
    
  function sortCoursesByName() {
    var subjects = document.querySelectorAll(".list-of-courses div[data-name]");
    var subjectsArray = Array.from(subjects);
    let sorted = subjectsArray.sort(nameComparator);
    sorted.forEach(e => document.querySelector(".list-of-courses").appendChild(e));

    var catalogSubjects = document.querySelectorAll(".list-of-catalog-courses div[data-name]");
    var catalogSubjectsArray = Array.from(catalogSubjects);
    let catalogSorted = catalogSubjectsArray.sort(nameComparator);
    catalogSorted.forEach(e => document.querySelector(".list-of-catalog-courses").appendChild(e));
  }

  function levelComparator(a, b) {
    if (a.dataset.level > b.dataset.level)
      return 1;
    if (a.dataset.level < b.dataset.level)
      return -1;
    return 0;
  }
    
  function sortCoursesByLevel() {
    var subjects = document.querySelectorAll(".list-of-courses div[data-level]");
    var subjectsArray = Array.from(subjects);
    let sorted = subjectsArray.sort(levelComparator);
    sorted.forEach(e => document.querySelector(".list-of-courses").appendChild(e));
    
    var catalogSubjects = document.querySelectorAll(".list-of-catalog-courses div[data-level]");
    var catalogSubjectsArray = Array.from(catalogSubjects);
    let catalogSorted = catalogSubjectsArray.sort(levelComparator);
    catalogSorted.forEach(e => document.querySelector(".list-of-catalog-courses").appendChild(e));
  }
</script>

<style>
  .list-line {
    margin-top: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid #EBEAEB;
  }

  .check-filter {
    margin-left: auto;
    color: #2E29FC;
    font-size: 14px;
  }

  .filter-item {
   display: flex;
   flex-direction: row;
   align-items: center;
  }

  .filter-icons {
    font-style: normal;
    font-weight: 700;
    font-size: 10.6364px;
    line-height: 12px;
    color: #4F4C4E;
    margin-right: 8px;
    width: 18px;
    text-align: center;
  }

  .sort-homepage-dropdown-filters-container div {
    padding: 12px 0;
  }

  .view-homepage-dropdown-filters-container div {
    padding: 16px 0;
  }

  .sort-homepage-dropdown-filters-container div,
  .view-homepage-dropdown-filters-container div {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #333132;
    cursor: pointer;
  }

  .sort-homepage-dropdown-filters-container div:first-of-type, 
  .view-homepage-dropdown-filters-container div:first-of-type {
    padding-top: 0;
  }

  .sort-homepage-dropdown-filters-container div:last-of-type, 
  .view-homepage-dropdown-filters-container div:last-of-type {
    padding-bottom: 0;
  }

  .sort-homepage-dropdown-filters-container {
    display: flex;
    flex-direction: column;
  }

  .homepage-dropdown-header {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: #A4A1A2;
    margin-bottom: 24px;
  }

  .filter-line {
    border: 1px solid #EBEAEB;
    margin: 24px 0;
  }

  .homepage-dropdown-container {
    padding: 24px;
    height: 100%;
  }

  .homepage-dropdown {
    position: absolute;
    width: 220px;
    background: #FFFFFF;
    border: 1px solid #EBEAEB;
    border-radius: 8px;
    z-index: 31;
    right: 0;
    margin-top: 8px;
  }

  .homepage-filter {
    margin-left: auto;
    position: relative;
    margin-top:20px;
  }

  .homepage-filter-container {
    background: #FFFFFF;
    border: 1px solid #EBEAEB;
    border-radius: 8px;
    padding: 12px 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-content: space-between;
    cursor: pointer;
  }

  .homepage-filter-text {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
  }

  @media (min-width:768px) {
    .homepage-filter {
      margin-bottom: 8px;
      margin-top:0;
    }
  }
</style>