{% extends 'base.html.twig' %}
{% block title %}Comment nous avez-vous connu ? — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}
{% block body %}
{% embed '_organisms/step-layout/step-layout.html.twig' with { cardClass: 'w-full max-w-lg' } %}
{% block heading %}
<div class="w-full max-w-2xl text-center mb-6 sm:mb-10 px-2">
    <h1 class="text-2xl sm:text-3xl font-semibold text-gray-800 mb-3 leading-snug">Comment nous avez-vous connu ?</h1>
    <p class="text-sm sm:text-base text-gray-500 leading-relaxed">Ça nous aide à mieux vous accompagner.</p>
</div>
{% endblock %}
{% block card %}
    {% set prefill = referral_code_prefill|default('') %}
    <form method="POST" action="{{ path('app_welcome') }}" id="source-form" class="w-full flex flex-col gap-5">
        <input type="hidden" name="step" value="source">
        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">

        <select name="source" id="source-select"
                class="w-full border-2 border-gray-200 rounded-xl p-3.5 text-sm sm:text-base text-gray-700 bg-white focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
            {% for value, label in constant('App\\Config\\ReferralSourceConfig::CHOICES') %}
                <option value="{{ value }}" {{ (prefill and value == 'commercial') ? 'selected' }}>{{ label }}</option>
            {% endfor %}
        </select>

        {# « Un commercial Bubul » : code de parrainage #}
        <div id="referral-block" class="hidden flex-col gap-1.5">
            <label class="text-sm font-medium text-gray-700">Code du commercial</label>
            <input type="text" name="referral_code" value="{{ prefill }}"
                   placeholder="BUB-XXXXXX" class="w-full border-2 border-gray-200 rounded-xl p-3.5 uppercase text-sm sm:text-base focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
        </div>

        {# « Autre » : précision libre #}
        <div id="other-block" class="hidden flex-col gap-2">
            <label class="text-sm font-medium text-gray-700">Précisez</label>
            <input type="text" name="source_detail" maxlength="255"
                   placeholder="Dites-nous où vous nous avez découverts"
                   class="w-full border-2 border-gray-200 rounded-xl p-3">
        </div>

        <button type="submit" class="w-full bg-primary text-white rounded-xl p-3 font-semibold hover:opacity-95 transition-opacity">Continuer</button>
    </form>
    <script>
      (function () {
        var sel = document.getElementById('source-select');
        var referralBlock = document.getElementById('referral-block');
        var otherBlock = document.getElementById('other-block');
        function sync() {
          referralBlock.classList.toggle('hidden', sel.value !== 'commercial');
          otherBlock.classList.toggle('hidden', sel.value !== 'other');
        }
        sel.addEventListener('change', sync);
        sync();
      })();
    </script>
{% endblock %}
{% endembed %}
{% endblock %}