<script>
  function showPopup() {
    setTimeout(function() {
      console.log("show popup")
      document.querySelector(".info-form-trigger").click()
    }, 3000)
  }

  function rerunAdditionalLearnerInfoWorkflow(data) {
    console.log("re-running workflow with local storage data: ", data)

    $.ajax({
      url: "https://webhooks.workato.com/webhooks/rest/604b4fc0-fcd9-4f3b-b715-b42d7f740ba6/additional-info-form-submitted",
      data: JSON.stringify(data),
      method: 'POST',
      success: function(res){
        console.log(res)
        window.location.replace('/app/dashboard');
      },
      error: function (xhr, status, error) {
        console.error("Error posting to workato!");

        if (secondaryInfoStored == "true") {
          console.log("secondary information completed and stored in local storage")

          setTimeout(function() {
            document.querySelector(".info-form-trigger").click()
          }, 1000)
        }
      }
    });
  }
</script>

{% include "header" %}
  <div class="mobile-subnav">
    {% include "sub_navigation" %}
  </div>
{% include "course_version_outdated_alert", courses: courses.in_catalog %}

<div class="np-homepage-hero">
  <a href="/app/search/00000000-0000-0000-0000-000000000000?q=101" style="width: 100%;">
    <img class="np-homepage-hero-image"
      src="https://s3.amazonaws.com/static.northpass.com/anthology/Anthology_header_New.svg"
      alt="{{ homepage.headline }}"
    />
  </a>
  <div class="np-homepage-hero-content">
    <div class="np-homepage-headline np-header-font-color">
      {% comment %} Welcome to Anthology Academy {% endcomment %}
    </div>
    <div class="np-homepage-subheadline np-header-font-color" style="line-height: 28px; margin: 8px auto 0; text-align: center; width: 60%;">
      {% comment %} Benefit from expert training and on-demand learning content to improve skills and ensure your team is getting the best Anthology experience possible. {% endcomment %}
    </div>
  </div>
</div>

{% if current_person.email contains '+preview' or current_person.email == 'kfelton@anthology.com'%}
  {% assign sub_levels_length = current_person.properties.subscription_levels | size %}
  {% if sub_levels_length > 0 %}
    {% include "product_bar" %}
  {% endif %}
{% endif %}

<main class="np-main np-catalog np-subpage-container np-max-width">

  {% comment %} {% include "browse_by_product" %} {% endcomment %}


  <div class="np-catalog-header-wrapper catalog-header-wrapper">

    <div class="np-catalog-header">
      <div class="np-resource-title catalog-title">Catalog</div>
      <div class="catalog-subtitle">Explore our collection of learning resources</div>
    </div>

    {% comment %} <div class="search-and-filter-component">
      <div class="catalog-search-component">
        <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Search: </span>
        <form data-test="desktop-search" class="catalog-search-wrapper">
            <input
              aria-label="search_topics"
              class="np-header-font-background-color catalog-search"
              type="text"
              name="q"
              placeholder=""
              onkeyup="searchCourses()"
            />
            <i class="far fa-search search-icon"></i>
        </form> {% endcomment %}

