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

{% block page_title %}Envoyer un 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_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">Envoyer un SMS</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Envoyez un SMS à un utilisateur ou à un numéro personnalisé
                </p>
            </div>
        </div>
    </div>

    {# Active Config Info #}
    {% if activeConfig %}
        <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-400 text-xl"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-green-800">Configuration active</h3>
                    <div class="mt-2 text-sm text-green-700">
                        <p>Configuration: <strong>{{ activeConfig.name }}</strong></p>
                        <p>Expéditeur: <strong>{{ activeConfig.senderName }}</strong></p>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-red-400 text-xl"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">Aucune configuration active</h3>
                    <div class="mt-2 text-sm text-red-700">
                        <p>Vous devez activer une configuration SMS avant de pouvoir envoyer des messages.</p>
                        <a href="{{ path('admin_sms_index') }}" class="font-medium underline">
                            Configurer maintenant
                        </a>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {# 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'}}) }}

            {# User or Custom Phone Section #}
            <div class="bg-gray-50 rounded-lg p-4">
                <h3 class="text-sm font-medium text-gray-900 mb-4">Destinataire</h3>

                {# User Selection #}
                <div class="mb-4">
                    <label for="{{ form.user.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ form_label(form.user) }}
                    </label>
                    {{ form_widget(form.user, {
                        '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',
                            'data-action': 'change->form#disableCustomPhone'
                        }
                    }) }}
                    {{ form_errors(form.user) }}
                    <p class="mt-1 text-sm text-gray-500">Sélectionnez un utilisateur existant</p>
                </div>

                <div class="text-center text-sm text-gray-500 font-medium mb-4">
                    OU
                </div>

                {# Custom Phone Number #}
                <div>
                    <label for="{{ form.customPhone.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ form_label(form.customPhone) }}
                    </label>
                    {{ form_widget(form.customPhone, {
                        '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': '+221 77 123 45 67'
                        }
                    }) }}
                    {{ form_errors(form.customPhone) }}
                    <p class="mt-1 text-sm text-gray-500">Saisissez un numéro au format international (+221...)</p>
                </div>
            </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
                    }
                }) }}
                {{ 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>

            {# Form Actions #}
            <div class="flex justify-end space-x-3 pt-6 border-t border-gray-200">
                <a href="{{ path('admin_sms_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"
                        {% if not activeConfig %}disabled{% endif %}>
                    <i class="fas fa-paper-plane mr-2"></i>
                    Envoyer le SMS
                </button>
            </div>

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

    {# Info Section #}
    <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
        <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">Informations sur l'envoi de SMS</h3>
                <div class="mt-2 text-sm text-blue-700">
                    <ul class="list-disc list-inside space-y-1">
                        <li>Un SMS standard peut contenir jusqu'à 160 caractères</li>
                        <li>Au-delà, le message sera divisé en plusieurs SMS (limite: 320 caractères = 2 SMS)</li>
                        <li>Les SMS Flash sont affichés immédiatement et ne sont pas sauvegardés</li>
                        <li>Le format international est requis (+221 pour le Sénégal)</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    // Character counter
    document.addEventListener('DOMContentLoaded', function() {
        const messageField = document.querySelector('textarea[name*="[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 %}