{% include "header" %}

{% comment %} <div class="training-events-coming-soon np-subpage-container np-max-width" style="text-align: center;">
  <div style="color:#0088dd;font-weight:700;font-size:40px;">Coming soon!</div>
</div> 

 <div class="row training-events-headers">
  <div class="col-xs-12 col-sm-10">
    <div class="np-resource-title training-events-header">
      Start your Harri Training Today!
    </div>
    <div class="np-resource-subtitle training-events-subheader">
      Click on your role below to see your on-demand training courses.
    </div>
    <div class="request-button-container">
      <a href="https://docs.google.com/forms/d/1wmGpIvYgAYvXqMgTawVqjfdO1PwhtpbpD9BOSkQqj-w/edit" target="_blank" class="request-button np-button">Request Here</a>
    </div>
  </div>
</div>
{% endcomment %}

 <div class="row training-events-headers">
  <div class="col-xs-12 col-sm-10">
    <div class="np-resource-title training-events-header">
      Start your Harri Training Today!
    </div>
    <div class="np-resource-subtitle training-events-subheader">
      Click on your role below to see your on-demand training courses.
    </div>
    <div class="request-button-container">
        <button onclick="scrollDown()" class="request-button np-button">Browse Courses</button>
    </div>
  </div>
</div>

 <div class="titles-container" id="trainingTitles">
  <div class="events-container row">
    <div id="upcoming-trainings" class="event">
      <div class="active-section event-section">
        <span>View All</span>
      </div>
    </div>
    <div id="new-user-journey" class="event">
      <div class="event-section">
        <span>New Manager Training</span>
      </div>
    </div>
    <div id="training-webinar-catalog" class="event">
      <div class="event-section">
        <span>New Admin Training</span>
      </div>
    </div>
    {% include "training_filter" %}
  </div>
</div>

 <main class="np-main np-training-events np-subpage-container np-max-width">
  <div id="upcoming-trainings-container">
    {% include "onboarding_index" %}
  </div>
  <div style="display: none;" id="new-user-journey-container">
    {% include "manager_index" %}
  </div>
  <div style="display: none;" id="training-webinar-catalog-container">
    {% include "admin_index" %}
  </div>
  <div style="display: none;" id="zero-state">
    Coming Soon!
  </div>
</main> 
  {% include "private_training_block" %}
{% include "footer" %}

<script>
  var isUS = false
  var isUK = false
  var isGlobal = false
  var isWorkforceManagement = false
  var isTalentAcquisition = false

  window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('.event').forEach((item) => {
      item.addEventListener('click', changeSection)
    })

    document.getElementById('all').addEventListener('click', clearAll)

    document.getElementById('uk').addEventListener('click', chooseRegion)
    document.getElementById('us').addEventListener('click', chooseRegion)
        {% comment %}
    document.getElementById('global').addEventListener('click', chooseRegion)
    {% endcomment %}
    document.getElementById('workforce-management').addEventListener('click', chooseProduct)
    document.getElementById('talent-acquisition').addEventListener('click', chooseProduct)
    document.getElementById('apply-button').addEventListener('click', showCategory)


    window.addEventListener('click', function(e){
      if (document.querySelector('.training-event-dropdown-button').contains(e.target))
        openNav()
      else if (!document.querySelector('.overlay-items-container').contains(e.target))
        closeNav();
    });
  })
  
  function clearAll(e) {
    closeNav();
    showAll();

    removeAllCircleColor();
    resetChosenValues();
  }

  function chooseRegion() {
    if (this.id === "uk") {
      isUK = true
      changeCircleColor(this.id)
      isUS = false

      removeCircleColor("us");

    }

    if (this.id === "us") {
      isUS = true
      changeCircleColor(this.id)
      isUK = false

      removeCircleColor("uk");

    }

{% comment %}
In an old iteration of this function, there was a "global" button
     if (this.id === "global") {
      isGlobal = true
      changeCircleColor(this.id)
      isUK = false
      isUS = false
      removeCircleColor("uk");
      removeCircleColor("us");
    }
    {% endcomment%}
  }

  function chooseProduct() {
    if (this.id === "talent-acquisition") {
      isTalentAcquisition = true
      changeCircleColor(this.id)
      isWorkforceManagement = false
      removeCircleColor("workforce-management");
    }

    if (this.id === "workforce-management") {
      isWorkforceManagement = true
      changeCircleColor(this.id)
      isTalentAcquisition = false
      removeCircleColor("talent-acquisition");
    }
  }

  function removeCircleColor(id) {
    document.getElementById(id).querySelector('.white-circle').classList.remove("active-circle");
  }

  function removeAllCircleColor() {
    document.querySelectorAll('.white-circle').forEach((item) => {
      item.classList.remove("active-circle");
    })
  }

  function changeCircleColor(id) {
    document.getElementById(id).querySelector('.white-circle').classList.add("active-circle");
  }

  function resetChosenValues() {
    isUS = false
    isUK = false
    isGlobal = false
    isWorkforceManagement = false
    isTalentAcquisition = false
  }

  function showAll() {
    Array.from(document.querySelectorAll(".np-stretch-content")).forEach((item) => {
      item.style.removeProperty('display');
    })

    document.getElementById("zero-state").style.display = "none"
  }

  function hideCategoryBox(category) {
    console.log(category)
    Array.from(document.querySelectorAll(".np-stretch-content")).forEach((item) => {
      if (!item.querySelector('h3.np-card-content-title').innerHTML.includes(category))
        item.style.display = 'none';
    })
  }

  function filterNonCategory(category) {
    console.log(category)
    Array.from(document.querySelectorAll(".np-stretch-content")).forEach((item) => {
      if (!item.querySelector('h3.np-card-content-title').innerHTML.includes(category))
        item.style.display = 'none';
    })
  }

  function showCategory() {
    showAll();

    if (isUS)
      filterNonCategory("US")

    if (isUK)
      filterNonCategory("UK")

    if (isGlobal)
      filterNonCategory("Global")

    if (isWorkforceManagement)
      hideCategoryBox("Workforce Management")

    if (isTalentAcquisition)
      hideCategoryBox("Talent Acquisition")

    //if (!isUS && !isUK && !isWorkforceManagement && !isTalentAcquisition)
    //  showAll();

    closeNav();
    countActiveEvents()
  }

  function hideAll() {
    Array.from(document.querySelectorAll(".np-stretch-content")).forEach((item) => {
      item.style.display = 'none'
    })
  }

  function changeSection(e) {
    removeActiveSectionClass();
    this.querySelector("div").classList.add('active-section');
    hideSections();
    showSection(this);

    showAll();
    removeAllCircleColor();
    resetChosenValues();
  }

  function removeActiveSectionClass() {
    const sections = document.querySelector(".events-container").children
    for (let index = 0; index < sections.length; index++) {
      const element = sections[index]; 
      element.querySelector("div").classList.remove('active-section');
    }
  }

  function hideSections() {
    document.getElementById("upcoming-trainings-container").style.display = "none";
    document.getElementById("new-user-journey-container").style.display = "none";
    document.getElementById("training-webinar-catalog-container").style.display = "none";
  }

  function showSection(element) {
    const container = document.getElementById(element.id + "-container");
    container.style.display = "block";
     countActiveEvents()
  }

