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

{% block title %}Nouvelle évaluation - {{ 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 thème cohérent adapté pour les évaluations -->
            <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="fa-solid fa-clone"></i> Nouvelle évaluation psychologique</h4>
                        </div>
                    </div>

                    <!-- Section droite : Actions contextuelles -->
                    <div class="header-actions">
                        <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>
                    </div>
                </div>
            </div>

            <!-- Contenu de la section avec container -->
            <div class="container-fluid p-4">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="card border-0 shadow-sm">
                            <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-brain me-2"></i>
                                        Créer une nouvelle évaluation psychologique
                                    </h5>
                                </div>
                            </div>
                            <div class="card-body p-4">
                                <div class="text-center mb-4">
                                    <div class="mb-3">
                                        <i class="fas fa-clipboard-check fa-3x text-header"></i>
                                    </div>
                                    <h6>Processus d'évaluation</h6>
                                    <p class="text-muted">
                                        Cette évaluation se déroule en 3 étapes :
                                    </p>
                                </div>

                                <!-- Étapes du processus -->
                                <div class="row mb-4">
                                    <div class="col-md-4 text-center mb-3">
                                        <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 60px; height: 60px;">
                                            <i class="fas fa-list-check fa-lg text-header"></i>
                                        </div>
                                        <h6>1. Diagnostic</h6>
                                        <small class="text-muted">Sélection des problématiques observées</small>
                                    </div>
                                    <div class="col-md-4 text-center mb-3">
                                        <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 60px; height: 60px;">
                                            <i class="fas fa-magic fa-lg text-header"></i>
                                        </div>
                                        <h6>2. Génération</h6>
                                        <small class="text-muted">Propositions automatiques basées sur le diagnostic</small>
                                    </div>
                                    <div class="col-md-4 text-center mb-3">
                                        <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 60px; height: 60px;">
                                            <i class="fa-solid fa-pencil text-header"></i>
                                        </div>
                                        <h6>3. Personnalisation</h6>
                                        <small class="text-muted">Adaptation des propositions selon votre expertise</small>
                                    </div>
                                </div>

                                <!-- Informations sur l'évaluation -->
                                <div class="bg-light rounded p-3 mb-4">
                                    <h6 class="mb-3"><i class="fas fa-info-circle me-2 text-header"></i>Informations</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p class="mb-2"><strong>Bénéficiaire :</strong> {{ beneficiaire.civilite }} {{ beneficiaire.nom }} {{ beneficiaire.prenom }}</p>
                                            <p class="mb-2"><strong>Date :</strong> {{ "now"|date('d/m/Y à H:i') }}</p>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="mb-2"><strong>Évaluateur :</strong> {{ app.user.prenom }} {{ app.user.nom }}</p>
                                            <p class="mb-2"><strong>Statut initial :</strong> <span class="badge bg-warning text-dark">Brouillon</span></p>
                                        </div>
                                    </div>
                                </div>
                                <!-- Formulaire de création -->
                                <form method="post" class="text-center">
                                    <button type="submit" class="btn btn-save-inline">
                                        <i class="fas fa-play me-2"></i>
                                        Commencer l'évaluation
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}