{% extends '@App/app.html.twig' %}

{% block title %}Préparer mon entretien{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set french_months = {'01': 'janvier', '02': 'février', '03': 'mars', '04': 'avril', '05': 'mai', '06': 'juin', '07': 'juillet', '08': 'août', '09': 'septembre', '10': 'octobre', '11': 'novembre', '12': 'décembre'} %}
{% set questions_by_section = {} %}
{% set orphan_questions = [] %}
{% set visible_sections = [] %}
{% for question in questions %}
    {% if question.section %}
        {% set key = 'section_' ~ question.section.id %}
        {% set questions_by_section = questions_by_section|merge({(key): (questions_by_section[key]|default([]))|merge([question])}) %}
    {% else %}
        {% set orphan_questions = orphan_questions|merge([question]) %}
    {% endif %}
{% endfor %}
{% for section in sections %}
    {% set section_key = 'section_' ~ section.id %}
    {% if questions_by_section[section_key]|default([]) is not empty %}
        {% set visible_sections = visible_sections|merge([{id: section.id, title: section.titre}]) %}
    {% endif %}
{% endfor %}
{% if orphan_questions is not empty %}{% set visible_sections = visible_sections|merge([{id: 'other', title: 'Questions complémentaires'}]) %}{% endif %}

{% macro render_question(question, answers) %}
    {% set answer = answers[question.id]|default(null) %}
    {% set value = answer ? (answer.answerJson ?: answer.answerText) : '' %}
    <article class="interview-questionnaire-question" data-preparation-question>
        <label>
            <span>{{ question.label }}{% if question.required %}<em>*</em>{% endif %}</span>
            {% if question.helpText %}<small>{{ question.helpText }}</small>{% endif %}
            {% include '@Interview/interview/_answer_input.html.twig' with {question: question, name: 'answers[' ~ question.id ~ ']', value: value} %}
        </label>
    </article>
{% endmacro %}
{% import _self as preparation_form %}

