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

{% block title %}Notification globale{% endblock %}

{% block content %}
<div style="max-width: 600px; margin: 0 auto; padding: 30px;">
    <a href="{{ path('app_admin_push_index') }}" style="color: #007aff; text-decoration: none; font-size: 14px; font-weight: 600;">← Retour aux notifications</a>

    <h1 style="font-size: 24px; font-weight: 800; margin: 20px 0 5px;">📢 Notification globale</h1>
    <p style="color: #6e6e73; margin-bottom: 30px;">Envoyer à <strong>tous les {{ totalSubscriptions }} abonnés</strong> (toutes cartes confondues)</p>

    {% for message in app.flashes('success') %}
        <div style="background: #d4edda; color: #155724; padding: 15px 20px; border-radius: 10px; margin-bottom: 20px; font-weight: 600;">
            {{ message }}
        </div>
    {% endfor %}
    {% for message in app.flashes('error') %}
        <div style="background: #f8d7da; color: #721c24; padding: 15px 20px; border-radius: 10px; margin-bottom: 20px; font-weight: 600;">
            {{ message }}
        </div>
    {% endfor %}

    <div style="background: #fff3cd; color: #856404; padding: 15px 20px; border-radius: 10px; margin-bottom: 25px; font-size: 14px;">
        ⚠️ <strong>Attention :</strong> Cette notification sera envoyée à TOUS les abonnés de TOUTES les cartes.
    </div>

    <form method="post" style="display: flex; flex-direction: column; gap: 20px;">
        <div>
            <label style="display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: #1d1d1f;">Titre *</label>
            <input type="text" name="title" required maxlength="100" placeholder="Ex: NUM-ECARD — Nouveauté !" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e5ea; border-radius: 10px; font-size: 15px; outline: none;">
        </div>

        <div>
            <label style="display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: #1d1d1f;">Message *</label>
            <textarea name="body" required maxlength="500" rows="4" placeholder="Le contenu de votre notification..." style="width: 100%; padding: 12px 16px; border: 2px solid #e5e5ea; border-radius: 10px; font-size: 15px; outline: none; resize: vertical;"></textarea>
        </div>

        <div>
            <label style="display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: #1d1d1f;">URL à ouvrir <span style="color: #6e6e73; font-weight: 400;">(optionnel)</span></label>
            <input type="url" name="url" placeholder="https://num-ecard.com" style="width: 100%; padding: 12px 16px; border: 2px solid #e5e5ea; border-radius: 10px; font-size: 15px; outline: none;">
        </div>

        <button type="submit" style="background: linear-gradient(135deg, #ff3b30, #ff6b6b); color: white; border: none; padding: 14px 30px; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 10px;">
            📢 Envoyer à tous ({{ totalSubscriptions }} destinataires)
        </button>
    </form>

    {% if result %}
    <div style="margin-top: 30px; background: #f8f9fa; border-radius: 12px; padding: 20px;">
        <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 10px;">📊 Résultat</h3>
        <p>✅ Envoyées : <strong>{{ result.sent }}</strong></p>
        <p>❌ Échouées : <strong>{{ result.failed }}</strong></p>
    </div>
    {% endif %}
</div>
{% endblock %}