{{ form_start(form, {
    attr: {
        'data-action': 'live#action:prevent',
        'data-live-action-param': 'submit',
        'class': 'space-y-6',
        'id': 'customer_form'
    }
}) }}
    {# Affichage des erreurs globales #}
    {% if form.vars.errors|length > 0 %}
        <div class="rounded-md bg-red-50 p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                              clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">
                        Veuillez corriger les erreurs ci-dessous
                    </h3>
                    <div class="mt-2 text-sm text-red-700">
                        <ul class="list-disc pl-5 space-y-1">
                            {% for error in form.vars.errors %}
                                <li>{{ error.message }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {% if errorMessage %}
        <div class="rounded-md bg-red-50 p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                              clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">Erreur</h3>
                    <div class="mt-2 text-sm text-red-700">
                        <p>{{ errorMessage }}</p>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

<div class="space-y-6">
    {# Type de client - choix entre particulier et professionnel #}
    <div class="bg-blue-50 p-4 rounded-lg">
        {{ form_label(form.insuranceCategoryType, 'Vous êtes :', {'label_attr': {'class': 'text-lg font-medium text-gray-900 mb-2 block'}}) }}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {% for choice in form.insuranceCategoryType %}
                <div>
                    {{ form_widget(choice, {
                        'attr': {
                            'class': 'h-4 w-5 text-blue-600 focus:ring-blue-500 border-gray-300',
                            'data-action': 'change->live#action',
                            'data-live-action-param': 'refreshForm'
                        }
                    }) }}
                    {{ form_label(choice, null, {'label_attr': {'class': 'ml-3 text-base font-medium text-gray-700'}}) }}
                </div>
            {% endfor %}
        </div>
        {{ form_errors(form.insuranceCategoryType) }}
    </div>

    <h3 class="text-lg font-medium text-gray-900">Informations personnelles</h3>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        {# Civilité - Commun aux deux types d'utilisateur #}
        {% include 'quote_request/_form_field.html.twig' with {
            field: form.civility,
            placeholder: 'Sélectionnez votre civilité'
        } %}

        {# Prénom #}
        {% include 'quote_request/_form_field.html.twig' with {
            field: form.firstName,
            placeholder: 'Entrez votre prénom'
        } %}

        {# Nom #}
        {% include 'quote_request/_form_field.html.twig' with {
            field: form.lastName,
            placeholder: 'Entrez votre nom'
        } %}
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {# Email #}
        {% include 'quote_request/_form_field.html.twig' with {
            field: form.email,
            placeholder: 'votre.email@exemple.com'
        } %}

        {# Téléphone #}
        {% include 'quote_request/_form_field.html.twig' with {
            field: form.phone,
            placeholder: 'Ex: 0612345678'
        } %}
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {# Date de naissance - S'affiche si défini #}
        {% if form.birthDate is defined %}
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.birthDate
            } %}
        {% endif %}

        {# Situation maritale - Pour particulier uniquement #}
        {% if form.maritalStatus is defined %}
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.maritalStatus
            } %}
        {% endif %}
    </div>

    {# Section profession (particulier) ou informations professionnelles #}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {% if form.profession is defined %}
            {# Profession - Pour particulier uniquement #}
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.profession,
                placeholder: 'Votre profession actuelle'
            } %}
        {% endif %}

        {% if form.housingStatus is defined %}
            {# Statut de logement - Pour particulier uniquement #}
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.housingStatus
            } %}
        {% endif %}
    </div>

    {# Informations professionnelles - Pour professionnel uniquement #}
    {% if form.professionalInfo is defined %}
        <hr class="my-8 border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Informations professionnelles</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {# SIREN #}
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.professionalInfo.siren,
                placeholder: '123456789'
            } %}

            {# Raison sociale #}
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.professionalInfo.raisonSociale,
                placeholder: 'Nom de votre entreprise'
            } %}
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {# Code APE #}
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.professionalInfo.codeAPE,
                placeholder: '1234A'
            } %}
        </div>
    {% endif %}

    {# Section enfants - Pour particulier uniquement #}
    {% if form.childrenCount is defined %}
        <hr class="my-8 border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Informations sur les enfants</h3>

        <div class="grid grid-cols-1 gap-6" data-controller="children-birth-dates">
            {# Nombre d'enfants #}
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.childrenCount,
                fullWidth: true,
                attr: {
                    'data-action': 'live:updateChildrenCount',
                    'data-live-updatechildrencount-count-param' : form.childrenCount.vars.value,
                    'data-live-updatechildrencount-count-value-changed' : "this.value"
                }
            } %}

            {# Champ caché pour stocker les dates en JSON #}
            {{ form_widget(form.childrenBirthDatesJson, {
                attr: {
                    'data-children-birth-dates-target': 'hiddenInput'
                }
            }) }}

            {# Dates de naissance des enfants #}
            {% if form.childrenCount.vars.value > 0 %}
                <div class="mt-4 pl-4 border-l-2 border-blue-100">
                    <p class="text-sm text-gray-700 mb-4">Veuillez indiquer la date de naissance de chaque
                        enfant</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="children-birth-dates-container">
                        {% for i in 0..(form.childrenCount.vars.value - 1) %}
                            <div>
                                <label for="customer_form_childBirthDate{{ i }}"
                                       class="block text-sm font-medium text-gray-700">
                                    Enfant {{ i + 1 }}
                                    <span class="text-red-500">*</span>
                                </label>
                                <div class="mt-1">
                                    <input
                                            type="date"
                                            id="customer_form_childBirthDate{{ i }}"
                                            class="block w-full rounded-md border-gray-300 shadow-sm py-2 px-3 focus:outline-none focus:ring-2 focus:border-blue-500 focus:ring-blue-500"
                                            data-child-birth-date-index="{{ i }}"
                                            data-action="change->children-birth-dates#updateChildrenDateJson input->children-birth-dates#updateChildrenDateJson blur->children-birth-dates#updateChildrenDateJson"
                                            required
                                    >
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
    {% endif %}

    <hr class="my-8 border-gray-200">

    <h3 class="text-lg font-medium text-gray-900">Adresse</h3>

    <div data-controller="api-address">
        {# Adresse - Champ large #}
        <div class="relative">
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.address,
                fullWidth: true,
                placeholder: 'Votre adresse',
                attr: {
                    'autocomplete': 'off',
                    'data-action': 'input->api-address#fetchSuggestions',
                    'data-api-address-target': 'addressInput'
                }
            } %}

            {# Suggestions List #}
            <ul class="absolute left-0 w-full bg-white border border-gray-300 rounded-md shadow-lg z-50 hidden max-h-48 overflow-auto"
                data-api-address-target="suggestionsList">
            </ul>
        </div>

        {# Ligne du dessous : Code Postal et Ville #}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
            {% include 'quote_request/_form_field.html.twig' with {
                field: form.postalCode,
                placeholder: '75000',
                attr: {
                    'readonly': true,
                    'class': 'bg-gray-100',
                    'data-api-address-target': 'postalCodeInput'
                }
            } %}

            {% include 'quote_request/_form_field.html.twig' with {
                field: form.city,
                placeholder: 'Votre ville',
                attr: {
                    'readonly': true,
                    'class': 'bg-gray-100',
                    'data-api-address-target': 'cityInput'
                }
            } %}
        </div>
    </div>

    {# Form footer #}
    <div class="mt-8 border-t border-gray-200 pt-5">
        <div class="flex justify-end">
            <button type="reset"
                    class="ml-3 inline-flex justify-center py-2 px-4 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-blue-500">
                Réinitialiser
            </button>
            <button type="submit"
                    class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Suivant
            </button>
        </div>
    </div>

    {# Information complémentaire #}
    <div class="mt-8 p-4 bg-blue-50 rounded-lg border border-blue-100">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-blue-400" 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 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                          clip-rule="evenodd"></path>
                </svg>
            </div>
            <div class="ml-3 flex-1 md:flex md:justify-between">
                <p class="text-sm text-blue-700">
                    Vos données personnelles sont protégées conformément à notre politique de
                    confidentialité.
                </p>
                <p class="mt-3 text-sm md:mt-0 md:ml-6">
                    <a href="{{ path('app_confidential') }}"
                       class="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600">
                        En savoir plus <span aria-hidden="true">&rarr;</span>
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

<div style="display: none;">
    {{ form_rest(form) }}
</div>

{{ form_end(form) }}