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

{% block title %}Admin Mon Actu — {{ beneficiaire.prenom }} {{ beneficiaire.nom }}{% endblock %}

{% block content %}
<div class="page-header">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
        <div>
            <div style="margin-bottom:6px;"><a href="{{ path('app_admin_actu_index') }}" style="color:#86868b;text-decoration:none;font-size:13px;">← Tous les clients</a></div>
            <h1 class="page-title">📣 Publier pour un client</h1>
            <p class="page-subtitle">{{ beneficiaire.prenom }} {{ beneficiaire.nom }} · {{ beneficiaire.commande.packType|upper }} · {{ beneficiaire.commande.clientEmail }}</p>
        </div>
        <span style="display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(0,122,255,.1);border:1px solid rgba(0,122,255,.25);border-radius:8px;font-family:monospace;font-size:11px;color:#007aff;">
            🔐 Mode admin — Publication sur la carte de {{ beneficiaire.prenom }} {{ beneficiaire.nom }}
        </span>
    </div>
</div>

<div style="display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start;">

    {# ── FORMULAIRE ── #}
    <div>
        <form method="post"
              action="{{ actu ? path('app_admin_actu_edit', {id: actu.id}) : path('app_admin_actu_new', {beneficiaireId: beneficiaire.id}) }}"
              enctype="multipart/form-data">

            <div class="card" style="margin-bottom:16px;">
                <div style="padding:18px 22px;border-bottom:1px solid #f0f0f5;">
                    <span style="font-family:monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#86868b;">Contenu du post</span>
                </div>
                <div style="padding:22px;display:flex;flex-direction:column;gap:16px;">

                    <div>
                        <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Titre *</label>
                        <input type="text" name="titre" required
                               value="{{ actu ? actu.titre : '' }}"
                               placeholder="Titre accrocheur, 8–12 mots…"
                               style="width:100%;background:#f5f5f7;border:1px solid #e5e5ea;border-radius:10px;padding:11px 14px;font-size:14px;color:#1d1d1f;outline:none;">
                    </div>

                    <div>
                        <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Catégorie</label>
                        <div style="display:flex;gap:8px;flex-wrap:wrap;">
                            {% for key, label in categories %}
                                <label style="cursor:pointer;">
                                    <input type="radio" name="categorie" value="{{ key }}"
                                           {{ (actu and actu.categorie == key) or (not actu and key == 'realisation') ? 'checked' : '' }}
                                           style="display:none;" class="cat-radio">
                                    <span class="cat-pill" style="display:inline-block;padding:7px 14px;border-radius:20px;border:1px solid #e5e5ea;font-size:13px;cursor:pointer;background:#f5f5f7;color:#86868b;transition:all .15s;">{{ label }}</span>
                                </label>
                            {% endfor %}
                        </div>
                    </div>

                    <div>
                        <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Contenu *</label>
                        <textarea name="contenu" required rows="5"
                                  placeholder="3–5 lignes max, optimisé SEO, aller à l'essentiel…"
                                  style="width:100%;background:#f5f5f7;border:1px solid #e5e5ea;border-radius:10px;padding:11px 14px;font-size:14px;color:#1d1d1f;outline:none;resize:vertical;line-height:1.6;">{{ actu ? actu.contenu : '' }}</textarea>
                    </div>

                    <div>
                        <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Image (optionnel)</label>
                        {% if actu and actu.imageFilename %}
                            <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
                                <img src="{{ actu.imageUrl }}" alt="" style="width:80px;height:60px;border-radius:8px;object-fit:cover;">
                                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#ff3b30;cursor:pointer;">
                                    <input type="checkbox" name="removeImage" value="1"> Supprimer l'image
                                </label>
                            </div>
                        {% endif %}
                        <div style="border:2px dashed #e5e5ea;border-radius:12px;padding:22px;text-align:center;cursor:pointer;" id="upload-zone">
                            <div style="font-size:24px;margin-bottom:6px;">🖼️</div>
                            <div style="font-size:13px;color:#86868b;"><strong style="color:#007aff;">Uploader une image</strong> · JPG, PNG, WebP · Max 2 Mo</div>
                            <input type="file" name="image" id="image-input" accept="image/*" style="display:none;">
                        </div>
                        <div id="image-preview" style="display:none;margin-top:10px;">
                            <img id="preview-img" alt="" style="max-width:100%;border-radius:10px;max-height:180px;object-fit:cover;">
                        </div>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        <div>
                            <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Lien CTA</label>
                            <input type="url" name="ctaUrl" value="{{ actu ? actu.ctaUrl : '' }}" placeholder="https://…" style="width:100%;background:#f5f5f7;border:1px solid #e5e5ea;border-radius:10px;padding:11px 14px;font-size:14px;color:#1d1d1f;outline:none;">
                        </div>
                        <div>
                            <label style="display:block;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#86868b;margin-bottom:7px;">Texte du bouton</label>
                            <input type="text" name="ctaTexte" value="{{ actu ? actu.ctaTexte : '' }}" placeholder="Ex : Votre projet ?" style="width:100%;background:#f5f5f7;border:1px solid #e5e5ea;border-radius:10px;padding:11px 14px;font-size:14px;color:#1d1d1f;outline:none;">
                        </div>
                    </div>
                </div>
            </div>

            {# Options #}
            <div class="card" style="padding:20px 22px; margin-bottom:16px;">
                <div style="font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#86868b;margin-bottom:14px;">Options</div>

                {% set toggles = [
                    {name: 'epingle',              label: '📌 Épingler en haut',           sub: 'Ce post apparaît en premier sur la carte du client',          checked: (actu and actu.epingle) ? true : false},
                    {name: 'sendPush',             label: '🔔 Notifier les abonnés push',  sub: 'Envoyer une notification aux abonnés de la carte',             checked: true},
                    {name: 'notifyClient',         label: '📧 Notifier le client par email', sub: 'Un email est envoyé à ' ~ beneficiaire.commande.clientEmail, checked: true},
                    {name: 'publierImmediatement', label: '▶️ Publier immédiatement',       sub: 'Désactivez pour enregistrer en brouillon',                    checked: true}
                ] %}
                {% for toggle in toggles %}
                <div style="display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f0f0f5;">
                    <div>
                        <div style="font-size:14px;color:#1d1d1f;">{{ toggle.label }}</div>
                        <div style="font-size:12px;color:#86868b;margin-top:2px;">{{ toggle.sub }}</div>
                    </div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="{{ toggle.name }}" value="1" {{ toggle.checked ? 'checked' : '' }}>
                        <span class="toggle-track"></span>
                    </label>
                </div>
                {% endfor %}
            </div>

            <div style="display:flex;gap:10px;">
                <button type="submit" style="flex:1;padding:13px;background:#007aff;color:white;border:none;border-radius:10px;font-family:monospace;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;">
                    Publier sur la carte →
                </button>
                <a href="{{ path('app_admin_actu_index') }}" style="padding:13px 20px;background:#f5f5f7;color:#86868b;border-radius:10px;font-family:monospace;font-size:12px;text-decoration:none;white-space:nowrap;">
                    Annuler
                </a>
            </div>

        </form>
    </div>

    {# ── SIDEBAR : POSTS EXISTANTS ── #}
    <div style="position:sticky;top:80px;">
        <div class="card">
            <div style="padding:16px 18px;border-bottom:1px solid #f0f0f5;font-family:monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#86868b;">
                Posts existants ({{ actus|length }})
            </div>
            {% if actus is empty %}
                <div style="padding:24px;text-align:center;color:#86868b;font-size:13px;">Aucun post encore</div>
            {% else %}
                <div style="max-height:500px;overflow-y:auto;">
                {% for a in actus %}
                    <div style="display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #f5f5f7;">
                        <div style="width:36px;height:36px;border-radius:7px;background:#f5f5f7;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">
                            {{ a.imageFilename ? '🖼️' : '📝' }}
                        </div>
                        <div style="flex:1;min-width:0;">
                            <div style="font-size:12px;font-weight:600;color:#1d1d1f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                {% if a.epingle %}📌 {% endif %}{{ a.titre }}
                            </div>
                            <div style="font-size:11px;color:#86868b;">
                                {{ a.isPublie() ? '✅ Publié' : '📝 Brouillon' }} · {{ a.categorieLabel }}
                            </div>
                        </div>
                        <div style="display:flex;gap:4px;">
                            <a href="{{ path('app_admin_actu_edit', {id: a.id}) }}" style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;background:#f0f0f5;color:#3a3a3c;text-decoration:none;font-size:12px;" title="Éditer">✏️</a>
                            <form method="post" action="{{ path('app_admin_actu_delete', {id: a.id}) }}" style="display:inline;" onsubmit="return confirm('Supprimer ?');">
                                <button type="submit" style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:7px;background:#fff0f0;color:#ff3b30;cursor:pointer;font-size:12px;" title="Supprimer">🗑️</button>
                            </form>
                        </div>
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>

</div>

<style>
.toggle-switch { position:relative;display:inline-block;width:44px;height:26px; }
.toggle-switch input { opacity:0;width:0;height:0; }
.toggle-track { position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#e5e5ea;border-radius:13px;transition:.2s; }
.toggle-track::after { content:'';position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.2s; }
.toggle-switch input:checked + .toggle-track { background:#007aff; }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(18px); }
.cat-radio:checked + .cat-pill { background:rgba(0,122,255,.15);border-color:#007aff;color:#007aff; }
</style>

<script>
document.getElementById('upload-zone').addEventListener('click', () => document.getElementById('image-input').click());
document.getElementById('image-input').addEventListener('change', function() {
    if (this.files && this.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById('preview-img').src = e.target.result;
            document.getElementById('image-preview').style.display = 'block';
        };
        reader.readAsDataURL(this.files[0]);
    }
});
document.querySelectorAll('.cat-radio').forEach(r => {
    r.addEventListener('change', function() {
        document.querySelectorAll('.cat-pill').forEach(p => { p.style.background='#f5f5f7'; p.style.borderColor='#e5e5ea'; p.style.color='#86868b'; });
        if (this.checked) { const p = this.nextElementSibling; p.style.background='rgba(0,122,255,.15)'; p.style.borderColor='#007aff'; p.style.color='#007aff'; }
    });
    if (r.checked) { const p = r.nextElementSibling; p.style.background='rgba(0,122,255,.15)'; p.style.borderColor='#007aff'; p.style.color='#007aff'; }
});
</script>
{% endblock %}