{% 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">Edition du module  <span class="secondary-color">{{ module.name }}</span> 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 mb-4">
                  <div class="col-lg-8">
                    {% if module.summarySheetFileName %}

                        <button type="button" class="secondary-btn d-flex justify-content-center align-items-center" data-bs-toggle="modal" data-bs-target="#pdfViewModal">
                        <span class="material-icons me-3">visibility</span>
                            {{ module.summarySheetFileName }}
                        </button>

                        <div class="modal fade" id="pdfViewModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered  modal-fullscreen">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title secondary-color" id="staticBackdropLabel">{{ module.summarySheetFileName }}</h5>
                                <button type="button" class="btn-close bg-danger text-light" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <embed src="{{ pdfPath }}" width="100%" height="100%" frameborder="0"></embed>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="primary-btn bg-danger" data-bs-dismiss="modal">Fermer</button>
                            </div>
                            </div>
                        </div>
                        </div>

                    {% else %}
                        <p>Aucun pdf lié au module</p>
                    {% endif %}
                  </div>
                  <div class="col-lg-2 d-flex align-items-center justify-content-center">
                    {% if module.summarySheetFileName %}
                        <a href="{{ path('admin_training_module_delete_pdf', {'id':module.id}) }}" 
                           class="primary-btn bg-danger d-flex justify-content-center align-items-center"
                           data-confirm="le pdf ?">
                            <span class="material-icons">delete_forever</span>
                        </a>
                    {% endif %}
                  </div>
                </div>
                
                <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 d-flex align-items-center justify-content-center">
                            <span class="material-icons">restart_alt</span>
                        </button>
                    </div>
                </div>
            </div>
            <input type="submit" class="secondary-btn bg-success my-4 shadow" value="Enregistrer les modifications">
            {{ 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 {% if m.id == module.id %} active {% endif %}">
                            <strong class="{% if m.id == module.id %} text-light {% else %} secondary-color {% endif %}">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 %}