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

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

{% block body %}
    <div class="container-fluid p-5">
    <h2 class="text-secondary mb-4">Création d'un module pour la formation <span class="secondary-color">{{ training.name }}</span></h2>
        <div class="row bg-white rounded-3">
            <div class="col-lg-8">
            {# == #}
            {{ form_start(form) }}
            <div class="p-3 shadow rounded-3 mb-2">
                <h3 class="text-secondary mb-4">Informations générale</h3>
                <div class="row mb-3">
                    <div>
                        {{ form_label( form.name ) }}
                        {{ form_widget( form.name ) }}
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-2">
                        {{ form_label( form.orderNumber ) }}
                        {{ form_widget( form.orderNumber ) }}
                    </div>
                    <div class="col-lg-10">
                        {{ form_label( form.timeSpentRequired ) }}
                        {{ form_widget( form.timeSpentRequired ) }}
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col">
                        {{ form_label( form.content ) }}
                        {{ form_widget( form.content ) }}
                    </div>
                </div>
            </div>
            <div class="p-3 shadow rounded-3 mb-2">
                <h3 class="text-secondary mb-4">Test qcm de fin</h3>
                <div class="row mb-3">
                <div class="col-lg-2">
                    {{ form_label( form.hasQcmTest ) }}
                    {{ form_widget( form.hasQcmTest ) }}
                </div>
                <div class="col-lg-3">
                    {{ form_label( form.howManyQcmInTest ) }}
                    {{ form_widget( form.howManyQcmInTest ) }}
                </div>
                </div>
            </div>
            <div class="p-3 shadow rounded-3 mb-2">
                <h3 class="text-secondary mb-4">Fiche résumé du module (.pdf )</h3>
                <div class="row">
                    <div class="col-lg-8">
                        {{ form_label( form.summarySheet ) }}
                        {{ form_widget( form.summarySheet, {'attr': {'class': 'form-control'}} ) }}
                    </div>
                    <div class="col-lg-2 d-flex align-items-center justify-content-center">
                        <button id="clean-pdf-btn" type="button" class="secondary-btn">vider pdf</button>
                    </div>
                </div>
            </div>
            <input type="submit" class="secondary-btn bg-success my-4 shadow" value="Ajouter le module">
            {{ form_end(form) }}
            {# == #}
            </div>
            <div class="col-lg-4">
                <div class="p-3 shadow rounded-3 mb-2">
                    <h3 class="text-secondary mb-4">Les modules existants :</h3>
                    <ul class="list-group">
                    {% for m in modules %}
                        <li class="list-group-item"><strong class="secondary-color">n° {{ m.orderNumber }}</strong> - {{ m.name }}  <span class="ms-3 badge bg-secondary">{{ m.questions|length }} qcm</span></li>
                    {% endfor %}
                    </ul>
                </div>
                <div class="p-3 shadow rounded-3">
                <p class="lead text-secondary">La formation doit avoir au minimum <strong class="secondary-color">20 questions</strong> pour le test qcm final. <br> La formation contient actuellement
                {% if totalQcm < 20 %}
                    <strong class="text-warning">
                {% else %}
                    <strong class="text-success">
                {% endif %}
                {{ totalQcm }} questions</strong>.
                </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
<script>

    const pdfInput = document.getElementById('training_module_summarySheet');
    const cleanPdfBtn = document.getElementById('clean-pdf-btn');

    cleanPdfBtn.addEventListener('click', function(){
        pdfInput.value = null;
    });

</script>
{% endblock %}