{% extends 'base.html.twig' %}

{% block title %}Modifier le masque - {{ beneficiaire.nom }} {{ beneficiaire.prenom }}{% endblock %}

{% block body %}
    <div class="d-flex">
        <!-- Include de la sidebar -->
        {% include '_sidebar.html.twig' with {
            'beneficiaire': beneficiaire,
            'sectionActive': 'masque'
        } %}

        <!-- Contenu principal -->
        <div class="main-content">
            <!-- Header cohérent avec le reste de l'application -->
            <div class="dossier-header" style="padding: 13.5px 30px;">
                <div class="d-flex justify-content-between align-items-center">
                    <!-- Section gauche : Nom bénéficiaire -->
                    <div class="d-flex align-items-center">
                        <div class="beneficiaire-info text-header">
                            <h4 class="mb-0"><i class="fas fa-edit me-2"></i> Modifier le masque d'entretien</h4>
                        </div>
                    </div>
                    <!-- Section droite : Actions contextuelles -->
                    <div class="header-actions">
                        <a href="{{ path('app_dossier_beneficiaire', {'id': beneficiaire.id, 'section': 'masque'}) }}" class="btn-action btn-retour">
                            <i class="fa-solid fa-x"></i>
                            <span>Annuler</span>
                        </a>
                    </div>
                </div>
            </div>


            <!-- Contenu du formulaire -->
            <div class="container-fluid p-4">
                <div class="card border-0 shadow-sm questions-card">
                    <div class="card-header purple text-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-file-alt me-2"></i>
                                Questions d'évaluation
                            </h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            {% set questions = questions|default({}) %}
                            {% if questions is empty %}
                                {% set questions = {
                                    'motivations': {
                                        'question': 'Quelles sont les motivations du bénéficiaire d\'avoir accepté l\'accompagnement proposé ?',
                                        'reponse': ''
                                    },
                                    'habitudes_vie': {
                                        'question': 'Habitudes de vie (sommeil, nutrition)',
                                        'reponse': ''
                                    },
                                    'soutien_familial': {
                                        'question': 'Soutien familial / amical',
                                        'reponse': ''
                                    }
                                } %}
                            {% endif %}

                            {% for key, question in questions %}
                                <div class="mb-4">
                                    <div class="card border-light">
                                        <div class="card-header bg-light">
                                            <label class="form-label fw-bold mb-0">
                                                <i class="fas fa-chevron-right me-2 text-info"></i>
                                                {{ question.question }}
                                            </label>
                                        </div>
                                        <div class="card-body">
                                    <textarea name="{{ key }}"
                                              class="form-control auto-resize"
                                              rows="4"
                                              placeholder="Saisissez votre réponse ici...">{{ question.reponse }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}

                            <div class="d-flex justify-content-start align-items-center mt-4">
                                <div class="btn-group">
                                    <button type="submit" class="btn btn-save-inline">
                                        <i class="fas fa-save me-1"></i>
                                        Sauvegarder
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Auto-resize des textareas
            function autoResize(textarea) {
                textarea.style.height = 'auto';
                textarea.style.height = textarea.scrollHeight + 'px';
            }

            const textareas = document.querySelectorAll('.auto-resize');
            textareas.forEach(textarea => {
                // Ajuster la hauteur initiale
                autoResize(textarea);

                // Ajuster lors de la saisie
                textarea.addEventListener('input', function() {
                    autoResize(this);
                });
            });

            // Sauvegarde automatique (indication visuelle)
            let saveTimeout;
            textareas.forEach(textarea => {
                textarea.addEventListener('input', function() {
                    clearTimeout(saveTimeout);

                    // Ajouter une indication visuelle de modification
                    this.classList.add('border-warning');

                    saveTimeout = setTimeout(() => {
                        this.classList.remove('border-warning');
                        this.classList.add('border-success');

                        setTimeout(() => {
                            this.classList.remove('border-success');
                        }, 1000);
                    }, 2000);
                });
            });

            // Confirmation avant de quitter si des modifications sont en cours
            let formModified = false;
            textareas.forEach(textarea => {
                textarea.addEventListener('input', function() {
                    formModified = true;
                });
            });

            // Avertir avant de quitter la page si des modifications non sauvées
            window.addEventListener('beforeunload', function(e) {
                if (formModified) {
                    e.preventDefault();
                    e.returnValue = '';
                }
            });

            // Réinitialiser le flag lors de la soumission
            document.querySelector('form').addEventListener('submit', function() {
                formModified = false;
            });
        });
    </script>
{% endblock %}