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

{% block title %}Nouveau planning{% endblock %}
{% block page_header %}{% endblock %}

{% set selected_establishment = null %}
{% for etablissement in etablissements %}
    {% if data.etablissement|default('') == etablissement.id %}
        {% set selected_establishment = etablissement %}
    {% endif %}
{% endfor %}

{% set selected_template = null %}
{% for template in templates %}
    {% if data.template|default('') == template.id %}
        {% set selected_template = template %}
    {% endif %}
{% endfor %}

{% set creation_mode = data.creationMode|default('empty') %}
{% set selected_template_summary = selected_template ? template_summaries[selected_template.id]|default(null) : null %}

{% block content %}
<div class="planning-create"
     data-controller="planning-schedule-form"
     data-planning-schedule-form-week-starts-on-value="{{ suggested_week.weekStartsOn|default(1) }}"
     data-planning-schedule-form-template-summaries-value="{{ template_summaries|json_encode|e('html_attr') }}">
    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <a href="{{ path('planning_dashboard') }}">Plannings</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span>Nouveau planning</span>
            </nav>
            <h1>Créer un planning</h1>
            <p>Configurez une nouvelle période de travail pour vos équipes.</p>
        </div>
    </div>

    {% if errors is not empty %}
        <div class="alert alert-danger">
            {% for error in errors %}
                <div>{{ error }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <form class="planning-create__layout" method="post">
        <input type="hidden" name="_token" value="{{ csrf_token('planning_schedule_create') }}">

        <section class="planning-form-card planning-card">
            <div class="planning-form-section">
                <h2 class="planning-section-title">
                    <span><i class="ti ti-file-text" aria-hidden="true"></i></span>
                    Informations générales
                </h2>

                <div class="planning-create__grid">
                    <label class="planning-create__field planning-create__field--full">
                        <span>Titre du planning</span>
                        <input type="text"
                               name="title"
                               value="{{ data.title|default('') }}"
                               placeholder="ex: Semaine 35 - Siège Social"
                               required
                               data-planning-schedule-form-target="title"
                               data-action="input->planning-schedule-form#update">
                    </label>

                    <label class="planning-create__field planning-create__field--full">
                        <span>Description</span>
                        <textarea name="description"
                                  rows="4"
                                  placeholder="Notes optionnelles pour les gestionnaires...">{{ data.description|default('') }}</textarea>
                    </label>

                    <label class="planning-create__field">
                        <span>Établissement</span>
                        <select name="etablissement"
                                data-planning-schedule-form-target="establishment"
                                data-action="change->planning-schedule-form#update">
                            <option value="">Sélectionner un établissement</option>
                            {% for etablissement in etablissements %}
                                <option value="{{ etablissement.id }}" {{ data.etablissement|default('') == etablissement.id ? 'selected' : '' }}>{{ etablissement }}</option>
                            {% endfor %}
                        </select>
                    </label>

                    <label class="planning-create__field">
                        <span>Manager responsable</span>
                        <select name="manager">
                            <option value="">Sélectionner un manager</option>
                            {% for manager in managers %}
                                <option value="{{ manager.id }}" {{ data.manager|default('') == manager.id ? 'selected' : '' }}>{{ manager }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
            </div>

            <div class="planning-form-section">
                <h2 class="planning-section-title">
                    <span><i class="ti ti-calendar-event" aria-hidden="true"></i></span>
                    Période
                </h2>

                <div class="planning-create__grid planning-create__grid--3">
                    <label class="planning-create__field">
                        <span>Semaine</span>
                        <input type="date"
                               name="weekDate"
                               value="{{ data.weekDate|default(data.periodStart|default('')) }}"
                               required
                               data-planning-schedule-form-target="start"
                               data-action="change->planning-schedule-form#updateWeekTitle change->planning-schedule-form#update">
                        <input type="hidden" name="periodStart" value="{{ data.periodStart|default('') }}" data-planning-schedule-form-target="periodStart">
                        <input type="hidden" name="periodEnd" value="{{ data.periodEnd|default('') }}" data-planning-schedule-form-target="end">
                    </label>

                    <div class="planning-create__field">
                        <span>Période calculée</span>
                        <div class="planning-period-preview" data-planning-schedule-form-target="periodPreview">
                            {{ data.periodStart|default('') ? data.periodStart|date('d/m/Y') : '--' }} au {{ data.periodEnd|default('') ? data.periodEnd|date('d/m/Y') : '--' }}
                        </div>
                    </div>

                    <label class="planning-create__field">
                        <span>Vue par défaut</span>
                        <select name="defaultView">
                            <option value="week" {{ data.defaultView|default('week') == 'week' ? 'selected' : '' }}>Semaine</option>
                            <option value="month" {{ data.defaultView|default('week') == 'month' ? 'selected' : '' }}>Mois</option>
                            <option value="list" {{ data.defaultView|default('week') == 'list' ? 'selected' : '' }}>Liste</option>
                        </select>
                    </label>
                </div>
            </div>

            <div class="planning-form-section">
                <h2 class="planning-section-title">
                    <span class="planning-section-title__accent"><i class="ti ti-bolt" aria-hidden="true"></i></span>
                    Création rapide
                </h2>

                <div class="planning-choice-grid">
                    <label class="planning-choice-card">
                        <input type="radio"
                               name="creationMode"
                               value="empty"
                               {{ creation_mode == 'empty' ? 'checked' : '' }}
                               data-planning-schedule-form-target="mode"
                               data-action="change->planning-schedule-form#update">
                        <i class="ti ti-plus" aria-hidden="true"></i>
                        <strong>Planning vide</strong>
                        <span>Commencer de zéro</span>
                    </label>

                    <label class="planning-choice-card">
                        <input type="radio"
                               name="creationMode"
                               value="duplicate"
                               {{ creation_mode == 'duplicate' ? 'checked' : '' }}
                               {{ last_schedule is empty ? 'disabled' : '' }}
                               data-planning-schedule-form-target="mode"
                               data-action="change->planning-schedule-form#update">
                        <i class="ti ti-copy" aria-hidden="true"></i>
                        <strong>Dupliquer période</strong>
                        <span>{{ last_schedule ? 'Reprendre ' ~ last_schedule.title : 'Aucun planning à dupliquer' }}</span>
                    </label>

                    <label class="planning-choice-card">
                        <input type="radio"
                               name="creationMode"
                               value="template"
                               {{ creation_mode == 'template' ? 'checked' : '' }}
                               data-planning-schedule-form-target="mode"
                               data-action="change->planning-schedule-form#update">
                        <i class="ti ti-wand" aria-hidden="true"></i>
                        <strong>Appliquer modèle</strong>
                        <span>Utiliser une structure type</span>
                    </label>
                </div>

                <div class="planning-template-box" data-planning-schedule-form-target="templatePanel">
                    <label class="planning-create__field">
                        <span>Modèle de planning</span>
                        <select name="template"
                                data-planning-schedule-form-target="template"
                                data-action="change->planning-schedule-form#update">
                            <option value="">Sélectionner un modèle...</option>
                            {% for template in templates %}
                                {% set summary = template_summaries[template.id]|default({estimate: 0}) %}
                                <option value="{{ template.id }}"
                                        data-estimate="{{ summary.estimate|default(0) }}"
                                        {{ data.template|default('') == template.id ? 'selected' : '' }}>{{ template }}</option>
                            {% endfor %}
                        </select>
                    </label>

                    <div class="planning-template-preview">
                        <span>Aperçu du modèle</span>
                        <div class="planning-preview-strip" aria-hidden="true">
                            <strong>Matin</strong>
                            <strong>Midi</strong>
                            <strong>Soir</strong>
                            <strong>Vide</strong>
                        </div>
                        <small>
                            <i class="ti ti-info-circle" aria-hidden="true"></i>
                            Ce modèle générera environ
                            <b data-planning-schedule-form-target="previewEstimate">{{ selected_template_summary.estimate|default(0) }}</b>
                            shifts pré-configurés.
                        </small>
                    </div>
                </div>
            </div>

            <div class="planning-form-section">
                <h2 class="planning-section-title">
                    <span><i class="ti ti-settings" aria-hidden="true"></i></span>
                    Options
                </h2>

                <div class="planning-option-list">
                    <label>
                        <input type="checkbox" name="detectConflicts" value="1" {{ data.detectConflicts|default('1') ? 'checked' : '' }}>
                        Détecter les conflits après création
                    </label>
                    <label>
                        <input type="checkbox" name="notifyManagers" value="1" {{ data.notifyManagers|default('') ? 'checked' : '' }}>
                        Notifier les managers par e-mail
                    </label>
                    <label>
                        <input type="checkbox" name="preparePublication" value="1" {{ data.preparePublication|default('') ? 'checked' : '' }}>
                        Préparer pour publication immédiate
                    </label>
                </div>
            </div>

            <footer class="planning-form-actions">
                <a href="{{ path('planning_dashboard') }}">Annuler</a>
                <div>
                    <button class="data-button data-button--secondary" type="submit" name="submitAction" value="open">Créer et ouvrir</button>
                    <button class="data-button data-button--primary" type="submit" name="submitAction" value="create">Créer le planning</button>
                </div>
            </footer>
        </section>

        <aside class="planning-create__side">
            <section class="planning-summary-card planning-card">
                <h2><i class="ti ti-list-check" aria-hidden="true"></i> Résumé</h2>
                <dl>
                    <div>
                        <dt>Période</dt>
                        <dd data-planning-schedule-form-target="summaryPeriod">
                            {% if data.periodStart|default('') or data.periodEnd|default('') %}
                                {{ data.periodStart|default('--') }} – {{ data.periodEnd|default('--') }}
                            {% else %}
                                -- au --
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt>Établissement</dt>
                        <dd data-planning-schedule-form-target="summaryEstablishment">{{ selected_establishment ?: 'Non sélectionné' }}</dd>
                    </div>
                    <div>
                        <dt>Modèle sélectionné</dt>
                        <dd data-planning-schedule-form-target="summaryTemplate">{{ selected_template ?: 'Planning vide' }}</dd>
                    </div>
                    <div>
                        <dt>Estimation shifts</dt>
                        <dd data-planning-schedule-form-target="summaryEstimate">{{ selected_template_summary.estimate|default(0) }}</dd>
                    </div>
                </dl>
            </section>

            <section class="planning-tip-card">
                <h2>Conseil RH</h2>
                <p>L'utilisation d'un modèle de planning permet de réduire le temps de création de 70%. Pensez à mettre à jour vos modèles pour chaque saison.</p>
            </section>
        </aside>
    </form>
</div>
{% endblock %}