{# components/contact_form.html.twig #}
<div {{ attributes }}>
    <h3 class="text-xl font-bold mb-4">Envoyez-nous un message</h3>

    {% if isSuccess %}
        <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg shadow-sm">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div class="ml-3 flex-grow">
                    <h3 class="text-lg font-medium text-green-800">Message envoyé avec succès !</h3>
                    <div class="mt-2 text-green-700">
                        <p>Nous avons bien reçu votre demande et nous vous répondrons dans les plus brefs délais.</p>
                    </div>
                    <div class="mt-4">
                        <button type="button"
                                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                data-action="live#action"
                                data-action-name="reset">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>
                            Envoyer un nouveau message
                        </button>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        {% if errorMessage %}
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg shadow-sm">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <svg class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-lg font-medium text-red-800">Une erreur est survenue</h3>
                        <div class="mt-2 text-red-700">
                            <p>{{ errorMessage }}</p>
                            <p class="mt-1 text-sm">Veuillez vérifier vos informations et réessayer. Si le problème persiste, n'hésitez pas à nous contacter par mail, par téléphone.</p>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        {{ form_start(form, {'attr': {'data-controller': 'contact_form', 'data-action': 'live#action:prevent', 'data-live-action-param': 'save'}}) }}

        {# Ajout du template pour les champs de formulaire #}
        {% macro form_field(field, attr, placeholder, fullWidth) %}
            {% set hasError = field.vars.errors|length > 0 %}
            {% set isRequired = field.vars.required %}
            {% set isCheckbox = field.vars.block_prefixes[1] == 'checkbox' %}
            {% set isRadio = field.vars.block_prefixes[1] == 'radio' %}
            {% set isExpanded = field.vars.expanded is defined and field.vars.expanded %}

            {% if isExpanded and isRadio %}
                {# Inclure un template spécifique pour les boutons radio si nécessaire #}
            {% else %}
                <div class="{{ fullWidth|default(false) ? 'col-span-2' : '' }}">
                    {% if not isCheckbox %}
                        <label class="block text-sm font-medium {{ hasError ? 'text-red-700' : 'text-gray-700' }}">
                            {{ field.vars.label|default('') }}
                            {% if isRequired %}
                                <span class="text-red-500">*</span>
                            {% endif %}
                        </label>
                    {% endif %}

                    <div class="relative mt-1 rounded-md shadow-sm">
                        {% set defaultClass = 'block w-full rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-2 ' ~
                            (hasError ? 'border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500') %}

                        {{ form_widget(field, {
                            attr: attr|default({})|merge({
                                'class': attr.class|default('') ~ ' ' ~ defaultClass,
                                'placeholder': placeholder|default(''),
                                'readonly': attr.readonly|default(false)
                            })
                        }) }}

                        {% if isCheckbox %}
                            <div class="ml-2 inline-block">
                                <label for="{{ field.vars.id }}" class="text-sm font-medium {{ hasError ? 'text-red-700' : 'text-gray-700' }}">
                                    {{ field.vars.label|default('') }}
                                    {% if isRequired %}
                                        <span class="text-red-500">*</span>
                                    {% endif %}
                                </label>
                            </div>
                        {% endif %}

                        {% if hasError %}
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                <svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                                          clip-rule="evenodd"></path>
                                </svg>
                            </div>
                        {% endif %}
                    </div>

                    {% if hasError %}
                        <div class="mt-2 text-sm text-red-600">{{ form_errors(field) }}</div>
                    {% endif %}
                </div>
            {% endif %}
        {% endmacro %}

        {# Utilisation du macro #}
        {% import _self as formMacros %}

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
                {{ formMacros.form_field(form.firstname, {}, 'Votre prénom') }}
            </div>
            <div>
                {{ formMacros.form_field(form.lastname, {}, 'Votre nom') }}
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
                {{ formMacros.form_field(form.email, {}, 'Votre email') }}
            </div>
            <div>
                {{ formMacros.form_field(form.phone, {}, 'Votre téléphone') }}
            </div>
        </div>

        <div class="mb-4">
            {{ formMacros.form_field(form.subject, {}, 'Objet de votre message', true) }}
        </div>

        <div class="mb-4">
            {{ formMacros.form_field(form.message, {'rows': 5}, 'Votre message', true) }}
        </div>

        {% set hasError = form.privacyPolicy.vars.errors|length > 0 %}
        <div class="mb-4">
            <div class="flex items-start">
                <div class="flex items-center h-5">
                    {{ form_widget(form.privacyPolicy, {
                        'attr': {
                            'class': 'h-4 w-4 focus:ring-2 border-gray-300 rounded ' ~
                            (hasError ? 'text-red-600 focus:ring-red-500' : 'text-indigo-600 focus:ring-indigo-500')
                        }
                    }) }}
                </div>
                <div class="ml-3 text-sm">
                    <label for="{{ form.privacyPolicy.vars.id }}" class="font-medium {{ hasError ? 'text-red-700' : 'text-gray-700' }}">
                        J'accepte que mes données soient traitées pour répondre à ma demande conformément à la politique de confidentialité
                    </label>

                    {% if hasError %}
                        <div class="mt-1 text-sm text-red-600">{{ form_errors(form.privacyPolicy) }}</div>
                    {% endif %}
                </div>

                {% if hasError %}
                    <div class="ml-2 flex-shrink-0">
                        <svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                                  clip-rule="evenodd"></path>
                        </svg>
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="btn-primary text-sm font-medium shrink-0">
                Envoyer
            </button>
        </div>
        {{ form_end(form) }}
    {% endif %}
</div>