{% extends '@AdminLTE/layout/mesodd-layout.html.twig' %}

{% block page_title %}{% trans %}upload.title{% endtrans %}{% endblock %}


{% block page_content %}

    {% if autorisation %}
        <div class="alert alert-danger" role="alert">
            Vous avez déjà soumis votre PTA à la validation du {{ showCommune ? 'SE' : 'DPAF' }} de votre commune. Pour toute modification, veuillez vous rapprochez de ce dernier.
        </div>
    {% else %}

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {{ form_start(form, { 'attr': {'id': 'my-form'} }) }}
                <div class="card-body">    
                    {% if is_granted('ROLE_MANAGER') or is_granted('ROLE_DDD') %}
                        {% if is_granted('ROLE_MANAGER') %}
                            {{ form_row(form.type) }}
                        {% endif %}
                    {{ form_row(form.entite) }}
                {% endif %}
                {{ form_row(form.attachment) }}

                    <div class="form-group row">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" class="btn btn-block btn-primary" id="submit-button">{% trans %}basics.charge{% endtrans %}</button>
                        </div>
                    </div>
                </div>
            {{ form_end(form) }}
        {% endblock %}
    {% endembed %}
    {% endif %}


    <!-- Modale de confirmation -->
    <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal-header bg-danger text-light">
            <h5 class="modal-title" id="confirmationModalLabel">{% trans %}Confirmation de chargement{% endtrans %}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            {% trans %}Êtes-vous sûr de vouloir charger ce PTA ? Toutes les anciennes données liéès à un précédent programme seront perdues.{% endtrans %}
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans %}Annuler{% endtrans %}</button>
            <button type="button" class="btn btn-primary" id="confirm-submit">{% trans %}Charger{% endtrans %}</button>
        </div>
        </div>
    </div>
    </div>

{% endblock %}

{% block javascripts %}
<script>
        let $type = $('#upload_type');

        $type.change(function() {
            let $form = $type.closest('form');

            let data = {};
            data[$type.attr('name')] = $type.val();

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    $('#upload_entite').replaceWith(
                        $(html).find('#upload_entite')
                    );
                }
            });
        });


    $(document).on('change', '.custom-file-input', function() {
        let fileName = $(this).val().replace(/\\/g, '/').replace(/.*\//, '');
        $(this).parent('.custom-file').find('.custom-file-label').text(fileName);
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Bouton "Soumettre" qui affiche la modale
        const submitButton = document.getElementById('submit-button');
        const confirmButton = document.getElementById('confirm-submit');
        const form = document.getElementById('my-form');

        if (submitButton && confirmButton && form) {
            // Affiche la modale quand le bouton est cliqué
            submitButton.addEventListener('click', function () {
                const modal = new bootstrap.Modal(document.getElementById('confirmationModal'), {});
                modal.show();
            });

            // Soumet le formulaire après confirmation
            confirmButton.addEventListener('click', function () {
                form.submit(); // Soumet le formulaire
            });
        }
    });
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Pour tous les inputs de type file
    document.querySelectorAll('input[type="file"]').forEach(function(input) {
        input.addEventListener('change', function(e) {
            var fileName = e.target.files[0] ? e.target.files[0].name : 'Aucun fichier choisi';
            
            // Cherche le label ou crée un élément pour afficher le nom
            var label = e.target.nextElementSibling;
            if (label && label.classList.contains('custom-file-label')) {
                label.textContent = fileName;
            } else {
                // Crée un élément pour afficher le nom du fichier
                var fileNameDisplay = document.createElement('small');
                fileNameDisplay.className = 'form-text text-muted file-name-display';
                fileNameDisplay.textContent = fileName;
                
                // Supprime l'ancien affichage s'il existe
                var oldDisplay = e.target.parentNode.querySelector('.file-name-display');
                if (oldDisplay) {
                    oldDisplay.remove();
                }
                
                // Ajoute le nouvel affichage
                e.target.parentNode.appendChild(fileNameDisplay);
            }
        });
    });
});
</script>

{% endblock %}