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

{% block title %}Diagnostic - {{ 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'
        } %}

        <div class="main-content">
            <!-- Header avec compteur et bouton -->
            <div class="dossier-header">
                <div class="d-flex justify-content-between align-items-center">
                    <!-- Section gauche : Titre + Compteur -->
                    <div class="d-flex align-items-center gap-3">
                        <div class="beneficiaire-info text-header">
                            <h4 class="mb-0">
                                <i class="fas fa-list-check me-2"></i>
                                Diagnostic psychologique
                            </h4>
                            <small class="sous-titre">
                                {{ beneficiaire.civilite ? beneficiaire.civilite|lower|title ~ ' ' : '' }}{{ beneficiaire.nom }} {{ beneficiaire.prenom }}
                            </small>
                        </div>

                        <!-- Compteur de sélections -->
                        <div class="selection-counter">
                            <div class="counter-number" id="count-number">
                                {{ evaluation.reponsesDiagnostic|length }}
                            </div>
                            <div class="counter-label">problématiques</div>
                        </div>
                    </div>

                    <!-- Section droite : Actions -->
                    <div class="header-actions">
                        <button type="submit" form="diagnostic-form" class="btn-action btn-success">
                            <i class="fa-solid fa-wand-magic-sparkles"></i>
                            <span>Générer les propositions</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Contenu principal -->
            <div class="container-fluid p-4">
                <form method="post" id="diagnostic-form">
                    <!-- Instructions -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-gradient-primary text-white">
                            <h6 class="mb-0">
                                <i class="fas fa-info-circle me-2"></i>
                                Instructions
                            </h6>
                        </div>
                        <div class="card-body">
                            <p class="mb-0">
                                Cochez les problématiques que vous observez chez le bénéficiaire.
                                Des propositions thérapeutiques seront automatiquement générées en fonction de vos sélections.
                            </p>
                        </div>
                    </div>

                    <!-- Sections de questions -->
                    {% for section, questions in questionsBySection %}
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-light">
                                <h5 class="mb-0 text-header">
                                    {% 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
                                    {% elseif section == 'sentiment_existentiel' %}
                                        <i class="fas fa-search me-2"></i>Sentiment existentiel
                                    {% elseif section == 'lien_quotidien' %}
                                        <i class="fas fa-home me-2"></i>Lien avec le quotidien et l'insertion
                                    {% elseif section == 'experiences_traumatiques_psychiatriques' %}
                                        <i class="fas fa-exclamation-triangle me-2"></i>Expériences traumatiques ou psychiatriques
                                    {% elseif section == 'attentes_vis_soutien' %}
                                        <i class="fas fa-hands-helping me-2"></i>Attentes vis-à-vis du soutien
                                    {% elseif section == 'difficultes_relationnelles_affectives' %}
                                        <i class="fas fa-people-arrows me-2"></i>Difficultés relationnelles et affectives
                                    {% elseif section == 'instabilite_de_vie' %}
                                        <i class="fas fa-balance-scale me-2"></i>Instabilité ou précarité de vie
                                    {% elseif section == 'souffrance_psychique' %}
                                        <i class="fas fa-sad-tear me-2"></i>Souffrance psychique / trouble mental
                                    {% elseif section == 'echec_impossible' %}
                                        <i class="fas fa-ban me-2"></i>Échec ou impossibilité d'insertion
                                    {% elseif section == 'sante_douleurs_chroniques' %}
                                        <i class="fas fa-briefcase-medical me-2"></i>Santé physique et douleurs chroniques
                                    {% elseif section == 'experiences_traumatiques_passees' %}
                                        <i class="fas fa-history me-2"></i>Expériences traumatiques passées
                                    {% else %}
                                        <i class="fas fa-list me-2"></i>{{ section|title|replace({'_': ' '}) }}
                                    {% endif %}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    {% for question in questions %}
                                        <div class="col-md-6 mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input"
                                                       type="checkbox"
                                                       name="questions[]"
                                                       value="{{ question.codeQuestion }}"
                                                       id="question_{{ question.id }}"
                                                       {% if question.codeQuestion in evaluation.reponsesDiagnostic %}checked{% endif %}>
                                                <label class="form-check-label" for="question_{{ question.id }}">
                                                    {{ question.texte }}
                                                </label>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}

                    <!-- Bouton de soumission en bas de page -->
                    <div class="text-center mt-4 mb-4">
                        <button type="submit" class="btn btn-action btn-success btn-lg px-5">
                            <i class="fa-solid fa-wand-magic-sparkles"></i>
                            Générer les propositions
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkboxes = document.querySelectorAll('input[name="questions[]"]');
            const countNumber = document.getElementById('count-number');

            function updateCount() {
                const checked = Array.from(checkboxes).filter(cb => cb.checked);
                countNumber.textContent = checked.length;

                // Animation du compteur
                countNumber.style.transform = 'scale(1.2)';
                setTimeout(() => {
                    countNumber.style.transform = 'scale(1)';
                }, 200);
            }

            // Écouter les changements sur les checkboxes
            checkboxes.forEach(cb => {
                cb.addEventListener('change', updateCount);
            });

            // Initialiser l'affichage
            updateCount();

            // Transition smooth pour le compteur
            countNumber.style.transition = 'transform 0.2s ease';
        });
    </script>
{% endblock %}