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

{% block title %}Créneau — {{ creneau.atelier.titre }} du {{ creneau.startAt|date('d/m/Y H\\hi') }}{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Transmission</span>
            <h1 class="adm-page-title">{{ creneau.atelier.titre }}</h1>
            <p class="adm-page-sub adm-mono">{{ creneau.startAt|date('d/m/Y à H\\hi') }} · {{ creneau.atelier.dureeMinutes }} min · {{ creneau.atelier.prix|number_format(2, ',', ' ') }} €/pers.</p>
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn adm-btn--ghost" href="{{ path('gestion_ateliers') }}">← Planning</a>
        </div>
    </div>

    <div class="adm-grid adm-grid--2">
        <div class="adm-card">
            <h2 class="adm-card-title">Remplissage</h2>
            {% set pleines = creneau.placesReservees %}
            <div class="adm-gauge {{ creneau.placesRestantes == 0 ? 'is-full' }}" style="margin-bottom:14px;">
                <div class="adm-gauge-bar"><div class="adm-gauge-fill" style="width:{{ creneau.capacite > 0 ? (pleines / creneau.capacite * 100)|round : 0 }}%;"></div></div>
                <span class="adm-gauge-txt">{{ pleines }}/{{ creneau.capacite }} places</span>
            </div>

            {% set smap = {'ouvert': 'green', 'ferme': 'ember', 'annule': 'neutral'} %}
            <p style="display:flex;align-items:center;gap:10px;font-size:0.86rem;">
                Statut : <span class="adm-badge adm-badge--{{ smap[creneau.statut.value] }}" id="creneau-statut-badge">{{ creneau.statut.label }}</span>
            </p>

            <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;">
                {% if creneau.statut.value != 'ouvert' %}
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-creneau-statut="ouvert">Rouvrir</button>
                {% endif %}
                {% if creneau.statut.value != 'ferme' %}
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-creneau-statut="ferme">Fermer (complet)</button>
                {% endif %}
                {% if creneau.statut.value != 'annule' %}
                    <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-creneau-statut="annule">Annuler le créneau</button>
                {% endif %}
                <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-creneau-delete>Supprimer</button>
            </div>
            {% if creneau.note %}<p class="adm-field-help">Note : {{ creneau.note }}</p>{% endif %}
        </div>

        {# ===== Ajout manuel (réservation téléphone) ===== #}
        <form method="post" action="{{ path('gestion_reservation_add', {id: creneau.id}) }}" class="adm-card">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('gestion_atelier') }}">
            <h2 class="adm-card-title">Ajouter une réservation (téléphone / comptoir)</h2>
            <div class="adm-form">
                <div class="adm-form-row">
                    <div class="adm-field">
                        <input type="text" id="r-prenom" name="prenom" placeholder=" " required maxlength="100">
                        <label for="r-prenom">Prénom</label>
                    </div>
                    <div class="adm-field">
                        <input type="text" id="r-nom" name="nom" placeholder=" " required maxlength="100">
                        <label for="r-nom">Nom</label>
                    </div>
                </div>
                <div class="adm-form-row">
                    <div class="adm-field">
                        <input type="tel" id="r-tel" name="telephone" placeholder=" " maxlength="30">
                        <label for="r-tel">Téléphone</label>
                    </div>
                    <div class="adm-field">
                        <input type="email" id="r-email" name="email" placeholder=" " maxlength="180">
                        <label for="r-email">Email (optionnel)</label>
                    </div>
                </div>
                <div class="adm-form-row" style="align-items:end;">
                    <div class="adm-field" style="max-width:140px;">
                        <input type="number" id="r-places" name="places" value="1" min="1" max="{{ creneau.placesRestantes > 0 ? creneau.placesRestantes : 1 }}">
                        <label for="r-places">Places</label>
                    </div>
                    <label class="adm-check" style="align-self:center;">
                        <input type="checkbox" name="paye" value="1">
                        Déjà payé
                    </label>
                    <button class="adm-btn" type="submit" {{ creneau.placesRestantes == 0 ? 'disabled' }}>Réserver</button>
                </div>
                {% if creneau.placesRestantes == 0 %}<p class="adm-field-help" style="color:var(--adm-warn);">Créneau complet.</p>{% endif %}
            </div>
        </form>
    </div>

    {# ===== Liste des réservations ===== #}
    <div class="adm-card" style="margin-top:16px;">
        <h2 class="adm-card-title">Réservations</h2>
        {% if creneau.reservations is empty %}
            <div class="adm-empty"><p>Aucune réservation sur ce créneau.</p></div>
        {% else %}
            {# Sous 768 px, chaque réservation devient une carte : participant en
               tête, contact et statuts en libellé/valeur (cf. §18 du DS). #}
            <div class="adm-table-wrap adm-table-wrap--cards">
                <table class="adm-table adm-table--cards">
                    <thead>
                        <tr><th>Participant</th><th>Contact</th><th>Places</th><th>Source</th><th>Statut</th><th>Paiement</th><th></th></tr>
                    </thead>
                    <tbody>
                        {% for reservation in creneau.reservations %}
                            <tr data-resa-row="{{ reservation.id }}" {{ reservation.statut.value == 'annulee' ? 'style="opacity:0.5;"' }}>
                                <td class="adm-cell-head" data-label="Participant"><strong>{{ reservation.prenom }} {{ reservation.nom }}</strong></td>
                                <td class="adm-mono" style="font-size:0.78rem;" data-label="Contact">
                                    <div class="adm-cell-val">{{ reservation.telephone ?: '—' }}{% if reservation.email %}<br>{{ reservation.email }}{% endif %}</div>
                                </td>
                                <td class="is-num" data-label="Places">{{ reservation.places }}</td>
                                <td data-label="Source">{{ reservation.source.label }}</td>
                                <td data-label="Statut">
                                    <div class="adm-cell-val">
                                        {% set rmap = {'confirmee': 'green', 'attente': 'ember', 'annulee': 'neutral'} %}
                                        <span class="adm-badge adm-badge--{{ rmap[reservation.statut.value] }}">{{ reservation.statut.label }}</span>
                                        {% if reservation.cancelMotif %}<div style="font-size:0.72rem;color:var(--v2-ink-soft);margin-top:4px;">{{ reservation.cancelMotif }}</div>{% endif %}
                                    </div>
                                </td>
                                <td data-label="Paiement">
                                    <button type="button"
                                            class="adm-badge adm-badge--{{ reservation.paiement.value == 'paye' ? 'green' : 'ember' }}"
                                            style="cursor:pointer;border:none;font:inherit;"
                                            data-toggle-paiement="{{ reservation.id }}"
                                            title="Cliquer pour basculer le statut de paiement">
                                        {{ reservation.paiement.label }}
                                    </button>
                                </td>
                                {# Réservation annulée : plus de bouton, donc pas de pied de carte vide. #}
                                <td class="adm-cell-actions{{ reservation.statut.value == 'annulee' ? ' adm-cell-void' }}" style="text-align:right;">
                                    {% if reservation.statut.value != 'annulee' %}
                                        <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-annuler-resa="{{ reservation.id }}" data-participant="{{ reservation.prenom }} {{ reservation.nom }}">Annuler</button>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>

    {# Modal suppression : propose d'étendre aux occurrences récurrentes suivantes #}
    <div id="delete-modal" class="adm-modal-overlay" hidden>
        <div class="adm-modal">
            <h3 class="adm-modal-title">Supprimer le créneau</h3>
            <p class="adm-modal-text">Suppression définitive — refusée si des réservations actives existent.</p>
            {% if recurrentsSuivants > 0 %}
                <label class="adm-check" style="margin:14px 0;">
                    <input type="checkbox" id="delete-following">
                    Supprimer également les {{ recurrentsSuivants }} créneau(x) récurrent(s) suivant(s)
                    (même atelier, même jour, même heure)
                </label>
                <p class="adm-field-help" style="margin-top:-6px;">Ceux qui portent des réservations actives seront conservés.</p>
            {% endif %}
            <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:14px;">
                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" id="delete-cancel">Retour</button>
                <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" id="delete-ok">Supprimer</button>
            </div>
        </div>
    </div>

    {# Modal motif d'annulation #}
    <div id="motif-modal" class="adm-modal-overlay" hidden>
        <div class="adm-modal">
            <h3 class="adm-modal-title">Annuler la réservation</h3>
            <p class="adm-modal-text" id="motif-participant"></p>
            <div class="adm-field" style="margin:12px 0;">
                <input type="text" id="motif-input" maxlength="200" placeholder=" ">
                <label for="motif-input">Motif (optionnel — visible en interne)</label>
            </div>
            <div style="display:flex;gap:10px;justify-content:flex-end;">
                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" id="motif-cancel">Retour</button>
                <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" id="motif-ok">Annuler la réservation</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    var CRENEAU_ID = {{ creneau.id }};

    document.addEventListener('click', function (e) {
        var statutBtn = e.target.closest('[data-creneau-statut]');
        if (statutBtn) {
            var statut = statutBtn.getAttribute('data-creneau-statut');
            var apply = function () {
                admFetch('/gestion/api/creneaux/' + CRENEAU_ID + '/statut', { body: { statut: statut } })
                    .then(function () { window.location.reload(); });
            };
            if (statut === 'annule') {
                admConfirm({ title: 'Annuler le créneau', message: 'Le créneau sera marqué annulé (les réservations restent listées).', okLabel: 'Annuler le créneau', danger: true })
                    .then(function (ok) { if (ok) apply(); });
            } else {
                apply();
            }
            return;
        }
        if (e.target.closest('[data-creneau-delete]')) {
            var deleteModal = document.getElementById('delete-modal');
            var followingBox = document.getElementById('delete-following');
            if (followingBox) { followingBox.checked = false; }
            deleteModal.hidden = false;
            return;
        }
        var paiement = e.target.closest('[data-toggle-paiement]');
        if (paiement) {
            admFetch('/gestion/api/reservations/' + paiement.getAttribute('data-toggle-paiement') + '/paiement', { body: {} })
                .then(function (data) {
                    var paye = 'paye' === data.paiement;
                    paiement.textContent = paye ? 'Payé' : 'À payer';
                    paiement.classList.toggle('adm-badge--green', paye);
                    paiement.classList.toggle('adm-badge--ember', !paye);
                });
            return;
        }
        var annuler = e.target.closest('[data-annuler-resa]');
        if (annuler) {
            var modal = document.getElementById('motif-modal');
            modal.setAttribute('data-resa-id', annuler.getAttribute('data-annuler-resa'));
            document.getElementById('motif-participant').textContent = annuler.getAttribute('data-participant');
            document.getElementById('motif-input').value = '';
            modal.hidden = false;
        }
    });

    document.getElementById('delete-cancel').addEventListener('click', function () {
        document.getElementById('delete-modal').hidden = true;
    });
    document.getElementById('delete-ok').addEventListener('click', function () {
        var followingBox = document.getElementById('delete-following');
        admFetch('/gestion/api/creneaux/' + CRENEAU_ID + '/delete', {
            body: { following: !!(followingBox && followingBox.checked) }
        }).then(function () { window.location.href = '{{ path('gestion_ateliers') }}'; });
    });

    document.getElementById('motif-cancel').addEventListener('click', function () {
        document.getElementById('motif-modal').hidden = true;
    });
    document.getElementById('motif-ok').addEventListener('click', function () {
        var modal = document.getElementById('motif-modal');
        admFetch('/gestion/api/reservations/' + modal.getAttribute('data-resa-id') + '/annuler', {
            body: { motif: document.getElementById('motif-input').value }
        }).then(function () {
            showNotification({ success: true, title: 'Réservation annulée' });
            window.location.reload();
        });
    });
})();
</script>
{% endblock %}