<div class="row recommended-courses-row">
  <div class="col-xs-12">
    <div class="recommended-courses-flex-wrapper">
      <div>
        <div class="dashboard-title">COURSES: RECOMMENDED</div>
        <div class="dashboard-subtitle">Personalized list of courses just for you</div>
      </div>
      <div style="display: flex; align-items: row;">
        <div class="recommended-courses-container">
          <strong>Why am I seeing these?</strong>
          <a href="/app/profile" class="recommended-courses-link">Review and update your interest profile</a>
        </div>

        <div class="recent-courses-link view-all-courses">
          <a href="/app/courses" class="recent-courses-link">View all Courses</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12">
    <div class="row" id="recommended-courses-row">
      {% assign focus_groups = "" %}
      {% assign materials_groups = "" %}
      {% assign cleaning_method_groups = "" %}
      {% assign production_application_groups = "" %}
      {% for group in current_person.groups %}
        {% if group.name contains "Focus" %}
          {% assign focus_groups = focus_groups | append: "," | append: group.name %}
        {% endif %}

        {% if group.name contains "Materials" %}
          {% assign materials_groups = materials_groups | append: "," | append: group.name %}
        {% endif %}

        {% if group.name contains "Production Application" %}
          {% assign production_application_groups = production_application_groups | append: "," | append: group.name %}
        {% endif %}

        {% if group.name contains "Cleaning Method" %}
          {% assign cleaning_method_groups = cleaning_method_groups | append: "," | append: group.name %}
        {% endif %}
      {% endfor %}


      <div class="col-xs-12 np-hidden" id="recommended-courses-zero-state">
        {% capture message %}
          Update your interest profile to gain recommended content
        {% endcapture %}
        {% include "courses_zero_state", message: message %}
      </div>
    </div>
  </div>
</div>

<div id="unfilteredRecommendedCourses" style="display:none">
  {% for course in enrolled_courses %}
    {% if course.progress < 100 %}
      {% assign course_categories_list = "" %}
      {% for category in course.categories %}
        {% assign course_categories_list = course_categories_list | append: category.name | append: "," %}
      {% endfor %}
      <div
        class="recommended-course"
        data-categories="{{course_categories_list}}"
        data-id="{{course.id}}">
        {% include "cards_course" with course %}
      </div>
    {% endif %}
  {% endfor %}
</div>

<script>

  $("document").ready(function() {
    const allCourses = $(".recommended-course")
    const focusGroups = "{{focus_groups}}"
    const productionApplicationGroups = "{{production_application_groups}}"
    const materialsGroups = "{{materials_groups}}"
    const cleaningMethodGroups = "{{cleaning_method_groups}}"

    const focusGroupsArray = focusGroups.split(",").filter(item => item !== "");
    const productionApplicationGroupsArray = productionApplicationGroups.split(",").filter(item => item !== "");
    const materialsGroupsArray = materialsGroups.split(",").filter(item => item !== "");
    const cleaningMethodGroupsArray = cleaningMethodGroups.split(",").filter(item => item !== "");

    let focusCourses = []
    let productionApplicationsCourses = []
    let materialsCourses = []
    let cleaningMethodCourses = []

    $(allCourses).each((index, course) => {
      if (course.getAttribute("data-categories").includes("Focus-")) {
        const categories = course.getAttribute("data-categories").split(",")
        const focusCategories = categories.filter(category => category.includes('Focus-'));
        if (focusGroups.includes(focusCategories[0])) {
          focusCourses.push(course)
        }
      }

      if (course.getAttribute("data-categories").includes("Production Applications-")) {
        const categories = course.getAttribute("data-categories").split(",")
        const productionApplicationsCategories = categories.filter(category => category.includes('Production Applications-'));
        if (productionApplicationGroups.includes(productionApplicationsCategories[0])) {
          productionApplicationsCourses.push(course)
        }
      }

      if (course.getAttribute("data-categories").includes("Materials-")) {
        const categories = course.getAttribute("data-categories").split(",")
        const materialsCategories = categories.filter(category => category.includes('Materials-'));
        if (materialsGroups.includes(materialsCategories[0])) {
          materialsCourses.push(course)
        }
      }

      if (course.getAttribute("data-categories").includes("Cleaning Method-")) {
        const categories = course.getAttribute("data-categories").split(",")
        const cleaningMethodCategories = categories.filter(category => category.includes('Cleaning Method-'));
        if (cleaningMethodGroups.includes(cleaningMethodCategories[0])) {
          cleaningMethodCourses.push(course)
        }
      }
    })

    console.log("Focus Courses: ", focusCourses)
    let coursesToAppend = [];

    for (let i = 0; i < 3; i++) {
      if (productionApplicationsCourses.length > 0) {
        coursesToAppend.push(productionApplicationsCourses.shift());
      } else if (materialsCourses.length > 0) {
        coursesToAppend.push(materialsCourses.shift());
      } else if (cleaningMethodCourses.length > 0) {
        coursesToAppend.push(cleaningMethodCourses.shift());
      } else if (focusCourses.length > 0) {
        coursesToAppend.push(focusCourses.shift());
      } else {
        break;
      }
    }

    console.log("Recommended Courses to Append: ", coursesToAppend)
    if (coursesToAppend.length > 0) {

      for (let i = 0; i < coursesToAppend.length; i++) {
              console.log(coursesToAppend[i].innerHTML)
        $("#recommended-courses-row").append(`<div class="col-xs-12 col-sm-6 col-md-4">${
          coursesToAppend[i].innerHTML
        }</div>`)
      }
    } else {
      $("#recommended-courses-zero-state").removeClass("np-hidden")
    }

  })
</script>

<style>

  .recommended-courses-row {
    margin-bottom: 32px;
    margin-top: 86px;
    position: relative;
  }

  .recommended-courses-flex-wrapper {
    margin-bottom: 32px;
  }

  .recommended-courses.link {
    margin-bottom: 32px;
    text-align: right;
  }

  .recommended-courses-flex-wrapper .dashboard-title {
    margin-bottom: 4px;
  }

  .recommended-courses-container {
    display: flex;
    flex-direction: column;
  }

  .view-all-courses {
    display: flex;
    align-items: flex-end;
    margin-left: 100px;
  }

  .recommended-courses-flex-wrapper strong {
    margin-bottom: 4px;
  }

  @media(min-width:768px) {
    .recommended-courses-flex-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .recommended-courses-row .np-card {
      padding: 0 0 32px;
      height: 100%;
    }
  }
</style>