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

{% block title %}Ateliers{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Transmission</span>
            <h1 class="adm-page-title">Ateliers &amp; stages</h1>
            <p class="adm-page-sub">Initiations, entretien, affûtage — créneaux et réservations gérés ici.</p>
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn" href="{{ path('gestion_atelier_new') }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
                Nouvel atelier
            </a>
        </div>
    </div>

    {% if ateliers is empty %}
        <div class="adm-card"><div class="adm-empty"><p>Aucun atelier — créez le premier pour ouvrir des créneaux.</p></div></div>
    {% else %}
        <div class="adm-grid adm-grid--3">
            {% for atelier in ateliers %}
                {# Compteurs des créneaux à venir : ils alimentent le texte de la modale de suppression. #}
                {% set stats = aVenir[atelier.id]|default({futurs: 0, reserves: 0, places: 0}) %}
                <div class="adm-card" data-atelier-card="{{ atelier.id }}" {{ not atelier.actif ? 'style="opacity:0.6;"' }}>
                    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px;">
                        <h2 class="adm-card-title" style="margin-bottom:4px;">{{ atelier.titre }}</h2>
                        {% if atelier.archive %}
                            <span class="adm-badge adm-badge--dark">Archivé</span>
                        {% else %}
                            <span class="adm-badge adm-badge--{{ atelier.actif ? 'green' : 'neutral' }}">{{ atelier.actif ? 'Actif' : 'Inactif' }}</span>
                        {% endif %}
                    </div>
                    {% if atelier.description %}
                        <p style="font-size:0.84rem;color:var(--v2-ink-soft);margin:0 0 10px;">{{ atelier.description|length > 110 ? atelier.description|slice(0, 110) ~ '…' : atelier.description }}</p>
                    {% endif %}
                    <div class="adm-mono" style="font-size:0.78rem;color:var(--v2-ink-soft);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;">
                        <span>{{ atelier.prix|number_format(2, ',', ' ') }} €</span>
                        <span>{{ atelier.dureeMinutes }} min</span>
                        <span>{{ atelier.capaciteDefaut }} places</span>
                    </div>
                    {% if atelier.archive %}
                        <p class="adm-field-help" style="margin:-4px 0 12px;">
                            Archivé le {{ atelier.archivedAt|date('d/m/Y') }} — retiré du site.
                            {{ stats.futurs }} créneau{{ stats.futurs > 1 ? 'x' }} à venir encore honoré{{ stats.futurs > 1 ? 's' }}.
                        </p>
                    {% endif %}
                    <div style="display:flex;gap:8px;flex-wrap:wrap;">
                        <a class="adm-btn adm-btn--ghost adm-btn--sm" href="{{ path('gestion_atelier_edit', {id: atelier.id}) }}">Éditer</a>
                        <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-toggle-atelier="{{ atelier.id }}">
                            {{ atelier.archive ? 'Restaurer' : (atelier.actif ? 'Désactiver' : 'Activer') }}
                        </button>
                        <button type="button" class="adm-btn adm-btn--danger adm-btn--sm"
                                data-delete-atelier="{{ atelier.id }}"
                                data-titre="{{ atelier.titre }}"
                                data-futurs="{{ stats.futurs }}"
                                data-reserves="{{ stats.reserves }}"
                                data-places="{{ stats.places }}">Supprimer</button>
                    </div>
                </div>
            {% endfor %}
        </div>

        {# ===== Gestion des plannings ===== #}
        <div class="adm-page-head" style="margin-top:34px;">
            <div>
                <span class="adm-eyebrow">Planification</span>
                <h2 class="adm-page-title">Gestion des plannings</h2>
                <p class="adm-page-sub">Créneaux ponctuels ou récurrents, calendrier et réservations.</p>
            </div>
        </div>

        {# ===== Ajout d'un créneau (ponctuel ou récurrent) ===== #}
        <form method="post" action="{{ path('gestion_creneau_add') }}" class="adm-card">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_atelier') }}">
            <h2 class="adm-card-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18M12 14v4M10 16h4"/></svg>
                Ajouter un créneau
            </h2>
            <div class="adm-form">
                <div class="adm-form-row">
                    <div class="adm-field">
                        <select name="atelier" required>
                            {% for atelier in ateliers|filter(a => a.actif) %}
                                <option value="{{ atelier.id }}">{{ atelier.titre }}</option>
                            {% endfor %}
                        </select>
                        <label>Atelier</label>
                    </div>
                    <div class="adm-field">
                        <input type="datetime-local" name="start_at" required>
                        <label>Date &amp; heure</label>
                    </div>
                    <div class="adm-field">
                        <input type="number" name="capacite" min="1" max="50" placeholder=" ">
                        <label>Capacité (vide = défaut)</label>
                    </div>
                    <div class="adm-field">
                        <select name="type_creneau" id="cr-type">
                            <option value="ponctuel">Ponctuel — uniquement cette date</option>
                            <option value="recurrent">Récurrent</option>
                        </select>
                        <label>Type de créneau</label>
                    </div>
                </div>
                {# Bloc récurrence : n'apparaît qu'en type récurrent ; la fin de
                   récurrence se choisit entre « jusqu'à modification » et une
                   période chiffrée (unité intégrée au champ, style texte à trou). #}
                <div class="adm-form-row" id="cr-recur" hidden style="align-items:center;">
                    <div class="adm-field">
                        <select name="recur_freq" id="cr-freq">
                            <option value="jour">Chaque jour</option>
                            <option value="semaine" selected>Chaque semaine</option>
                            <option value="mois">Chaque mois</option>
                        </select>
                        <label>Fréquence</label>
                    </div>
                    <div class="adm-seg" role="radiogroup" aria-label="Fin de la récurrence">
                        <label class="adm-seg-opt">
                            <input type="radio" name="recur_end" value="illimite" checked>
                            <span>Jusqu'à modification</span>
                        </label>
                        <label class="adm-seg-opt">
                            <input type="radio" name="recur_end" value="periode">
                            <span>Pendant une période</span>
                        </label>
                    </div>
                    <div class="adm-field adm-field--composite" id="cr-period-field" hidden>
                        <div class="adm-composite">
                            <input type="number" name="period_n" min="1" max="24" value="6" aria-label="Nombre de périodes">
                            <select name="period_unit" id="cr-period-unit" class="adm-unit-select" aria-label="Unité de période">
                                <option value="jour">jour(s)</option>
                                <option value="semaine" selected>semaine(s)</option>
                                <option value="mois">mois</option>
                            </select>
                        </div>
                        <label>Pendant</label>
                    </div>
                </div>
                <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;">
                    <p class="adm-field-help" id="cr-recur-help" style="margin:0;" hidden></p>
                    <button class="adm-btn" type="submit" style="margin-left:auto;">Ajouter</button>
                </div>
            </div>
        </form>

        {# ===== Calendrier des créneaux ===== #}
        <div class="adm-card" style="margin-top:16px;">
            <h2 class="adm-card-title">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
                Calendrier des créneaux
            </h2>
            {# Trois groupes sur une ligne en desktop, empilés pleine largeur
               sous 768 px avec le libellé de période en tête (cf. §18 du DS). #}
            <div class="adm-cal-toolbar">
                <div class="adm-cal-toolbar-nav" id="cal-navgroup">
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-cal-nav="-1" aria-label="Période précédente">‹</button>
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-cal-nav="0">Aujourd'hui</button>
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-cal-nav="1" aria-label="Période suivante">›</button>
                </div>
                <strong class="adm-cal-toolbar-label" id="cal-label"></strong>
                <div class="adm-cal-toolbar-right">
                    <div class="adm-cal-toolbar-views" id="cal-viewgroup">
                        <button type="button" class="adm-btn adm-btn--sm adm-btn--ghost" data-cal-view="day">Jour</button>
                        <button type="button" class="adm-btn adm-btn--sm adm-btn--ghost" data-cal-view="week">Semaine</button>
                        <button type="button" class="adm-btn adm-btn--sm" data-cal-view="month">Mois</button>
                    </div>
                    {# Toggle agenda / liste chronologique #}
                    <div class="adm-seg" role="radiogroup" aria-label="Mode d'affichage du planning">
                        <label class="adm-seg-opt">
                            <input type="radio" name="cal_mode" value="agenda" checked>
                            <span>
                                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="margin-right:5px;"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
                                Agenda
                            </span>
                        </label>
                        <label class="adm-seg-opt">
                            <input type="radio" name="cal_mode" value="liste">
                            <span>
                                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="margin-right:5px;"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
                                Liste
                            </span>
                        </label>
                    </div>
                </div>
            </div>
            <div id="cal-root"></div>
            <p class="adm-field-help">Pastille verte = réservations en cours · grise = aucune réservation · barrée = annulé. Cliquez un créneau pour ouvrir son détail.</p>
        </div>

        {# Modal de suppression : les créneaux passés suivent toujours l'atelier,
           seul le sort des créneaux à venir s'arbitre ici. Le texte d'aide
           annonce l'effet exact de l'option sélectionnée, chiffres à l'appui. #}
        <div id="atelier-delete-modal" class="adm-modal-overlay" hidden>
            {# --wide : le sélecteur à trois options et son texte d'aide sont à l'étroit en 440 px. #}
            <div class="adm-modal adm-modal--wide">
                <h3 class="adm-modal-title">Supprimer l'atelier</h3>
                <p class="adm-modal-text" id="adel-intro"></p>
                <div class="adm-seg-group" id="adel-choix" style="margin:0 0 18px;">
                    <span class="adm-seg-group-label">Créneaux à venir</span>
                    <div class="adm-seg" role="radiogroup" aria-label="Sort des créneaux à venir">
                        <label class="adm-seg-opt">
                            <input type="radio" name="adel_mode" value="all">
                            <span>Tout supprimer</span>
                        </label>
                        <label class="adm-seg-opt">
                            <input type="radio" name="adel_mode" value="unbooked" checked>
                            <span>Garder les réservés</span>
                        </label>
                        <label class="adm-seg-opt">
                            <input type="radio" name="adel_mode" value="keep">
                            <span>Tout garder</span>
                        </label>
                    </div>
                    <p class="adm-field-help" id="adel-help" style="margin:0;"></p>
                </div>
                <div class="adm-modal-actions">
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" id="adel-cancel">Retour</button>
                    <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" id="adel-ok">Supprimer</button>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';

    /* ----- Récurrence : formulaire dynamique (chaque choix révèle la suite) ----- */
    var typeSelect = document.getElementById('cr-type');
    if (typeSelect) {
        var freqSelect = document.getElementById('cr-freq');
        var periodField = document.getElementById('cr-period-field');
        var periodUnit = document.getElementById('cr-period-unit');
        var help = document.getElementById('cr-recur-help');

        function endMode() {
            var checked = document.querySelector('input[name="recur_end"]:checked');
            return checked ? checked.value : 'illimite';
        }
        function refreshRecur() {
            var recurrent = 'recurrent' === typeSelect.value;
            document.getElementById('cr-recur').hidden = !recurrent;
            help.hidden = !recurrent;
            if (!recurrent) { return; }
            var illimite = 'illimite' === endMode();
            periodField.hidden = illimite;
            help.textContent = illimite
                ? 'La date de départ compte toujours ; les créneaux sont générés sur 12 mois glissants (60 max) et restent modifiables à tout moment.'
                : 'La date de départ compte toujours ; les répétitions s\'arrêtent à la fin de la période (60 créneaux max).';
        }
        typeSelect.addEventListener('change', refreshRecur);
        Array.prototype.forEach.call(document.querySelectorAll('input[name="recur_end"]'), function (radio) {
            radio.addEventListener('change', refreshRecur);
        });
        // L'unité de période suit la fréquence choisie (chaque semaine → semaines).
        freqSelect.addEventListener('change', function () {
            periodUnit.value = freqSelect.value;
        });
    }

    /* ----- Calendrier jour / semaine / mois ----- */
    var EVENTS = {{ events|json_encode|raw }};
    var DETAIL_URL = '{{ path('gestion_creneau_detail', {id: 0}) }}'.replace(/0$/, '');
    var MOIS = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
    var JOURS = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];

    var byDay = {};
    EVENTS.forEach(function (ev) {
        (byDay[ev.date] = byDay[ev.date] || []).push(ev);
    });

    var root = document.getElementById('cal-root');
    var label = document.getElementById('cal-label');
    var view = 'month';
    var cursor = new Date();
    cursor.setHours(0, 0, 0, 0);

    function iso(d) {
        return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
    }
    function mondayOf(d) {
        var copy = new Date(d);
        copy.setDate(copy.getDate() - ((copy.getDay() + 6) % 7));
        return copy;
    }
    function pill(ev, compact) {
        var a = document.createElement('a');
        a.href = DETAIL_URL + ev.id;
        a.className = 'adm-cal-ev' + (ev.reservees > 0 ? ' has-resa' : '') + ('annule' === ev.statut ? ' is-cancelled' : '');
        a.innerHTML = '<span class="adm-cal-ev-time"></span><span class="adm-cal-ev-title"></span><span class="adm-cal-ev-count"></span>';
        a.querySelector('.adm-cal-ev-time').textContent = ev.heure;
        a.querySelector('.adm-cal-ev-title').textContent = compact ? ev.titre.split(' ').slice(0, 2).join(' ') : ev.titre;
        a.querySelector('.adm-cal-ev-count').textContent = ev.reservees + '/' + ev.capacite;
        a.title = ev.titre + ' — ' + ev.heure + ' (' + ev.reservees + '/' + ev.capacite + ')';
        return a;
    }

    function renderMonth() {
        label.textContent = MOIS[cursor.getMonth()] + ' ' + cursor.getFullYear();
        var first = new Date(cursor.getFullYear(), cursor.getMonth(), 1);
        var start = mondayOf(first);
        var today = iso(new Date());

        var grid = document.createElement('div');
        grid.className = 'adm-cal-grid';
        JOURS.forEach(function (j) {
            var h = document.createElement('div');
            h.className = 'adm-cal-head';
            h.textContent = j;
            grid.appendChild(h);
        });
        for (var i = 0; i < 42; i++) {
            var day = new Date(start);
            day.setDate(start.getDate() + i);
            var key = iso(day);
            var cell = document.createElement('div');
            cell.className = 'adm-cal-cell'
                + (day.getMonth() !== cursor.getMonth() ? ' is-out' : '')
                + (key === today ? ' is-today' : '');
            var num = document.createElement('span');
            num.className = 'adm-cal-num';
            num.textContent = day.getDate();
            cell.appendChild(num);
            (byDay[key] || []).forEach(function (ev) { cell.appendChild(pill(ev, true)); });
            grid.appendChild(cell);
        }
        root.innerHTML = '';
        root.appendChild(grid);
    }

    function renderWeek() {
        var start = mondayOf(cursor);
        var end = new Date(start);
        end.setDate(start.getDate() + 6);
        label.textContent = start.getDate() + ' ' + MOIS[start.getMonth()].toLowerCase().slice(0, 4) + '. — '
            + end.getDate() + ' ' + MOIS[end.getMonth()].toLowerCase().slice(0, 4) + '. ' + end.getFullYear();

        var grid = document.createElement('div');
        grid.className = 'adm-cal-grid adm-cal-grid--week';
        var today = iso(new Date());
        for (var i = 0; i < 7; i++) {
            var day = new Date(start);
            day.setDate(start.getDate() + i);
            var key = iso(day);
            var col = document.createElement('div');
            col.className = 'adm-cal-cell adm-cal-cell--week' + (key === today ? ' is-today' : '');
            var h = document.createElement('div');
            h.className = 'adm-cal-head';
            h.textContent = JOURS[i] + ' ' + day.getDate();
            col.appendChild(h);
            var evs = byDay[key] || [];
            if (!evs.length) {
                var empty = document.createElement('span');
                empty.className = 'adm-cal-empty';
                empty.textContent = '—';
                col.appendChild(empty);
            }
            evs.forEach(function (ev) { col.appendChild(pill(ev, false)); });
            grid.appendChild(col);
        }
        root.innerHTML = '';
        root.appendChild(grid);
    }

    function renderDay() {
        var key = iso(cursor);
        label.textContent = JOURS[(cursor.getDay() + 6) % 7] + ' ' + cursor.getDate() + ' ' + MOIS[cursor.getMonth()] + ' ' + cursor.getFullYear();
        var wrap = document.createElement('div');
        wrap.className = 'adm-cal-daylist';
        var evs = byDay[key] || [];
        if (!evs.length) {
            wrap.innerHTML = '<div class="adm-empty"><p>Aucun créneau ce jour.</p></div>';
        }
        evs.forEach(function (ev) { wrap.appendChild(pill(ev, false)); });
        root.innerHTML = '';
        root.appendChild(wrap);
    }

    /* ----- Vue liste : tous les créneaux à venir, ligne par ligne, ordre chronologique ----- */
    function renderList() {
        label.textContent = 'Créneaux à venir';
        var wrap = document.createElement('div');
        wrap.className = 'adm-cal-list';
        var todayKey = iso(new Date());
        var upcoming = EVENTS.filter(function (ev) { return ev.date >= todayKey; });
        if (!upcoming.length) {
            wrap.innerHTML = '<div class="adm-empty"><p>Aucun créneau à venir.</p></div>';
        }
        var lastDate = null;
        upcoming.forEach(function (ev) {
            if (ev.date !== lastDate) {
                lastDate = ev.date;
                var d = new Date(ev.date + 'T00:00:00');
                var head = document.createElement('div');
                head.className = 'adm-cal-list-day';
                head.textContent = JOURS[(d.getDay() + 6) % 7] + ' ' + d.getDate() + ' ' + MOIS[d.getMonth()].toLowerCase() + ' ' + d.getFullYear();
                wrap.appendChild(head);
            }
            var row = document.createElement('a');
            row.href = DETAIL_URL + ev.id;
            row.className = 'adm-cal-list-row' + ('annule' === ev.statut ? ' is-cancelled' : '');
            row.innerHTML = '<span class="adm-cal-list-dot"></span>'
                + '<span class="adm-cal-list-time adm-mono"></span>'
                + '<span class="adm-cal-list-title"></span>'
                + '<span class="adm-cal-list-count adm-mono"></span>';
            row.querySelector('.adm-cal-list-dot').classList.add(ev.reservees > 0 ? 'has-resa' : 'no-resa');
            row.querySelector('.adm-cal-list-time').textContent = ev.heure;
            row.querySelector('.adm-cal-list-title').textContent = ev.titre;
            row.querySelector('.adm-cal-list-count').textContent = ev.reservees + '/' + ev.capacite + ' places';
            wrap.appendChild(row);
        });
        root.innerHTML = '';
        root.appendChild(wrap);
    }

    var mode = 'agenda';
    function render() {
        if ('liste' === mode) {
            renderList();
        } else {
            ({ month: renderMonth, week: renderWeek, day: renderDay })[view]();
        }
        document.getElementById('cal-navgroup').style.visibility = 'liste' === mode ? 'hidden' : '';
        document.getElementById('cal-viewgroup').style.visibility = 'liste' === mode ? 'hidden' : '';
        document.querySelectorAll('[data-cal-view]').forEach(function (btn) {
            btn.classList.toggle('adm-btn--ghost', btn.getAttribute('data-cal-view') !== view);
        });
    }

    Array.prototype.forEach.call(document.querySelectorAll('input[name="cal_mode"]'), function (radio) {
        radio.addEventListener('change', function () {
            mode = this.value;
            render();
        });
    });

    document.addEventListener('click', function (e) {
        var v = e.target.closest('[data-cal-view]');
        if (v) { view = v.getAttribute('data-cal-view'); render(); return; }
        var nav = e.target.closest('[data-cal-nav]');
        if (nav) {
            var dir = parseInt(nav.getAttribute('data-cal-nav'), 10);
            if (0 === dir) {
                cursor = new Date();
                cursor.setHours(0, 0, 0, 0);
            } else if ('month' === view) {
                cursor.setDate(1);
                cursor.setMonth(cursor.getMonth() + dir);
            } else {
                cursor.setDate(cursor.getDate() + dir * ('week' === view ? 7 : 1));
            }
            render();
        }
    });

    if (root) { render(); }

    document.addEventListener('click', function (e) {
        var toggle = e.target.closest('[data-toggle-atelier]');
        if (toggle) {
            admFetch('/gestion/api/ateliers/' + toggle.getAttribute('data-toggle-atelier') + '/toggle', { body: {} })
                .then(function (data) {
                    showNotification({ success: true, title: data.actif ? 'Atelier activé' : 'Atelier désactivé' });
                    window.location.reload();
                });
        }
    });

    /* ----- Suppression d'un atelier : arbitrage du sort des créneaux à venir ----- */
    var delModal = document.getElementById('atelier-delete-modal');
    if (!delModal) { return; } // aucun atelier en grille : pas de modale à câbler

    var delIntro = document.getElementById('adel-intro');
    var delChoix = document.getElementById('adel-choix');
    var delHelp = document.getElementById('adel-help');
    var delOk = document.getElementById('adel-ok');
    var cible = { id: null, titre: '', futurs: 0, reserves: 0, places: 0 };

    function s(n) { return n > 1 ? 's' : ''; }
    /* « le créneau » / « les 3 créneaux » — l'appelant capitalise si besoin. */
    function lesCreneaux(n) { return n > 1 ? 'les ' + n + ' créneaux' : 'le créneau'; }
    function cap(txt) { return txt.charAt(0).toUpperCase() + txt.slice(1); }
    function modeChoisi() {
        var checked = delModal.querySelector('input[name="adel_mode"]:checked');
        return checked ? checked.value : 'unbooked';
    }

    function refreshDelete() {
        // Sans créneau à venir, il n'y a rien à arbitrer : la suppression est totale.
        if (0 === cible.futurs) {
            delIntro.textContent = '« ' + cible.titre + ' » n\'a aucun créneau à venir : l\'atelier, '
                + 'ses créneaux passés et leur historique de réservations seront supprimés définitivement.';
            delChoix.hidden = true;
            delOk.textContent = 'Supprimer définitivement';
            delOk.classList.add('adm-btn--danger');
            return;
        }

        delIntro.textContent = '« ' + cible.titre + ' » — choisissez ce qu\'il advient de ses créneaux à venir. '
            + 'Les créneaux passés et leur historique suivent toujours le sort de l\'atelier.';
        delChoix.hidden = false;

        var mode = modeChoisi();
        var libres = cible.futurs - cible.reserves;
        var archive = 'keep' === mode || ('unbooked' === mode && cible.reserves > 0);
        var txt;

        if ('all' === mode) {
            txt = cap(lesCreneaux(cible.futurs)) + ' à venir ' + (cible.futurs > 1 ? 'sont supprimés' : 'est supprimé');
            if (cible.reserves > 0) {
                txt += ', dont ' + cible.reserves + ' réservé' + s(cible.reserves) + ' : '
                    + cible.places + ' place' + s(cible.places) + ' annulée' + s(cible.places)
                    + ' et les clients prévenus par e-mail';
            }
            txt += '. L\'atelier et tout son historique disparaissent définitivement.';
        } else if ('unbooked' === mode) {
            if (0 === cible.reserves) {
                txt = 'Aucun créneau à venir n\'est réservé : ' + lesCreneaux(cible.futurs)
                    + (cible.futurs > 1 ? ' sont supprimés' : ' est supprimé')
                    + ' et l\'atelier disparaît définitivement, comme « Tout supprimer ».';
            } else if (0 === libres) {
                txt = 'Tous les créneaux à venir sont réservés : aucun n\'est supprimé.';
            } else {
                txt = cap(lesCreneaux(libres)) + ' sans réservation ' + (libres > 1 ? 'sont supprimés' : 'est supprimé')
                    + ' ; ' + lesCreneaux(cible.reserves) + ' réservé' + s(cible.reserves)
                    + (cible.reserves > 1 ? ' sont honorés' : ' est honoré') + '.';
            }
        } else {
            txt = cap(lesCreneaux(cible.futurs)) + ' à venir '
                + (cible.futurs > 1 ? 'sont conservés et honorés' : 'est conservé et honoré') + '.';
        }

        if (archive) {
            txt += ' L\'atelier passe en archivé : retiré du site et plus réservable, supprimable une fois '
                + (cible.futurs > 1 ? 'ces créneaux passés' : 'ce créneau passé') + '.';
        }

        delHelp.textContent = txt;
        delOk.textContent = archive ? 'Archiver l\'atelier' : 'Supprimer définitivement';
        delOk.classList.toggle('adm-btn--danger', !archive);
    }

    function fermerDelete() { delModal.hidden = true; }

    Array.prototype.forEach.call(delModal.querySelectorAll('input[name="adel_mode"]'), function (radio) {
        radio.addEventListener('change', refreshDelete);
    });
    document.getElementById('adel-cancel').addEventListener('click', fermerDelete);
    delModal.addEventListener('click', function (e) { if (e.target === delModal) { fermerDelete(); } });
    document.addEventListener('keydown', function (e) {
        if ('Escape' === e.key && !delModal.hidden) { fermerDelete(); }
    });

    delOk.addEventListener('click', function () {
        delOk.disabled = true;
        admFetch('/gestion/api/ateliers/' + cible.id + '/delete', {
            body: { mode: 0 === cible.futurs ? 'all' : modeChoisi() }
        }).then(function () {
            // Le récapitulatif est posé en flash côté serveur : il s'affiche au rechargement.
            window.location.reload();
        }).catch(function () {
            delOk.disabled = false;
        });
    });

    document.addEventListener('click', function (e) {
        var del = e.target.closest('[data-delete-atelier]');
        if (del) {
            cible = {
                id: del.getAttribute('data-delete-atelier'),
                titre: del.getAttribute('data-titre'),
                futurs: parseInt(del.getAttribute('data-futurs'), 10) || 0,
                reserves: parseInt(del.getAttribute('data-reserves'), 10) || 0,
                places: parseInt(del.getAttribute('data-places'), 10) || 0
            };
            var defaut = delModal.querySelector('input[name="adel_mode"][value="unbooked"]');
            if (defaut) { defaut.checked = true; }
            delOk.disabled = false;
            refreshDelete();
            delModal.hidden = false;
            document.getElementById('adel-cancel').focus();
        }
    });
})();
</script>
{% endblock %}