<section class="bg-gray p-0 mt-8">
    <div class="container">
        <div class="row py-7 px-2 px-md-5 p-lg-10">
            <div class="col-12 col-lg-6">
                {{ form_start(inquiryForm, {'attr': {'class': 'grid', 'style': '--_columns: 1; gap: 24px', 'id': 'form-chci-pomoct-s-vyberem'}}) }}

                <div class="grid__col grid__col">
                    {% include 'inquiry/components/product_type_select.html.twig' with {
                        'productTypes': inquiryForm.helpWithChoice.productType,
                        'product_type_label' : 'K jakému produktu máte otázky?'|trans
                    } %}
                </div>

                <div class="grid__col">
                    <label class="rich-input is-required">
                        <div class="rich-input__label">{{ inquiryForm.helpWithChoice.preferredBranch.vars.label }}</div>
                        {{ form_widget(inquiryForm.helpWithChoice.preferredBranch) }}
                        <div class="rich-input__error-msg">
                            {{ form_errors(inquiryForm.helpWithChoice.preferredBranch) }}
                        </div>
                    </label>
                </div>

                <div class="grid__col">
                    <label for="popis" class="rich-input is-required">
                        <div class="rich-input__label">{% trans %}S čím Vám můžeme poradit?{% endtrans %}</div>
                        <div class="rich-input__input-wrap">
                            {{ form_widget(inquiryForm.helpWithChoice.additionalInfo, {'attr': {'class': 'rich-input__textarea'}}) }}
                            <svg class="rich-input__error-icon">
                                <use href="/build/svg/_icons.svg#input-error"></use>
                            </svg>
                        </div>
                    </label>
                </div>

                <div class="grid__col grid__col--fluid">
                    <div class="rich-input is-required">
                        <div class="rich-input__label">{{ inquiryForm.helpWithChoice.preferredContactMethod.vars.label }}</div>
                    </div>
                    <div class="d-flex mt-4 gap-4 flex-wrap">
                        {% for choice in inquiryForm.helpWithChoice.preferredContactMethod.vars.choices %}
                            <label class="rich-radio">
                                <input type="radio"
                                       id="contact-method-{{ choice.value }}"
                                       name="preferredContactMethod"
                                       class="visually-hidden"
                                       value="{{ choice.value }}"
                                       {% if loop.first %}checked{% endif %}
                                       required>
                                <div class="rich-radio__label">{{ choice.label }}</div>
                            </label>
                        {% endfor %}
                    </div>

                    {% do inquiryForm.helpWithChoice.preferredContactMethod.setRendered() %}
                </div>

                <div class="grid__col" id="contact-phone-field" style="display: none;">
                    {% include 'inquiry/components/phone_input_field.html.twig' with {
                        'phone': inquiryForm.helpWithChoice.phone,
                    } %}
                </div>

                <div class="grid__col" id="contact-email-field" style="display: none;">
                    <label for="email" class="rich-input is-required">
                        <div class="rich-input__label">{{ inquiryForm.helpWithChoice.email.vars.label }}</div>
                        <div class="rich-input__input-wrap">
                            {{ form_widget(inquiryForm.helpWithChoice.email, {'attr': {'class': 'input'}}) }}
                        </div>
                        <div class="rich-input__error-msg">
                            {{ form_errors(inquiryForm.helpWithChoice.email) }}
                        </div>
                    </label>
                </div>

                <div class="grid__col grid__col--fluid">
                    <label class="rich-checkbox js-open-button" data-open="next">
                        <input type="checkbox" class="visually-hidden" value="1">
                        <div class="rich-checkbox__label">{% trans %}Chci přiložit soubor{% endtrans %}</div>
                    </label>
                    <div class="mt-6 js-toggle-target">
                        {% include 'inquiry/components/attachment_photo.html.twig' with {'attachment': inquiryForm.attachment} %}
                    </div>
                </div>

                <div class="grid__col grid__col">
                    <label class="rich-checkbox">
                        {{ form_widget(inquiryForm.agreeTerms, {'attr': {'class': 'visually-hidden'}}) }}
                        <div class="rich-checkbox__label">
                            <span>{% trans %}Souhlasím se{% endtrans %}
                                <a href="{{ app.request.getLocale() != 'cs' ? '/' ~ app.request.getLocale() : '' }}/gdpr" title="{% trans %}zpracováním osobních údajů{% endtrans %}">{% trans %}zpracováním osobních údajů{% endtrans %}</a>
                            </span>
                        </div>
                    </label>
                </div>

                <div class="grid__col grid__col">
                    {{ form_widget(inquiryForm.submit) }}
                </div>

                {{ form_end(inquiryForm) }}
            </div>
            <div class="col-12 col-lg-5 offset-lg-1 mt-5 mt-lg-0">
                <p>{% trans %}Váháte mezi žaluziemi a roletami? Zajímají vás rozdíly mezi jednotlivými produkty? Rádi byste věděli, jaká stínící technika je vhodná právě pro váš dům nebo byt?{% endtrans %}<br>{% trans %}Jsme tu pro vás!{% endtrans %}</p>
                <p class="mt-3">{% trans %}Napište nám s čím vám můžeme poradit, zvolte preferovaný kontakt a my se Vám brzy ozveme!{% endtrans %}</p>
                <p class="mt-3">{% trans %}Zajímá vás, jaká je u nás cesta zakázky od prvotního kontaktu až po realizaci?<br>{% endtrans %}{% trans %}Podívejte se na <a class="js-dialog-trigger" data-dialog="cesta-zakazky" type="button">cestu zakázky</a>.{% endtrans %}</p>
            </div>
        </div>
    </div>
</section>

{% block javascripts %}
    <script>
        const contactMethodRadios = document.querySelectorAll('input[name="preferredContactMethod"]');
        const phoneField = document.getElementById('contact-phone-field');
        const emailField = document.getElementById('contact-email-field');
        const phoneInput = document.getElementById('inquiry_form_helpWithChoice_phone');
        const emailInput = document.getElementById('inquiry_form_helpWithChoice_email');

        const toggleContactFields = () => {
            const selectedMethod = document.querySelector('input[name="preferredContactMethod"]:checked');

            if (!selectedMethod) {
                phoneField.style.display = 'none';
                phoneInput.removeAttribute('required');
                phoneInput.value = '';
                emailField.style.display = 'none';
                emailInput.removeAttribute('required');
                emailInput.value = '';
                return;
            }

            if (selectedMethod.value === "2") {
                phoneField.style.display = '';
                phoneInput.setAttribute('required', 'required');
                emailField.style.display = 'none';
                emailInput.removeAttribute('required');
                emailInput.value = '';
            } else if (selectedMethod.value === "1") {
                emailField.style.display = '';
                emailInput.setAttribute('required', 'required');
                phoneField.style.display = 'none';
                phoneInput.removeAttribute('required');
                phoneInput.value = '';
            }
        };

        contactMethodRadios.forEach(radio => {
            radio.addEventListener('change', toggleContactFields);
        });

        toggleContactFields();

    </script>
{% endblock %}