{% extends 'base.html.twig' %}
{% import '_macros/ui.html.twig' as btn %}

{% block title %}Atelier Confiance et Estime - {{ beneficiaire.nom }} {{ beneficiaire.prenom }}{% endblock %}

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

        <div class="main-content">
            <div class="dossier-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <div class="beneficiaire-info text-header">
                            <h4 class="mb-0">
                                Confiance en soi et Estime de soi
                            </h4>
                            <small class="sous-titre">
                                {{ beneficiaire.civilite ? beneficiaire.civilite|lower|title ~ ' ' : '' }}
                                {{ beneficiaire.nom }} {{ beneficiaire.prenom }}
                            </small>
                        </div>
                    </div>

                    <div class="header-actions">
                        <a href="{{ path('app_atelier_index', {'beneficiaireId': beneficiaire.id}) }}"
                           class="btn-action btn-retour">
                            <i class="fa-solid fa-x"></i>
                            <span>Annuler</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="container-fluid p-4">
                <form method="post" id="atelierForm">
                    <!-- En-tête du document comme sur l'image 1 -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
                            <div class="row align-items-center">
                                <div class="col-md-2 text-center">
                                    <img src="{{ asset('images/logoCFP02.png') }}" alt="Logo CFP02" style="max-height: 80px;">
                                </div>
                                <div class="col-md-8">
                                    <h3 class="mb-2 text-center" style="color: #5f4fcf; font-weight: bold;">
                                        ATTESTATION DE PARTICIPATION À L'ATELIER
                                    </h3>
                                    <h4 class="text-center mb-0" style="color: #333;">
                                        Confiance en soi et Estime de soi
                                    </h4>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Bénéficiaire :</strong> {{ beneficiaire.nom }} {{ beneficiaire.prenom }}</p>
                                    <p class="mb-1"><strong>Nom du psychologue :</strong> {{ app.user.prenom }} {{ app.user.nom }}</p>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-2">
                                        <label for="structure" class="form-label"><strong>Structure :</strong></label>
                                        <input type="text"
                                               name="structure"
                                               id="structure"
                                               class="form-control"
                                               value="{{ atelier.structure|default('') }}"
                                               placeholder="Ex: UTAS LAON...">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ACQUIS À L'ISSUE DE L'ATELIER -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header" style="background: linear-gradient(135deg, #5f4fcf 0%, #7b68ee 100%); color: white;">
                            <h5 class="mb-0">
                                <i class="fas fa-graduation-cap me-2"></i>
                                ACQUIS À L'ISSUE DE L'ATELIER : Confiance en soi et estime de soi - Compétences visées
                            </h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                <tr>
                                    <th style="width: 60%">Confiance et estime de soi - Compétences visées</th>
                                    <th class="text-center" style="width: 10%">Acquis</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for key, label in questions.competences_visees %}
                                    <tr>
                                        <td>{{ label|raw }}</td>
                                        <td class="text-center">
                                            <input type="checkbox"
                                                   name="competences_visees[{{ key }}]"
                                                   value="1"
                                                   {% if atelier.competencesVisees[key] is defined and atelier.competencesVisees[key] %}checked{% endif %}
                                                   class="form-check-input"
                                                   style="width: 20px; height: 20px;">
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- COMPORTEMENT - IMPLICATION DU BÉNÉFICIAIRE -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header" style="background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%); color: white;">
                            <h5 class="mb-0">
                                <i class="fas fa-user-check me-2"></i>
                                COMPORTEMENT - IMPLICATION DU BÉNÉFICIAIRE
                            </h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                <tr>
                                    <th style="width: 30%"></th>
                                    <th class="text-center">Inacceptable</th>
                                    <th class="text-center">Nécessite des améliorations</th>
                                    <th class="text-center">Acceptable</th>
                                    <th class="text-center">Bon</th>
                                    <th class="text-center">Excellent</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for key, label in questions.auto_evaluation %}
                                    <tr>
                                        <td><strong>{{ label }}</strong></td>
                                        {% for niveau in ['inacceptable', 'ameliorations_necessaires', 'acceptable', 'bon', 'excellent'] %}
                                            <td class="text-center">
                                                <input type="radio"
                                                       name="auto_evaluation[{{ key }}]"
                                                       value="{{ niveau }}"
                                                       {% if atelier.autoEvaluation[key] is defined and atelier.autoEvaluation[key] == niveau %}checked{% endif %}
                                                       class="form-check-input"
                                                       style="width: 20px; height: 20px;">
                                            </td>
                                        {% endfor %}
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- COMMENTAIRE DU PSYCHOLOGUE -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0">
                                <i class="fas fa-comment-dots me-2"></i>
                                Commentaire du Psychologue :
                            </h5>
                        </div>
                        <div class="card-body">
                            <textarea name="commentaires"
                                      class="form-control"
                                      rows="6"
                                      placeholder="Ajoutez vos observations et commentaires...">{{ atelier.commentaires }}</textarea>
                        </div>
                    </div>

                    <!-- Boutons d'action -->
                    {{ btn.saveButton() }}
                </form>
            </div>
        </div>
    </div>

    <style>
        .table-bordered th, .table-bordered td {
            border: 2px solid #dee2e6;
            padding: 12px;
            vertical-align: middle;
        }

        .table-light {
            background-color: #f8f9fa;
        }

        .form-check-input:checked {
            background-color: #5f4fcf;
            border-color: #5f4fcf;
        }
    </style>
{% endblock %}