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

{% block title %}Projection d'insertion - {{ beneficiaire.prenom }} {{ beneficiaire.nom }}{% endblock %}

{% block body %}
    <div class="d-flex">
        <!-- Sidebar -->
        {% include '_sidebar.html.twig' with {
            'beneficiaire': beneficiaire,
            'sectionActive': 'projection'
        } %}

        <!-- Main content -->
        <div class="main-content">
            <!-- Header -->
            <div class="dossier-header">
                <div class="d-flex justify-content-between 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">Projection d'insertion</small>
                    </div>
                    <div class="header-actions">
                        <a href="{{ path('app_projection_insertion_show', {'beneficiaireId': beneficiaire.id}) }}" class="btn-action btn-retour">
                            <i class="fa-solid fa-x"></i>
                            <span>Annuler</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Contenu -->
            <div class="container-fluid p-4">
                <form method="post">
                    {# Section A - Manque d'information #}
                    <div class="card mb-4">
                        <div class="card-header bg-gradient-primary text-white">
                            <h4 class="mb-0">A - MANQUE D'INFORMATION</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">1. J'ai du mal à identifier clairement mes compétences et mes limites.</label>
                                <select name="a_note_1" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.ANote1 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">2. Je manque d'informations sur les métiers ou secteurs qui m'attirent.</label>
                                <select name="a_note_2" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.ANote2 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">3. Je ne sais pas quelle méthode utiliser pour avancer dans mon projet.</label>
                                <select name="a_note_3" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.ANote3 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <p class="text-end"><strong>Total: <span id="totalA">{{ diagnostic.totalSectionA }}</span></strong></p>
                        </div>
                    </div>

                    {# Section B - Être indécis #}
                    <div class="card mb-4">
                        <div class="card-header bg-gradient-primary text-white">
                            <h4 class="mb-0">B - ÊTRE INDÉCIS</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">4. Je trouve difficile de prendre une décision concernant mon avenir professionnel.</label>
                                <select name="b_note_4" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.BNote4 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">5. J'hésite souvent entre plusieurs options sans réussir à choisir.</label>
                                <select name="b_note_5" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.BNote5 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">6. Je repousse mes décisions par peur de me tromper.</label>
                                <select name="b_note_6" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.BNote6 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <p class="text-end"><strong>Total: <span id="totalB">{{ diagnostic.totalSectionB }}</span></strong></p>
                        </div>
                    </div>

                    {# Section C - Se connaître & connaître l'environnement #}
                    <div class="card mb-4">
                        <div class="card-header bg-gradient-primary text-white">
                            <h4 class="mb-0">C - SE CONNAÎTRE & CONNAÎTRE L'ENVIRONNEMENT</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">7. J'ai besoin de mieux identifier mes motivations et mes intérêts.</label>
                                <select name="c_note_7" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.CNote7 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">8. Je souhaiterais mieux connaître mes atouts et mes compétences transférables.</label>
                                <select name="c_note_8" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.CNote8 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">9. J'ai besoin de recueillir davantage d'informations concrètes sur les métiers et formations.</label>
                                <select name="c_note_9" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.CNote9 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <p class="text-end"><strong>Total: <span id="totalC">{{ diagnostic.totalSectionC }}</span></strong></p>
                        </div>
                    </div>

                    {# Section D - Désaccord d'un proche #}
                    <div class="card mb-4">
                        <div class="card-header bg-gradient-primary text-white">
                            <h4 class="mb-0">D - DÉSACCORD D'UN PROCHE</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">10. Mon entourage exprime des réserves ou des doutes sur mon projet professionnel.</label>
                                <select name="d_note_10" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.DNote10 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">11. Les avis de mes proches influencent négativement mes choix.</label>
                                <select name="d_note_11" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.DNote11 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">12. J'ai du mal à avancer quand mes proches ne partagent pas mes objectifs.</label>
                                <select name="d_note_12" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.DNote12 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <p class="text-end"><strong>Total: <span id="totalD">{{ diagnostic.totalSectionD }}</span></strong></p>
                        </div>
                    </div>

                    {# Section E - Contradictions dans le projet #}
                    <div class="card mb-4">
                        <div class="card-header bg-gradient-primary text-white">
                            <h4 class="mb-0">E - CONTRADICTIONS DANS LE PROJET</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">13. Je constate des contradictions entre mes envies et les métiers envisagés.</label>
                                <select name="e_note_13" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.ENote13 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">14. Je repère des aspects négatifs importants dans les métiers qui m'attirent.</label>
                                <select name="e_note_14" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.ENote14 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">15. J'ai plusieurs idées de projet mais elles me paraissent incompatibles.</label>
                                <select name="e_note_15" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.ENote15 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <p class="text-end"><strong>Total: <span id="totalE">{{ diagnostic.totalSectionE }}</span></strong></p>
                        </div>
                    </div>

                    {# Section F - Inquiétude face à l'avenir #}
                    <div class="card mb-4">
                        <div class="card-header bg-gradient-primary text-white">
                            <h4 class="mb-0">F - INQUIÉTUDE FACE À L'AVENIR</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">16. Penser à mon avenir professionnel me stresse.</label>
                                <select name="f_note_16" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.FNote16 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">17. J'ai du mal à me motiver pour construire mon projet.</label>
                                <select name="f_note_17" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.FNote17 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">18. Je ressens de la tension lorsque je dois réfléchir à mes perspectives d'évolution.</label>
                                <select name="f_note_18" class="form-select">
                                    <option value="">Choisir...</option>
                                    {% for i in 0..5 %}
                                        <option value="{{ i }}" {% if diagnostic.FNote18 == i %}selected{% endif %}>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <p class="text-end"><strong>Total: <span id="totalF">{{ diagnostic.totalSectionF }}</span></strong></p>
                        </div>
                    </div>

                    <div class="card mb-4">
                        <div class="card-header">
                            <h4 class="mb-0">TOTAL GÉNÉRAL</h4>
                        </div>
                        <div class="card-body">
                            <p class="h3 text-center"><strong>{{ diagnostic.totalGeneral }} / 90</strong></p>
                        </div>
                    </div>

                    <div class="d-flex gap-2 mb-4">
                        <button type="submit" class="btn btn-save-inline"> <i class="fas fa-save me-2"></i> Sauvegarder</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Fonction pour calculer le total d'une section
            function calculateSectionTotal(sectionPrefix) {
                let total = 0;
                const selects = document.querySelectorAll(`select[name^="${sectionPrefix}_note_"]`);

                selects.forEach(select => {
                    const value = parseInt(select.value) || 0;
                    total += value;
                });

                return total;
            }

            // Fonction pour mettre à jour tous les totaux
            function updateAllTotals() {
                // Mise à jour des totaux par section
                document.getElementById('totalA').textContent = calculateSectionTotal('a');
                document.getElementById('totalB').textContent = calculateSectionTotal('b');
                document.getElementById('totalC').textContent = calculateSectionTotal('c');
                document.getElementById('totalD').textContent = calculateSectionTotal('d');
                document.getElementById('totalE').textContent = calculateSectionTotal('e');
                document.getElementById('totalF').textContent = calculateSectionTotal('f');

                // Calcul du total général
                const totalGeneral =
                    calculateSectionTotal('a') +
                    calculateSectionTotal('b') +
                    calculateSectionTotal('c') +
                    calculateSectionTotal('d') +
                    calculateSectionTotal('e') +
                    calculateSectionTotal('f');

                // Mise à jour du total général
                const totalGeneralElement = document.querySelector('.card-body .h3.text-center strong');
                if (totalGeneralElement) {
                    totalGeneralElement.textContent = totalGeneral + ' / 90';
                }
            }

            // Ajouter un écouteur d'événement sur tous les selects
            const allSelects = document.querySelectorAll('select[name^="a_note_"], select[name^="b_note_"], select[name^="c_note_"], select[name^="d_note_"], select[name^="e_note_"], select[name^="f_note_"]');

            allSelects.forEach(select => {
                select.addEventListener('change', updateAllTotals);
            });

            // Calculer les totaux au chargement de la page
            updateAllTotals();
        });
    </script>
{% endblock %}