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

{% block page_title %}Créer une configuration 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">Créer une configuration SMS</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Configurez une nouvelle connexion à l'API SendText
                </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">Configuration API SendText</h3>
                <div class="mt-2 text-sm text-blue-700">
                    <p>Vous aurez besoin de vos identifiants API SendText :</p>
                    <ul class="list-disc list-inside mt-1 space-y-1">
                        <li>API Key (SNT_API_KEY_...)</li>
                        <li>API Secret (SNT_API_SECRET_...)</li>
                        <li>Nom d'expéditeur (SENDTEXT par défaut)</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'}}) }}

            {# Name Field #}
            <div>
                <label for="{{ form.name.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.name) }} <span class="text-red-500">*</span>
                </label>
                {{ form_widget(form.name, {
                    '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': 'Configuration principale'
                    }
                }) }}
                {{ form_errors(form.name) }}
                <p class="mt-1 text-sm text-gray-500">Nom descriptif de cette configuration</p>
            </div>

            {# API Key Field #}
            <div>
                <label for="{{ form.apiKey.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.apiKey) }} <span class="text-red-500">*</span>
                </label>
                {{ form_widget(form.apiKey, {
                    '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': 'SNT_API_KEY_...'
                    }
                }) }}
                {{ form_errors(form.apiKey) }}
                <p class="mt-1 text-sm text-gray-500">Votre clé API SendText</p>
            </div>

            {# API Secret Field #}
            <div>
                <label for="{{ form.apiSecret.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.apiSecret) }} <span class="text-red-500">*</span>
                </label>
                {{ form_widget(form.apiSecret, {
                    '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': 'SNT_API_SECRET_...'
                    }
                }) }}
                {{ form_errors(form.apiSecret) }}
                <p class="mt-1 text-sm text-gray-500">Votre secret API SendText (ne sera pas visible après enregistrement)</p>
            </div>

            {# Sender Name Field #}
            <div>
                <label for="{{ form.senderName.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.senderName) }} <span class="text-red-500">*</span>
                </label>
                {{ form_widget(form.senderName, {
                    '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': 'SENDTEXT'
                    }
                }) }}
                {{ form_errors(form.senderName) }}
                <p class="mt-1 text-sm text-gray-500">Nom qui apparaîtra comme expéditeur des SMS</p>
            </div>

            {# API Endpoint Field #}
            <div>
                <label for="{{ form.apiEndpoint.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.apiEndpoint) }} <span class="text-red-500">*</span>
                </label>
                {{ form_widget(form.apiEndpoint, {
                    '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': 'https://api.sendtext.sn/v2/sms'
                    }
                }) }}
                {{ form_errors(form.apiEndpoint) }}
                <p class="mt-1 text-sm text-gray-500">URL de l'API pour envoi de SMS</p>
            </div>

            {# Balance Endpoint Field #}
            <div>
                <label for="{{ form.balanceEndpoint.vars.id }}" class="block text-sm font-medium text-gray-700 mb-1">
                    {{ form_label(form.balanceEndpoint) }} <span class="text-red-500">*</span>
                </label>
                {{ form_widget(form.balanceEndpoint, {
                    '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': 'https://api.sendtext.sn/v2/balance'
                    }
                }) }}
                {{ form_errors(form.balanceEndpoint) }}
                <p class="mt-1 text-sm text-gray-500">URL de l'API pour consulter le solde</p>
            </div>

            {# Is Active Checkbox #}
            <div class="flex items-start">
                <div class="flex items-center h-5">
                    {{ form_widget(form.isActive, {
                        'attr': {
                            'class': 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'
                        }
                    }) }}
                </div>
                <div class="ml-3 text-sm">
                    <label for="{{ form.isActive.vars.id }}" class="font-medium text-gray-700">
                        {{ form_label(form.isActive) }}
                    </label>
                    <p class="text-gray-500">Activer cette configuration immédiatement (désactivera les autres)</p>
                </div>
            </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">
                    <i class="fas fa-save mr-2"></i>
                    Créer la configuration
                </button>
            </div>

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

</div>
{% endblock %}