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

{% block page_title %}Créer une campagne SMS{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# Header Section #}
    <div class="mb-8">
        <div class="flex items-center space-x-4">
            <a href="{{ path('admin_sms_campaigns_index') }}"
               class="inline-flex items-center px-3 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 transition-colors duration-150">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour
            </a>
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Créer une campagne SMS</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Envoyez un message à plusieurs destinataires simultanément
                </p>
            </div>
        </div>
    </div>

    {# Info Alert #}
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-400 text-xl"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-blue-800">Envoi groupé de SMS</h3>
                <div class="mt-2 text-sm text-blue-700">
                    <ul class="list-disc list-inside space-y-1">
                        <li>Sélectionnez plusieurs utilisateurs comme destinataires</li>
                        <li>Seuls les utilisateurs avec un numéro de téléphone valide recevront le SMS</li>
                        <li>Le même message sera envoyé à tous les destinataires</li>
                        <li>Les envois sont traités individuellement pour un meilleur suivi</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {# Form #}
    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6">
            {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}

            {# Campaign Name Field #}
            <div>
                <label for="{{ form.campaignName.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.campaignName) }} <span class="text-red-500">*</span>
                </label>
                {{ form_widget(form.campaignName, {
                    'attr': {
                        'class': 'block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200',
                        'placeholder': 'Campagne de notification...'
                    }
                }) }}
                {{ form_errors(form.campaignName) }}
                <p class="mt-1 text-sm text-gray-500">Nom de cette campagne (pour référence interne)</p>
            </div>

            {# Recipients Field #}
            <div>
                <label for="{{ form.recipients.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.recipients) }} <span class="text-red-500">*</span>
                </label>
                {{ form_widget(form.recipients, {
                    'attr': {
                        'class': 'block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200',
                        'size': 10
                    }
                }) }}
                {{ form_errors(form.recipients) }}
                <p class="mt-1 text-sm text-gray-500">
                    Sélectionnez un ou plusieurs utilisateurs (maintenez Ctrl/Cmd pour sélectionner plusieurs)
                </p>
            </div>

            {# Message Field #}
            <div>
                <label for="{{ form.message.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.message) }} <span class="text-red-500">*</span>
                </label>
                {{ form_widget(form.message, {
                    'attr': {
                        'class': 'block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200',
                        'rows': 5,
                        'placeholder': 'Votre message SMS...',
                        'maxlength': 320,
                        'id': 'campaign-message'
                    }
                }) }}
                {{ form_errors(form.message) }}
                <div class="mt-1 flex justify-between text-sm">
                    <p class="text-gray-500">Limite: 320 caractères (2 SMS max)</p>
                    <p class="text-gray-500">
                        <span id="char-count">0</span> / 320
                    </p>
                </div>
            </div>

            {# SMS Type Field #}
            <div>
                <label for="{{ form.smsType.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.smsType) }}
                </label>
                {{ form_widget(form.smsType, {
                    'attr': {
                        'class': 'block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-all duration-200'
                    }
                }) }}
                {{ form_errors(form.smsType) }}
                <p class="mt-1 text-sm text-gray-500">
                    <strong>Normal:</strong> SMS classique (durée de vie standard)<br>
                    <strong>Flash:</strong> SMS affiché directement à l'écran (notifications urgentes)
                </p>
            </div>

            {# Warning for cost #}
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-yellow-400 text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-yellow-800">Attention aux coûts</h3>
                        <div class="mt-2 text-sm text-yellow-700">
                            <p>Chaque destinataire consommera un crédit SMS. Vérifiez votre solde avant d'envoyer une campagne importante.</p>
                        </div>
                    </div>
                </div>
            </div>

            {# Form Actions #}
            <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
                <a href="{{ path('admin_sms_campaigns_index') }}"
                   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 transition-colors duration-150">
                    <i class="fas fa-times mr-2"></i>
                    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 transition-colors duration-150"
                        onclick="return confirm('Confirmer l\'envoi de cette campagne SMS ?')">
                    <i class="fas fa-paper-plane mr-2"></i>
                    Envoyer la campagne
                </button>
            </div>

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

</div>

<script>
    // Character counter
    document.addEventListener('DOMContentLoaded', function() {
        const messageField = document.getElementById('campaign-message');
        const charCount = document.getElementById('char-count');

        if (messageField && charCount) {
            messageField.addEventListener('input', function() {
                charCount.textContent = this.value.length;
            });

            // Initial count
            charCount.textContent = messageField.value.length;
        }
    });
</script>
{% endblock %}