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

{% block title %}Propositions - {{ beneficiaire.nom }} {{ beneficiaire.prenom }}{% endblock %}

{% block body %}
    {% include '_flash_messages.html.twig' %}

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

        <!-- Contenu principal avec marge pour la sidebar -->
        <div class="main-content">
            <!-- Header avec thème cohérent adapté pour les propositions -->
            <div class="dossier-header" style="padding: 9px 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">{{ beneficiaire.civilite ? beneficiaire.civilite|lower|title ~ ' ' : '' }}{{ beneficiaire.nom }} {{ beneficiaire.prenom }}</h4>
                            <small class="sous-titre">
                                <i class="fas fa-lightbulb me-1"></i>
                                Propositions thérapeutiques
                            </small>
                        </div>
                    </div>

                    <!-- Section droite : Actions contextuelles -->
                    <div class="header-actions">
                        <!-- Date de modification avec icône de statut -->
                        <div class="justify-content-between align-items-center d-flex">
                            {% if evaluation.statut == 'termine' %}
                                <div class="text-success text-opacity-75">
                                    <i class="fas fa-check-circle me-1"></i>
                                    Terminée
                                </div>
                            {% else %}
                                <div class="text-warning text-opacity-75">
                                    <i class="fas fa-edit me-1"></i>
                                    En cours
                                </div>
                            {% endif %}
                        </div>

                        <a href="{{ path('app_evaluation_show', {'beneficiaireId': beneficiaire.id, 'id': evaluation.id}) }}" class="btn-action btn-success">
                            <i class="fa-solid fa-square-poll-horizontal"></i>
                            <span>Résultat</span>
                        </a>

                        <a href="{{ path('app_evaluation_diagnostic', {'beneficiaireId': beneficiaire.id, 'id': evaluation.id}) }}" class="btn-action btn-warning">
                            <i class="fas fa-edit"></i>
                            <span>Modifier diagnostic</span>
                        </a>

                        {% if evaluation is defined and evaluation.id %}
                            <a href="{{ path('app_evaluation_show', {'beneficiaireId': beneficiaire.id, 'id': evaluation.id}) }}" class="btn-action btn-retour">
                                <i class="fa-solid fa-x"></i>
                                <span>Annuler</span>
                            </a>
                        {% else %}
                            <a href="{{ path('app_evaluation_index', {'beneficiaireId': beneficiaire.id}) }}" class="btn-action btn-retour">
                                <i class="fa-solid fa-x"></i>
                                <span>Annuler</span>
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Contenu de la section avec container -->
            <div class="container-fluid p-4">
                {% for message in app.flashes('success') %}
                    <div class="alert alert-success alert-dismissible fade show flash-message" role="alert">
                        <i class="fas fa-check-circle me-2"></i>
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}

                <form method="post">
                    <div class="row">
                        <div class="col-12">
                            <!-- Diagnostic résumé avec boutons d'action -->
                            <div class="card border-0 shadow-sm mb-4">
                                <div class="card-header bg-gradient-primary text-white">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h6 class="mb-0">
                                            <i class="fas fa-clipboard-check me-2"></i>
                                            Résumé du diagnostic
                                        </h6>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div class="diagnostic-summary flex-grow-1">
                                            <div class="summary-item">
                                                <p><i class="fas fa-exclamation-triangle text-warning me-2"></i>Problématiques identifiées : {{ evaluation.reponsesDiagnostic|length }} </p>
                                            </div>
                                            <div class="summary-description">
                                                Les propositions ci-dessous ont été générées automatiquement en fonction de vos sélections.
                                                Vous pouvez les modifier selon votre expertise puis les <strong>sauvegarder</strong> avant de finaliser l'évaluation.
                                            </div>
                                        </div>

                                        <!-- Boutons d'actions à côté du résumé -->
                                        <div class="actions-sidebar ms-4">
                                            <div class="d-flex flex-column gap-3">
                                                <button type="submit" class="btn btn-primary btn-save-inline mb-1" style="font-size: 16px">
                                                    <i class="fas fa-save me-2"></i>
                                                    Sauvegarder
                                                </button>

                                                {% if evaluation.statut != 'termine' %}
                                                    <button type="submit" class="btn btn-success btn-finalize-inline"
                                                            formaction="{{ path('app_evaluation_finaliser', {'beneficiaireId': beneficiaire.id, 'id': evaluation.id}) }}">
                                                        <i class="fas fa-check-double me-2"></i>
                                                        Finaliser
                                                    </button>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Propositions par section -->
                            <!-- Propositions organisées par section puis par question -->
                            {% set propositionsParSection = {} %}
                            {% for questionData in propositionsParQuestion %}
                                {% set section = questionData.question.section %}
                                {% if propositionsParSection[section] is not defined %}
                                    {% set propositionsParSection = propositionsParSection|merge({(section): []}) %}
                                {% endif %}
                                {% set propositionsParSection = propositionsParSection|merge({(section): propositionsParSection[section]|merge([questionData])}) %}
                            {% endfor %}

                            {% for section, questionsDeSection in propositionsParSection %}
                                <!-- En-tête de section -->
                                <div class="section-divider mb-4">
                                    <div class="section-title-bar">
                                        {% if section == 'etat_emotionnel' %}
                                            <i class="fas fa-heart me-2"></i>État émotionnel
                                        {% elseif section == 'symptomes_psychiques' %}
                                            <i class="fas fa-brain me-2"></i>Symptômes psychiques
                                        {% else %}
                                            <i class="fas fa-tag me-2"></i>{{ section|title|replace({'_': ' '}) }}
                                        {% endif %}
                                    </div>
                                </div>

                                <!-- Questions de cette section -->
                                {% for questionData in questionsDeSection %}
                                    <div class="card border-0 shadow-sm mb-4 question-block">
                                        <!-- En-tête avec numéro et titre de la question -->
                                        <div class="card-header question-header">
                                            <div class="d-flex align-items-center">
                                                <div class="question-number me-3">{{ loop.parent.loop.index }}.{{ loop.index }}</div>
                                                <div>
                                                    <h5 class="question-title">
                                                        {{ questionData.question.texte }}
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Corps avec les 4 types de propositions -->
                                        <div class="card-body">
                                            {% for type, propositions in questionData.propositions %}
                                                {% if propositions is not empty %}
                                                    <div class="proposition-type-section mb-4">
                                                        <div class="type-header">
                                                            {% if type == 'manifestation' %}
                                                                <i class="fas fa-eye me-2"></i>Manifestations observées
                                                            {% elseif type == 'objectif' %}
                                                                <i class="fas fa-target me-2"></i>Objectifs thérapeutiques
                                                            {% elseif type == 'piste' %}
                                                                <i class="fas fa-route me-2"></i>Pistes d'accompagnement
                                                            {% elseif type == 'outil' %}
                                                                <i class="fas fa-tools me-2"></i>Outils thérapeutiques
                                                            {% endif %}
                                                        </div>

                                                        <div class="propositions-content">
                                                            {% for key, proposition in propositions %}
                                                                <textarea class="form-control proposition-textarea"
                                                                          id="prop_s{{ loop.parent.loop.parent.loop.parent.loop.index }}_q{{ loop.parent.loop.parent.loop.index }}_{{ type }}_{{ key }}"
                                                                          name="propositions[{{ questionData.question.section }}][{{ type }}][]"
                                                                          placeholder="Saisissez votre {{ type }}...">{{ proposition }}</textarea>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endfor %}
                            {% endfor %}

                            <!-- Notes complémentaires -->
                            <div class="card border-0 shadow-sm mb-4">
                                <div class="card-header bg-warning text-dark">
                                    <h6 class="mb-0">
                                        <i class="fas fa-sticky-note me-2"></i>
                                        Notes complémentaires
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="notes-section">
                                        <textarea class="form-control notes-textarea"
                                                  id="notesComplementaires"
                                                  name="notes_complementaires"
                                                  placeholder="Ajoutez vos observations personnelles, adaptations spécifiques ou recommandations particulières...">{{ evaluation.notesComplementaires }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

                textarea.addEventListener('input', autoResize);
                autoResize(); // Taille initiale
            });

            // Indicateur de modifications non sauvegardées
            let hasUnsavedChanges = false;

            textareas.forEach(textarea => {
                textarea.addEventListener('input', function() {
                    hasUnsavedChanges = true;
                    this.style.borderColor = '#ffc107';
                });
            });

            // Sauvegarde automatique des modifications dans le localStorage
            const saveToLocalStorage = () => {
                const formData = {};
                textareas.forEach(textarea => {
                    formData[textarea.id] = textarea.value;
                });
                localStorage.setItem('evaluation_draft_{{ evaluation.id }}', JSON.stringify(formData));
            };

            // Restaurer depuis le localStorage
            const savedData = localStorage.getItem('evaluation_draft_{{ evaluation.id }}');
            if (savedData) {
                const formData = JSON.parse(savedData);
                Object.entries(formData).forEach(([id, value]) => {
                    const textarea = document.getElementById(id);
                    if (textarea && textarea.value === '') {
                        textarea.value = value;
                        textarea.style.borderColor = '#ffc107';
                    }
                });
            }

            // Sauvegarder lors des modifications
            textareas.forEach(textarea => {
                textarea.addEventListener('input', saveToLocalStorage);
            });

            // Nettoyer le localStorage après soumission
            document.querySelector('form').addEventListener('submit', function() {
                hasUnsavedChanges = false;
                localStorage.removeItem('evaluation_draft_{{ evaluation.id }}');
            });

            // Avertissement avant de quitter
            window.addEventListener('beforeunload', function(e) {
                if (hasUnsavedChanges) {
                    e.preventDefault();
                    e.returnValue = 'Vous avez des modifications non sauvegardées. Voulez-vous vraiment quitter ?';
                }
            });
        });
    </script>
{% endblock %}