{% extends 'web/base.html.twig' %}
{% block title %}
    {% trans %}Nezávazná poptávka{% endtrans %}
{% endblock %}
{% block contactForm %}
    <section class="bg-gray mt-0 pt-6">
        <div class="container">
            <div class="form-content">
                <div class="narrow">
                    <h1>{% trans %}Nezávazná poptávka{% endtrans %}</h1>
                    <p class="mt-5">{% trans %}Potřebujete vyřešit stínění u vás doma, ve firmě nebo kdekoli jinde?{% endtrans %}<br>{% trans %}Vyplňte krátký formulář 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? Podívejte se na <a class="js-dialog-trigger" data-dialog="cesta-zakazky" type="button">cestu zakázky</a>.{% endtrans %}</p> #}

                    {{ form_start(inquiryForm, {'attr': {'class': 'grid gap-5', 'style': '--_columns: 2;', 'id': 'main-form-nezavazna-poptavka'}}) }}
                    <div class="grid__col grid__col--fluid mt-5">
                        <label class="rich-input is-required">
                            <div class="rich-input__label">{{ inquiryForm.generic.fullName.vars.label }}</div>
                            <div class="rich-input__input-wrap">
                                {{ form_widget(inquiryForm.generic.fullName, {'attr': {'class': 'input'}}) }}
                                <svg class="rich-input__error-icon">
                                    <use href="/build/svg/_icons.svg#input-error"></use>
                                </svg>
                            </div>
                            <div class="rich-input__error-msg">
                                {{ form_errors(inquiryForm.generic.fullName) }}
                            </div>
                        </label>
                    </div>

                    <div class="grid__col">
                        <label class="rich-input is-required">
                            <div class="rich-input__label">{{ inquiryForm.generic.email.vars.label }}</div>
                            <div class="rich-input__input-wrap">
                                {{ form_widget(inquiryForm.generic.email, {'attr': {'class': 'input'}}) }}
                                <svg class="rich-input__error-icon">
                                    <use href="/build/svg/_icons.svg#input-error"></use>
                                </svg>
                            </div>
                            <div class="rich-input__error-msg">
                                {{ form_errors(inquiryForm.generic.email) }}
                            </div>
                        </label>
                    </div>

                    <div class="grid__col">
                        {% include 'inquiry/components/phone_input_field.html.twig' with {'phone': inquiryForm.generic.phone} %}
                    </div>

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

                    <div class="grid__col grid__col--fluid">
                        {% include 'inquiry/components/product_type_select.html.twig' with {'productTypes': inquiryForm.nonBinding.productType} %}
                    </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 upřesnit požadavky{% endtrans %}</div>
                        </label>

                        <div class="mt-6 js-toggle-target">
                            <h2 class="h3">{% trans %}Upřesňující informace{% endtrans %}</h2>
                            <label class="rich-input mt-5">
                                {{ form_row(inquiryForm.nonBinding.realizationAddress) }}
                            </label>
                            <label class="rich-input mt-5">
                                {{ form_row(inquiryForm.nonBinding.additionalInfo) }}
                            </label>
                            {% include 'inquiry/components/attachment_photo.html.twig' with {'attachment': inquiryForm.attachment} %}
                        </div>
                    </div>
                    <div class="grid__col grid__col--fluid">
                        <label class="rich-checkbox js-open-button" data-open="next">
                            {{ form_widget(inquiryForm.agreeTerms) }}
                            <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--fluid">
                        {{ form_widget(inquiryForm.submit) }}
                    </div>
                    {{ form_end(inquiryForm) }}
                    <div class="mt-8">
                        <h4>{% trans %}Máte zájem o servis?{% endtrans %}</h4>
                        <p class="mt-3">{% trans %}Vyplňte{% endtrans %}
                            <a href="{{ app.request.getLocale() != 'cs' ? '/' ~ app.request.getLocale() : '' }}/servis">{% trans %}formulář pro poptávku servisu{% endtrans %}</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}