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

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

{% block title %}Détails du sous-formulaire{% endblock %}

{% block content %}
    <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">
        <!-- Volet gauche : Informations de base -->
        <div class="col-md-3">
            <div id="volletDroit">
                <div id="volletDroitHeader">
                    <span>Informations de base</span>
                    <a href="{{ path('manager_formulaire_champslie_edit', {'id': champslie.id}) }}" class="btn btn-sm btn-light" style="margin-left: 10px;">Modifier</a>
                </div>
                <div style="height: 5px"></div>
                <div>
                    <span class="vlegende">Nom de table / code : </span><br>
                    <span class="vdata">{{ champslie.nomTable }}</span>
                </div>
                <div class="velement">
                    <span class="vlegende">Statut : </span><br>
                    <span class="vdata">
                        {# MISE À JOUR DU STATUT avec les icônes Font Awesome #}
                        {% if champslie.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>
            </div>
        </div>
        
        <!-- Colonne droite : Liste des champs -->
        <div class="col-md-9">
            <div id="formZone">
                <div id="volletDroitHeader" style="margin-bottom: 10px">
                    <span>Champs du sous-formulaire "{{ champslie.titre }}"</span>
                    <div class="header-actions">
                         <a href="{{ path('manager_formulaire_champslie_new2', {'id': champslie.id}) }}" class="btn btn-sm btn-light" style="margin-right: 5px;">Modifier</a>
                        
                    </div>
                </div>
                
                 <!-- zone de chargement des champs -->
                <div id="champZone"><div>

                
            </div>
            
            
        </div>
    </div>
	<div style="text-align: center; margin: 10px 0;">
                <a href="{{ path('manager_formulaire_champslie_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 = {{ champslie.id }};

        async function refreshChampsList() {
            if (!formulaireId) return;
            const url = `/manager/champslie/${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 %}