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

{% block title %}Nouvel entretien{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set selected_type_id = data.type|default(types|first ? (types|first).id : '') %}
{% set is_schedule = mode|default('create') == 'schedule' %}

<div class="data-page interview-page interview-new-page" data-controller="interview-form">
    <header class="interview-new-header">
        <div>
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <a href="{{ path('interview_index') }}">Entretiens</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <strong>Nouvel entretien</strong>
            </nav>
            <h1>Nouvel entretien</h1>
        </div>
        <div class="data-page__actions interview-new-header__actions">
            <a class="data-button data-button--ghost" href="{{ path('interview_index') }}">Annuler</a>
            <button class="data-button data-button--secondary interview-new-draft-button" type="submit" name="submit_action" value="draft" form="interview-new-form">
                <i class="ti ti-device-floppy" aria-hidden="true"></i>Enregistrer en brouillon
            </button>
            <button class="data-button data-button--primary" type="submit" name="submit_action" value="schedule" form="interview-new-form">
                <i class="ti ti-calendar-check" aria-hidden="true"></i>Planifier l'entretien
            </button>
        </div>
    </header>

    <aside class="interview-new-info" role="note">
        <span><i class="ti ti-info-circle" aria-hidden="true"></i></span>
        <div>
            <strong>Information importante</strong>
            <p>L’entretien de parcours professionnel doit rester distinct d’un entretien d’évaluation de performance. Il est dédié à l’évolution de carrière et aux besoins de formation.</p>
        </div>
    </aside>

    <form id="interview-new-form" method="post" action="{{ path('interview_new', is_schedule ? {mode: 'schedule'} : {}) }}" data-action="submit->interview-form#prepareSubmit">
        <input type="hidden" name="_token" value="{{ csrf_token('interview_create') }}">

        {% if errors|default([]) %}
            <div class="alert alert-danger interview-new-errors">
                {% for error in errors %}<div><i class="ti ti-alert-circle" aria-hidden="true"></i>{{ error }}</div>{% endfor %}
            </div>
        {% endif %}

        <div class="interview-new-layout">
            <div class="interview-new-form-card">
                <section class="interview-new-section">
                    <header>
                        <span class="interview-new-section__icon interview-new-section__icon--indigo"><i class="ti ti-clipboard-list" aria-hidden="true"></i></span>
                        <h2>1. Type d'entretien</h2>
                    </header>
                    <div class="interview-new-fields interview-new-fields--2">
                        <label class="interview-new-field">
                            <span>Type d'entretien</span>
                            <select name="type" required data-interview-form-target="type" data-action="interview-form#filterByType interview-form#updateSummary">
                                <option value="" disabled {{ selected_type_id ? '' : 'selected' }}>Sélectionner un type</option>
                                {% for type in types %}
                                    <option value="{{ type.id }}"
                                            data-preparation-employee="{{ type.requiresPreparationEmployee ? '1' : '0' }}"
                                            data-preparation-manager="{{ type.requiresPreparationManager ? '1' : '0' }}"
                                            data-validation-employee="{{ type.requiresValidationEmployee ? '1' : '0' }}"
                                            data-signature="{{ type.allowSignature ? '1' : '0' }}"
                                            {{ selected_type_id == type.id ? 'selected' : '' }}>{{ type.nom }}</option>
                                {% endfor %}
                            </select>
                        </label>
                        <label class="interview-new-field">
                            <span>Modèle de questionnaire</span>
                            <select name="template" data-interview-form-target="template">
                                <option value="">Aucun modèle</option>
                                {% for template in templates %}<option value="{{ template.id }}" data-type="{{ template.type.id }}" {{ data.template|default('') == template.id ? 'selected' : '' }}>{{ template.nom }}</option>{% endfor %}
                            </select>
                        </label>
                        <label class="interview-new-field interview-new-field--wide">
                            <span>Campagne associée <small>(optionnel)</small></span>
                            <select name="campaign" data-interview-form-target="campaign">
                                <option value="">Aucune campagne</option>
                                {% for campaign in campaigns %}<option value="{{ campaign.id }}" data-type="{{ campaign.type.id }}" {{ data.campaign|default('') == campaign.id ? 'selected' : '' }}>{{ campaign.nom }}</option>{% endfor %}
                            </select>
                        </label>
                    </div>
                </section>

                <section class="interview-new-section">
                    <header>
                        <span class="interview-new-section__icon interview-new-section__icon--amber"><i class="ti ti-users" aria-hidden="true"></i></span>
                        <h2>2. Participants</h2>
                    </header>
                    <div class="interview-new-fields interview-new-fields--2">
                        <label class="interview-new-field">
                            <span>Salarié</span>
                            <select name="salarie" required data-interview-form-target="employee" data-action="interview-form#updateSummary">
                                <option value="" disabled {{ data.salarie|default('') ? '' : 'selected' }}>Rechercher un salarié…</option>
                                {% for salarie in salaries %}<option value="{{ salarie.id }}" {{ data.salarie|default('') == salarie.id ? 'selected' : '' }}>{{ salarie }}</option>{% endfor %}
                            </select>
                        </label>
                        <label class="interview-new-field">
                            <span>Manager</span>
                            <div class="interview-new-readonly"><i class="ti ti-user-tie" aria-hidden="true"></i>{{ app.user }}</div>
                            <small>Le responsable de l’entretien est le compte connecté.</small>
                        </label>
                    </div>
                </section>

                <section class="interview-new-section">
                    <header>
                        <span class="interview-new-section__icon interview-new-section__icon--green"><i class="ti ti-calendar-event" aria-hidden="true"></i></span>
                        <h2>3. Planification</h2>
                    </header>
                    <div class="interview-new-fields interview-new-fields--2">
                        <label class="interview-new-field">
                            <span>Date et heure prévues</span>
                            <input type="datetime-local" name="scheduledAt" value="{{ data.scheduledAt|default('') }}" data-interview-form-target="scheduledAt" data-action="interview-form#updateSummary">
                        </label>
                        <label class="interview-new-field">
                            <span>Durée estimée</span>
                            <select aria-label="Durée estimée">
                                <option>45 minutes</option>
                                <option selected>1 heure</option>
                                <option>1 heure 30</option>
                                <option>2 heures</option>
                            </select>
                            <small>Information indicative, non enregistrée dans le dossier.</small>
                        </label>
                        <label class="interview-new-field">
                            <span>Lieu</span>
                            <input type="text" name="location" value="{{ data.location|default('') }}" placeholder="Salle de réunion, bureau…">
                        </label>
                        <label class="interview-new-field">
                            <span>Lien visio</span>
                            <input type="url" name="remoteLink" value="{{ data.remoteLink|default('') }}" placeholder="https://meet.google.com/…">
                        </label>
                    </div>
                </section>

                <section class="interview-new-section">
                    <header>
                        <span class="interview-new-section__icon interview-new-section__icon--purple"><i class="ti ti-settings" aria-hidden="true"></i></span>
                        <h2>4. Options du workflow</h2>
                    </header>
                    <p class="interview-new-section__hint">Ces options sont définies par le type d’entretien sélectionné.</p>
                    <div class="interview-new-options">
                        <label>
                            <input type="checkbox" disabled data-interview-form-target="workflowEmployee">
                            <span><strong>Activer la préparation salarié</strong><small>Le salarié pourra remplir son questionnaire en amont.</small></span>
                        </label>
                        <label>
                            <input type="checkbox" disabled data-interview-form-target="workflowManager">
                            <span><strong>Activer la préparation manager</strong><small>Le manager pourra préparer ses réponses avant l’échange.</small></span>
                        </label>
                        <label>
                            <input type="checkbox" disabled data-interview-form-target="workflowValidation">
                            <span><strong>Validation salarié requise</strong><small>Le salarié devra valider la lecture du compte rendu.</small></span>
                        </label>
                        <label>
                            <input type="checkbox" disabled data-interview-form-target="workflowSignature">
                            <span><strong>Signature électronique</strong><small>Une signature formelle sera requise à la fin du parcours.</small></span>
                        </label>
                    </div>
                </section>
            </div>

            <aside class="interview-new-sidebar">
                <section class="interview-new-summary">
                    <header><h2>Résumé</h2><span>Brouillon</span></header>
                    <dl>
                        <div><dt>Type</dt><dd data-interview-form-target="summaryType">À sélectionner</dd></div>
                        <div><dt>Salarié</dt><dd class="interview-new-summary__person"><span><i class="ti ti-user" aria-hidden="true"></i></span><b data-interview-form-target="summaryEmployee">À sélectionner</b></dd></div>
                        <div><dt>Manager</dt><dd class="interview-new-summary__person"><span><i class="ti ti-user-tie" aria-hidden="true"></i></span><b>{{ app.user }}</b></dd></div>
                        <div><dt>Date prévue</dt><dd data-interview-form-target="summaryDate">Non définie</dd></div>
                    </dl>
                    <div class="interview-new-workflow">
                        <strong>Workflow</strong>
                        {% for step in ['Préparation', 'Entretien', 'Rédaction CR', 'Validation'] %}
                            <div class="{{ loop.first ? 'is-active' : '' }}"><span>{{ loop.index }}</span>{{ step }}</div>
                        {% endfor %}
                    </div>
                    <button class="data-button data-button--primary interview-new-summary__submit" type="submit" name="submit_action" value="schedule">
                        <i class="ti ti-send" aria-hidden="true"></i>Planifier maintenant
                    </button>
                </section>

                <section class="interview-new-help">
                    <i class="ti ti-bulb" aria-hidden="true"></i>
                    <h2>Besoin d'aide ?</h2>
                    <p>Consultez les règles de vos entretiens professionnels et les paramètres de conformité.</p>
                    <a href="{{ path('interview_settings_index') }}">Voir les paramètres RH</a>
                </section>
            </aside>
        </div>
    </form>
</div>
{% endblock %}