{% extends 'base.html.twig' %}

{% block title %}Liste des apprenants{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/formateur.css') }}">
{% endblock %}

{% block content %}
    <h1>Dashboard de formation</h1>
    <div class="container-fluid">
        <div class="header-container">
            <div class="titre-page">
                <h2>Liste des apprenants</h2>
                <p class="nombre-apprenants">Nombre total d'apprenants : {{ apprentis|length }}</p>
            </div>

            <div class="action-buttons">
                <a href="{{ path('app_formateur_ajouter_apprenti') }}">
                    <button class="glow-btn glow-btn-sm"><span><i class="fas fa-plus"></i> Ajouter</span></button>
                </a>
            </div>
        </div>

        {% for message in app.flashes('success') %}
            <div class="alert alert-success">
                {{ message }}
            </div>
        {% endfor %}

        {% if apprentis is empty %}
            <div class="empty-state">
                <h3>Aucun apprenant</h3>
                <p>Vous n'avez pas encore d'apprenants dans votre liste.</p>
                <a href="{{ path('app_formateur_ajouter_apprenti') }}" class="btn-add">
                    <i class="fas fa-plus"></i> Ajouter un apprenant
                </a>
            </div>
        {% else %}
            {% set groupes = [] %}
            {% for apprenti in apprentis %}
                {% if apprenti.groupe not in groupes %}
                    {% set groupes = groupes|merge([apprenti.groupe]) %}
                {% endif %}
            {% endfor %}

            <div class="filters-container">
                <div class="search-bar">
                    <input type="text" class="search-input" id="search-apprenti" placeholder="Rechercher un apprenant...">
                    <select class="filter-select" id="filter-groupe">
                        <option value="">Tous les groupes</option>
                        {% for groupe in groupes %}
                            <option value="{{ groupe }}">{{ groupe }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div id="apprentis-list">
                {% for apprenti in apprentis %}
                    {% set progress = progressionGlobale[apprenti.id]|round %}
                    <div class="apprenti-card lazy-apprenti" data-groupe="{{ apprenti.groupe }}">
                        <div class="apprenti-info">
                            <div class="apprenti-name">{{ apprenti.prenom }} {{ apprenti.nom }}</div>
                            <div class="apprenti-group">Groupe: {{ apprenti.groupe }}</div>
                        </div>

                        <div class="modules-count">
                            {{ modulesCompletes[apprenti.id].completes }} / {{ modulesCompletes[apprenti.id].total }} modules complétés
                        </div>

                        <div class="progress-container">
                            <div class="progress-circle">
                                <svg viewBox="0 0 36 36" class="circular-chart {{ progress < 30 ? 'circle-low' : (progress < 70 ? 'circle-medium' : 'circle-high') }}">
                                    <path class="circle-bg"
                                          d="M18 2.0845
                 a 15.9155 15.9155 0 0 1 0 31.831
                 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                    <path class="circle"
                                          stroke-dasharray="{{ progress }}, 100"
                                          d="M18 2.0845
                 a 15.9155 15.9155 0 0 1 0 31.831
                 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                </svg>
                                <div class="progress-percentage">{{ progress }}%</div>
                            </div>
                        </div>

                        <div class="btn-wrapper">
                            <a href="{{ path('app_formateur_apprenti', {'id': apprenti.id}) }}">
                                <button class="glow-btn glow-btn-text" title="Voir les modules">
                                    <span>Voir les modules <i class="fas fa-eye"></i></span>
                                </button>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('search-apprenti');
            const filterSelect = document.getElementById('filter-groupe');
            const allApprentis = Array.from(document.querySelectorAll('.lazy-apprenti'));
            const apprentisPerBatch = 6;
            let apprentisIndex = 0;

            function loadNextApprentis() {
                for (let i = 0; i < apprentisPerBatch && apprentisIndex < allApprentis.length; i++) {
                    const card = allApprentis[apprentisIndex];
                    card.classList.add('visible');
                    apprentisIndex++;
                }
            }

            // Charger les premiers éléments
            loadNextApprentis();

            // Lazy load au scroll
            window.addEventListener('scroll', () => {
                const scrollBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
                if (scrollBottom) {
                    loadNextApprentis();
                }
            });

            // Animer les cercles
            setTimeout(() => {
                document.querySelectorAll('.circle').forEach(circle => {
                    const value = circle.getAttribute('stroke-dasharray').split(',')[0];
                    circle.style.strokeDashoffset = 100 - value;
                });
            }, 100);

            // Filtrage
            function filterApprentis() {
                const searchTerm = searchInput.value.toLowerCase();
                const selectedGroupe = filterSelect.value;

                allApprentis.forEach(card => {
                    const name = card.querySelector('.apprenti-name').textContent.toLowerCase();
                    const groupe = card.dataset.groupe;
                    const matchName = name.includes(searchTerm);
                    const matchGroupe = selectedGroupe === '' || groupe === selectedGroupe;
                    card.style.display = (matchName && matchGroupe) ? 'flex' : 'none';
                });
            }

            searchInput.addEventListener('input', filterApprentis);
            filterSelect.addEventListener('change', filterApprentis);
        });
    </script>
{% endblock %}