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

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

{% block content %}
<div class="max-w-4xl mx-auto">
    {# En-tête de la page #}
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">
            <svg class="w-8 h-8 inline-block mr-2 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
            {{ page_title }}
        </h1>
        <p class="text-gray-600">Envoyez les accès 2AB Group par email avec les instructions de connexion Outlook</p>
    </div>

    {# Message d'information #}
    <div class="mb-6 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-lg">
        <div class="flex items-start">
            <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div>
                <p class="text-sm font-medium text-blue-800">Interface de test</p>
                <p class="text-sm text-blue-700 mt-1">Après l'envoi, vous obtiendrez un contenu formaté à copier pour l'envoi par SMS.</p>
            </div>
        </div>
    </div>

    {# Formulaire #}
    <div class="bg-white rounded-lg shadow-md p-6">
        {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}

        {# Section: Informations du destinataire #}
        <div class="border-b border-gray-200 pb-6">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">
                <svg class="w-5 h-5 inline-block mr-2 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                Informations du destinataire
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900">
                        {{ form_label(form.firstName) }}
                    </label>
                    {{ form_widget(form.firstName) }}
                    {{ form_errors(form.firstName) }}
                </div>

                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900">
                        {{ form_label(form.lastName) }}
                    </label>
                    {{ form_widget(form.lastName) }}
                    {{ form_errors(form.lastName) }}
                </div>

                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900">
                        {{ form_label(form.phone) }}
                    </label>
                    {{ form_widget(form.phone) }}
                    {{ form_errors(form.phone) }}
                </div>

                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900">
                        {{ form_label(form.professionalEmail) }}
                    </label>
                    {{ form_widget(form.professionalEmail) }}
                    <p class="mt-1 text-sm text-gray-500">{{ form_help(form.professionalEmail) }}</p>
                    {{ form_errors(form.professionalEmail) }}
                </div>
            </div>
        </div>

        {# Section: Identifiants 2AB Group #}
        <div class="border-b border-gray-200 pb-6">
            <h2 class="text-xl font-semibold text-gray-900 mb-4">
                <svg class="w-5 h-5 inline-block mr-2 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
                Identifiants 2AB Group
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900">
                        {{ form_label(form.twoabgroupEmail) }}
                    </label>
                    {{ form_widget(form.twoabgroupEmail) }}
                    <p class="mt-1 text-sm text-gray-500">{{ form_help(form.twoabgroupEmail) }}</p>
                    {{ form_errors(form.twoabgroupEmail) }}
                </div>

                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900">
                        {{ form_label(form.password) }}
                    </label>
                    {{ form_widget(form.password) }}
                    <p class="mt-1 text-sm text-gray-500">{{ form_help(form.password) }}</p>
                    {{ form_errors(form.password) }}
                </div>
            </div>
        </div>

        {# Section: Information Outlook #}
        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-lg">
            <div class="flex">
                <svg class="w-5 h-5 text-yellow-400 mt-0.5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <div>
                    <h3 class="text-sm font-medium text-yellow-800">Instructions de connexion</h3>
                    <p class="text-sm text-yellow-700 mt-1">L'email envoyé inclura des instructions détaillées pour configurer le compte avec <strong>Microsoft Outlook</strong>.</p>
                </div>
            </div>
        </div>

        {# Boutons d'action #}
        <div class="flex items-center justify-between pt-6">
            <a href="{{ path('app_admin_dashboard') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Retour
            </a>

            <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent rounded-lg shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                Envoyer l'email
            </button>
        </div>

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

    {# Zone d'aide #}
    <div class="mt-6 bg-gray-50 rounded-lg p-4">
        <h3 class="text-sm font-semibold text-gray-900 mb-2">💡 Conseils</h3>
        <ul class="text-sm text-gray-600 space-y-1 list-disc list-inside">
            <li>Vérifiez que l'email 2AB Group est correct avant l'envoi</li>
            <li>Le mot de passe doit contenir au moins 8 caractères</li>
            <li>L'email professionnel sera utilisé comme destinataire principal</li>
            <li>Après l'envoi, vous pourrez copier le contenu pour l'envoi SMS</li>
        </ul>
    </div>
</div>
{% endblock %}