{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-training-events np-subpage-container np-max-width">

  <div class="row">
    <div class="col-xs-12 col-sm-10" style="margin:auto;">
      <div class="np-resource-title">
        Events
      </div>
      <div class="np-resource-subtitle">
        Discover and register for all in-person online training events to maximise your learning
      </div>
    </div>
    {% comment %} <div class="col-xs-12 col-sm-2">
      {% include "training_events_filter" %}
    </div> {% endcomment %}
  </div>

  <div class="row">
    <div class="col-xs-12 events-filter-container ">
      <select class="event-filter-select">
        <option value="all" selected>Search events by State</option>
        {% comment %} <option value="national">National</option> {% endcomment %}
        <option value=" ACT">ACT</option>
        <option value=" NSW">NSW</option>
        <option value=" QLD">QLD</option>
        <option value=" SA">SA</option>
        <option value=" TAS">TAS</option>
        <option value=" VIC">VIC</option>
        <option value=" WA">WA</option>
        <option value=" NZ">NZ</option>

        {% comment %} <option value="auction training">Auction Training</option>
        <option value="commercial">Commercial</option>
        <option value="ebu training">EBU Training</option>
        <option value="influencern training">Influencer Training</option>
        <option value="leadership">Leadership</option>
        <option value="momentum">Momentum</option>
        <option value="pinnacle">Pinnacle</option>
        <option value="property management">Property Management</option>
        <option value="sales">Sales</option>
        <option value="shine pm">Shine PM</option>
        <option value="state sales training">State Sales Training</option>
        <option value="succes path">Success Path</option> {% endcomment %}
      </select>
    </div>
    {% comment %} <div class="col-xs-12 events-filter-container np-hidden-mobile np-hidden-desktop">
      <div class="event-filter active" data-filter="all">
        All Upcoming Events
      </div>
      <div class="event-filter" data-filter="auction training">
        Auction Training
      </div>
      <div class="event-filter" data-filter="commercial">
        Commercial
      </div>
      <div class="event-filter" data-filter="ebu Training">
        EBU Training
      </div>
      <div class="event-filter" data-filter="influencer training">
        Influencer Training
      </div>
      <div class="event-filter" data-filter="leadership">
        Leadership
      </div>
      <div class="event-filter" data-filter="momentum">
        Momentum
      </div>
      <div class="event-filter" data-filter="pinnacle">
        Pinnacle
      </div>
      <div class="event-filter" data-filter="property management">
        Property Management
      </div>
      <div class="event-filter" data-filter="sales">
        Sales
      </div>
      <div class="event-filter" data-filter="shine pm">
        Shine PM
      </div>
      <div class="event-filter" data-filter="state sales training">
        State Sales Training
      </div>
      <div class="event-filter" data-filter="success path">
        Success Path
      </div>
    </div>
  </div> {% endcomment %}

  {% include "training_events_index" %}

  <div class="filtered-events-zero-state np-dashboard-resources" style="display:none;">
    {% include "training_events_zero_state" %}
  </div>

  {% comment %} <div class="heading">
    <div class="np-resource-title">Events</div>
    <div class="resource-subtitle">Discover and register for all in-person online training events to maximize your learning </div>
    <a class="np-top-button np-button-font-color np-button np-button-big" href="https://ljhookergroup.eventsair.com/lj-hooker-training-events-website/calendar ">  
      Visit our Events Website
    </a>
  </div> {% endcomment %}

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

{% comment %} <style>
  .heading {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .np-resource-title {
    font-weight: 500;
    font-size: 55px;  
  }
  .resource-subtitle {
    margin: 2rem 0;
    color: #7c9ac0;
    font-weight: 800;
    width: 50%;
    text-align: center;
  }
</style> {% endcomment %}

<style>
  .np-main.np-training-events.np-subpage-container {
    padding: 32px 16px 50px;
  }
  .events-filter-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }
  .np-resource-title {
    font-size: 32px;
    text-align: center;
    font-weight: 400;
    line-height: normal;
  }

  .np-resource-subtitle {
    text-align: center;
    margin-bottom:16px;
  }

  .events-filter-container.np-hidden-desktop {
    text-align: center;
    margin-bottom: 32px;
  }

  select.event-filter-select {
    border: 2px solid #000;
    color: #000;
    padding: 4px 12px;
    font-weight: 700;
    border-radius: 4px;
    font-size: 14px;
  }

  .events-filter-container.np-hidden-mobile {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
    margin-top: 16px;
    flex-wrap: wrap;
  }

  .event-filter {
    background-color: transparent;
    border: 2px solid #000;
    color: #000;
    text-decoration: none;
    padding: 4px 12px;
    font-weight: 700;
    border-radius: 4px;
    margin: 0 12px 16px;
    font-size: 14px;
    transition: all 0.1s;
    cursor:pointer;
  }

  .event-filter:hover,
  .event-filter.active {
    color: #fff;
    background: #000;
  }

  @media (min-width: 768px) {
    .np-resource-title {
        font-size: 55px;
    }

    .event-filter {
      font-size: 16px;
      padding: 6px 16px;
      margin: 0 16px 16px;
    }
  }
</style>

<script>
  $(".event-filter").click(function() {
    $(".event-filter").removeClass("active")
    $(this).addClass("active")
    filterEvents($(this).data("filter"))
  })

  $(".event-filter-select").change(function() {
    filterEvents(this.value)
  })

  function filterEvents(selectedFilterValue) {
    hideZeroState()

    if (selectedFilterValue == "all") {
      showAllEvents()
    } else {
      showFilteredEvents(selectedFilterValue)
    }
  }

  function hideZeroState() {
    $(".filtered-events-zero-state").hide()
  }

  function showAllEvents() {
    $(".training-event-card-column").show()
  }

  function showFilteredEvents(selectedFilterValue) {
    let numOfEventsToShow = 0;
    
    hideAllEvents()

    numOfEventsToShow += showAndCountEvents(selectedFilterValue)
    numOfEventsToShow += showAndCountWebinars()

    showZeroState(numOfEventsToShow)
  }

  function hideAllEvents() {
    $(".training-event-card-column").hide()
  }

  function showAndCountEvents(selectedFilterValue) {
    let numberOfEvents = 0
    $(".training-event-card-column").each(function() {
      const eventTitle = $(this).find(".np-card-content-title").text().trim();

      if(eventTitle.includes(selectedFilterValue)){
        $(this).show()
        numberOfEvents++
      } 
    })

    return numberOfEvents
  }

  function showAndCountWebinars() {
    let numberOfWebinars = 0
    $(".training-event-card-column").each(function() {
      const eventTitle = $(this).find(".np-card-content-title").text().trim();

      if(eventTitle.includes("Webinar")){
        $(this).show()
        numberOfWebinars++
      } 
    })

    return numberOfWebinars
  }

  function showZeroState(numOfEventsToShow) {
    if (numOfEventsToShow == 0) {
      $(".filtered-events-zero-state").show()
    }
  }
</script>