{# Affichage des messages flash #}
{% include '_flash_messages.html.twig' %}

<div class="content-section">
    {% if projection %}
        {# Affichage des sections #}
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header bg-gradient-primary text-white">
                        <strong>A - MANQUE D'INFORMATION</strong>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td>1. J'ai du mal à identifier clairement mes compétences et mes limites.</td>
                                <td class="text-end"><strong>{{ projection.ANote1 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>2. Je manque d'informations sur les métiers ou secteurs qui m'attirent.</td>
                                <td class="text-end"><strong>{{ projection.ANote2 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>3. Je ne sais pas quelle méthode utiliser pour avancer dans mon projet.</td>
                                <td class="text-end"><strong>{{ projection.ANote3 ?? 0 }}</strong></td>
                            </tr>
                        </table>
                        <div class="alert-light mb-0 d-flex justify-content-between align-items-center">
                            <strong>Total : {{ projection.totalSectionA }}</strong>
                            <span class="niveau-badge {{ projection.getNiveauClass('A') }}">{{ projection.getNiveauSection('A') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header bg-gradient-primary text-white">
                        <strong>B - ÊTRE INDÉCIS</strong>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td>4. Je trouve difficile de prendre une décision concernant mon avenir professionnel.</td>
                                <td class="text-end"><strong>{{ projection.BNote4 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>5. J'hésite souvent entre plusieurs options sans réussir à choisir.</td>
                                <td class="text-end"><strong>{{ projection.BNote5 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>6. Je repousse mes décisions par peur de me tromper.</td>
                                <td class="text-end"><strong>{{ projection.BNote6 ?? 0 }}</strong></td>
                            </tr>
                        </table>
                        <div class="alert-light mb-0 d-flex justify-content-between align-items-center">
                            <strong>Total : {{ projection.totalSectionB }}</strong>
                            <span class="niveau-badge {{ projection.getNiveauClass('B') }}">{{ projection.getNiveauSection('B') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header bg-gradient-primary text-white">
                        <strong>C - SE CONNAÎTRE & CONNAÎTRE L'ENVIRONNEMENT</strong>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td>7. J'ai besoin de mieux identifier mes motivations et mes intérêts.</td>
                                <td class="text-end"><strong>{{ projection.CNote7 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>8. Je souhaiterais mieux connaître mes atouts et mes compétences transférables.</td>
                                <td class="text-end"><strong>{{ projection.CNote8 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>9. J'ai besoin de recueillir davantage d'informations concrètes sur les métiers et formations.</td>
                                <td class="text-end"><strong>{{ projection.CNote9 ?? 0 }}</strong></td>
                            </tr>
                        </table>
                        <div class="alert-light mb-0 d-flex justify-content-between align-items-center">
                            <strong>Total : {{ projection.totalSectionC }}</strong>
                            <span class="niveau-badge {{ projection.getNiveauClass('C') }}">{{ projection.getNiveauSection('C') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header bg-gradient-primary text-white">
                        <strong>D - DÉSACCORD D'UN PROCHE</strong>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td>10. Mon entourage exprime des réserves ou des doutes sur mon projet professionnel.</td>
                                <td class="text-end"><strong>{{ projection.DNote10 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>11. Les avis de mes proches influencent négativement mes choix.</td>
                                <td class="text-end"><strong>{{ projection.DNote11 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>12. J'ai du mal à avancer quand mes proches ne partagent pas mes objectifs.</td>
                                <td class="text-end"><strong>{{ projection.DNote12 ?? 0 }}</strong></td>
                            </tr>
                        </table>
                        <div class="alert-light mb-0 d-flex justify-content-between align-items-center">
                            <strong>Total : {{ projection.totalSectionD }}</strong>
                            <span class="niveau-badge {{ projection.getNiveauClass('D') }}">{{ projection.getNiveauSection('D') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header bg-gradient-primary text-white">
                        <strong>E - CONTRADICTIONS DANS LE PROJET</strong>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td>13. Je constate des contradictions entre mes envies et les métiers envisagés.</td>
                                <td class="text-end"><strong>{{ projection.ENote13 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>14. Je repère des aspects négatifs importants dans les métiers qui m'attirent.</td>
                                <td class="text-end"><strong>{{ projection.ENote14 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>15. J'ai plusieurs idées de projet mais elles me paraissent incompatibles.</td>
                                <td class="text-end"><strong>{{ projection.ENote15 ?? 0 }}</strong></td>
                            </tr>
                        </table>
                        <div class="alert-light mb-0 d-flex justify-content-between align-items-center">
                            <strong>Total : {{ projection.totalSectionE }}</strong>
                            <span class="niveau-badge {{ projection.getNiveauClass('E') }}">{{ projection.getNiveauSection('E') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header bg-gradient-primary text-white">
                        <strong>F - INQUIÉTUDE FACE À L'AVENIR</strong>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td>16. Penser à mon avenir professionnel me stresse.</td>
                                <td class="text-end"><strong>{{ projection.FNote16 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>17. J'ai du mal à me motiver pour construire mon projet.</td>
                                <td class="text-end"><strong>{{ projection.FNote17 ?? 0 }}</strong></td>
                            </tr>
                            <tr>
                                <td>18. Je ressens de la tension lorsque je dois réfléchir à mes perspectives d'évolution.</td>
                                <td class="text-end"><strong>{{ projection.FNote18 ?? 0 }}</strong></td>
                            </tr>
                        </table>
                        <div class="alert-light mb-0 d-flex justify-content-between align-items-center">
                            <strong>Total : {{ projection.totalSectionF }}</strong>
                            <span class="niveau-badge {{ projection.getNiveauClass('F') }}">{{ projection.getNiveauSection('F') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Total général #}
        <div class="card border-secondary">
            <div class="card-header bg-light">
                <h4 class="mb-0">SCORE TOTAL</h4>
            </div>
            <div class="card-body text-center">
                <h2 class="mb-0"><strong>{{ projection.totalGeneral }} / 90</strong></h2>
            </div>
        </div>
    {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i>
            Aucune projection d'insertion n'a été créée pour ce bénéficiaire.
        </div>
    {% endif %}
</div>
<style>
    .niveau-badge {
        display: inline-block;
        padding: 0.5em 1em;
        border-radius: 0.375rem;
        font-weight: 600;
        font-size: 0.95em;
    }

    .niveau-tres-faible {
        background-color: #28a745;
        color: white;
    }

    .niveau-faible {
        background-color: #20c997;
        color: white;
    }

    .niveau-moyen {
        background-color: #ffc107;
        color: white;
    }

    .niveau-eleve {
        background-color: #fd7e14;
        color: white;
    }

    .niveau-tres-eleve {
        background-color: #dc3545;
        color: white;
    }
</style>