{% include "header" %}
{% comment %} {% include "course_version_outdated_alert", courses: courses.featured %} {% endcomment %}
{% assign enrolled_courses = courses.enrolled %}

<main class="np-main np-homepage">
 
    <div class="np-homepage-hero hero-clipped">
      {% comment %} <img class="np-homepage-hero-image hero-clipped"
        src= "{{homepage.artwork_url}}"
        alt="{{ homepage.headline }}"
      /> {% endcomment %}
      {% comment %} <div class="np-homepage-hero-image hero-clipped"
      /></div> {% endcomment %}
      <div class="np-homepage-hero-content">
        <div class="np-homepage-headline text-color-white ">
          {{ homepage.headline }}
        </div>
        <div class="np-homepage-subheadline text-color-white">
          {{ homepage.subheadline }}
        </div>
      </div>
    </div>
    {% include "sub_navigation" %}
    <div class="np-carousel-section np-max-width">
      {% capture carousel_heading %}Welcome back {{ current_person.first_name }}. Continue from where you left off.{% endcapture %}
      {% assign carousel_see_all_link = "/app/in-progress-page" %}
      {% include 
        "carousel_courses", 
        progress: "in-progress", 
        category: "any", 
        heading: carousel_heading, 
        see_all_link: carousel_see_all_link,
        enrolled_courses: enrolled_courses 
      %}
    </div>
    
    <div class="main-container-middle">
      <div class="np-carousel-section np-max-width">
        {% capture carousel_heading %}Sales Training{% endcapture %}
        {% assign carousel_see_all_link = "/app/courses-category?category=sales"%}
        {% include 
          "carousel_courses", 
          progress: "", 
          category: "sales", 
          heading: carousel_heading, 
          see_all_link: carousel_see_all_link,
          enrolled_courses: enrolled_courses 
        %}
      </div>
    </div>
    
  {% comment %}<div class="blue-background" style="background-color: #dae3ee;">
    {% capture quote_title %}Head of Network <br>Performance, LJ Hooker {% endcapture %}
    {% include 
      "quote_section",
      quote_text: "In today's ever changing real estate world, having the ability to access a learning and development environment such as Lighthouse, puts all of our LJ Hooker family ahead of the competition. We look forward to supporting your learning journey and welcome your feedback.",
      quote_author: "Steve Mutton",
      quote_title: quote_title
    %}
  </div>{% endcomment %}


    <div class="np-carousel-section np-max-width">
      {% capture carousel_heading %}System and Technology Training{% endcapture %}
      
      {% assign carousel_see_all_link = "/app/courses-category?category=systems-and-technology"  %}
      {% include 
        "carousel_courses", 
        progress: "", 
        category: "systems and technology", 
        heading: carousel_heading, 
        see_all_link: carousel_see_all_link,
        enrolled_courses: enrolled_courses 
      %}
    </div>

    {% comment %} <a class="webinars-banner-link" href="/app/courses-category?category=webinars">
      <div class="np-max-width">
        <img class="banner-img"src="https://s3.amazonaws.com/static.northpass.com/LightHouse-LJHooker/banners/webinar_banner.png" alt="webinars Banner">
      </div>
    </a> {% endcomment %}
</main>
{% include "footer" %}

  <!-- The Modal -->
  {% comment %} <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <div class="modal-inner-content">
            <div style="padding-top: 56.25%;position:relative;height: 0;width: 100%;">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/puZR2g2Ajig" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
            </div>

          <a class="np-button modal-button" href="https://www.surveymonkey.com/r/Y6CRBMF" target="_blank">Give Feedback</a>
      </div>

    </div>

  </div> {% endcomment %}
  
<style>

.webinars-banner-link {
  display:block;
  background:#000;
}

.webinars-banner-link img {
  width:100%;
}

.np-homepage-hero {
  background-color:#000;
}

.np-homepage-hero-content {
  position:relative;
  padding: 20px 40px 60px;
}

.hero-clipped {
  clip-path: polygon(100% 0, 100% 63%, 79% 100%, 0 100%, 0 0);
}

.np-carousel-section {
  padding: 50px 24px;
}

.main-container-bottom-black {
    background: black;
    padding-bottom: 3rem;
    clip-path: polygon(100% 0, 100% 79%, 81% 100%, 0 100%, 0 0);
}
.main-container-middle {
    clip-path: polygon(100% 0, 100% 79%, 81% 100%, 0 100%, 0 0);
    background: whitesmoke;
    padding-top: 32px;
    padding-bottom: 32px;
}
.np-course-details,
.np-card-content-progress.np-button-color {
  padding: 5px;
}

.main-container-bottom-black .course-carousel-title,
.main-container-bottom-black .np-zero-state-text,
.main-container-bottom-black .np-card-content-title,
.main-container-bottom-black .card-content-short-description,
.main-container-bottom-black .np-details-label {
   color:#fff;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed; 
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100vh; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 16px;
  border: 1px solid #888;
  width: 80%;
  max-width: 992px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.text-color-white {
  color: white;
}
.modal-inner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:22px 0;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  line-height:normal;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-button,
.modal-button:hover {
  background-color:#7c9ac0;
  margin-top:32px;
  color:#fff;
}

.welcome-text-container-black {
  padding-top: 2rem;
}

.course-carousel-title {
  font-size: 18px;
  text-align:left;
}

.see-all-btn-container {
  margin-left:auto;
}

.see-all-btn {
  padding: 5px 20px;
  color: rgb(133,159,192);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  background: white;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}


.welcome-text-container {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
}

.webinars-banner {
  padding: 40px 16px 16px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.webinars-banner-text {
  color:#fff;
  font-size:48px;
}

@media (min-width:768px) {
  .modal-inner-content {
    padding:24px 32px;
  }

  .np-homepage-hero-container {
    padding: 20px 40px 80px;
  }

  .welcome-text-container {
    flex-direction: row;
  }

  .course-carousel-title {
    font-size: 24px;
  }
}

@media (min-width:1170px) {
  .np-homepage-hero-content {
    padding: 20px 40px 80px;
  }
}
</style>


<script>


$(document).ready(function() {
  const hasSeenPopupCookie = getCookie("feedbackPopupSeen")

  if (hasSeenPopupCookie == null) {
    console.log("show popup and set cookie")
    modal.style.display = "block";
    createCookie("feedbackPopupSeen", true)
  }
})

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var closeX = document.getElementsByClassName("close")[0];
var signoutLink = document.querySelector(".np-header-avatar-tooltip-navigation-link.np-danger")
var mobileSignoutLink = document.querySelector(".np-header-mobile-menu-content-button.np-danger")

  /*var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/lj-hooker-video-watched", true);
  xhr.send(JSON.stringify({
    person_id: "{{current_person.id}}"
  }));*/

closeX.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

signoutLink.onclick = function() {
  deleteCookie("feedbackPopupSeen")
}

mobileSignoutLink.onclick = function() {
  deleteCookie("feedbackPopupSeen")
}

function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    }
    else
    {
        begin += 2;
        var end = document.cookie.indexOf(";", begin);
        if (end == -1) {
        end = dc.length;
        }
    }
    return decodeURI(dc.substring(begin + prefix.length, end));
} 

function deleteCookie( name, path, domain ) {
  if( getCookie( name ) ) {
    document.cookie = name + "=" +
      ((path) ? ";path="+path:"")+
      ((domain)?";domain="+domain:"") +
      ";expires=Thu, 01 Jan 1970 00:00:01 GMT";
  }
}
</script>