{% include 'pop-up' %}

{% include "header"
  , color: "var(--nintex--color--blue)"
  , text_color: "white"
  , text_en_US: "My learning"
  , text_es: "Mi aprendizaje"
  , text_fr: "Mon apprentissage"
  , text_de: "Mein Lernen"
  , text_en_GB: "My learning"
  , text_nl: "Mijn leerdoelen"
  , text_pt_BR: "Meu aprendizado"
  , subtitle_en_US: "Pick up from where you left off and track your progress and achievements."
  , subtitle_es: "Lorem ipsum dolor sit amet"
  , subtitle_fr: "Lorem ipsum dolor sit amet"
  , subtitle_de: "Lorem ipsum dolor sit amet"
  , subtitle_en_GB: "Lorem ipsum dolor sit amet"
  , subtitle_nl: "Lorem ipsum dolor sit amet"
  , subtitle_pt_BR: "Lorem ipsum dolor sit amet"
  , button_text_en_US: ""
  , button_text_es: ""
  , button_text_fr: ""
  , button_text_de: ""
  , button_text_en_GB: ""
  , button_text_nl: ""
  , button_text_pt_BR: ""
  , button_link: "" %}

{% include "sub_navigation" %}
  <main class="np-main np-dashboard np-subpage-container nintex-fw-container">
  <div class="nintex-headline" style="text-align: left;">
    <span class="lang-en-US">Hi {{ current_person.name }}, welcome back!</span>
    <span class="lang-es">Hola {{ current_person.name }}, bienvenido de nuevo!</span>
    <span class="lang-fr">Bonjour {{ current_person.name }}, bienvenue de retour!</span>
    <span class="lang-de">Hallo {{ current_person.name }}, willkommen zurück!</span>
    <span class="lang-en-GB">Hi {{ current_person.name }}, welcome back!</span>
    <span class="lang-nl">Hallo {{ current_person.name }}, welkom terug!</span>
    <span class="lang-pt-BR">Olá {{ current_person.name }}, bem-vindo de volta!</span>
  </div>

  <!-- Tab Selector -->
  <div class="nintex-tab-selector">
    <div class="nintex-tab-selector-container">
      <button class="nintex-tab-button nintex-tab-active" data-tab="courses">
        {% t shared.course_vocabulary.plural
          , key: current_school.course_vocabulary %}
      </button>
      {% if features.learning_paths? %}
        <button class="nintex-tab-button" data-tab="learning-paths">
          {% t shared.learning_paths %}
        </button>
      {% endif %}
    </div>
  </div>

  <!-- Filters and Pagination -->
  <div
    class="nintex-filters-line"
    id="dashboard-filters"
    style="display: none;">
    <div class="nintex-filters-input-wrapper">
      <i class="far fa-search"></i>
      <input
        type="text"
        placeholder="Search..."
        class="nintex-filters-input"
        id="name-search">
    </div>
    <select class="nintex-filters-select" id="product-filter">
      <option value="">All products</option>
    </select>
    <select class="nintex-filters-select" id="status-filter">
      <option value="">All statuses</option>
      <option value="in_progress">In progress</option>
      <option value="completed">Completed</option>
    </select>
    <select class="nintex-filters-select" id="sort-filter">
      <option value="">Sort by</option>
      <option value="date_desc">Release Date (Newest First)</option>
      <option value="date_asc">Release Date (Oldest First)</option>
      <option value="name_asc">Name (A-Z)</option>
      <option value="name_desc">Name (Z-A)</option>
    </select>
    <select class="nintex-filters-select" id="skill-filter">
      <option value="">All skill levels</option>
      <option value="[Skill Level]100 - Beginner">Beginner</option>
      <option value="[Skill Level]200 - Intermediate">Intermediate</option>
      <option value="[Skill Level]300 - Advanced">Advanced</option>
      <option value="[Skill Level]400 - Solutions">Solutions</option>
    </select>
  </div>


  <div class="row np-flex-center">
    <div class="col-xs-12 col-md-8">
      <!-- Learning Paths Section -->
      {% if features.learning_paths? %}
        <div id="learning-paths-content" class="nintex-tab-content np-hidden">
          {% include "learning_paths_index"
            , items: learning_paths.enrolled
            , filter_partners: false
            , classes: "col-xs-12 col-sm-6" %}
        </div>
      {% endif %}

      <!-- Courses Section -->
      <div id="courses-content" class="nintex-tab-content">
        {% include "courses_index"
          , class: "col-xs-12 col-sm-6 display-flex" %}
      </div>
      <!-- Pagination Controls -->
      <div
        class="nintex-btns-container"
        id="pagination-controls"
        style="display: none;">
        <div class="nintex-pagination-numbers" id="page-numbers"></div>
        <button
          id="prev-page"
          class="nintex-text-button"
          disabled>
          <i class="fas fa-chevron-left"></i>
          <span class="lang-en-US">Previous</span>
          <span class="lang-es">Anterior</span>
          <span class="lang-fr">Précédent</span>
          <span class="lang-de">Vorherige</span>
          <span class="lang-en-GB">Previous</span>
          <span class="lang-nl">Vorige</span>
          <span class="lang-pt-BR">Anterior</span>
        </button>

        <button
          id="next-page"
          class="nintex-text-button"
          disabled>
          <span class="lang-en-US">Next</span>
          <span class="lang-es">Siguiente</span>
          <span class="lang-fr">Suivant</span>
          <span class="lang-de">Nächste</span>
          <span class="lang-en-GB">Next</span>
          <span class="lang-nl">Volgende</span>
          <span class="lang-pt-BR">Próximo</span>
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>
    {% if features.training_events? %}
      <div class="np-grid-spacing col-xs-12 col-md-4">

        <div id="courses-progress" class="nintex-progress-indicator-container">
          {% include "progress_indicator"
            , type: "Courses"
            , toCount: courses.in_catalog %}
        </div>
        <div id="learning-paths-progress" class="nintex-progress-indicator-container np-hidden">
          {% include "progress_indicator"
            , type: "Learning Paths"
            , toCount: learning_paths.available %}
        </div>
        <div>
          <div class="np-dashboard-resources-title">
            <span class="lang-en-US">{% t.upcoming_events %}</span>
            <span class="lang-es">Próximos Eventos</span>
            <span class="lang-fr">Événements à venir</span>
            <span class="lang-de">Ereignisse in der Zukunft</span>
            <span class="lang-en-GB">Upcoming Events</span>
            <span class="lang-nl">Aankomende evenementen</span>
            <span class="lang-pt-BR">Eventos futuros</span>
          </div>
          {% include "calendar" %}
        </div>
      </div>
    {% endif %}
  </div>
  {% if current_school.properties.show_meet_the_team == true %}
    {% include "meet_the_team" %}
  {% endif %}

