{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}

{# Header avec titre et bouton retour #}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Diffuser une Notification</h1>
            <p class="mt-2 text-sm text-gray-700">
                Envoyez une notification à tous les utilisateurs ou à des rôles spécifiques
            </p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ path('admin_notifications_dashboard') }}"
               class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Retour au Dashboard
            </a>
        </div>
    </div>
</div>

{# Formulaire #}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {# Colonne principale: Formulaire #}
    <div class="lg:col-span-2">
        <div class="bg-white shadow rounded-lg">
            <div class="px-6 py-5 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Informations de la notification</h3>
            </div>

            <div class="px-6 py-6">
                {{ form_start(form) }}

                <div class="space-y-6">
                    {# Type #}
                    <div>
                        {{ form_label(form.type, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
                        {{ form_widget(form.type, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500'}}) }}
                        {{ form_errors(form.type) }}
                    </div>

                    {# Catégorie #}
                    <div>
                        {{ form_label(form.category, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
                        {{ form_widget(form.category, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500'}}) }}
                        {{ form_errors(form.category) }}
                    </div>

                    {# Titre #}
                    <div>
                        {{ form_label(form.title, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
                        {{ form_widget(form.title, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500'}}) }}
                        {{ form_errors(form.title) }}
                    </div>

                    {# Message #}
                    <div>
                        {{ form_label(form.message, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
                        {{ form_widget(form.message, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500', 'rows': '4'}}) }}
                        {{ form_errors(form.message) }}
                    </div>

                    {# Lien (optionnel) #}
                    <div>
                        {{ form_label(form.link, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
                        {{ form_widget(form.link, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500'}}) }}
                        {{ form_errors(form.link) }}
                        <p class="mt-1 text-xs text-gray-500">URL vers laquelle la notification redirigera (optionnel)</p>
                    </div>

                    {# Icône (optionnel) #}
                    <div>
                        {{ form_label(form.icon, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
                        {{ form_widget(form.icon, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500'}}) }}
                        {{ form_errors(form.icon) }}
                        {{ form_help(form.icon) }}
                    </div>

                    {# Rôles cibles #}
                    <div>
                        {{ form_label(form.targetRoles, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
                        {{ form_widget(form.targetRoles, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500', 'size': '5'}}) }}
                        {{ form_errors(form.targetRoles) }}
                        {{ form_help(form.targetRoles) }}
                    </div>
                </div>

                {# Boutons d'action #}
                <div class="mt-6 flex items-center justify-end space-x-3">
                    <a href="{{ path('admin_notifications_dashboard') }}"
                       class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Annuler
                    </a>
                    <button type="submit"
                            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/>
                        </svg>
                        Diffuser la notification
                    </button>
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </div>

    {# Colonne latérale: Aide et aperçu #}
    <div class="lg:col-span-1">
        {# Aide Types #}
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
            <h4 class="text-sm font-semibold text-blue-900 mb-2">Types de notifications</h4>
            <ul class="text-xs text-blue-800 space-y-1">
                <li><strong>Sécurité:</strong> Alertes de sécurité, connexions suspectes</li>
                <li><strong>Système:</strong> Mises à jour, maintenance</li>
                <li><strong>Activité:</strong> Actions utilisateurs, événements</li>
                <li><strong>Admin:</strong> Notifications administratives</li>
            </ul>
        </div>

        {# Aide Catégories #}
        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
            <h4 class="text-sm font-semibold text-gray-900 mb-2">Catégories</h4>
            <ul class="text-xs text-gray-700 space-y-1">
                <li><span class="inline-block w-3 h-3 bg-blue-500 rounded-full mr-1"></span> <strong>Info:</strong> Information générale</li>
                <li><span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-1"></span> <strong>Succès:</strong> Action réussie</li>
                <li><span class="inline-block w-3 h-3 bg-yellow-500 rounded-full mr-1"></span> <strong>Avertissement:</strong> Attention requise</li>
                <li><span class="inline-block w-3 h-3 bg-red-500 rounded-full mr-1"></span> <strong>Erreur:</strong> Problème critique</li>
            </ul>
        </div>

        {# Aide Icônes #}
        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
            <h4 class="text-sm font-semibold text-purple-900 mb-2">Icônes disponibles</h4>
            <ul class="text-xs text-purple-800 space-y-1">
                <li><strong>bell:</strong> Notification générale (défaut)</li>
                <li><strong>shield-exclamation:</strong> Sécurité</li>
                <li><strong>cog:</strong> Système/Configuration</li>
                <li><strong>clipboard-list:</strong> Activité/Tâche</li>
                <li><strong>user-circle:</strong> Utilisateur</li>
            </ul>
        </div>

        {# Info diffusion #}
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="w-5 h-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                </div>
                <div class="ml-3">
                    <h4 class="text-sm font-semibold text-yellow-900 mb-1">Attention</h4>
                    <p class="text-xs text-yellow-800">
                        Cette notification sera envoyée à tous les utilisateurs actifs ayant les rôles sélectionnés.
                        Si aucun rôle n'est sélectionné, elle sera envoyée à tous les utilisateurs.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}