<div class="data-page interview-page interview-preparation-page" data-controller="interview-preparation">
    <header class="interview-preparation-heading">
        <div>
            <nav class="data-breadcrumb"><a href="{{ path('interview_index') }}">Mes entretiens</a><i class="ti ti-chevron-right" aria-hidden="true"></i><strong>Préparation</strong></nav>
            <h1>Préparer mon entretien</h1>
        </div>
        <a href="{{ path('interview_show', {id: interview.id}) }}"><i class="ti ti-chevron-left" aria-hidden="true"></i> Retour aux entretiens</a>
    </header>

    <section class="interview-preparation-summary">
        <span class="interview-preparation-summary__icon"><i class="ti ti-id-badge-2" aria-hidden="true"></i></span>
        <div class="interview-preparation-summary__title">
            <strong>{{ interview.type.nom }}</strong>
            <span>{{ interview.scheduledAt ? interview.scheduledAt|date('d/m/Y à H:i') : 'Date à planifier' }}{% if interview.location %} · {{ interview.location }}{% endif %}</span>
        </div>
        <div class="interview-preparation-manager">
            <span><i class="ti ti-user-tie" aria-hidden="true"></i></span>
            <div><small>Manager</small><strong>{{ interview.manager ?: 'Non défini' }}</strong></div>
        </div>
        <div class="interview-preparation-progress">
            <div><small>Progression</small><strong data-interview-preparation-target="progressLabel">{{ preparation_progress }}%</strong></div>
            <span><i data-interview-preparation-target="progressBar" style="width: {{ preparation_progress }}%"></i></span>
        </div>
        <span class="interview-preparation-summary__badge">Préparation salarié</span>
    </section>

    <section class="interview-preparation-notice">
        <i class="ti ti-info-circle-filled" aria-hidden="true"></i>
        {% if interview.type.category == 'professional' or interview.type.isLegalFollowUp %}
            <p>Cet entretien porte sur votre parcours, vos compétences, vos besoins de formation et vos souhaits d’évolution. <strong>Il ne s’agit pas d’une évaluation de performance.</strong><br>Prenez ce temps pour réfléchir à votre avenir.</p>
        {% else %}
            <p>{{ interview.type.description ?: 'Préparez vos réponses, vos réalisations et les sujets que vous souhaitez aborder pendant cet entretien.' }}<br><strong>Prenez ce temps pour faire le point avec précision.</strong></p>
        {% endif %}
    </section>

    <form id="interview-preparation-form" method="post" data-interview-preparation-target="form" data-action="input->interview-preparation#updateProgress change->interview-preparation#updateProgress">
        <input type="hidden" name="_token" value="{{ csrf_token('interview_prepare_employee_' ~ interview.id) }}">

        <div class="interview-preparation-layout">
            <main class="interview-preparation-main">
                {% set section_number = 0 %}
                {% for section in sections %}
                    {% set section_key = 'section_' ~ section.id %}
                    {% set section_questions = questions_by_section[section_key]|default([]) %}
                    {% if section_questions is not empty %}
                        {% set section_number = section_number + 1 %}
                        <section id="preparation-section-{{ section_number }}" class="interview-questionnaire-section interview-preparation-section" data-section-index="{{ section_number - 1 }}" data-interview-preparation-target="section">
                            <header>
                                <span>{{ section_number }}</span>
                                <div><h2>{{ section.titre }}</h2>{% if section.description %}<p>{{ section.description }}</p>{% endif %}</div>
                                <strong class="interview-preparation-section__status"><i class="ti ti-circle-check-filled" aria-hidden="true"></i> À compléter</strong>
                            </header>
                            <div class="interview-questionnaire-list">
                                {% for question in section_questions %}{{ preparation_form.render_question(question, answers) }}{% endfor %}
                            </div>
                        </section>
                    {% endif %}
                {% endfor %}

                {% if orphan_questions is not empty %}
                    {% set section_number = section_number + 1 %}
                    <section id="preparation-section-{{ section_number }}" class="interview-questionnaire-section interview-preparation-section" data-section-index="{{ section_number - 1 }}" data-interview-preparation-target="section">
                        <header><span>{{ section_number }}</span><div><h2>Questions complémentaires</h2></div><strong class="interview-preparation-section__status"><i class="ti ti-circle-check-filled" aria-hidden="true"></i> À compléter</strong></header>
                        <div class="interview-questionnaire-list">{% for question in orphan_questions %}{{ preparation_form.render_question(question, answers) }}{% endfor %}</div>
                    </section>
                {% endif %}

                {% if questions is empty %}
                    <section class="data-card interview-preparation-empty"><i class="ti ti-clipboard-off" aria-hidden="true"></i><strong>Aucune question n’est configurée</strong><p>Le modèle de cet entretien ne contient pas encore de questionnaire salarié.</p></section>
                {% endif %}
            </main>

            <aside class="interview-preparation-aside">
                <section class="interview-preparation-steps">
                    <h2><i class="ti ti-list-check" aria-hidden="true"></i> Avancement</h2>
                    <ol>
                        {% for section in visible_sections %}
                            <li class="interview-preparation-step" data-section-index="{{ loop.index0 }}" data-interview-preparation-target="step">
                                <button type="button" data-action="interview-preparation#goToSection"><span>{{ loop.index }}</span><div><strong>{{ section.title }}</strong><small>À venir</small></div></button>
                            </li>
                        {% else %}
                            <li class="interview-preparation-step is-active"><span>1</span><div><strong>Préparation</strong><small>À configurer</small></div></li>
                        {% endfor %}
                    </ol>
                </section>

                <section class="interview-preparation-tips">
                    <span><i class="ti ti-wand" aria-hidden="true"></i></span>
                    <h2>Conseils</h2>
                    <ul><li>Soyez concret : illustrez vos propos avec des exemples de projets.</li><li>Projetez-vous : quels sont vos souhaits pour les deux prochaines années ?</li><li>CPF : vérifiez votre solde sur moncompteformation.gouv.fr.</li></ul>
                </section>

                {% if preparation_deadline %}
                    <section class="interview-preparation-deadline"><small>Date limite</small><strong>{{ preparation_deadline|date('d') }} {{ french_months[preparation_deadline|date('m')] }} {{ preparation_deadline|date('Y') }}</strong><p>Vous devez transmettre votre préparation au moins 5 jours avant l’entretien.</p></section>
                {% endif %}
            </aside>
        </div>

        <footer class="interview-preparation-actions">
            <div>
                <button class="data-button data-button--secondary" type="submit" name="preparation_action" value="save"><i class="ti ti-device-floppy" aria-hidden="true"></i> Enregistrer</button>
                <button class="data-button data-button--secondary" type="submit" name="preparation_action" value="save_exit">Sauvegarder et quitter</button>
            </div>
            <button class="data-button data-button--primary" type="submit" name="preparation_action" value="submit"><i class="ti ti-send" aria-hidden="true"></i> Transmettre ma préparation</button>
        </footer>
    </form>
</div>
{% endblock %}