<script>
  function showPopup() {
    setTimeout(function() {
      document.querySelector(".popup-trigger").click()
    }, 500)
  }

  function showSurveyPopup() {
    setTimeout(function() {
      document.querySelector(".survey-popup-trigger").click()
    }, 500)
  }

  function formatDate(date) {
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const year = date.getFullYear();

    return `${month}/${day}/${year}`;
  }

  function RerunWorkato() {
    const today = new Date();
    const formattedDate = formatDate(today);
    const data = { person_uuid: '{{current_person.id}}', date: formattedDate }

    let webhookUrl
    if (schoolID == "804edb32-c300-42f3-82b7-e5d55fcbc2a6") {
      webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup"
    } else if (schoolID == "10183441-2254-4b1e-a9f7-9549ca773257") { // live school

    }

    if (webhookUrl) {
      fetch(webhookUrl, {
        method: 'post',
        body: JSON.stringify(data)
      }).then(function(response) {
        return response.json();
      }).then(function(data) {
        console.log(res)
      }).catch(error => {
        console.log(error)
      });
    }
  }
</script>

{% assign catalog_courses = courses.in_catalog %}

{% assign survey_courses = "" %}
{% assign survey_course_completed = false %}
{% if current_school.id == "10183441-2254-4b1e-a9f7-9549ca773257" %} 
  {% comment %} LIVE SCHOOL  {% endcomment %}
  {% assign survey_course = catalog_courses | where: "id", "b3225a47-448d-4988-962a-18d37d6616d0" %}
{% elsif current_school.id == "804edb32-c300-42f3-82b7-e5d55fcbc2a6" %}
  {% comment %} SANDBOX SCHOOL  {% endcomment %}
  {% assign survey_course = catalog_courses | where: "id", "fdc8acdc-0b7c-4064-a52b-1955379d411b" %}
{% endif %}

{% for course in survey_course %}
  {% if course.progress == 100 %}
    {% assign survey_course_completed = true %}
  {% endif %}
{% endfor %}

