{% extends 'admin/base_admin.html.twig' %}

{# Carte générique : une section de content_blocks, un champ par feuille. #}
{% macro block_card(section, note, style) %}
    <div class="card card--pad" style="{{ style|default('margin-bottom:20px') }}">
        <h2 style="font-family:var(--title);font-size:16px;margin:0 0 {{ note ? '4px' : '14px' }}">{{ section.label }}</h2>
        {% if note %}<p class="page-sub" style="margin:0 0 14px">{{ note }}</p>{% endif %}
        {% for f in section.fields %}
            <label class="field">
                <span title="{{ f.path }}">{{ f.label }}</span>
                {% if f.multiline %}
                    <textarea name="{{ f.name }}" rows="{{ f.rows }}">{{ f.value }}</textarea>
                {% else %}
                    <input type="text" name="{{ f.name }}" value="{{ f.value }}">
                {% endif %}
            </label>
        {% endfor %}
    </div>
{% endmacro %}

{% block title %}Page{% endblock %}
{% block breadcrumb %}Pages / {{ page.slug }}{% endblock %}
{% block content %}
{% import _self as ui %}
{% set b = page.contentBlocks ?? {} %}
{# La grille d'images n'existe que sur le gabarit infographie (S-2xx). #}
{% set show_realisations = page.slug == 'infographie-en-guadeloupe' or b.infographie_realisations is defined %}
{% set show_avis = page.slug == 'accueil' or b.avis_google is defined %}
<style>
    .cb-card { display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border-2); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
    .cb-card.dragging { opacity:.4; }
    .cb-drag { cursor:grab; color:var(--muted); font-size:16px; user-select:none; flex:none; }
    .cb-card input, .cb-card textarea { background:var(--surface); border:1px solid var(--border-2); border-radius:8px; color:var(--text); padding:8px 10px; font-family:inherit; font-size:13px; }
    .cb-card input:focus, .cb-card textarea:focus { outline:none; border-color:rgba(167,139,250,.5); }
    .cb-num { width:120px; font-weight:700; }
    .cb-grow { flex:1; min-width:0; }
    .cb-remove { background:none; border:0; color:var(--red); cursor:pointer; font-size:14px; padding:4px 8px; flex:none; }
    .cb-accordion { flex-direction:column; align-items:stretch; gap:0; padding:0; }
    .cb-acc-head { display:flex; align-items:center; gap:10px; padding:10px 12px; }
    .cb-acc-title { flex:1; font-weight:600; }
    .cb-acc-toggle { background:none; border:0; color:var(--muted); cursor:pointer; font-size:13px; padding:4px 6px; flex:none; transition:transform .15s ease; }
    .cb-accordion.open .cb-acc-toggle { transform:rotate(180deg); }
    .cb-acc-body { max-height:0; overflow:hidden; transition:max-height .2s ease; }
    .cb-accordion.open .cb-acc-body { max-height:420px; }
    .cb-acc-body textarea { width:100%; box-sizing:border-box; margin:0 0 12px; }
    .cb-acc-inner { padding:0 12px; }
    .cb-thumb { flex:none; width:56px; height:56px; border-radius:8px; border:1px solid var(--border-2); background:var(--surface); display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .cb-thumb img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
    .cb-thumb .cb-thumb-empty { font-size:10px; color:var(--muted); text-align:center; line-height:1.2; padding:0 4px; }
    .cb-pick { flex:none; cursor:pointer; }
    .cb-pick.is-busy { opacity:.5; pointer-events:none; }
</style>
<form method="post">
    <div class="head-row">
        <h1 class="page-title" style="font-size:24px">/{{ page.slug }}</h1>
        <div style="display:flex;gap:10px">
            <a class="btn btn--ghost" href="{{ path('admin_page_index') }}">Annuler</a>
            <a class="btn btn--ghost" href="/{{ page.slug == 'accueil' ? '' : page.slug ~ '/' }}" target="_blank" rel="noopener">Prévisualiser</a>
            <button class="btn btn--primary" type="submit">Enregistrer</button>
        </div>
    </div>

    <div class="grid-2">
        <div>
            {# HERO — carte générique #}
            {% if sections.hero is defined %}
                {{ ui.block_card(sections.hero) }}
            {% endif %}

            {# STATS — chiffres clés (cards + drag & drop), liste répétable #}
            <div class="card card--pad" style="margin-bottom:20px">
                <input type="hidden" name="has_stats" value="1">
                <h2 style="font-family:var(--title);font-size:16px;margin:0 0 4px">Chiffres clés</h2>
                <p class="page-sub" style="margin:0 0 14px">Glissez pour réordonner.</p>
                <div id="stats-rows" data-sortable>
                    {% for s in b.stats ?? [] %}
                        <div class="cb-card" draggable="true">
                            <span class="cb-drag" title="Glisser">⠿</span>
                            <input class="cb-num" type="text" name="stat_num[]" value="{{ s.num }}" placeholder="258">
                            <input class="cb-grow" type="text" name="stat_label[]" value="{{ s.label }}" placeholder="projets livrés">
                            <button type="button" class="cb-remove" title="Supprimer" data-remove>✕</button>
                        </div>
                    {% endfor %}
                </div>
                <button type="button" class="btn btn--ghost" data-add="stats-rows" data-tpl="stat-tpl">+ Ajouter un chiffre</button>
            </div>

            {# FAQ — accordéon + drag & drop, liste répétable #}
            <div class="card card--pad" style="margin-bottom:20px">
                <input type="hidden" name="has_faq" value="1">
                <h2 style="font-family:var(--title);font-size:16px;margin:0 0 4px">FAQ</h2>
                <p class="page-sub" style="margin:0 0 14px">Cliquez une question pour déplier sa réponse. Glissez pour réordonner.</p>
                <div id="faq-rows" data-sortable>
                    {% for f in b.faq ?? [] %}
                        <div class="cb-card cb-accordion" draggable="true">
                            <div class="cb-acc-head">
                                <span class="cb-drag" title="Glisser">⠿</span>
                                <input class="cb-acc-title" type="text" name="faq_q[]" value="{{ f.q }}" placeholder="Question">
                                <button type="button" class="cb-acc-toggle" data-toggle title="Déplier">▾</button>
                                <button type="button" class="cb-remove" title="Supprimer" data-remove>✕</button>
                            </div>
                            <div class="cb-acc-body"><div class="cb-acc-inner"><textarea name="faq_a[]" rows="3" placeholder="Réponse">{{ f.a }}</textarea></div></div>
                        </div>
                    {% endfor %}
                </div>
                <button type="button" class="btn btn--ghost" data-add="faq-rows" data-tpl="faq-tpl">+ Ajouter une question</button>
            </div>


            {# AVIS GOOGLE — le carrousel de l'accueil (auteur, rôle, date, texte) #}
            {% if show_avis %}
                <div class="card card--pad" style="margin-bottom:20px">
                    <input type="hidden" name="has_avis_google" value="1">
                    <h2 style="font-family:var(--title);font-size:16px;margin:0 0 4px">Avis Google</h2>
                    <p class="page-sub" style="margin:0 0 14px">Collez ici les avis à afficher sur l’accueil. Cliquez un nom pour déplier son texte, glissez pour réordonner. La note et le nombre d’avis se règlent dans Paramètres → Contact.</p>
                    <div id="avis-rows" data-sortable>
                        {% for a in b.avis_google ?? [] %}
                            <div class="cb-card cb-accordion" draggable="true">
                                <div class="cb-acc-head">
                                    <span class="cb-drag" title="Glisser">⠿</span>
                                    <input class="cb-acc-title" type="text" name="avis_auteur[]" value="{{ a.author ?? '' }}" placeholder="Nom du client">
                                    <button type="button" class="cb-acc-toggle" data-toggle title="Déplier">▾</button>
                                    <button type="button" class="cb-remove" title="Supprimer" data-remove>✕</button>
                                </div>
                                <div class="cb-acc-body"><div class="cb-acc-inner">
                                    <input type="text" name="avis_role[]" value="{{ a.role ?? '' }}" placeholder="Entreprise et commune — ex. Villa O’Kalm, Le Gosier">
                                    <input type="text" name="avis_date[]" value="{{ a.date ?? '' }}" placeholder="Ancienneté — ex. il y a 2 mois">
                                    <textarea name="avis_texte[]" rows="3" placeholder="Texte de l’avis, tel que le client l’a écrit">{{ a.text ?? '' }}</textarea>
                                </div></div>
                            </div>
                        {% endfor %}
                    </div>
                    <button type="button" class="btn btn--ghost" data-add="avis-rows" data-tpl="avis-tpl">+ Ajouter un avis</button>
                </div>
            {% endif %}

            {# RÉALISATIONS — une image + un titre, liste répétable (page infographie) #}
            {% if show_realisations %}
                <div class="card card--pad" style="margin-bottom:20px" data-media-rows data-upload="{{ path('admin_media_upload') }}">
                    <input type="hidden" name="has_infographie_realisations" value="1">
                    <h2 style="font-family:var(--title);font-size:16px;margin:0 0 4px">Réalisations (images)</h2>
                    <p class="page-sub" style="margin:0 0 14px">Une image et un titre par réalisation — le titre s’affiche au survol. Glissez pour réordonner. Une ligne sans image n’est pas enregistrée.</p>
                    <div id="real-rows" data-sortable>
                        {% for r in realisations %}
                            <div class="cb-card" draggable="true">
                                <span class="cb-drag" title="Glisser">⠿</span>
                                <span class="cb-thumb">
                                    {% if r.url %}<img src="{{ r.url }}" alt="">{% else %}<span class="cb-thumb-empty">image manquante</span>{% endif %}
                                </span>
                                <input type="hidden" name="real_media_id[]" value="{{ r.media_id }}" data-media-id>
                                <input class="cb-grow" type="text" name="real_titre[]" value="{{ r.titre }}" placeholder="Titre affiché au survol">
                                <label class="pill-btn cb-pick">Changer<input type="file" accept="image/*" style="display:none" data-media-file></label>
                                <button type="button" class="cb-remove" title="Supprimer" data-remove>✕</button>
                            </div>
                        {% endfor %}
                    </div>
                    <button type="button" class="btn btn--ghost" data-add="real-rows" data-tpl="real-tpl">+ Ajouter une réalisation</button>
                </div>
            {% endif %}

            {# Toutes les autres sections de content_blocks, automatiquement #}
            {% for key, section in sections %}
                {% if key not in ['hero', 'cta'] %}
                    {% if key == 'geo' %}
                        {{ ui.block_card(section, 'Generative Engine Optimization. Le HTML simple (<em>, <strong>) est autorisé dans le titre.') }}
                    {% else %}
                        {{ ui.block_card(section) }}
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div>

        <div>
            {# MÉTA / SEO #}
            <div class="card card--pad" style="margin-bottom:20px">
                <h2 style="font-family:var(--title);font-size:16px;margin:0 0 14px">SEO & statut</h2>
                <label class="field"><span>Titre de la page</span><input type="text" name="title" value="{{ page.title }}" required></label>
                <label class="field"><span>H1</span><input type="text" name="h1" value="{{ page.h1 }}"></label>
                <label class="field"><span>Meta title</span><input type="text" name="meta_title" value="{{ page.metaTitle }}" maxlength="70"></label>
                <label class="field"><span>Meta description</span><textarea name="meta_description" rows="3" maxlength="160">{{ page.metaDescription }}</textarea></label>
                <label class="field"><span>Image Open Graph (URL)</span><input type="text" name="og_image" value="{{ page.ogImage }}"></label>
                <label class="field" style="display:flex;align-items:center;gap:8px"><input type="checkbox" name="is_active" value="1" style="width:auto" {{ page.active ? 'checked' }}> Page active</label>
            </div>

            {# CTA FINAL — carte générique #}
            {% if sections.cta is defined %}
                {{ ui.block_card(sections.cta, null, '') }}
            {% endif %}
        </div>
    </div>
</form>

{# Gabarits pour l'ajout de lignes #}
<template id="stat-tpl">
    <div class="cb-card" draggable="true">
        <span class="cb-drag" title="Glisser">⠿</span>
        <input class="cb-num" type="text" name="stat_num[]" placeholder="Valeur">
        <input class="cb-grow" type="text" name="stat_label[]" placeholder="Label">
        <button type="button" class="cb-remove" title="Supprimer" data-remove>✕</button>
    </div>
</template>
<template id="faq-tpl">
    <div class="cb-card cb-accordion open" draggable="true">
        <div class="cb-acc-head">
            <span class="cb-drag" title="Glisser">⠿</span>
            <input class="cb-acc-title" type="text" name="faq_q[]" placeholder="Question">
            <button type="button" class="cb-acc-toggle" data-toggle title="Déplier">▾</button>
            <button type="button" class="cb-remove" title="Supprimer" data-remove>✕</button>
        </div>
        <div class="cb-acc-body"><div class="cb-acc-inner"><textarea name="faq_a[]" rows="3" placeholder="Réponse"></textarea></div></div>
    </div>
</template>
{% if show_avis %}
<template id="avis-tpl">
    <div class="cb-card cb-accordion open" draggable="true">
        <div class="cb-acc-head">
            <span class="cb-drag" title="Glisser">⠿</span>
            <input class="cb-acc-title" type="text" name="avis_auteur[]" placeholder="Nom du client">
            <button type="button" class="cb-acc-toggle" data-toggle title="Déplier">▾</button>
            <button type="button" class="cb-remove" title="Supprimer" data-remove>✕</button>
        </div>
        <div class="cb-acc-body"><div class="cb-acc-inner">
            <input type="text" name="avis_role[]" placeholder="Entreprise et commune — ex. Villa O’Kalm, Le Gosier">
            <input type="text" name="avis_date[]" placeholder="Ancienneté — ex. il y a 2 mois">
            <textarea name="avis_texte[]" rows="3" placeholder="Texte de l’avis, tel que le client l’a écrit"></textarea>
        </div></div>
    </div>
</template>
{% endif %}

{% if show_realisations %}
<template id="real-tpl">
    <div class="cb-card" draggable="true">
        <span class="cb-drag" title="Glisser">⠿</span>
        <span class="cb-thumb"><span class="cb-thumb-empty">aucune image</span></span>
        <input type="hidden" name="real_media_id[]" value="" data-media-id>
        <input class="cb-grow" type="text" name="real_titre[]" placeholder="Titre affiché au survol">
        <label class="pill-btn cb-pick">Choisir une image<input type="file" accept="image/*" style="display:none" data-media-file></label>
        <button type="button" class="cb-remove" title="Supprimer" data-remove>✕</button>
    </div>
</template>
{% endif %}

<script>
(function () {
    // Ajout de ligne depuis un <template>
    document.querySelectorAll('[data-add]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var box = document.getElementById(btn.dataset.add);
            var tpl = document.getElementById(btn.dataset.tpl);
            box.appendChild(tpl.content.cloneNode(true));
        });
    });
    // Suppression
    document.addEventListener('click', function (e) {
        var rm = e.target.closest('[data-remove]');
        if (rm) rm.closest('.cb-card').remove();
        var tg = e.target.closest('[data-toggle]');
        if (tg) tg.closest('.cb-accordion').classList.toggle('open');
    });
    // Ouvrir/fermer l'accordéon en cliquant l'en-tête (hors champ de saisie)
    document.addEventListener('click', function (e) {
        var head = e.target.closest('.cb-acc-head');
        if (head && !e.target.closest('input, button')) head.closest('.cb-accordion').classList.toggle('open');
    });
    // Image d'une ligne « réalisation » : envoi dans la médiathèque, puis
    // renseignement de l'identifiant caché et de la vignette. Délégué au
    // document pour couvrir aussi les lignes ajoutées après coup.
    document.addEventListener('change', function (e) {
        var file = e.target.closest('[data-media-file]');
        if (!file || !file.files || !file.files[0]) return;
        var box = file.closest('[data-media-rows]');
        var row = file.closest('.cb-card');
        var pick = file.closest('.cb-pick');
        if (!box || !row) return;
        var body = new FormData();
        body.append('file', file.files[0]);
        if (pick) pick.classList.add('is-busy');
        fetch(box.dataset.upload, { method: 'POST', body: body })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (!data || !data.id) throw new Error(data && data.error ? data.error : 'Envoi impossible');
                row.querySelector('[data-media-id]').value = data.id;
                var thumb = row.querySelector('.cb-thumb');
                thumb.innerHTML = '';
                var img = document.createElement('img');
                img.src = data.url || '';
                img.alt = '';
                thumb.appendChild(img);
                if (pick) pick.firstChild.nodeValue = 'Changer';
            })
            .catch(function (err) { alert('Image non enregistrée : ' + err.message); })
            .then(function () { file.value = ''; if (pick) pick.classList.remove('is-busy'); });
    });
    // Drag & drop de réordonnancement (par conteneur [data-sortable])
    document.querySelectorAll('[data-sortable]').forEach(function (box) {
        var dragged = null;
        // Le glisser ne démarre que depuis la poignée (les champs restent éditables)
        box.addEventListener('mousedown', function (e) {
            var card = e.target.closest('.cb-card');
            if (card) card.draggable = !!e.target.closest('.cb-drag');
        });
        box.addEventListener('dragstart', function (e) {
            dragged = e.target.closest('.cb-card'); if (dragged) dragged.classList.add('dragging');
        });
        box.addEventListener('dragend', function () { if (dragged) dragged.classList.remove('dragging'); dragged = null; });
        box.addEventListener('dragover', function (e) {
            e.preventDefault();
            var over = e.target.closest('.cb-card');
            if (!dragged || !over || over === dragged) return;
            var r = over.getBoundingClientRect();
            box.insertBefore(dragged, (e.clientY - r.top) / r.height > 0.5 ? over.nextSibling : over);
        });
    });
})();
</script>
{% endblock %}