{% assign enrolled_events = 0 %}
{% for training_event in training_events.enrolled %}
    {% assign enrolled_events = enrolled_events | plus: 1 %}
{% endfor %}

{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
<div class="np-banner-container ">
  <div class="banner-wrapper np-max-width">
    <div class="np-banner-content">
    <div class="dashboard-heading">Dashboard</div>
    <div class="dashboard-greeting-text">
      <p>Hi {{ current_person.first_name }}!</p>
      <p>Continue where you left off or dive into <br>something new – your learning journey awaits!</p>
    </div>
    </div>
    
    <div class="dashboard-stats">
      <div class="dashboard-heading">
        Course progress
      </div>
      {% include 'widget_course_progress' %}
    </div>
      <div class="dashboard-upcoming-events">
      <div class="upcoming_events_heading">Upcoming events</div>
      <div class="event-card" >
          {% include "training_events_dashboard" %}
      </div>
      <div class="see-more-container"></div>
      <button class="see-more-button" onclick="scrollToRegisteredEvents()">See more</button>
      </div>

      </div>
  </div>
</div>

  
<main class="np-main np-dashboard np-subpage-container np-max-width">  
      {% assign in_progress_flag = false %}
      {% assign not_started_flag = false %}
      {% assign completed_flag = false %} 
  
      {% if courses.enrolled.any? %}
        {% for course in courses.enrolled %}
          {% if course.progress == 0 %}
            {% assign not_started_flag = true %}
          {% elsif course.progress > 0 and course.progress < 100 %}
            {% assign in_progress_flag = true %}
          {% else %}
            {% assign completed_flag = true %}
          {% endif %}
        {% endfor %}
      {% endif %}
  
      <!-- In Progress Courses -->
      {% if in_progress_flag %}
        <div class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
        <div class="role-quick-link-heading" >In progress courses</div> <span class="dropdown-arrow">▼</span>
        </div>
        <div class="category-courses course-items-container">
          {% for course in courses.enrolled %}
            {% if course.progress > 0 and course.progress < 100 %}
              <div class="category-cards-wrapper course-item">
                {% include "cards_course" with course %}
              </div>
            {% endif %}
          {% endfor %}
        </div> 
      {% endif %}

      <!-- Not Started Courses -->
      {% if not_started_flag %}
        <div class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
        <div class="role-quick-link-heading" >Available courses</div><span class="dropdown-arrow">▼</span>
        </div>
        <div class="category-courses course-items-container" >
          {% for course in courses.enrolled %}
            {% if course.progress == 0 %}
              <div class="category-cards-wrapper course-item">
                {% include "cards_course" with course %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      {% endif %}
  
      <!-- Completed Courses -->
      {% if completed_flag %}
        <div class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
        <div class="role-quick-link-heading" >Completed courses</div><span class="dropdown-arrow">▼</span>
        </div>
        <div class="category-courses course-items-container">
          {% for course in courses.enrolled %}
            {% if course.progress == 100 %}
              <div class="category-cards-wrapper course-item">
                {% include "cards_course" with course %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      {% endif %}

       <!-- Registered Events -->       
      {% assign enrolled_events = 0 %}
      {% for training_event in training_events.enrolled %}
        {% assign enrolled_events = enrolled_events | plus: 1 %}
      {% endfor %}
  
      {% if enrolled_events > 0 %}
        <div id="registered-events-section" class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
          <div class="role-quick-link-heading">Upcoming events</div><span class="dropdown-arrow">▼</span>
          </div>
          <div class="category-courses course-items-container">
            {% for training_event in training_events.enrolled %}
                <div class="category-cards-wrapper course-item">
                  {% include "cards_training_event" %}
                </div>
            {% endfor %}
          </div>
      {% endif %}
</main>
{% include "footer" %}

<script>
function scrollToRegisteredEvents() {
    document.getElementById("registered-events-section").scrollIntoView({ behavior: "smooth" });
  }

document.addEventListener("DOMContentLoaded", function() {
  function setCourseItemsVisibility(container) {
    const items = container.querySelectorAll(".course-item");
    const isExpanded = container.previousElementSibling.getAttribute("data-expanded") === "true";
    
    items.forEach((item, index) => {
      item.style.display = (index < 3 || isExpanded) ? "block" : "none";
    });
  }

  window.toggleDropdown = function(element) {
    const container = element.nextElementSibling;

    if (container && container.classList.contains("course-items-container")) {
      const isExpanded = element.getAttribute("data-expanded") === "true";
      element.setAttribute("data-expanded", !isExpanded);
    
      setCourseItemsVisibility(container);

      element.querySelector(".dropdown-arrow").textContent = isExpanded ? "▼" : "▲";
    }
  };

  document.querySelectorAll(".course-items-container").forEach(container => {
    setCourseItemsVisibility(container);
  });
});
</script>

<style>
  .np-banner-container{
  display: flex;
  padding: 33px;
  background-color: #EEEFEF;
  margin-bottom: 20px;
  align-items: flex-start;
  gap: 20px;
  justify-content: space-around;
  }
.np-dashboard-resources{
  border-radius: 16px;
}
.category-courses {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .category-courses{ 
  display: flex;
  flex-direction: column;
  }
}
.banner-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 30px;
}
.dashboard-heading{
  font-size: 2.5rem;
  color: #010063;
  font-weight: 500;
}
.upcoming_events_heading {
  font-size: 2.5rem;
  color: #010063;
  font-weight: 500;
  padding-bottom: 25px;

}


.np-dashboard-resources-title{
  font-size: 25px;
  color: #0A23F5;
  font-weight: bold;
  padding-bottom: 25px;
  text-transform: none;
}
.dashboard-greeting-text{
  color: #01005F;
  font-size: 22px;
}

.course-items-container {
  width: 100%;
}

.progress-circles {
  display: flex;
  justify-content: space-between;
}

.progress-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  justify-content: center;
  border: 8px solid #B0B0B0;

}

.progress-count {
  font-size: 32px;
  font-weight: bold;
  color: #333333;
}

.progress-label {
  font-size: 14px;
  color: #01005F;
  margin-top: 5px;
}
.progress-card-wrapper {
  margin-top: 20px;
}

.section-title{
 color:#0A23F5;
}

.progress-circles-container{
  padding: 40px;
  background-color: #FFFFFF;
}

.progress-circles-container {
  padding: 40px;
  background-color: #FFFFFF;
  border-radius: 15px;
  }


.in-progress-container {
  background-color: #0A23F5;
  padding: 10px;
  margin-bottom: 15px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;

  }

.role-quick-link-heading {
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
}

.dropdown-arrow {
  font-size: 18px;
  transition: transform 0.3s;
  color: #fff;
}

.course-items {
  overflow: hidden;
  height: 500px;
  transition: height 0.3s ease;
}

.course-items.show {
  height: auto;
 
}

.hidden-course {
  display: none; 
}

.course-items.show .hidden-course {
    display: block;
  }

.see-more-button{
  color: #fff;
  background-color: #091ED3;
  padding: 10px;
  border-radius: 4px;
  border: none;
}

@media (max-width: 768px) {
  .banner-wrapper{
    flex-direction: column;
  }
}

</style>


<script>
addEventListener("DOMContentLoaded", (event) => {
  const timeZones = {
  '-12': 'Etc/GMT+12',
  '-11': 'Pacific/Pago_Pago',
  '-10': 'Pacific/Honolulu',
  '-09': 'America/Anchorage',
  '-08': 'America/Los_Angeles',
  '-07': 'America/Denver',
  '-06': 'America/Chicago',
  '-05': 'America/New_York',
  '-04': 'America/Caracas',
  '-03': 'America/Argentina/Buenos_Aires',
  '-02': 'Atlantic/South_Georgia',
  '-01': 'Atlantic/Azores',
  '00': 'UTC',
  'CET': 'CET',
  '+01': 'Europe/Berlin',
  '+02': 'Europe/Athens',
  '+03': 'Europe/Moscow',
  '+04': 'Asia/Dubai',
  '+05': 'Asia/Karachi',
  '+06': 'Asia/Almaty',
  '+07': 'Asia/Bangkok',
  '+08': 'Asia/Singapore',
  '+09': 'Asia/Tokyo',
  '+10': 'Australia/Sydney',
  '+11': 'Pacific/Noumea',
  '+12': 'Pacific/Auckland',
  '+13': 'Pacific/Tongatapu',
  '+14': 'Pacific/Kiritimati'
};

  function formatTimeZone(offset) {
    offset = offset.trim();
    if (timeZones[offset]) {
      return timeZones[offset];
    }

    try {
      const zoneName = luxon.FixedOffsetZone.parseSpecifier(offset).name;
      return `UTC${zoneName}`;
    } catch {
      return offset;
    }
  }

  const offset = '+08';
  const formattedZone = formatTimeZone(offset);
  console.log(`Offset ${offset} to: ${formattedZone}`);

  document.querySelectorAll('.zone').forEach((timeElement) => {
    const offset = timeElement.textContent; 
    const formattedZone = formatTimeZone(offset);
    timeElement.textContent = timeElement.textContent.replace(offset, formattedZone);
  });
});
</script>