{% include "header" %}
<main class="np-main np-homepage">
  <div class="np-homepage-hero">
    <div class="np-homepage-hero-container">
      <div class="np-homepage-hero-content">
        <div class="np-homepage-headline">
          {{ homepage.headline }}
        </div>
        <div class="hero-search-wrapper">
          <div class="np-homepage-subheadline">
            {{ homepage.subheadline }}
          </div>
          <form class="np-header-search np-hero-search" data-test="mobile-search" method="get" action="{% route search %}">
            <input aria-label="What are you looking for?" class="hero-search-input" type="text" name="q" placeholder="What are you looking for?" />
            <i class="np-header-search-icon hero-search-icon far fa-search"></i>
          </form>
        </div>
      </div>
      <img class="np-homepage-hero-image" src="{{ homepage.artwork_url }}" alt="{{ homepage.headline }}" />
    </div>
  </div>
  {% include "sub_navigation" %}
  
  {% include "homepage_featured", items: catalog_courses %}

  <div class="np-max-width np-homepage-row-wrapper">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12" style="display:flex; flex-direction:column;">
        <div class="np-section-header">Progress Tracker</div>
        <div class="learning-path-progress-container">
          <div class="row">
            {% assign lps_in_progress = 0 %}
            {% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
            {% for learning_path in enrolled_learning_paths %}
              {% if learning_path.progress > 0 %}
                {% assign lps_in_progress = lps_in_progress | plus: 1 %}

                {% if lps_in_progress < 4 %}
                  <div class="col-xs-12 col-md-4">
                    {% include "cards_learning_path_progress" %}
                  </div>
                  
                {% endif %}
              {% endif %}
            {% endfor %}
            
            {% if lps_in_progress > 0 %}
              <div class="see-more-wrapper">
                <a href="/app/dashboard" style="margin-top:24px;">See more</a>
              </div>
            {% endif %}
            {% if lps_in_progress == 0 %}
              <div class="col-xs-12">
                <div class="np-learning-paths-resources-container">
                  <div class="np-zero-state-text">
                    Yikes! You don't have any learning Paths in progress.
                  </div>
                  <img class="np-zero-state-learning-paths" alt="" />
                </div>
              </div>
              
            {% endif %}
          </div>
          
        </div>
      </div>
      {% comment %} {% if features.training_events? %}
        <div class="col-xs-12 col-sm-5 col-md-4">
          <div class="homepage-events">
            <div class="np-section-header">Upcoming Courses</div>
            <div class="upcoming events">
              {% if training_events.available.any? %}
                {% for training_event in training_events.available limit:1 %}
                  {% include "cards_training_event" with training_event %}
                {% endfor %}
                <div class="see-more-wrapper">
                  <a href="/app/training_events" style="margin-top:24px;">See more</a>
                </div>
              {% else %}
                {% include "training_events_zero_state" %}
              {% endif %}
            </div>
          </div>
        </div>
      {% endif %} {% endcomment %}
    </div>
  </div>

  {% include "homepage_ongoing_training", items: catalog_courses %}
  
  {% include "homepage_topics" %}
    <button
      type="button"
      class="popup-trigger"
      data-toggle-class-on-target
      data-toggle-target="#firstTimeUsers"
      data-toggle-escape
      data-toggle-modal>
      Click
    </button>

    <button
      type="button"
      class="survey-popup-trigger"
      data-toggle-class-on-target
      data-toggle-target="#surveyPopup"
      data-toggle-escape
      data-toggle-modal>
      Click
    </button>
</main>
{% include "footer" %}

<div
	class="first-time-user-popup"
	id="firstTimeUsers"
	role="dialog"
	aria-labelledby="dialogTitle"
	aria-describedby="dialogContent"
	aria-hidden="true">
	<section class="first-time-user-popup-container">
		<div id="dialogContent" class="first-time-user-popup-content">
      <div class="modal-headline">Welcome to Luminate Academy, {{ current_person.first_name }}! We noticed it is your first time here. Can we help you get familiar with the academy?</div>
      <div class="modal-links">
      	<a href="javascript:setPopupSeenProperty('/app/dashboard')" class="secondary" data-toggle-trigger-off>No thanks! I can figure it out.</a>

        {% if current_school.id == "10183441-2254-4b1e-a9f7-9549ca773257" %} 
          {% comment %} LIVE SCHOOL  {% endcomment %}
          <a href="javascript:setPopupSeenProperty('/app')" data-redirect="/app">Sure! Show me around.</a>
        {% elsif current_school.id == "804edb32-c300-42f3-82b7-e5d55fcbc2a6" %}
          {% comment %} SANDBOX SCHOOL  {% endcomment %}
          <a href="javascript:setPopupSeenProperty('https://luminatesandbox.northpass.com/c/0e61b8e5ced6f6093816fed850226ac828853eaf')" data-redirect="/app">Sure! Show me around.</a>
        {% endif %}
        
      </div>
		</div>
	</section>
</div>

<div
	class="survey-popup"
	id="surveyPopup"
	role="dialog"
	aria-labelledby="dialogTitle"
	aria-describedby="dialogContent"
	aria-hidden="true">
	<section class="survey-popup-container">
		<div id="dialogContent" class="survey-popup-content">
      <div class="modal-headline">Please take a moment to tell us more about you!</div>
      <div class="modal-links">
        {% if current_school.id == "10183441-2254-4b1e-a9f7-9549ca773257" %} 
          {% comment %} LIVE SCHOOL  {% endcomment %}
          {% comment %} <a href="javascript:setPopupSeenProperty('/app')" data-redirect="/app">Sure! Show me around.</a> {% endcomment %}
        {% elsif current_school.id == "804edb32-c300-42f3-82b7-e5d55fcbc2a6" %}
          {% comment %} SANDBOX SCHOOL  {% endcomment %}
          <a href="javascript:setSurveyPopupSeen('/app/courses/fdc8acdc-0b7c-4064-a52b-1955379d411b')">Go!</a>
        {% endif %}
      </div>
		</div>
	</section>
</div>

{% if current_person.signed_in? %}
  {% unless current_person.email contains "+preview" %}
    {% if current_person.properties.first_time_user_popup_seen == false %}
      <script>
        console.log('property is false, check local storage')
        if (localStorage.getItem('modal_clicked') != null) {
          console.log("rerun workflow to set property")
          RerunWorkato()
        } else {
          showPopup()
        }
      </script>
    {% elsif current_person.properties.first_time_user_popup_seen == true %}
      <script>
        console.log("property is set, deleting local storage, don't initialize first modal")
        localStorage.removeItem("modal_clicked")
      </script>
    {% else %}
      <script>
        console.log('custom prop doesnt yet exist')
        if (localStorage.getItem('modal_clicked') != null) {
          console.log("rerun workflow to set property")
          RerunWorkato()
        } else {
          showPopup()
        }
      </script>
    {% endif %}
  {% endunless %}
{% endif %}

<script>
  if (window.location.pathname == "/app") {
    document.querySelector(".np-sub-navigation").classList.add("homepage-nav")
    document.querySelector(".np-header").classList.add("homepage-nav")
  }

  document.querySelector(".np-hidden-desktop .dropdown-arrow").addEventListener("click", function(e) {
    if (e.target.parentElement.classList.contains("open")) {
      e.target.parentElement.classList.remove("open")
    } else {
      e.target.parentElement.classList.add("open")
    }
  })

  window.onload = function () {
    var stickySubNav = document.querySelector('.np-sub-navigation');
    var headerOffset = findOffset(stickySubNav);

    window.onscroll = function() {
      var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (bodyScrollTop > (headerOffset.top  - 24)) {
        stickySubNav.classList.add('fixed');
      } else {
        stickySubNav.classList.remove('fixed');
      }
    };

    const firstPopupSeen = {{current_person.properties.first_time_user_popup_seen}}

    if (firstPopupSeen == true) {
      var popupSeenDate = new Date("{{current_person.properties.first_popup_date}}");
      var popupSeenSeconds = popupSeenDate.getTime() / 1000;

      var currentDate = new Date();
      var currentDateSeconds = currentDate.getTime() / 1000;

      if (currentDateSeconds > (popupSeenSeconds + 1209600) && currentDateSeconds) {
        console.log("more than 2 weeks after first popup")
        
        const surveyCourseCompleted = {{survey_course_completed}}

        if (surveyCourseCompleted == false) {
          if (localStorage.getItem("survey_modal_clicked") == null) {      
            showSurveyPopup()
          } else {
            const lastClickedDateSeconds = new Date(localStorage.getItem("survey_modal_clicked")).getTime() / 1000
            if (currentDateSeconds > (lastClickedDateSeconds + 1209600) && currentDateSeconds) {
              showSurveyPopup()
            } else {
              console.log(`dont show survey popup again until 2 weeks after ${localStorage.getItem("survey_modal_clicked")} or course completed`)
            }         
          }
        } else  {
          localStorage.removeItem("survey_modal_clicked");
        }
      }
    }
  };

  function findOffset(element) {
    var top = 0, left = 0;

    do {
      top += element.offsetTop  || 0;
      left += element.offsetLeft || 0;
      element = element.offsetParent;
    } while(element);

    return {
      top: top,
      left: left
    };
  }

  window.addEventListener("load", function() {

    var progressCards = document.querySelectorAll(".np-card-learning-path-progress");

    for (var i = 0; i < progressCards.length; i++ ) {
      var lpProgressCard = progressCards[i]
      var progressRing = lpProgressCard.querySelector(".progress-ring")
      let circle = progressRing.querySelector(".circle-progress")
      let total = progressRing.getAttribute("data-total")
      let numCompleted = lpProgressCard.querySelector(".lp-completed-items span > div").getAttribute("data-completed")
      var radius = circle.r.baseVal.value;
      var circumference = radius * 2 * Math.PI;

      circle.style.strokeDasharray = `${circumference} ${circumference}`;
      circle.style.strokeDashoffset = `${circumference}`;

      const percent = numCompleted / total
      console.log("percent: ", percent)
      setProgress(percent, circle)
    }
    
    function setProgress(percent, circle) {
      const offset = circumference - percent * circumference;
      circle.style.strokeDashoffset = offset;
    }

  }) 

  function setPopupSeenProperty(redirectUrl) {
    localStorage.setItem("modal_clicked", true);
    const today = new Date();
    const formattedDate = formatDate(today);
    const data = { person_uuid: '{{current_person.id}}', date: formattedDate }

    const schoolID = '{{current_school.id}}'
    let webhookUrl
    if (schoolID == "804edb32-c300-42f3-82b7-e5d55fcbc2a6") {
      webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup"
    } else if (schoolID == "10183441-2254-4b1e-a9f7-9549ca773257") { // live school

    }

    if (webhookUrl) {
      fetch(webhookUrl, {
        method: 'post',
        body: JSON.stringify(data)
      }).then(function(response) {
        return response.json();
      }).then(function(data) {
        console.log(res)
        setTimeout(function() {
          window.location.href = redirectUrl;
        }, 250)
       
      }).catch(error => {
        console.log(error)
        setTimeout(function() {
          window.location.href = redirectUrl;
        }, 250)
      });
    }


  }

  function setSurveyPopupSeen(redirectUrl) {
    const today = new Date();
    const formattedDate = formatDate(today);
    localStorage.setItem("survey_modal_clicked", formattedDate);

    setTimeout(function() {
      window.location.href = redirectUrl;
    }, 250)

  }
</script>

<style>
  .np-homepage-hero {
    background-color:#3C228A;
    padding: 40px 24px 24px;
    flex-direction: column;
  }

  .np-homepage-hero-image {
    object-fit: unset;
    width: 115px;
    height: auto;
    min-height: unset;
    margin-top:24px;
  }

  .np-homepage-hero-content {
    position:relative;
    padding:0;
    color:#fff;
  }

  .np-homepage-hero .np-homepage-headline {
    font-weight: 700;
    font-size: 24px;
    line-height: 33px;
    margin-bottom:24px;
  }

  .np-homepage-subheadline {
    font-size: 20px;
    line-height: 24px;
    margin-bottom:8px;
    opacity:1;
  }

  .np-hero-search {
    width:100%;
  }

  .hero-search-input {
    background-color:#F1F3F4;
    border-radius:4px;
    padding: 14px 19px 14px 44px;
    border:none;
    font-size:14px;
    line-height:19px;
    width: 100%;
    background:#fff;
  }

  .hero-search-icon {
    right:unset;
    left:16px;
    color:#6C6C6C;
  }

  .np-homepage-row-wrapper {
    padding: 0 16px;
    margin-bottom:56px;
  }

  .np-homepage-featured-empty {
    margin: 0;
    border: 2px solid #dadce0;
    border-radius: 8px;
    padding: 60px 32px;
  }

  .learning-path-progress-container,
  .learning-path-progress-container > .row {
    height:100%;
  }

  .popup-trigger,
  .survey-popup-trigger {
    visibility:hidden;
    opacity:0;
  }

  @media (min-width:768px) {
    .np-homepage-hero-container {
      display:flex;
      align-items:center;
    }

    .np-homepage-hero .np-homepage-headline {
      font-size: 40px;
      line-height: 50px;
      margin-bottom:20px;
      text-align:left;
    }

    .np-homepage-hero-image {
      width: 200px;
      height: auto;
      margin: 0 0 0 64px;
    }

    .hero-search-wrapper {
      display:flex;
    }

    .np-hero-search {
      margin-left:32px;
      flex:2;
    }
  }

  @media (min-width:768px) and (max-width:1365px) {
    .np-homepage-hero .np-homepage-headline {
      font-size: 3.516vw;
      line-height: 4.249vw;
    }
  }

  @media (min-width:1200px) {
    .np-homepage-hero-image {
      width: 300px;
      margin: 0 0 0 100px;
    }
  }

  @media (min-width:1366px) {

    .np-homepage-hero .np-homepage-headline {
      font-size: 48px;
      line-height: 58px;
    }
  }
</style>