function openNav() {
    var overlay = document.querySelector(".overlay");
    var overlayContent = document.querySelector(".overlay-content");
    overlay.classList.add("active");
    overlayContent.classList.add("active");
}

function closeNav() {
    var overlay = document.querySelector(".overlay");
    var overlayContent = document.querySelector(".overlay-content");
    overlay.classList.remove("active");
    overlayContent.classList.remove("active");
}
document.addEventListener('DOMContentLoaded', function () {
  closeNav();
});


  function countActiveEvents() {
    setTimeout(function() {
      let visibleEvents = 0
      const eventGroups = document.querySelector(".np-training-events").children

      for(var i=0; i<eventGroups.length; i++){
        var child = eventGroups[i];   
        if (child.style.display != "none") {

          if (child.querySelectorAll(".col-xs-12").length == 0) {
            //console.log("show zero state")
            document.getElementById("zero-state").style.display = "block"
          } else {

            child.querySelectorAll(".col-xs-12").forEach(function(tile) {
              //console.log(tile)
              if (tile.style.display != "none") {
                visibleEvents++
              }
            })

            console.log("visible events", visibleEvents)
            if (visibleEvents == 0) {
              console.log("show zero state")
              document.getElementById("zero-state").style.display = "block"
            }
          }
        }
      }
    }, 300) 
  }

function scrollDown() {
  const targetElement = document.getElementById('trainingTitles');
    
  if (targetElement) {
    const distanceToScroll = targetElement.getBoundingClientRect().top * 0.8;

    window.scrollBy({ top: distanceToScroll, behavior: 'smooth' });
  }
}

</script>

