<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" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}

<div class="np-homepage-hero">
  <img class="np-homepage-hero-image"
    src="https://s3.amazonaws.com/static.northpass.com/anthology/hero.svg"
    alt="{{ homepage.headline }}"
  />
  <div class="np-homepage-hero-content">
    <div class="np-homepage-headline np-header-font-color">
      Welcome to Anthology Academy
    </div>
    <div class="np-homepage-subheadline np-header-font-color" style="line-height: 28px; margin: 8px auto 0; text-align: center; width: 60%;">
      Benefit from expert training and on-demand learning content to improve skills and ensure your team is getting the best Anthology experience possible.
    </div>
  </div>
</div>
<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="mobile-subnav" style="margin: -24px -20px 16px;">
    {% include "sub_navigation" %}
  </div>

  <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>

    <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>
      </div>
      {%- 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">
          {% include "filter_by_product", 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) > -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: column;
  }

  .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-search-wrapper{
    max-width: 600px;
    position: relative;
  }

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

  .catalog-search-component{
    margin-bottom: 15px;
    width: 100%;
  }

  .catalog-search{
    background-color: #fefefe;
    border: 1px solid #aa7fb9;
    border-radius: 30px;
    font-weight: 400;
    height: 60px;
    line-height: 1;
    padding-left: 75px;
    text-decoration: none;
    width: 100%;
  }

  .search-icon{
    left: 30px;
    position: absolute;
    top: 23px;
  }

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

  @media screen and (min-width: 768px){
    .mobile-subnav{
      display: none;
    }

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

    .np-catalog-courses{
      margin: 0;
      max-width: 100%;
    }
    
    .np-subpage-container{
      padding: 50px 50px 184px;
    }

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

    .catalog-search-component{
      margin-bottom: 0;
      /* margin-right: 50px; */
    }
  }

  @media screen and (min-width: 1440px){
    .np-homepage-hero{
      width: calc(100vw + 1.75em);
      position: absolute;
      left: 0;
    }

    .catalog-header-wrapper{
      margin-top: 300px;
    } 
  }

  @media screen and (min-width: 2200px){
    .catalog-header-wrapper{
      margin-top: 350px;
    }
  }

  @media screen and (min-width: 2500px){
    .catalog-header-wrapper{
      margin-top: 400px;
    }
  }
</style>