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

{% block title %}Modifier {{ schedule.title }}{% endblock %}
{% block page_header %}{% endblock %}

{% 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="{}">
    <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>
                <a href="{{ path('planning_schedule_show', {id: schedule.id}) }}">{{ schedule.title }}</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span>Modifier</span>
            </nav>
            <h1>Modifier le planning</h1>
            <p>La période reste limitée à une semaine complète.</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_edit_' ~ schedule.id) }}">

        <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('') }}" required data-planning-schedule-form-target="title">
                    </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="">Tous les établissements</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>
                    Semaine
                </h2>

                <div class="planning-create__grid">
                    <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>
                </div>
            </div>

            <footer class="planning-form-actions">
                <a href="{{ path('planning_schedule_show', {id: schedule.id}) }}">Annuler</a>
                <div>
                    <button class="data-button data-button--primary" type="submit">Enregistrer</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">{{ data.periodStart|default('') ? data.periodStart|date('d/m/Y') : '--' }} au {{ data.periodEnd|default('') ? data.periodEnd|date('d/m/Y') : '--' }}</dd>
                    </div>
                    <div>
                        <dt>Établissement</dt>
                        <dd data-planning-schedule-form-target="summaryEstablishment">{{ schedule.etablissement ?: 'Tous les établissements' }}</dd>
                    </div>
                    <div>
                        <dt>Version</dt>
                        <dd>{{ schedule.version }}</dd>
                    </div>
                </dl>
            </section>
        </aside>
    </form>
</div>
{% endblock %}