{% extends 'gestion/_base.html.twig' %}
{% set active = 'ateliers' %}

{% block title %}{{ isNew ? 'Nouvel atelier' : 'Atelier — ' ~ atelier.titre }}{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Transmission</span>
            <h1 class="adm-page-title">{{ isNew ? 'Nouvel atelier' : atelier.titre }}</h1>
            {% if not isNew %}<p class="adm-page-sub adm-mono">#{{ atelier.id }} · créé le {{ atelier.createdAt|date('d/m/Y') }}</p>{% endif %}
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_ateliers') }}">← Retour</a>
        </div>
    </div>

    <form method="post" class="adm-card" style="max-width:720px;">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_atelier') }}">
        <div class="adm-form">
            <div class="adm-field">
                <input type="text" id="a-titre" name="titre" value="{{ atelier.titre }}" placeholder=" " required maxlength="150">
                <label for="a-titre">Titre de l'atelier</label>
            </div>
            <div class="adm-field">
                <textarea id="a-description" name="description" placeholder=" " style="min-height:110px;">{{ atelier.description }}</textarea>
                <label for="a-description">Description (optionnelle)</label>
            </div>

            {# Déroulement — étapes affichées côté client (modal « En savoir plus ») #}
            <div style="border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:14px;">
                <p style="margin:0 0 4px;font-weight:600;">Déroulement de l'atelier</p>
                <p style="margin:0 0 12px;font-size:12.5px;opacity:.7;">Étapes affichées sur le site dans « En savoir plus », dans l'ordre. Optionnel — sans étapes, la description sert de contenu.</p>
                <div id="etapes-list" style="display:flex;flex-direction:column;gap:10px;"></div>
                <button type="button" id="etapes-add" class="adm-btn adm-btn--ghost" style="margin-top:10px;">+ Ajouter une étape</button>
                <input type="hidden" name="etapes_json" id="etapes-json" value="{{ (atelier.etapes ?: [])|json_encode }}">
            </div>
            <div class="adm-form-row">
                <div class="adm-field">
                    <input type="text" id="a-prix" name="prix" value="{{ atelier.prix }}" placeholder=" " required inputmode="decimal">
                    <label for="a-prix">Prix par personne (€)</label>
                </div>
                <div class="adm-field">
                    <input type="number" id="a-duree" name="duree" value="{{ atelier.dureeMinutes }}" min="15" max="480" step="5" required>
                    <label for="a-duree">Durée (minutes)</label>
                </div>
            </div>
            <div class="adm-form-row">
                <div class="adm-field">
                    <input type="number" id="a-capacite" name="capacite" value="{{ atelier.capaciteDefaut }}" min="1" max="50" required>
                    <label for="a-capacite">Capacité par défaut des créneaux</label>
                </div>
                <label class="adm-check" style="align-self:center;">
                    <input type="checkbox" name="actif" value="1" {{ isNew or atelier.actif ? 'checked' }}>
                    Atelier actif
                </label>
            </div>
            <div style="text-align:right;">
                <button type="submit" class="adm-btn">{{ isNew ? 'Créer l\'atelier' : 'Enregistrer' }}</button>
            </div>
        </div>
    </form>

    <script>
    (function () {
        const list = document.getElementById('etapes-list');
        const hidden = document.getElementById('etapes-json');
        const addBtn = document.getElementById('etapes-add');
        const form = hidden.closest('form');

        function sync() {
            const rows = [...list.querySelectorAll('[data-etape]')].map(r => ({
                titre: r.querySelector('[data-etape-titre]').value.trim(),
                texte: r.querySelector('[data-etape-texte]').value.trim(),
            })).filter(e => e.titre || e.texte);
            hidden.value = JSON.stringify(rows);
        }

        function row(etape) {
            const div = document.createElement('div');
            div.setAttribute('data-etape', '');
            // Styles portés par le DS (.adm-etape-*) : sous 768 px les flèches
            // passent sous les champs et grossissent à 38 px au doigt.
            div.className = 'adm-etape-row';
            div.innerHTML = `
                <div class="adm-etape-fields">
                    <input type="text" data-etape-titre maxlength="80" placeholder="Titre de l'étape (ex. Choix du manche)" aria-label="Titre de l'étape">
                    <textarea data-etape-texte maxlength="500" rows="2" placeholder="Description courte de l'étape" aria-label="Description de l'étape"></textarea>
                </div>
                <div class="adm-etape-moves">
                    <button type="button" data-up class="adm-mini-btn" title="Monter" aria-label="Monter cette étape">↑</button>
                    <button type="button" data-down class="adm-mini-btn" title="Descendre" aria-label="Descendre cette étape">↓</button>
                    <button type="button" data-del class="adm-mini-btn adm-mini-btn--danger" title="Supprimer" aria-label="Supprimer cette étape">✕</button>
                </div>`;
            div.querySelector('[data-etape-titre]').value = etape.titre || '';
            div.querySelector('[data-etape-texte]').value = etape.texte || '';
            div.querySelector('[data-up]').addEventListener('click', () => { const p = div.previousElementSibling; if (p) list.insertBefore(div, p); sync(); });
            div.querySelector('[data-down]').addEventListener('click', () => { const n = div.nextElementSibling; if (n) list.insertBefore(n, div); sync(); });
            div.querySelector('[data-del]').addEventListener('click', () => { div.remove(); sync(); });
            div.addEventListener('input', sync);
            return div;
        }

        let initial = [];
        try { initial = JSON.parse(hidden.value || '[]') || []; } catch (e) { initial = []; }
        initial.forEach(e => list.appendChild(row(e)));
        addBtn.addEventListener('click', () => { list.appendChild(row({})); sync(); });
        form.addEventListener('submit', sync);
    })();
    </script>
{% endblock %}