{# templates/agent/formulaire/index.html.twig #}

{% extends 'agent/agent_base.html.twig' %}

{% block title %}Formulaires{% endblock %}

{% block content %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2g2nFqG+0N+jQG/jKxLp/0t0b8T6G9t2/k9Tq+9D6xI2+0A" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        #volletDroit{
            border: 1px solid #ccc;
            background-color: #fff;
            padding: 5px;
        }
        #volletDroitHeader{
            font-weight: bold;
            background-color: #4e8bb1;
            color: #fff;
            padding: 5px;
            display: flex; /* Utilisation de Flexbox pour l'alignement */
            justify-content: space-between; /* Aligner le contenu aux extrémités */
            align-items: center; /* Centrer verticalement les éléments */
        }
        #volletDroit .vlegende{
            font-weight: bold;
        }
        #volletDroit .vdata{
            font-style: italic;
        }
        #volletDroit .velement{
            border-top: dotted #eee;
            margin-top: 3px;
            margin-bottom: 3px;
        }
        #formZone{
            font-family: arial;
            background-color: #fff;
            padding: 5px 20px 20px;
            border: 1px solid #ccc;
        }
        .ztitle{
            font-weight: bold;
            text-align: center;
            font-size: 18px;
            line-height:24px;
            border: 1px solid #ccc;
            background-color: #acd6f0;
            padding: 10px;
            text-transform: uppercase;
        }
        .header-actions {
            display: flex;
            align-items: center;
        }
    </style>

    {# Affichage des messages flash #}
    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endfor %}

    <div class="row">
       
        
        <!-- Colonne droite : Liste des champs -->
        <div class="col-md-9">
            

            <div id="formZone">
                 <div id="volletDroitHeader" style="margin-bottom: 10px">
                    <span>{{ formulaire.titre|upper }}</span>
                    
            </div>
                
                {# La zone où les champs seront affichés #}
                <div id="champZone">
                    <div class="text-center text-info">
                        <i class="fas fa-spinner fa-spin text-success" style="font-size: 2em;"></i>
                        <div>Chargement des champs...</div>
                    </div>
                </div>
                
                <div style="height: 20px"></div>
                
                
            </div>
            
        </div>
    </div>

    <div style="text-align: center; margin: 10px 0;">
                <a href="{{ path('app_agent_formulaire_index') }}" class="btn btn-secondary mt-3">
                    <i class="glyphicon glyphicon-circle-arrow-left"></i> Retour à la liste
                </a>
            </div>
{% endblock %}


{% block javascripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const champZone = document.getElementById('champZone');
        const formulaireId = {{ formulaire.id }};

        async function refreshChampsList() {
            if (!formulaireId) return;
            const url = `/agent/formulaire/${formulaireId}/champ/listshow`; 
            champZone.innerHTML = '<div class="text-center text-info"><i class="fas fa-spinner fa-spin text-success" style="font-size: 2em;"></i><div>Chargement en cours...</div></div>';
            try {
                const response = await fetch(url);
                const html = await response.text();
                champZone.innerHTML = html;
            } catch (error) {
                champZone.innerHTML = '<p class="text-danger">Erreur lors du chargement des champs.</p>';
                console.error('Erreur de chargement de la liste des champs:', error);
            }
        }
        
        if (formulaireId) {
            refreshChampsList();
        }
    });
</script>
{% endblock %}