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

{% block title %}Détail du groupe : {{ groupe_checkbox.titre }}{% endblock %}

{% block content %}
    <div class="container-fluid">
        <h3 class="mb-4 text-body-emphasis">
            <i class="fas fa-list-ul me-2"></i> Détails du Groupe : {{ groupe_checkbox.titre }}
        </h3>

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

        {# --- Carte d'information du Groupe --- #}
        <div class="card shadow mb-4">
            <div class="card-header py-3 bg-light d-flex justify-content-between align-items-center">
                <h5 class="text-body mb-0"><i class="fas fa-info-circle me-1"></i> Informations Principales</h5>
                {# Bouton Modifier le Groupe (Adapté à la route checkbox) #}
                <a href="{{ path('manager_formulaire_checkbox_predefini_edit', {'id': groupe_checkbox.id}) }}" class="btn btn-warning btn-sm shadow-sm">
                    <i class="fas fa-edit me-1"></i> Modifier le Groupe
                </a>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    <strong class="me-2">Description :</strong> {{ groupe_checkbox.petiteDescription }}
                </p>
                <p class="mb-0">
                    <strong class="me-2">Type :</strong>
                    <span class="badge bg-success"><i class="fas fa-check-square me-1"></i> Checkbox (Sélection multiple)</span>
                </p>
            </div>
        </div>
        {# --- FIN Carte d'information du Groupe --- #}

        {# --- Carte des Options de Sélection --- #}
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-light">
                <h5 class="text-body mb-0">
                    <i class="fas fa-list-alt me-1"></i> Options existantes ({{ groupe_checkbox.elements | length }} options)
                </h5>
                <button type="button" class="btn btn-primary btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#addOptionModal">
                    <i class="fas fa-plus me-1"></i> Ajouter une nouvelle option
                </button>
            </div>
            
            <div class="card-body p-0">
                {% if groupe_checkbox.elements is not empty %}
                    <div class="table-responsive">
                        <table class="table table-striped table-sm fs-9 mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="border-top ps-4">Titre (Affiché)</th>
                                    <th class="border-top">Valeur (Stockée)</th>
                                    <th class="border-top text-center" style="width: 100px;">Déplacement</th>
                                    <th class="text-end align-middle pe-4 border-top">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="list">
                            {% for element in groupe_checkbox.elements %}
                                <tr>
                                    <td class="align-middle ps-4 element-titre text-primary">{{ element.titre }}</td>
                                    <td class="align-middle element-valeur text-muted">{{ element.valeur }}</td>
                                    
                                    {# Colonne Déplacement avec boutons alignés horizontalement #}
                                    <td class="align-middle text-center">
                                        <div class="d-flex justify-content-center align-items-center">
                                            
                                            {# Bouton Up #}
                                            <form method="post" action="{{ path('app_manager_formulaire_checkboxpredefini_element_up', {'id': element.id}) }}" class="d-inline-block me-1">
                                                <input type="hidden" name="_token" value="{{ csrf_token('up' ~ element.id) }}">
                                                <button type="submit" class="btn btn-sm btn-outline-secondary btn-icon {% if loop.first %}disabled{% endif %}" {% if loop.first %}disabled{% endif %} title="Monter">
                                                    <i class="fas fa-chevron-up"></i>
                                                </button>
                                            </form>
                                            
                                            {# Bouton Down #}
                                            <form method="post" action="{{ path('app_manager_formulaire_checkboxpredefini_element_down', {'id': element.id}) }}" class="d-inline-block ms-1">
                                                <input type="hidden" name="_token" value="{{ csrf_token('down' ~ element.id) }}">
                                                <button type="submit" class="btn btn-sm btn-outline-secondary btn-icon {% if loop.last %}disabled{% endif %}" {% if loop.last %}disabled{% endif %} title="Descendre">
                                                    <i class="fas fa-chevron-down"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                    
                                    {# Colonne des Actions avec menu déroulant #}
                                    <td class="align-middle white-space-nowrap text-end pe-4">
                                        <div class="btn-reveal-trigger position-static">
                                            <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent">
                                                <i class="fas fa-ellipsis-h fs-10"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end py-2">
                                                {# Action Modifier (via modale) #}
                                                <button 
                                                    class="dropdown-item edit-btn" 
                                                    type="button"
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#editOptionModal"
                                                    data-id="{{ element.id }}"
                                                    data-titre="{{ element.titre }}"
                                                    data-valeur="{{ element.valeur }}"
                                                    data-csrf-token="{{ csrf_token('edit_element_' ~ element.id) }}"
                                                >
                                                    <i class="fas fa-pencil-alt me-2"></i> Modifier
                                                </button>
                                                
                                                <div class="dropdown-divider"></div>
                                                
                                                {# Action Supprimer #}
                                                <form method="post" action="{{ path('app_manager_formulaire_checkboxpredefini_element_delete', {'id': element.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette option ?');" style="display:block;">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ element.id) }}">
                                                    <button class="dropdown-item text-danger" type="submit">
                                                        <i class="fas fa-trash-alt me-2"></i> Supprimer
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="alert alert-info m-3 mb-0">
                        <i class="fas fa-info-circle me-1"></i> Aucune option n'a encore été ajoutée à ce groupe.
                    </div>
                {% endif %}
            </div>
        </div>
        {# --- FIN Carte des Options de Sélection --- #}

        <div class="text-center mt-4 mb-5">
            <a href="{{ path('manager_formulaire_checkbox_predefini_index') }}" class="btn btn-secondary shadow-sm">
                <i class="fas fa-arrow-left me-1"></i> Retour à la liste des Groupes
            </a>
        </div>
    </div>

    {# --- Modale d'ajout --- #}
    <div class="modal fade" id="addOptionModal" tabindex="-1" aria-labelledby="addOptionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addOptionModalLabel"><i class="fas fa-plus-circle me-1"></i> Ajouter une nouvelle option</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                {# Utilisation du formulaire d'ajout d'élément passé en paramètre #}
                {{ form_start(form) }}
                <div class="modal-body">
                    {{ form_row(form.titre) }}
                    {{ form_row(form.valeur) }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Ajouter l'option</button>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
    
    {# --- Modale de modification --- #}
    <div class="modal fade" id="editOptionModal" tabindex="-1" aria-labelledby="editOptionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header text-dark">
                    <h5 class="modal-title" id="editOptionModalLabel"><i class="fas fa-pencil-alt me-1"></i> Modifier l'option</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                {# Formulaire pour la modification #}
                <form id="edit-form" method="post" action="">
                    <div class="modal-body">
                        {# Le champ _token est nécessaire pour la validation CSRF #}
                        <input type="hidden" name="formulaire_checkboxpredefini_element[_token]" id="edit_token">

                        <div class="mb-3">
                            <label for="edit_titre_input" class="form-label">Titre de l'option</label>
                            <input type="text" class="form-control" id="edit_titre_input" name="formulaire_checkboxpredefini_element[titre]">
                        </div>
                        <div class="mb-3">
                            <label for="edit_valeur_input" class="form-label">Valeur de l'option</label>
                            <input type="text" class="form-control" id="edit_valeur_input" name="formulaire_checkboxpredefini_element[valeur]">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-warning">Sauvegarder les modifications</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    {# --- Script JavaScript (Adapté à la route checkbox) --- #}
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const editModal = document.getElementById('editOptionModal');
        editModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id');
            const titre = button.getAttribute('data-titre');
            const valeur = button.getAttribute('data-valeur');
            const csrfToken = button.getAttribute('data-csrf-token');

            const form = editModal.querySelector('#edit-form');
            // Mise à jour de la route d'action pour le groupe checkbox
            form.action = '{{ path('app_manager_formulaire_checkboxpredefini_element_edit', {'id': '__ID__'}) }}'.replace('__ID__', id);
            
            editModal.querySelector('#edit_token').value = csrfToken;
            editModal.querySelector('#edit_titre_input').value = titre;
            editModal.querySelector('#edit_valeur_input').value = valeur;
        });
    });
    </script>
{% endblock %}