{% comment %} -----------------------------------------------------------------  {% endcomment %}
{% comment %} FOR NORM:  {% endcomment %}
        {% comment %} Ln 79-90 >> old search {% endcomment %}
        {% comment %} Ln 99-108 >> new search {% endcomment %}
{% comment %} ----------------------------------------------------------------- {% endcomment %}


        {% comment %} <form action="{% route search %}" method="get" data-test="desktop-search" class="catalog-search-wrapper">
          <input
            aria-label="Search"
            class="np-header-search-input np-header-font-background-color catalog-search"
            type="text"
            name="q"
            placeholder="Search"
          />
          <i class="search-icon far fa-search"></i>
        </form> {% endcomment %}
      {% comment %} </div> {% endcomment %}


      {%- comment -%} {% if current_person.email contains "+preview" %}
        <div class="catalog-filter-component">
          <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
          <div class="filter-buttons-container">
            {% include "filter_by_product", page: 'Homepage' %}
          </div>
        </div>
      {% endif %} {%- endcomment -%}

      <div class="catalog-filter-component">
        <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
        <div class="filter-buttons-container">
					{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
          {% include "filter_by_product", page: 'Homepage' %}
          {% include "filter_by_category", page: 'Homepage' %}
        </div>
      </div>
    </div>

  </div>


  {% assign renderPopular = false %}
  {% assign totalCount = 0 %}
  {% if courses.enrolled.any? %}
    {% for course in courses.enrolled %}
      {% if course.properties.most_popular == true %}
        {% assign totalCount = totalCount | plus : 1  %}
        {% assign renderPopular = true %}
      {% endif %}
    {% endfor %}
  {% endif %}

  {%- comment -%} {% if renderPopular == true %}
    {% include "popular_courses_non_carousel" %}
  {% endif %} {%- endcomment -%}

  {% if courses.enrolled.any? %}
    {% include "courses_catalog" %}
  {% else %}
    {% capture message %}
      {% t shared.zero_state.courses.catalog,
        key: current_school.course_vocabulary
      %}
    {% endcapture %}

    {% include "courses_zero_state", message: message %}
  {% endif %}

</main>
{% include "footer" %}

<script>
  let searchCourses = () => {
    let homepageCourses = document.querySelector('.np-catalog-courses').children;

    for(let i = 0; i < homepageCourses.length; i++){
      if(event.target.value.length == 0){
        if(!homepageCourses[i].classList.contains('filtered')){
          homepageCourses[i].style.display = 'block';
        }
        homepageCourses[i].classList.remove('hidden-by-search');
      }

      let courseName = homepageCourses[i].querySelector('.np-card-content-title').textContent.toLowerCase();

      if(courseName.indexOf(event.target.value.toLowerCase()) > -1){
        if(!homepageCourses[i].classList.contains('filtered')){
          homepageCourses[i].style.display = 'block';
        }
        homepageCourses[i].classList.remove('hidden-by-search');
      } else {
        homepageCourses[i].style.display = 'none';
        homepageCourses[i].classList.add('hidden-by-search');
      }
    };
  }
</script>

{% if current_person.signed_in? %}
  {% unless current_person.email contains "+preview" %}
    {% if current_person.properties.learner_completed_additional_info == false %}
      <script>
        console.log('user not completed additional info')

        if (localStorage.getItem('learnerCompletedAdditionalInfo') != null) {
          const secondaryInfoStored = localStorage.getItem("learnerCompletedAdditionalInfo")


          const learnerName = localStorage.getItem("learnerName");
          const learnerEmail = localStorage.getItem("learnerEmail");
          const learnerTitle = localStorage.getItem("learnerTitle");
          const learnerPrimaryRole = localStorage.getItem("learnerPrimaryRole");
          const learnerPrimaryRoleOther = localStorage.getItem("learnerPrimaryRoleOther");

          let userData = {
            learner_uuid: '{{current_person.id}}',
            learner_name: learnerName,
            leaner_northpass_name: '{{current_person.first_name}} {{current_person.last_name}}',
            learner_email: learnerEmail,
            learner_northpass_email: '{{current_person.email}}',
            learner_title: learnerTitle,
            primaryRole: learnerPrimaryRole,
            primaryRoleOther: learnerPrimaryRoleOther,
          }
          rerunAdditionalLearnerInfoWorkflow(userData)
        } else {
          showPopup()
        }
      </script>
    {% elsif current_person.properties.learner_completed_additional_info == true %}
      <script>
        console.log("property is set, deleting local storage")
        localStorage.removeItem("learnerCompletedAdditionalInfo")
        localStorage.removeItem("learnerName");
        localStorage.removeItem("learnerEmail");
        localStorage.removeItem("learnerTitle");
        localStorage.removeItem("learnerPrimaryRole");
        localStorage.removeItem("learnerPrimaryRoleOther");
      </script>
    {% else %}
      <script>
        console.log('custom prop doesnt yet exist')

        if (localStorage.getItem('learnerCompletedAdditionalInfo') != null) {
          const secondaryInfoStored = localStorage.getItem("learnerCompletedAdditionalInfo");

          const learnerName = localStorage.getItem("learnerName");
          const learnerEmail = localStorage.getItem("learnerEmail");
          const learnerTitle = localStorage.getItem("learnerTitle");
          const learnerPrimaryRole = localStorage.getItem("learnerPrimaryRole");
          const learnerPrimaryRoleOther = localStorage.getItem("learnerPrimaryRoleOther");

          let userData = {
            learner_uuid: '{{current_person.id}}',
            learner_name: '{{current_person.first_name}} {{current_person.last_name}}',
            learner_email: '{{current_person.email}}',
            learner_title: learnerTitle,
            primaryRole: learnerPrimaryRole,
            primaryRoleOther: learnerPrimaryRoleOther,
          }
          rerunAdditionalLearnerInfoWorkflow(userData)
        } else {
          showPopup()
        }
      </script>
    {% endif %}
  {% endunless %}
{% endif %}

<style>
  .catalog-header-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .catalog-title{
    color: #0A0A0A;
    font-size: 2em;
    font-weight: 900;
    line-height: 2.375rem;
    margin-bottom: 12px;
  }

  .catalog-subtitle{
    color: #595959;
    font-size: 1.25em;
    font-weight: 400;
    margin-bottom: 24px;
  }

  .search-and-filter-component{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  .catalog-filter-component{
    display: flex;
    flex-direction: column;
  }

  .homepage-resource-header{
    color: #000000;
    font-size: 24px;
    font-weight: 600;
    line-height: 25px;
    margin-bottom: 12px
  }

  .card-image-replacement{
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); */
    background: linear-gradient(325deg, rgba(255,255,255,1) 0%, rgb(225 235 343 / 30%) 60%);
    height: 12rem;
    width: 100%;
  }

  @media screen and (min-width: 550px) and (max-width: 649px){
    .card-image-replacement{
      height: 15rem;
    }
  }

  @media screen and (min-width: 650px) and (max-width: 767px){
    .card-image-replacement{
      height: 20rem;
    }
  }

  @media screen and (min-width: 768px){
    .np-main{
      margin-top: none;
    }

    .search-and-filter-component{
      align-items: center;
      flex-direction: row;
    }

    .np-catalog-courses{
      margin: 0;
      max-width: 100%;
    }

    .dropdown-menu{
      left: 0;
      right: unset;
    }
  }

  /* @media screen and (min-width: 1651px){
    .np-main{
      margin-top: 400px;
    }
  }

  @media screen and (min-width: 1900px){
    .np-main{
      margin-top: 425px;
    }
  } */
</style>
