{% 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 chapitre <span class="secondary-color">{{ chapter.title }}</span> pour le module <span class="secondary-color">{{ module.name }}</span></h2>
    <div class="row bg-white rounded-3">
        <div class="col-lg-8">
            {{ form_start(form) }}
            {{ form_errors(form) }}
            <div class="p-3 shadow rounded-3 mb-2">
                <h3 class="text-secondary mb-4">Informations générale</h3>
                <div class="row">
                    <div class="col-lg-2">
                        {{ form_label(form.orderNumber) }}
                        {{ form_widget(form.orderNumber) }}
                    </div>
                    <div class="col-lg-7">
                        {{ form_label(form.title) }}
                        {{ form_widget(form.title) }}
                    </div>
                    <div class="col-lg-3">
                        {{ form_label(form.category) }}
                        {{ form_widget(form.category, {'attr': {'class' : 'form-select'}}) }}
                    </div>
                </div>
            </div>
            <div class="p-3 shadow rounded-3 mb-2">
                <h3 class="text-secondary mb-4">Vidéo</h3>
                <div class="row">
                    <div class="col-lg-8">
                        {{ form_label(form.video) }}
                        {{ form_widget(form.video) }}
                    </div>
                    <div class="col-lg-4">
                        {{ form_label(form.videoCode) }}
                        {{ form_widget(form.videoCode) }}
                    </div>
                </div>
            </div>
            <div class="p-3 shadow rounded-3 mb-2">
                <h3 class="text-secondary mb-4">Contenu</h3>
                <div class="row mb-2">
                    <div class="col-12 mb-3">
                        {{ form_label(form.content) }}
                        {{ form_widget(form.content) }}
                    </div>
                </div>
                 <div class="p-3 shadow rounded-3 mb-2">
                 <h4 class="text-secondary mb-4">PDF lié au chapitre</h4>
                <div class="row mb-4">
                    <div class="col-lg-8">
                        {% if chapter.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>
                                {{ chapter.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">{{ chapter.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 chapitre</p>
                        {% endif %}
                    </div>
                    <div class="col-lg-2 d-flex align-items-center justify-content-center">
                         {% if chapter.summarySheetFileName %}
                            <a href="{{ path('admin_training_chapter_delete_pdf', {'id':chapter.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 mb-2">
                    <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>
            </div>
            <div class="row my-5">
            <div class="col-lg-2">
                <a href="{{ path('admin_training_edit', {'id': module.training.id}) }}" 
       class="secondary-btn bg-secondary d-flex justify-content-center align-items-center">
    <span class="material-icons me-2">keyboard_return</span>
    Retour</a>
            </div>
            <div class="col-lg-6">
            <input type="submit" value="Enregistrer les modification" class="secondary-btn bg-success shadow">
            </div>
            </div>
            {{ form_end(form) }}
        </div>
        <div class="col-lg-4">
            <div class="p-3 shadow">
                <h3 class="text-secondary">Les chapitres contenus dans le module</h3>
                <ul class="list-group">
                     {% for c in chapters %}
                      <li class="list-group-item {% if c.id == chapter.id %} active {% endif %} "><strong class="{% if c.id == chapter.id %} text-light {% else %}  secondary-color {% endif %}">n° {{ c.orderNumber }} </strong> - {{ c.title }} <span class="ms-3 badge bg-secondary">{{ c.category.name }}</span> </li>
                     {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>

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

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

</script>
{% endblock %}