{% extends 'dashboard_base.html.twig' %}

{% block title %}Nouveau client {% endblock %}

{% block body %}
    {{ form_start(form) }}
    <div class="grid grid-cols-1 gap-3">
        <div class="bg-white rounded-xl p-5">
            {% set referer = app.request.headers.get('referer') %}
            <h2 class="uppercase mb-5"> {% if referer == 'https://team.ofap.fr/client/leads' %}Nouveau LEADS{% else %}Modifier CLIENT{% endif %}</h2>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <div class="mt-2">
                        {{ form_row(form.company, {'id': 'company-select'}) }}
                    </div>
                </div>
                <div>
                    <div class="mt-2">
                        <br>
                        {{ form_row(form.firstname) }}
                    </div>
                </div>
                <div>
                    <div class="mt-2">
                        {{ form_widget(form.name) }}
                    </div>
                </div>
                <div>
                    <div class="mt-2">
                        {{ form_widget(form.phone) }}
                    </div>
                </div>
                <div>
                    <div class="mt-2">
                        {{ form_widget(form.adress) }}
                    </div>
                </div>
                <div>
                    <div class="mt-2">
                        {{ form_widget(form.zip) }}
                    </div>
                </div>
                <div>
                    <div class="mt-2">
                        {{ form_widget(form.city) }}
                    </div>
                </div>
                <div>
                    <div class="mt-2">
                        {{ form_widget(form.email) }}
                    </div>
                </div>
                <div id="additional-fields-container-1">
                    <div class="mt-2">
                        {{ form_widget(form.numberOfCandidates) }}
                    </div>
                </div>
                <div id="additional-fields-container-2">
                    <div class="mt-2">
                        {{ form_widget(form.supplement) }}
                    </div>
                </div>
                <div id="additional-fields-container-3">
                    <div class="mt-2">
                        {{ form_widget(form.status) }}
                    </div>
                </div>
            </div>
        </div>
        <div class="flex justify-center">
            <div class="mt-5">
                {{ form_widget(form.Sauvegarder) }}
            </div>
        </div>
    </div>

    {{ form_end(form) }}

    <script>
        const companySelect = document.getElementById('company-select');
        const additionalFieldsContainer1 = document.getElementById('additional-fields-container-1');
        const additionalFieldsContainer2 = document.getElementById('additional-fields-container-2');
        const additionalFieldsContainer3 = document.getElementById('additional-fields-container-3');

        function toggleAdditionalFields() {
            const showAdditionalFields = companySelect.value === '1'; // En supposant que '1' représente "Oui"
            additionalFieldsContainer1.style.display = showAdditionalFields ? 'block' : 'none';
            additionalFieldsContainer2.style.display = showAdditionalFields ? 'block' : 'none';
            additionalFieldsContainer3.style.display = showAdditionalFields ? 'none' : 'block';
        }

        // Initialement, appelez la fonction pour afficher/masquer les champs en fonction de la valeur initiale du champ "company"
        toggleAdditionalFields();

        // Ajoutez un écouteur d'événements au champ de sélection "company" pour afficher/masquer les champs lorsque la valeur change
        companySelect.addEventListener('change', toggleAdditionalFields);
    </script>
{% endblock %}