{# templates/components/quote/multistep_form.html.twig #}
<div{{ attributes }} class="max-w-7xl md:ms-13">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-8">
        <div class="hidden md:block md:col-span-3">
            <div class="sticky top-24">
                {% include 'partials/_progess_sidebar.html.twig' with {
                    currentStep: currentStep,
                    totalSteps: 3,
                    stepLabels: {
                        1: 'Vos informations',
                        2: 'Choix du produit',
                        3: 'Détails du devis'
                    },
                    isSubmitted: isSubmitted|default(false)
                } %}
            </div>
        </div>

        <div class="col-span-12 md:col-span-7 mx-auto max-w-2xl w-full">
            {# Barre de progression horizontale pour mobile #}
            <div class="md:hidden w-full mb-6">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-gray-700">Étape {{ currentStep }}/3</span>
                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">
                        {{ currentStep == 1 ? 'Informations' : (currentStep == 2 ? 'Produit' : 'Devis') }}
                    </span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: {{ (currentStep / 3) * 100 }}%"></div>
                </div>
            </div>

            {% if currentStep == 1 %}
                {# Étape 1: Formulaire client #}
                <div class="bg-white shadow-md rounded-lg">
                    <div class="bg-gradient-to-r from-blue-700 to-blue-500 px-6 py-4 rounded-t-lg">
                        <h2 class="text-xl font-bold text-white">Étape 1: Vos informations personnelles</h2>
                        <p class="text-blue-100 text-sm mt-1">Commençons par recueillir vos informations de contact</p>
                    </div>

                    <div class="w-full px-0" data-live-component="customer_form">
                        {{ component('customer_form', {
                            userId: this.userId,
                            parentComponentName: 'multistep_quote_form'
                        }) }}
                    </div>
                </div>
            {% elseif currentStep == 2 %}
                {# Étape 2: Sélection du produit d'assurance #}
                <div class="bg-white shadow-md rounded-lg">
                    <div class="bg-gradient-to-r from-blue-700 to-blue-500 px-6 py-4 rounded-t-lg">
                        <h2 class="text-xl font-bold text-white">Étape 2: Choisissez votre produit d'assurance</h2>
                        <p class="text-blue-100 text-sm mt-1">Sélectionnez le type d'assurance qui correspond à vos
                            besoins</p>
                    </div>

                    <div class="p-8">
                        {% include 'components/quote/_list_products_insurance.html.twig' with {
                            products: this.availableProducts,
                            showBackButton: true
                        } %}
                    </div>

                </div>
            {% elseif currentStep == 3 %}
                {# Étape 3: Formulaire spécifique au produit #}
                <div class="bg-white shadow-md rounded-lg">
                    <div class="bg-gradient-to-r from-blue-700 to-blue-500 px-6 py-4 rounded-t-lg">
                        <h2 class="text-xl font-bold text-white">Étape 3: Détails de votre devis</h2>
                        <p class="text-blue-100 text-sm mt-1">{{ this.selectedProduct ? this.selectedProduct.name : 'Votre devis personnalisé' }}</p>
                    </div>

                    <div>
                        {% if this.isProfessionalClient %}
                            {% include 'components/quote/_professional_request_message.html.twig' with { professionalRequestSent: this.professionalRequestSent }%}
                        {% elseif this.selectedProduct %}
                           {% include 'components/quote/_product_forms.html.twig' with {
                               selectedProduct: this.selectedProduct,
                               userId: this.userId
                           }%}
                        {% else %}
                            <div class="p-8">
                                <p class="text-gray-500">Veuillez d'abord sélectionner un produit d'assurance</p>
                            </div>
                        {% endif %}
                    </div>
                </div>

                {# Bouton Précédent - affiché uniquement si le formulaire n'est pas encore soumis #}
                {% if not isSubmitted %}
                    <div class="p-4 flex justify-start">
                        <button
                                data-action="live#action"
                                data-live-action-param="previousStep"
                                class="inline-flex items-center justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                        >
                            ← Retour à la sélection
                        </button>
                    </div>
                {% endif %}

            {% endif %}
        </div>

        {# Colonne vide à droite pour l'équilibre #}
        <div class="hidden md:block md:col-span-2"></div>
    </div>

    {% include 'components/quote/_spinner.html.twig' %}
</div>