{% extends 'base.twig' %}

{% block title %}{{'page.onboarding.title'|trans}}{% endblock %}
{% block meta_description %}{{'page.onboarding.description'|trans}}{% endblock %}
{% block canonical_url %}<link rel="canonical" href="{{ url('app_pages_onboaring',{type:app.request.get('abo','M1')}) }}" />{% endblock %}

{% block body %}
    {{ form_start(form) }}
    <!-- Conteneur principal de la carte -->
    <div class="mt-2 mb-2 w-full max-w-4xl mx-auto mt-2 bg-white shadow-xl rounded-2xl p-6 md:p-10 border border-gray-100">

        <h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">{{ 'onboarding.form.title'|trans }}</h1>

        <!-- Contenu des Étapes (Formulaire) - Tous affichés en colonnes -->
        <div class="space-y-6">

            <!-- Étape 1 Contenu -->
            <div class="form-section">
                <div class="p-6 bg-indigo-50 rounded-xl border border-indigo-200 shadow-sm">
                    <h2 class="text-2xl font-bold text-indigo-700 mb-4 border-b border-indigo-300 pb-2 flex items-center">
                        <svg class="w-6 h-6 mr-3" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                        {{ 'onboarding.form.section1.title'|trans }}
                    </h2>
                    <p class="text-indigo-600 mb-6">{{ 'onboarding.form.section1.description'|trans }}</p>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 form-input-group">
                        <!-- Nom -->
                        <div>
                            {{ form_row(form.name) }}
                        </div>
                        <!-- Prénom -->
                        <div>
                            {{ form_row(form.surname) }}
                        </div>
                        <!-- Email -->
                        <div class="md:col-span-1">
                            {{ form_row(form.email) }}
                        </div>
                        <!-- Date de naissance -->
                        <div class="md:col-span-1">
                            {{ form_row(form.birdth) }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Étape 2 Contenu -->
            <div class="p-6 bg-yellow-50 rounded-xl border border-yellow-200 shadow-sm">
                <h2 class="text-2xl font-bold text-yellow-700 mb-4 border-b border-yellow-300 pb-2 flex items-center">
                    <svg class="w-6 h-6 mr-3" 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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.639a2 2 0 01-1.789-2.894l3.5-7z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 9H2.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 014.737 3h4.636a2 2 0 011.789 2.894l-3.5 7z"></path></svg>
                    {{ 'onboarding.form.section2.title'|trans }}
                </h2>
                <p class="text-yellow-600 mb-6">{{ 'onboarding.form.section2.description'|trans }}</p>
                <!-- Simulation du contenu du formulaire -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 form-input-group">
                    <div class="md:col-span-2">
                        {{ form_row(form.nameCosplayer) }}
                    </div>
                    <div class="md:col-span-2">
                        {{ form_row(form.description)}}
                    </div>
                    {{ form_row(form.epage) }}
                </div>
            </div>

            <!-- Étape 3 Contenu -->
            <div class="p-6 bg-green-50 rounded-xl border border-green-200 shadow-sm">
                <h2 class="text-2xl font-bold text-green-700 mb-4 border-b border-green-300 pb-2 flex items-center">
                    <svg class="w-6 h-6 mr-3" 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="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.886l2.273 2.273.744-.744-2.273-2.273z"></path></svg>
                    {{ 'onboarding.form.section3.title'|trans }}
                </h2>
                <p class="text-green-600 mb-6">{{ 'onboarding.form.section3.description'|trans }}</p>

                <div class="grid grid-cols-2 md:grid-cols-2 gap-6 form-input-group">
                    <div>
                        {{ form_row(form.linkFacebook) }}
                    </div>
                    <div>
                        {{ form_row(form.linkInstagram) }}
                    </div>
                    <div>
                        {{ form_row(form.linkTiktok) }}
                    </div>
                    <div>
                        {{ form_row(form.linkX) }}
                    </div>
                </div>
            </div>

            <!-- Étape 4 Contenu -->
            <div class="p-6 bg-blue-50 rounded-xl border border-blue-200 shadow-sm">
                <h2 class="text-2xl font-bold text-blue-700 mb-4 border-b border-blue-200 pb-2 flex items-center">
                    <svg class="w-6 h-6 mr-3" 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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.5 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.5-3-9s1.343-9 3-9m-9 9h.01"></path></svg>
                    {{ 'onboarding.form.section4.title'|trans }}
                </h2>
                <div class="grid grid-cols-1 gap-6 form-input-group">

                    <!-- Checkbox for Custom Domain (form.useDomain) -->
                    <div class="mt-4 flex items-center">
                        {{ form_row(form.useDomain) }}
                    </div>

                    <!-- Custom Domain Input (form.domain) - Hidden by default -->
                    <div id="custom-domain-group" class="hidden transition-all duration-300 pt-4 border-t border-blue-200 mt-4">
                        {{ form_row(form.domain) }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Bouton unique de soumission -->
        <div class="mt-8 flex justify-center">
            <button class="px-8 py-3 text-lg font-semibold rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition duration-150 shadow-lg shadow-indigo-200">
                {{ 'onboarding.form.submit_button'|trans }}
            </button>
        </div>

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

    <script>
        document.addEventListener('turbo:load', () => {
            const useDomainCheckbox = document.getElementById('e_page_onboard_useDomain');
            const customDomainGroup = document.getElementById('custom-domain-group');
            const customDomainInput = document.getElementById('e_page_onboard_domain');

            function toggleDomainFields() {
                if (useDomainCheckbox.checked) {
                    // Show custom domain field
                    customDomainGroup.classList.remove('hidden');
                    customDomainInput.setAttribute('required', 'required');

                } else {
                    // Hide custom domain field
                    customDomainGroup.classList.add('hidden');
                    customDomainInput.removeAttribute('required');
                    customDomainInput.value = ''; // Clear custom domain value

                }
            }

            // Initial state setup (in case of browser refresh retaining checkbox state)
            toggleDomainFields();

            // Event listener for the checkbox
            useDomainCheckbox.addEventListener('change', toggleDomainFields);
        });
    </script>
{% endblock %}