{% include "header" %}
<div class="np-homepage-hero">
  <img class="np-homepage-hero-image" src="{{ homepage.artwork_url }}" />
</div>
{% include "sub_navigation" %}
{% assign all_categories = current_school.filterable_categories | sort_natural | reverse %}
{% assign weeks = "" | split: "" %}
{% for category in all_categories %}
  {% assign category_name = category.name | downcase %}
  {% if category_name contains "week" %}
    {% assign cat_name = category.name | split: '!@#$%^&*()' %}
    {% assign weeks = weeks | concat: cat_name %}
  {% endif %}
{% endfor %}

{% if courses.in_catalog.any? %}
  {% assign catalog_courses = courses.in_catalog %}
{% endif %}

<main class="np-main np-dashboard np-subpage-container np-max-width">
  {% include "new_hire_instructor_info" %}
  <div class="row np-flex-center">
    <div class="col-xs-12">
      {% for learning_path in learning_paths.enrolled %}
        {% assign is_new_hire_path = false %}
        {% for category in learning_path.categories %}
          {% if category.name == "New Hire Training" %}
            {% assign is_new_hire_path = true %}
            {% break %}
          {% endif %}
        {% endfor %}
        {% if is_new_hire_path %}
          {% include "new_hire_learning_path_progress_and_cta" %}
          {% for week in weeks %}
            <div class="row row-week row-{{ week | downcase | replace: " ", "-" }}">
              <div class="col-xs-12 week-title-column">
                <div class="week-title">{{ week }}</div>
              </div>
              {% for item in learning_path.items %}
                {% if item.course? %}
                  {% for catalog_course in catalog_courses %}
                    {% if catalog_course.id == item.id %}
                      {% for catalog_course_category in catalog_course.categories %}
                        {% if catalog_course_category.name == week %}
                          {% if learning_path.enrolled? and item.unlocked? %}
                            <div
                              class="col-xs-12 col-sm-6 col-md-4 new-hire-course"
                              data-progress="{{ item.progress }}"
                              data-day="{{ catalog_course.properties.course_day }}">
                              <a class="np-card learning-path-card" href="{% route learning_path_course, learning_path_id: learning_path.id, id: item.id %}">
                                <div class="np-card-container">
                                  <img
                                    class="np-card-image"
                                    alt="{{ item.name }}"
                                    src="{{ item.image }}">
                                  <div class="np-card-content np-card-content-vertical np-card-padding">
                                    <h3 class="np-card-content-title">
                                      {{ item.name }}
                                    </h3>
                                    <div class="np-card-content-footer">
                                      <div class="np-card-content-progress np-button-color">
                                        {% t shared.progress
                                          , count: item.progress %}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </a>
                            </div>
                          {% else %}
                            <div
                              class="col-xs-12 col-sm-6 col-md-4 new-hire-course locked"
                              data-progress="{{ item.progress }}"
                              data-day="{{ catalog_course.properties.course_day }}">
                              <div class="np-card learning-path-card">
                                <div class="np-card-container">
                                  <img
                                    class="np-card-image"
                                    alt="{{ item.name }}"
                                    src="{{ item.image }}">
                                  <div class="np-card-content np-card-content-vertical np-card-padding">
                                    <h3 class="np-card-content-title">
                                      {{ item.name }}
                                    </h3>
                                    <div class="np-card-content-footer">
                                      <div class="np-card-content-progress np-button-color">
                                        {% t shared.progress
                                          , count: item.progress %}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          {% endif %}
                        {% endif %}
                      {% endfor %}
                    {% endif %}
                  {% endfor %}

                {% endif %}
              {% endfor %}
            </div>
          {% endfor %}
          {% break %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
</main>

{% include "footer" %}

<script>
  const lpProgress = document.querySelector(".np-top-cta-progress-text").getAttribute("data-progress")
  const newHireLpCta = document.querySelector(".new-hire-lp-button")
  const learningPathBtnText = document.querySelector(".new-hire-lp-button").innerText
  console.log(learningPathBtnText)
  if (learningPathBtnText.toLowerCase() == "start path") {
    newHireLpCta.click()
  } else if (learningPathBtnText.toLowerCase() == "start new content") {
    newHireLpCta.classList.remove("np-hidden")
  } else if (learningPathBtnText.toLowerCase() == "continue") {
    if (lpProgress == 0) {
      newHireLpCta.innerText = "Begin Training"
    } else {
      newHireLpCta.innerText = "Continue Training"
    }
    newHireLpCta.classList.remove("np-hidden")
  }

  document.querySelector(".np-header-logo > a").href = "/app/dashboard"

  reorderCoursesByDay()

  setTimeout(() => {
    toggleHarverLink()
  }, 500)
  
  function reorderCoursesByDay() {
    let weekRows = document.querySelectorAll('.row-week');

    weekRows.forEach(function(weekRow) {

      const titleColumn = weekRow.querySelector(".week-title-column")
      let courses = weekRow.querySelectorAll('.new-hire-course');

      let coursesArray = Array.from(courses);

      coursesArray.sort(function(a, b) {
        let dayA = parseInt(a.getAttribute('data-day'));
        let dayB = parseInt(b.getAttribute('data-day'));
        return dayA - dayB; // Sort ascending; change to dayB - dayA for descending
      });
      
      weekRow.innerHTML = '';
      weekRow.appendChild(titleColumn); 
      coursesArray.forEach(function(element) {
        weekRow.appendChild(element.cloneNode(true)); 
      });
    });
  }

  function toggleHarverLink() {
    const week1Courses = document.querySelector(".row-week-1").querySelectorAll(".new-hire-course")
    console.log(week1Courses[0].getAttribute("data-progress"))
    if (week1Courses.length && week1Courses[0].getAttribute("data-progress") == 100) {
      if (document.getElementById("harverLink")) {
        document.getElementById("harverLink").remove()
      }
    } else {
      if (document.getElementById("harverLink")) {
        document.getElementById("harverLink").style.display = "block"
      }
    }
  }
</script>

<style>

  .new-hire-lp-button {
    margin: 16px 0 32px;
  }

  .new-hire-course .learning-path-card {
    text-decoration: none;
    display: block;
  }

  .new-hire-course .learning-path-card > .np-card-container {
    box-shadow: none;
    border: 1px solid #ddd;
    border-radius: 0;
  }

  .week-title {
    font-size: 28px;
    font-weight: 700;
    padding-bottom: 16px;
    margin-bottom: 32px;
    border-bottom: 1px solid #ccc;
    text-transform: uppercase;
  }

  .new-hire-course.locked {
    opacity: 0.4;
    cursor: text;
  }
</style>