{# templates/manager/formulaire/show.html.twig #}

{% extends 'manager/manager_base.html.twig' %}

{% block title %}Détails de l'formulaire{% endblock %}

{% block content %}
    {# --- Définition des mappings pour Périodicité et Localité --- #}
    {% set periodicite_mapping = {
        1: 'Annuelle',
        2: 'Semestrielle',
        3: 'Trimestrielle',
        4: 'Mensuelle',
        5: 'Journalière',
    } %}

    {% set localite_mapping = {
        1: 'Pays',
        2: 'District',
        3: 'Région',
        4: 'Département',
        5: 'Sous-préfecture',
        6: 'Commune',
        7: 'Village',
    } %}
    
    {# --- Reste du contenu (non modifié pour la CSS et les messages flash) --- #}
    <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">
        <div class="col-md-3">
            <div id="volletDroit">
                <div id="volletDroitHeader">
                    <span>Informations de base</span>
                    <a href="{{ path('manager_formulaire_edit', {'id': formulaire.id}) }}" class="btn btn-sm btn-light" style="margin-left: 10px;">Modifier</a>
                </div>
                <div style="height: 5px"></div>
                {# Affichage des informations du formulaire #}
        {% if formulaire is defined %}
            <div>
                <span class="vlegende">Titre :</span><br>
                <span class="vdata">{{ formulaire.titre|default('Non défini') }}</span>
            </div>
            
            <div class="velement">
                <span class="vlegende">Catégorie :</span><br>
                <span class="vdata">{{ formulaire.categorie.titre|default('Non défini') }}</span>
            </div>
            <div class="velement">
                <span class="vlegende">Acteur :</span><br>
                <span class="vdata">{{ formulaire.acteur.titre|default('Non défini') }}</span>
            </div>
            <div class="velement">
                <span class="vlegende">Filière :</span><br>
                <span class="vdata">{{ formulaire.filiere.titre|default('Non défini') }}</span>
            </div>
            
            {# MISE À JOUR : Périodicité (Utilisation du mapping) #}
            <div class="velement">
                <span class="vlegende">Périodicité :</span><br>
                <span class="vdata">
                    {# Utilise la valeur de formulaire.periodicite (e.g., 1) pour chercher l'étiquette dans le mapping #}
                    {{ periodicite_mapping[formulaire.periodicite]|default('Non défini') }}
                </span>
            </div>
            
            {# MISE À JOUR : Localité (Utilisation du mapping) #}
            <div class="velement">
                <span class="vlegende">Localité :</span><br>
                <span class="vdata">
                    {# Utilise la valeur de formulaire.localite (e.g., 1) pour chercher l'étiquette dans le mapping #}
                    {{ localite_mapping[formulaire.localite]|default('Non défini') }}
                </span>
            </div>

            <div class="velement">
                <span class="vlegende">Visibilité (consultation) :</span><br>
                <span class="vdata">{{ formulaire.visibiliteConsult.nom|default('Non défini') }}</span>
            </div>
            <div class="velement">
                <span class="vlegende">Visibilité (collecte) :</span><br>
                <span class="vdata">{{ formulaire.visibiliteCollecte.nom|default('Non défini') }}</span>
            </div>
            {# Le champ Nombre de colonnes utilise aussi un entier, ajoutons le mapping pour la cohérence #}
            {% set colonne_mapping = {
                1: '1 Colonne',
                2: '2 Colonnes',
                3: '3 Colonnes',
                4: '4 Colonnes',
                5: '5 Colonnes',
                6: '6 Colonnes',
            } %}
            <div class="velement">
                <span class="vlegende">Nombre de colonnes :</span><br>
                <span class="vdata">{{ colonne_mapping[formulaire.nbreColonne]|default('Non défini') }}</span>
            </div>
            
            {# Le champ Niveau de validation utilise aussi un entier, ajoutons le mapping pour la cohérence #}
            {% set validation_mapping = {
                1: '1 Niveau',
                2: '2 Niveaux',
                3: '3 Niveaux',
            } %}
            <div class="velement">
                <span class="vlegende">Niveau de validation :</span><br>
                <span class="vdata">{{ validation_mapping[formulaire.niveauValidation]|default('Non défini') }}</span>
            </div>
            
            <div class="velement">
                <span class="vlegende">Date de dernière modification :</span><br>
                <span class="vdata">{{ formulaire.dates|date('d/m/Y H:i')|default('Non défini') }}</span>
            </div>
            <div class="velement">
                <span class="vlegende">Statut : </span><br>
                <span class="vdata">
                    {% if formulaire.active %}
                        <i class="fa-solid fa-circle-check" data-toggle="tooltip" data-placement="top" title="Actif" style="font-size: 1.5em; color: #2ba558;"></i>
                    {% else %}
                        <i class="fa-solid fa-circle-xmark" data-toggle="tooltip" data-placement="top" title="Inactif" style="font-size: 1.5em; color: #fc825c;"></i>
                    {% endif %}
                </span>
            </div>
        {% else %}
            <p>Aucune information de formulaire disponible.</p>
        {% endif %}
            </div>
        </div>
        
        <div class="col-md-9">
            

            <div id="formZone">
                   <div id="volletDroitHeader" style="margin-bottom: 10px">
                        <span>{{ formulaire.titre|upper }}</span>
                        <div class="header-actions">
                                <a href="{{ path('manager_formulaire_new2', {'id': formulaire.id}) }}" class="btn btn-sm btn-light" style="margin-right: 5px;">Modifier</a>
                              
                        </div>
                </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('manager_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 = `/manager/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 %}