</main>


<script>
  let currentPage = 1;
  const itemsPerPage = 4;
  let filteredAndSortedCards = [];
  let currentTab = 'courses';

  function translateFormOptions() {
  const search = document.getElementById('name-search');

    const productFilter = document.getElementById('product-filter');
    const statusFilter = document.getElementById('status-filter');
    const sortFilter = document.getElementById('sort-filter');
    const skillFilter = document.getElementById('skill-filter');
    
    
   if(lang === 'es') {
    search.placeholder = 'Buscar...';
    productFilter.options[0].textContent = 'Todos los productos';
    statusFilter.options[0].textContent = 'Todos los estados';
    statusFilter.options[1].textContent = 'En progreso';
    statusFilter.options[2].textContent = 'Completado';
    sortFilter.options[0].textContent = 'Ordenar por';
    sortFilter.options[1].textContent = 'Fecha de salida (Nueva en primer lugar)';
    sortFilter.options[2].textContent = 'Fecha de salida (Antigua en primer lugar)';
    sortFilter.options[3].textContent = 'Nombre (A-Z)';
    sortFilter.options[4].textContent = 'Nombre (Z-A)';
    skillFilter.options[0].textContent = 'Nivel de habilidade';
    skillFilter.options[1].textContent = 'Iniciante';
    skillFilter.options[2].textContent = 'Intermediário';
    skillFilter.options[3].textContent = 'Avançado';
    skillFilter.options[4].textContent = 'Soluções';
   } else if(lang === 'fr') {
    search.placeholder = 'Rechercher...';
    productFilter.options[0].textContent = 'Tous les produits';
    statusFilter.options[0].textContent = 'Tous les statuts';
    statusFilter.options[1].textContent = 'En cours';
    statusFilter.options[2].textContent = 'Terminé';
    sortFilter.options[0].textContent = 'Trier par';
    sortFilter.options[1].textContent = 'Date de sortie (Nouveau en premier)';
    sortFilter.options[2].textContent = 'Date de sortie (Ancien en premier)';
    sortFilter.options[3].textContent = 'Nom (A-Z)';
    sortFilter.options[4].textContent = 'Nom (Z-A)';
    skillFilter.options[0].textContent = 'Niveau de compétence';
    skillFilter.options[1].textContent = 'Débutant';
    skillFilter.options[2].textContent = 'Intermédiaire';
    skillFilter.options[3].textContent = 'Avancé';
    skillFilter.options[4].textContent = 'Solutions';
   } else if(lang === 'de') {
    search.placeholder = 'Suchen...';
    productFilter.options[0].textContent = 'Alle Produkte';
    statusFilter.options[0].textContent = 'Alle Status';
    statusFilter.options[1].textContent = 'In Progress';
    statusFilter.options[2].textContent = 'Completed';
    sortFilter.options[0].textContent = 'Sortieren nach';
    sortFilter.options[1].textContent = 'Release Date (Neueste zuerst)';
    sortFilter.options[2].textContent = 'Release Date (Älteste zuerst)';
    sortFilter.options[3].textContent = 'Name (A-Z)';
    sortFilter.options[4].textContent = 'Name (Z-A)';
    skillFilter.options[0].textContent = 'Niveau de compétence';
    skillFilter.options[1].textContent = 'Débutant';
    skillFilter.options[2].textContent = 'Intermédiaire';
    skillFilter.options[3].textContent = 'Avancé';
    skillFilter.options[4].textContent = 'Solutions';
   } else if(lang === 'nl') {
    search.placeholder = 'Zoeken...';
    productFilter.options[0].textContent = 'Alle producten';
    statusFilter.options[0].textContent = 'Alle statussen';
    statusFilter.options[1].textContent = 'In progress';
    statusFilter.options[2].textContent = 'Completed';
    sortFilter.options[0].textContent = 'Sorteren op';
    sortFilter.options[1].textContent = 'Release Date (Nieuwste eerst)';
    sortFilter.options[2].textContent = 'Release Date (Oudste eerst)';
    sortFilter.options[3].textContent = 'Naam (A-Z)';
    sortFilter.options[4].textContent = 'Naam (Z-A)';
    skillFilter.options[0].textContent = 'Niveau de compétence';
    skillFilter.options[1].textContent = 'Débutant';
    skillFilter.options[2].textContent = 'Intermédiaire';
    skillFilter.options[3].textContent = 'Avancé';
    skillFilter.options[4].textContent = 'Solutions';
   } else if(lang === 'nl') {
    search.placeholder = 'Zoeken...';
    productFilter.options[0].textContent = 'Alle producten';
    statusFilter.options[0].textContent = 'Alle statussen';
    statusFilter.options[1].textContent = 'In progress';
    statusFilter.options[2].textContent = 'Completed';
    sortFilter.options[0].textContent = 'Sorteren op';
    sortFilter.options[1].textContent = 'Release Date (Nieuwste eerst)';
    sortFilter.options[2].textContent = 'Release Date (Oudste eerst)';
    sortFilter.options[3].textContent = 'Naam (A-Z)';
    sortFilter.options[4].textContent = 'Naam (Z-A)';
    skillFilter.options[0].textContent = 'Niveau de compétence';
    skillFilter.options[1].textContent = 'Débutant';
    skillFilter.options[2].textContent = 'Intermédiaire';
    skillFilter.options[3].textContent = 'Avancé';
    skillFilter.options[4].textContent = 'Solutions';
   } else if(lang === 'nl') {
    search.placeholder = 'Zoeken...';
    productFilter.options[0].textContent = 'Alle producten';
    statusFilter.options[0].textContent = 'Alle statussen';
    statusFilter.options[1].textContent = 'In progress';
    statusFilter.options[2].textContent = 'Completed';
    sortFilter.options[0].textContent = 'Sorteren op';
    sortFilter.options[1].textContent = 'Release Date (Nieuwste eerst)';
    sortFilter.options[2].textContent = 'Release Date (Oudste eerst)';
    sortFilter.options[3].textContent = 'Naam (A-Z)';
    sortFilter.options[4].textContent = 'Naam (Z-A)';
    skillFilter.options[0].textContent = 'Niveau de compétence';
    skillFilter.options[1].textContent = 'Débutant';
    skillFilter.options[2].textContent = 'Intermédiaire';
    skillFilter.options[3].textContent = 'Avancé';
    skillFilter.options[4].textContent = 'Solutions';
   } else if(lang === 'pt-BR') {
    search.placeholder = 'Pesquisar...';
    productFilter.options[0].textContent = 'Todos os produtos';
    statusFilter.options[0].textContent = 'Todos os statuses';
    sortFilter.options[0].textContent = 'Ordenar por';
    sortFilter.options[1].textContent = 'Release Date (Novo em primeiro)';
    sortFilter.options[2].textContent = 'Release Date (Antigo em primeiro)';
    sortFilter.options[3].textContent = 'Nome (A-Z)';
    sortFilter.options[4].textContent = 'Nome (Z-A)';
    skillFilter.options[0].textContent = 'Nível de habilidade';
    skillFilter.options[1].textContent = 'Iniciante';
    skillFilter.options[2].textContent = 'Intermediário';
    skillFilter.options[3].textContent = 'Avançado';
    skillFilter.options[4].textContent = 'Soluções';
   }
  }

  function getVisibleCardsContainer() {
    // Get the currently visible cards container (not hidden by np-hidden)
    const cardsContainers = document.querySelectorAll('.nintex-cards-container');
    for (let container of cardsContainers) {
      if (!container.closest('.np-hidden')) {
        return container;
      }
    }
    return null;
  }

  function populateProductFilter() {
    const container = getVisibleCardsContainer();
    if (!container) return;

    const productFilter = document.getElementById('product-filter');
    const existingOptions = productFilter.querySelectorAll('option:not(:first-child)');
    existingOptions.forEach(option => option.remove());

    const allCards = container.querySelectorAll('.nintex-card');
    const categories = new Set();

    allCards.forEach(card => {
      const cardCategories = card.getAttribute('categories');
      if (cardCategories) {
        cardCategories.split(',').forEach(category => {
          if (category.includes('[Product]')) {
            const productName = category.replace('[Product]', '').trim();
            categories.add(productName);
          }
        });
      }
    });

    categories.forEach(category => {
      const option = document.createElement('option');
      option.value = category;
      option.textContent = category;
      productFilter.appendChild(option);
    });

    const certificationOption = document.createElement('option');
    certificationOption.value = "[Type]Certification";
    certificationOption.textContent = "Certification";
    productFilter.appendChild(certificationOption);
  }

  function handleFilterChange() {
    const filters = {
      name: document.getElementById('name-search').value,
      product: document.getElementById('product-filter').value,
      status: document.getElementById('status-filter').value,
      sort: document.getElementById('sort-filter').value,
      skill: document.getElementById('skill-filter').value
    }

    const container = getVisibleCardsContainer();
    if (!container) return;

    // Get all cards and apply filters
    const allCards = container.querySelectorAll('.nintex-card');
    const visibleCards = [];

    allCards.forEach(card => {
      let displayCard = true;

      if (filters.name && !card.textContent.toLowerCase().includes(filters.name.toLowerCase())) {
        displayCard = false;
      }
      if (filters.product && !card.getAttribute('categories').includes(filters.product)) {
        displayCard = false;
      }
      if (filters.skill && !card.getAttribute('categories').includes(filters.skill)) {
        displayCard = false;
      }
      if (filters.status) {
        const progress = Number(card.getAttribute('progress'));
        if (filters.status === 'in_progress' && progress === 100) {
          displayCard = false;
        }
        if (filters.status === 'completed' && progress !== 100) {
          displayCard = false;
        }
      }

      if (displayCard) {
        visibleCards.push(card.parentElement);
      }
    });

    // Apply sorting if specified
    if (filters.sort && visibleCards.length > 0) {
      visibleCards.sort((a, b) => {
        const cardA = a.querySelector('.nintex-card');
        const cardB = b.querySelector('.nintex-card');

        if (filters.sort === 'date_desc') {
          const createdAtA = new Date(cardA.getAttribute('created-at'));
          const createdAtB = new Date(cardB.getAttribute('created-at'));
          return createdAtB - createdAtA; // Newest first
        } else if (filters.sort === 'date_asc') {
          const createdAtA = new Date(cardA.getAttribute('created-at'));
          const createdAtB = new Date(cardB.getAttribute('created-at'));
          return createdAtA - createdAtB; // Oldest first
        } else if (filters.sort === 'name_asc') {
          const nameA = cardA.querySelector('.card-title').textContent.trim();
          const nameB = cardB.querySelector('.card-title').textContent.trim();
          return nameA.localeCompare(nameB);
        } else if (filters.sort === 'name_desc') {
          const nameA = cardA.querySelector('.card-title').textContent.trim();
          const nameB = cardB.querySelector('.card-title').textContent.trim();
          return nameB.localeCompare(nameA);
        }
        return 0;
      });

      // Re-append sorted elements to maintain DOM order
      visibleCards.forEach(card => {
        container.appendChild(card);
      });
    }

    // Store filtered and sorted cards
    filteredAndSortedCards = visibleCards;

    // Reset to first page and update display
    currentPage = 1;
    updatePagination();
    displayCurrentPage();
  }

  function displayCurrentPage() {
    const container = getVisibleCardsContainer();
    if (!container) return;

    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const cardsToShow = filteredAndSortedCards.slice(startIndex, endIndex);

    // Hide all cards first
    const allCards = container.querySelectorAll('.col-xs-12, .col-sm-6');
    allCards.forEach(card => {
      card.style.display = 'none';
    });

    // Hide zero state containers
    const learningPathsZeroState = document.querySelector('.np-learning-paths-resources-container');
    const coursesZeroState = document.querySelector('.np-courses-resources-container');
    if (learningPathsZeroState) learningPathsZeroState.style.display = 'none';
    if (coursesZeroState) coursesZeroState.style.display = 'none';

    // Show zero state if no filtered results
    if (filteredAndSortedCards.length === 0) {
      const activeTab = document.querySelector('.nintex-tab-content:not(.np-hidden)');
      if (activeTab && activeTab.id === 'learning-paths-content' && learningPathsZeroState) {
        learningPathsZeroState.style.display = 'block';
      } else if (activeTab && activeTab.id === 'courses-content' && coursesZeroState) {
        coursesZeroState.style.display = 'block';
      }
      return;
    }

    // Show only cards for current page
    cardsToShow.forEach(card => {
      card.style.display = 'flex';
    });
  }

  function updatePagination() {
    const totalItems = filteredAndSortedCards.length;
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    const paginationControls = document.getElementById('pagination-controls');
    const prevBtn = document.getElementById('prev-page');
    const nextBtn = document.getElementById('next-page');
    const pageNumbers = document.getElementById('page-numbers');

    if (totalItems === 0) {
      paginationControls.style.display = 'none';
      return;
    }

    paginationControls.style.display = 'flex';

    // Update navigation buttons
    prevBtn.disabled = currentPage === 1;
    nextBtn.disabled = currentPage === totalPages;

    // Generate page number display
    pageNumbers.innerHTML = '';
    const pageSpan = document.createElement('span');
    pageSpan.className = 'nintex-page-number active';
    if(lang === 'en-US') {
      pageSpan.textContent = `Page ${currentPage}`;
    } else if(lang === 'es') {
      pageSpan.textContent = `Página ${currentPage}`;
    } else if(lang === 'fr') {
      pageSpan.textContent = `Page ${currentPage}`;
    } else if(lang === 'de') {
      pageSpan.textContent = `Seite ${currentPage}`;
    } else if(lang === 'en-GB') {
      pageSpan.textContent = `Page ${currentPage}`;
    } else if(lang === 'nl') {
      pageSpan.textContent = `Pagina ${currentPage}`;
    } else if(lang === 'pt-BR') {
      pageSpan.textContent = `Página ${currentPage}`;
    }
    pageNumbers.appendChild(pageSpan);
  }

  function goToPreviousPage() {
    if (currentPage > 1) {
      currentPage--;
      updatePagination();
      displayCurrentPage();
    }
  }

  function goToNextPage() {
    const totalPages = Math.ceil(filteredAndSortedCards.length / itemsPerPage);
    if (currentPage < totalPages) {
      currentPage++;
      updatePagination();
      displayCurrentPage();
    }
  }

  function resetFilters() {
    // Reset all filter inputs
    document.getElementById('name-search').value = '';
    document.getElementById('product-filter').value = '';
    document.getElementById('status-filter').value = '';
    document.getElementById('sort-filter').value = '';
    document.getElementById('skill-filter').value = '';
  }
  

  function resetPagination() {
    // Reset to first page
    currentPage = 1;
  }

  function showFiltersAndPagination() {
    const filters = document.getElementById('dashboard-filters');
    const pagination = document.getElementById('pagination-controls');

    // Show filters and pagination
    filters.style.display = 'flex';
    pagination.style.display = 'flex';

    // Reset all filters and sort options
    resetFilters();

    // Reset pagination to first page
    resetPagination();

    // Populate product filter for current tab
    populateProductFilter();

    // Initialize pagination for current tab
    initializePagination();
  }

  // Initialize pagination
  function initializePagination() {
    const container = getVisibleCardsContainer();
    if (!container) return;

    // Get all cards initially
    const allCards = container.querySelectorAll('.nintex-card');
    filteredAndSortedCards = Array.from(allCards).map(card => card.parentElement);

    // Initial display
    updatePagination();
    displayCurrentPage();
  }

  // Tab switching functionality
  document.addEventListener('DOMContentLoaded', function () {
    const tabButtons = document.querySelectorAll('.nintex-tab-button');
    const tabContents = document.querySelectorAll('.nintex-tab-content');
    const progressIndicators = document.querySelectorAll('.nintex-progress-indicator-container');

    translateFormOptions();

    tabButtons.forEach(button => {
      button.addEventListener('click', function () {
        const targetTab = this.getAttribute('data-tab');
        currentTab = targetTab;

        // Remove active class from all buttons
        tabButtons.forEach(btn => btn.classList.remove('nintex-tab-active'));

        // Add active class to clicked button
        this.classList.add('nintex-tab-active');

        // Hide all tab contents
        tabContents.forEach(content => content.classList.add('np-hidden'));

        // Show target tab content
        const targetContent = document.getElementById(targetTab + '-content');
        if (targetContent) {
          targetContent.classList.remove('np-hidden');
        }

        // Hide all progress indicators
        progressIndicators.forEach(indicator => indicator.classList.add('np-hidden'));

        // Show target progress indicator
        const targetProgress = document.getElementById(targetTab + '-progress');
        if (targetProgress) {
          targetProgress.classList.remove('np-hidden');
        }

        // Show filters and pagination for the new tab
        setTimeout(() => {
          showFiltersAndPagination();
        }, 100);
      });
    });

    // Set up event listeners for filters
    document.getElementById('name-search').addEventListener('input', handleFilterChange);
    document.getElementById('product-filter').addEventListener('change', handleFilterChange);
    document.getElementById('status-filter').addEventListener('change', handleFilterChange);
    document.getElementById('sort-filter').addEventListener('change', handleFilterChange);
    document.getElementById('skill-filter').addEventListener('change', handleFilterChange);

    // Set up event listeners for pagination
    document.getElementById('prev-page').addEventListener('click', goToPreviousPage);
    document.getElementById('next-page').addEventListener('click', goToNextPage);

    // Initialize for the default tab (courses)
    setTimeout(() => {
      showFiltersAndPagination();
    }, 100);
  });
</script>

{% include "footer" %}