<style>
  body.new-styles .np-training-events.np-subpage-container {
    margin-top:0;
  }

  .request-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .request-button {
    font-weight: 500;
  }

  .training-events-header, .training-events-subheader {
    text-align: center;
  }

  .training-events-header {
    font-weight: 800;
    color: #000;
    margin-bottom: 20px;
  }

  .training-events-subheader {
    font-weight: 400;
    color: #000;
    margin-bottom: 24px;
    padding: 0;
  }

  .training-events-headers {
    background-image: url("https://s3.amazonaws.com/static.northpass.com/Harri/events-background.png");
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
    padding: 64px 24px;
    width: 100%;
    margin: 0;
    align-items: center;
    justify-content: center;
    margin-top: 74px;
  }

  .titles-container, .secondary-titles-container {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    margin: auto;
  }

  .event {
    text-align: center;
    color: #0088DD;
    padding: 0;
    padding-bottom: 4px;
    margin: 0;
    width:30%;
  }

  .secondary-event {
    font-size: 15px;
  }
  
  .active-section {
    font-weight: 700 !important;
    text-decoration: underline;
  }

  .secondary-active-section {
    font-weight: 700 !important;
    color: #403D3B !important;
    border-bottom: 2px solid #403D3B !important;
  }

  .events-container, .secondary-events-container {
    display: flex;
    cursor: pointer;
    align-items: center;
    margin: 24px 0;
    width: 100%;
  }

  .events-container {
    justify-content: space-around;
    padding: 0 16px;
    gap:12px;
  }

  .event-section {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  #zero-state {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
  }

  @media only screen and (max-width: 600px) {
    .secondary-events-container {
      flex-direction: column;
    }

    .np-filter {
      text-align: center;
    }
  }

  @media (min-width: 768px) {
    .np-training-events.np-subpage-container {
      padding: 40px 5% 80px;
    }

    .training-events-subheader {
      width: 50%;
      margin-left: auto;
      margin-right: auto;
    }

    .training-events-headers {
      max-width: 100%;
      margin: 90px 0 0;
      align-items: center;
      justify-content: center;
    }

    .event {
      font-size: 18px;
      max-width:20%;
    }

    .events-container, .secondary-events-container {
      gap: 1.5rem;
    }
  }

</style>


<style>
  .apply-button-container {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .apply-button {
    padding: 20px 40px;
    background-color: #0088DD;
    color: white;
    font-weight: 400;
    text-decoration: none;
  }

  .circle-container {
    display: flex;
    align-items: center;
  }

  .white-circle {
    border-radius: 50%;
    height: 15px;
    width: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .active-circle {
    background: #0088dd;
  }

  .green-circle {
    margin-right: 10px;
    border: 2px solid #0088dd;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    position: relative;
  }

  .all-filter {
    text-decoration: none;
    color: #0088DD;
  }

  .filter-title {
    color: #000;
    font-weight: 400;
    font-size: 30px;
  }

  .filter-item {
    margin: 0;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
    padding: 18px 0;
  }

  .overlay-items-headers {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

  }
  @media (max-width: 768px) {
    .overlay-items-headers {
        flex-direction: row-reverse;
        justify-content: space-between;
    }
  }

  .overlay-items-headers, .filter-container {
    padding: 0 60px;
  }

  .filter-category {
    color: #000;
    font-weight: 400;
    font-size: 20px;
  }

  .filter-container {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  .overlay-items-container {
    height: 100%;
    border-top-left-radius: 37px;
    border-top-right-radius: 37px;
    background-color: #fff
  }

  .overlay {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease-in-out;
    z-index: 50;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: #00000033; /* Black w/opacity */
  }
.overlay.active {
  visibility: visible;
  opacity: 1;
}
.overlay-content {
  height: 100%;
  position: relative;
  top: 100%; /* Start off-screen at the bottom */
  width: 100%;
  text-align: center;
  transition: top 0.3s ease-in-out; /* Add transition for smooth animation */
  margin-top: 30px;
}

.overlay-content.active {
  top: 25%; /* Slide in from the bottom when active */
}

  .overlay .closebtn {
    font-size: 30px;
  }

  .training-event-dropdown-button {
    background-color: #D9D9D9;
    border-radius: 0px;
    font-size: 20px;
    padding: 10px 30px;
    font-weight: 400;
    color: #000;
    border: none !important;
  }

  .training-event-dropdown {
    display: flex;
    justify-content: flex-start;
  }
  
  .training-event-filter {
    justify-content: flex-start;
  }

  @media (max-width: 576px) {
    .training-event-dropdown {
      margin-top: 20px;
    }
  }

  @media (min-width: 768px) {
    .all-filter {
      font-size: 20px;
      margin: 15px 0;
    }

    .filter-category {
      margin: 0;
    }

    .training-event-filter {
      margin: 0;
      max-width:20%;
    }

    .training-event-dropdown {
      margin-left: 0;
    }

    .training-event-dropdown-button {
      margin-bottom: 4px;
    }

    .overlay {
      position: absolute;
      width: 300px;
      height: auto;
      top: 40px;
      right: 0;
      left: auto;
      box-shadow: 0 10px 25px 0 rgb(14 27 46 / 18%);
    }

    .overlay-content {
      margin-top: 0; 
    }

    .overlay-items-container {
      border-radius: 0;
    }

    .filter-title, .closebtn {
      display: none;
    }

    .overlay-items-headers, .filter-container {
      padding: 0 20px;
    }

    .apply-button {
      margin-bottom: 10px;
    }
  }

  @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
    }
  }

  @media (min-width:1200px) {
    .event {
      font-size: 22px;
    }
  }
</style>