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

{% block title %}AFC E-learning{% endblock %}

{% block body %}

{% include 'partials/accountNavbar.html.twig' %}

{% include 'partials/filter.html.twig' %}
<div class="secondary-section">
    <div class="content">
        {% include 'partials/_progressBar.html.twig' %}
        <div class="banner">
            <h1 class="h4 text-secondary">{{ module.name }}

                {% if module.timeSpentRequired != null %}
                <br>
                <small class="h6">Temps requis : {{ module.timeSpentRequired|date('H:i:s') }} {#{{ timeFormat(module.timeSpentRequired.getTimestamp) }}#}
                 <br>
                <small class="h6 {% if hasSpentRequiredTime == true %}text-success{% endif %}">
                    Temps passé : {{  timeFormat(timeSpentForModule) }}
                </small>
                 {% endif %}
            </h1>
            <div>
                {# Upload PDF #}
                {% if summaryAccess == false %}
                {% if module.summarySheetFileName != null %}
                <span class="material-icons text-secondary mr-4" data-toggle="tooltip" data-placement="top" 
                title="Télécharger une fiche résumé format pdf">
                    help
                </span>            

                <a href="{{ asset('uploads/summary/' ~ module.summarySheetFileName) }}" target="_blank" class="download-btn">
                    Résumé pdf
                    <span class="material-icons">
                        get_app
                    </span>
                </a>
                {% endif %}
                {% endif %}
                {# Upload pdf #}

                <button class="menu-btn" id="step-menu-btn">
                    <span class="material-icons">
                        list
                    </span>
                </button>
            </div>
        </div>
        <div class="card-wrapper">
            {# Liste des chapitre pour le module courant #}
            {% for chapter in chapters %}
                {% if chaptersState[loop.index0] == true %}
                    {# Accés autorisé #}
                    <div class="primary-card shadow">
                        <header class="secondary-color">
                            <span class="bg-primary">{{ chapter.orderNumber }}</span>
                            {{ chapter.title|slice(0,20) }}...
                        </header>
                        <div class="card-body">
                            <a href="{{ path('training_chapter', {'slug': training.slug, 'slugModule': module.slugModule ,'slugChapter': chapter.slugChapter }) }}" class="secondary-btn">
                                {% if chaptersFinish[loop.index0] == true %}
                                    Revoir
                                {% else %}
                                    Commencer
                                {% endif %}
                            </a>
                        </div>
                        <footer>
                            {% if chaptersFinish[loop.index0] == true %}
                                <span class="text-success">Chapitre terminé</span>
                                <span class="material-icons text-success">
                                    check_circle_outline
                                </span>
                            {% endif %}
                            {% if chapter.category.name == 'Etude de cas' and chapter.trainingChapterExercices | length > 0 %}
                                {% if chapter.trainingChapterExercices[0].state == 1 %}
                                    <span class="text-warning">En cours de correction</span>
                                {% endif %}
                            {% endif %}
                        </footer>
                    </div>
                {% else %}
                    {# Accés vérouillé #}
                    <div class="primary-card shadow">
                        <header class="lock-color">
                            <span class="bg-lock">{{ chapter.orderNumber }}</span>
                            {{ chapter.title|slice(0,20) }}...
                        </header>
                        <div class="card-body">
                            <button href="" class="lock-btn" disabled>
                                <span class="badge badge-danger">
                                    <span class="material-icons">
                                        lock
                                    </span>
                                </span>
                            </button>
                        </div>
                        <footer>
                            <span class="text-danger">Vérouillé</span>
                        </footer>
                    </div>
                {% endif %}
            {% endfor %}
            {# Liste des chapitres pour le module courant #}

            {# QCM de fin de module #}
            {% if hasQcm == true %}
                {# Questionnaire de fin de module #}
                {% if qcmState == 0
                   or hasSpentRequiredTime == false %}
                    {# Accés vérouillé #}
                        <div class="primary-card shadow">
                        <header class="lock-color">
                            Questionnaire
                        </header>
                        <div class="card-body">
                            <button href="" class="lock-btn" disabled>
                                <span class="badge badge-danger">
                                    <span class="material-icons">
                                        lock
                                    </span>
                                </span>
                            </button>
                        </div>
                        <footer>
                            <span class="text-danger text-center">Vérouillé <br> {% if hasSpentRequiredTime == false %}<em>Temps passé insuffisant</em>{% endif %}</span>

                        </footer>
                    </div>
                {% else %}
                    {# Accés Autorisé #}
                    {% if exInCorrection == false and exToDo == false %}
                    <div class="primary-card shadow">
                        <header class="secondary-color">Questionnaire</header>
                        <div class="card-body">
                            {% if qcmState == 1 %}
                                <a href="{{ path('training_module_qcm_prepare', {'slug': training.slug, 'id': module.id}) }}" class="secondary-btn">Commencer le qcm</a>
                            {% endif %}
                            {% if qcmState == 2 or qcmState == 3 %}
                                <a href="{{ path('training_module_qcm', {'slug': training.slug, 'orderNumber': module.orderNumber}) }}" class="secondary-btn">revoir le test</a>
                            {% endif %}
                        </div>
                        <footer>
                            {% if qcmState == 3 %}
                            <span class="text-success">Test validé</span>
                            <span class="material-icons text-success">
                                check_circle_outline
                            </span>
                            {% endif %}
                        </footer>
                    </div>
                    {% endif %}
                {% endif %}
                {# Questionnaire de fin de module #}
            {% else %}
                {% if isLastModule == false %}
                <div class="primary-card shadow">
                    <header></header>
                    <div class="card-body">
                        {% if lastChapterFinish == true and hasSpentRequiredTime == true %}
                            <a href="{{ path('training_module_qcm_correct', {'slug': training.slug, 'orderNumber': module.orderNumber}) }}" class="secondary-btn shadow">Module suivant</a>
                        {% else %}
                            <button class="lock-btn" disabled="disabled">Module suivant</button>
                        {% endif %}
                    </div>
                    {% if lastChapterFinish == false %}
                        <footer>
                            <span class="text-danger">Vérouillé</span>
                        </footer>
                    {% endif %}
                </div>
                {% endif %}
            {% endif %}
            {# QCM de fin de module #}

        {# Evaluation finale #}
        {% if isLastModule == true %}
            {% if finalTestState == 0 %}
                <div class="primary-card shadow">
                    <header class="lock-color">
                        <span class="bg-lock">{{ lastModule.orderNumber + 2 }}</span>
                        Evaluation finale
                    </header>
                    <div class="card-body">
                        <button href="" class="lock-btn" disabled>
                            <span class="badge badge-danger">
                                <span class="material-icons">
                                    lock
                                </span>
                            </span>
                        </button>
                    </div>
                    <footer>
                        <span class="text-danger">Vérouillé</span>
                    </footer>
                </div>
            {% endif %}
            {% if finalTestState == 1 %}

                <div class="primary-card shadow">
                    <header class="{% if hasSpentRequiredTime %}secondary-color{% else %}lock-color{% endif %}">
                        <span class="bg-primary">{{ lastModule.orderNumber + 2 }}</span>
                        Evaluation finale
                    </header>
                    <div class="card-body">
                        {% if hasSpentRequiredTime %}
                            <a href="{{ path('training_final_test_prepare', {'slug': training.slug}) }}" class="secondary-btn">Evaluation finale</a>
                        {% else %}
                            <button href="" class="lock-btn" disabled>
                            <span class="badge badge-danger">
                                <span class="material-icons">
                                    lock
                                </span>
                            </span>
                            </button>
                        {% endif %}
                    </div>
                    <footer>
                        {% if not hasSpentRequiredTime %}
                            <p class="text-danger text-center mb-0">Temps passé insuffisant, veuillez réviser vos chapitres</p>
                        {% endif %}
                    </footer>
                </div>
            {% endif %}
            {% if finalTestState == 2 or finalTestState == 3 %}
                <div class="primary-card shadow">
                    <header class="secondary-color">
                        <span class="bg-primary">{{ lastModule.orderNumber + 2 }}</span>
                        Evaluation finale
                    </header>
                    <div class="card-body">
                        <a href="{{ path('training_final_test', {'slug': training.slug}) }}" class="secondary-btn
                        {% if finalTestState == 2 %} bg-warning {% endif %}">
                        Evaluation finale</a>
                    </div>
                    <footer>
                        {% if finalTestState == 2 %}
                            <span class="text-warning">revoir la correction</span>
                        {% endif %}
                        {% if finalTestState == 3 %}
                            <span class="material-icons text-success">check_circle_outline</span>
                        {% endif %}
                    </footer>
                </div>
                
            {% endif %}
        {% endif %}
        {# Evaluation finale #}

        </div>
    </div>
    {% include 'partials/trainingStepper.html.twig' %}
</div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('js/sidemenu') }}
{% endblock %}