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

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


{% block page_content %}
    <div class="alert alert-info alert-dismissible text-white">
                <h5><i class="icon fas fa-info"></i> Information!</h5>
                <div>
                Cet espace vous permet de mettre votre PTA au format requis. Vous devez extraire ce fichier du PTA depuis la plateforme du BAI et ceci, programme par programme. Un autre fichier autre que celui extraire de la plateforme du BAI ne sera pas prise en compte.
                </div>
            </div>

    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {{ form_start(form) }}
               {% if is_granted('ROLE_MANAGER') %}
                    <div class="row">
                        <div class="col-sm-6">
                            <label for="ministry_commune_type">Structure *</label>
                            {{ form_row(form.type) }}
                        </div>
                        <div class="col-sm-6">
                            <label for="ministry_commune_type">Ministères/Communes *</label>
                            {{ form_row(form.entite) }}
                        </div>
                    </div>   
                {% endif %}
                {% if is_granted('ROLE_DDD') %}
                    <div class="col-sm-12">
                            <label for="ministry_commune_type">Ministères/Communes *</label>
                            {{ form_row(form.entite) }}
                    </div>
                {% endif %} 
               <div class="row">
                    <div class="col-sm-12">
                        <label for="ministry_commune_type">Fichier Excel du PTA (programme par programme) *</label>
                        {{ form_row(form.attachment) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <label for="ministry_commune_type">Programme *</label>
                        {{ form_row(form.programm) }}
                    </div>
                </div>
               <div class="row">
                    <div class="col-sm-12">
                        <label for="ministry_commune_type">Les données commencent à la ligne *</label>
                        {{ form_row(form.start) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <label for="ministry_commune_type">Colonne des codes *</label>
                        {{ form_row(form.code) }}
                    </div>
                    <div class="col-sm-3">
                        <label for="ministry_commune_type">Colonne des libellés *</label>
                        {{ form_row(form.libelle) }}
                    </div>
                    <div class="col-sm-3">
                        <label for="ministry_commune_type">Colonne des directions *</label>
                        {{ form_row(form.direction) }}
                    </div>
                    <div class="col-sm-3">
                        <label for="ministry_commune_type">Colonne des montants *</label>
                        {{ form_row(form.cout) }}
                    </div>
                </div>
                <div class="row">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-12">
                            <button type="submit" class="btn btn-block btn-primary">Mettre le PTA au format</button>
                        </div>
                    </div>
            {{ form_end(form) }}
        {% endblock %}
    {% endembed %}
    
{% endblock %}

{% block javascripts %}
    <script>
        let $cout = $('#format_cout');
        let $code = $('#format_code');
        let $start = $('#format_start');
        let $direction = $('#format_direction');
        let $libelle = $('#format_libelle');
        let $year = $('#format_year');
        let $entite = $('#format_entite');
        let $type = $('#format_type');
        let $attachment = $('#format_attachment');

        $(document).on('change', '#format_type, #format_entite', function () {
            let $form = $(this).closest('form')
            
            let data = {}
            data[$cout.attr('name')] = $cout.val()
            data[$code.attr('name')] = $code.val()
            data[$start.attr('name')] = $start.val()
            data[$direction.attr('name')] = $direction.val()
            data[$libelle.attr('name')] = $libelle.val()
            data[$year.attr('name')] = $year.val()
            data[$type.attr('name')] = $type.val()
            data[$entite.attr('name')] = $entite.val()
            data[$attachment.attr('name')] = $attachment.val()
            data[$(this).attr('name')] = $(this).val()
            let $field = $(this).attr('id')
            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    if ($field == 'format_type') {
                        $('#format_entite').replaceWith(
                            $(html).find('#format_entite')
                        )

                        $('#format_programm').replaceWith(
                            $(html).find('#format_programm')
                        )
                    }
                    if ($field == 'format_entite') {
                        $('#format_programm').replaceWith(
                            $(html).find('#format_programm')
                        )
                    }
                }
            });
        });

    </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 %}