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

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

{% block body %}
    <style>
        .download-btn {
            width: 20rem;
            margin: 0 auto;
            justify-content: center;
        }
    </style>
    {% include 'partials/accountNavbar.html.twig' %}

    <section class="tertiary-section">
        <div class="main-bloc">
            <div class="content">
                {% for qcm in qcmTries["qcmSelected"] %}
                <div class="pos-f-t mb-3">
                <nav class="navbar border navbar-light px-3">
                    <div>
                    {% if qcmTries["scorePerQcm"][loop.index0] > 0 %}
                    <span class="material-icons text-success me-2">done_outline</span>{# {{ try.scorePerQcm[loop.index0] }} #}
                    {% else %}
                    <span class="material-icons text-danger me-2">clear</span>{# {{ try.scorePerQcm[loop.index0] }} #}
                    {% endif %}
                    <span class="ms-2">{{ qcm.question }}</span>
                    </div>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent{{ loop.index0 }}" aria-controls="navbarToggleExternalContent{{ loop.index0 }}" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                </nav>
                <div class="collapse" id="navbarToggleExternalContent{{ loop.index0 }}">
                    <div class="border p-4">
                    {% for ans in qcm.answers %}
    
                        <p class="lead-answers">           
                        {% if ans.learnerAnswer == 1 %}
                            <span class="material-icons">
                                keyboard_arrow_right
                            </span>
                        {% else %}
                            <span class="material-icons text-light">
                                keyboard_arrow_right
                            </span>
                        {% endif %}
                        
                        {% if ans.state == 1 %}
                            <strong class="text-success">{{ ans.answer }}</strong>
                        {% else %}
                            <span class="text-secondary">{{ ans.answer }}</span>
                        {% endif %}
                        </p>

                    {% endfor %}
                    </div>
                </div>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="side-bloc px-3 shadow">
            <h1 class="text-center text-secondary h3 mb-4">Correction de l'évaluation finale</h1>
            {% if qcmTries["scoreTotal"] <= 10 and trainingStage.finalTestState == 2 %}
                <a href="{{ path('training_final_test_reset', {'slug': training.getSlug()} ) }}" class="js-timer secondary-btn mb-3">Repasser l'évaluation</a>
                <p>Votre note est en dessous de la moyenne, prenez le temps de relire et noté la correction avant de réessayer. Vous allez y arriver !</p>
            {% endif %}

            <h3 class="text-secondary">Note :  
                {% if qcmTries["scoreTotal"] > 10 %}
                    <span class="text-success">{{ qcmTries["scoreTotal"]|number_format(1) }} / 20</span>
                {% else %}
                    {{ qcmTries["scoreTotal"]|number_format(1) }} / 20
                {% endif %}
            </h3>

            {% if qcmTries["scoreTotal"] > 10
                  and trainingStage.finalTestState == 3 
                  and trainingStage.hasSatisfactionQuizCompleted == true
            %}
                <p class="text-success">Félicitations, vous pouvez télécharger votre attestation de réussite de la formation</p>
                <a href="{{ path('training_certificate', {'slug': training.getSlug() }) }}" class="download-btn" target="_blank">Télécharger mon attestation</a>
            {% endif %}

            {% if  trainingStage.hasSatisfactionQuizCompleted == false 
               and qcmTries["scoreTotal"] > 10
               and trainingStage.finalTestState == 3 %}
                <p>Félicitations, vous pourrez télécharcher votre attestation de formation une fois l'enquête satisfaction compléter</p>
            {% endif %}

            {% if qcmTries["scoreTotal"] > 10
              and trainingStage.finalTestState == 3 %}
            <div class="p-3 shadow rounded-3 mt-4">
                <h4 class="text-warning">Votre avis sur la formation</h4>
                {% if  trainingStage.hasSatisfactionQuizCompleted == false %}
                    <p class="lead text-secondary">Compléter l'enquête satisfaction afin de pouvoir télécharger votre attestation.</p>
                    <a href="{{ path('satisfaction_quiz', {'slug': training.slug}) }}" class="secondary-btn bg-warning my-4 shadow">Compléter l'enquête</a>
                {% else %}
                    <p class="lead text-success">Merci de vos retours !</p>
                    <p class="text-success">Enquête complété</p>
                {% endif %}
            </div>
            {% endif %}
            
        </div>
    </section>

{% endblock %}