{% extends 'base.html.twig' %}
{% block metaTitle %}{{ meta.title|default }}{% endblock %}
{% block metaDescription %}{{ meta.description|default }}{% endblock %}
{% block stylesheets %}
{% endblock %}
{% block body %}
    <div class="root_container">
        {% set contactPage = getPages({'alias': 'İletişim'}) %}
        {% set contactSection = getPageSections({'alias': 'İntro Kısmı', 'pageId': contactPage.id}) %}
        {% set contactIntroLang = getPageSectionLangLocale({'section': contactSection, 'locale': app.request.locale}) %}
        {% if contactIntroLang is defined %}
            <div class="root_header">
                <h5>{{ contactIntroLang.shortTitle|default }}</h5>
                <h2 class="animate_start"
                    data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>{{ contactIntroLang.title|default }}</h2>
                <div>{{ contactIntroLang.text|default|raw }}</div>
            </div>
        {% else %}
            <div class="root_header">
                <h5>Contact</h5>
                <h2 class="animate_start"
                    data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                    We always strive to produce.</h2>
                <p>Kapasitemiz ve kabiliyetimiz hakkında sorularınız mı var? İhtiyaçlarınız için hangi çözümleri
                    sunabileceğimizi öğrenmek için bugün bizimle iletişime geçin.</p>
            </div>
        {% endif %}
        <div class="root_body">
            <div class="root_body_pad">
                <div class="contact_info_box_container">
                    {% set continents = getContinentContacts({'whichCompany': 'companyHeadquartes'}) %}
                    {% for continent in continents %}
                        {% set continentLang = getContinentLangs({'Continent': continent, 'lang': app.request.locale }) %}
                        <div class="contact_info_box">
                            <div class="{{ ['contact_info_box_header', not loop.first ? 'location_subtitle' : null]|filter(v => v)|join(' ') }}">
                                <div class="icon animate_start"
                                     data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                    {% if loop.first %}
                                        <svg xmlns="http://www.w3.org/2000/svg" width="62.202" height="72.469"
                                             viewBox="192.398 1430.766 62.202 72.469">
                                            <g data-name="world-location-svgrepo-com">
                                                <path d="M226.45 1441.098c-2.47-6.054-8.406-10.332-15.324-10.332-9.126 0-16.551 7.444-16.551 16.593 0 3.124.796 6.222 2.02 9.14a30.967 30.967 0 0 0-4.197 15.596c0 17.17 13.952 31.14 31.101 31.14 17.15 0 31.101-13.97 31.101-31.14 0-16.174-12.38-29.503-28.15-30.997Zm20.23 18.813a26.044 26.044 0 0 1 2.887 9.725h-12.385c-.11-3.388-.444-6.665-.984-9.725h10.481Zm-3.347-4.917h-8.235a41.16 41.16 0 0 0-1.344-4.08 28.078 28.078 0 0 0-1.703-3.604 26.269 26.269 0 0 1 11.282 7.684Zm-11.07 14.642h-15.266c2.212-2.478 4.886-5.862 7.006-9.725h7.199c.583 3.014.944 6.3 1.061 9.725Zm-2.288-14.642h-3.733c.656-1.827 1.126-3.71 1.327-5.617.567.95 1.111 2.07 1.609 3.336.285.725.55 1.49.797 2.28Zm-18.849-19.311c6.416 0 11.635 5.238 11.635 11.676 0 8.655-8.094 17.76-11.636 21.33-3.544-3.565-11.633-12.653-11.633-21.33 0-6.438 5.219-11.676 11.634-11.676Zm-5.87 33.953h-7.825a26.038 26.038 0 0 1 1.962-7.768c1.887 3.048 4.033 5.718 5.863 7.768Zm-4.937 14.641a26.046 26.046 0 0 1-2.888-9.724h12.386c.109 3.388.442 6.665.983 9.724H200.32Zm3.346 4.917h8.235c.397 1.44.844 2.807 1.344 4.08a28.135 28.135 0 0 0 1.703 3.606 26.275 26.275 0 0 1-11.282-7.686Zm25.512 2.282c-1.657 4.22-3.833 6.841-5.678 6.841-1.845 0-4.02-2.621-5.678-6.84-.285-.727-.55-1.49-.798-2.282h12.953a34.64 34.64 0 0 1-.799 2.281Zm-13.38-7.199c-.584-3.013-.945-6.298-1.062-9.724h17.528c-.117 3.426-.478 6.71-1.061 9.724h-15.406Zm16.254 12.603a28.069 28.069 0 0 0 1.703-3.606 41 41 0 0 0 1.344-4.08h8.236a26.272 26.272 0 0 1-11.283 7.686Zm14.629-12.603h-10.482c.54-3.06.875-6.336.984-9.724h12.385a26.043 26.043 0 0 1-2.887 9.724Z"
                                                      fill="#c41329" fill-rule="evenodd" data-name="Path 13"/>
                                                <path d="M217.9 1447.36c0-3.762-3.039-6.822-6.774-6.822s-6.774 3.06-6.774 6.821c0 3.761 3.04 6.82 6.774 6.82 3.735 0 6.775-3.059 6.775-6.82Zm-8.63 0c0-1.05.833-1.905 1.856-1.905 1.024 0 1.857.854 1.857 1.904 0 1.05-.833 1.904-1.857 1.904-1.023 0-1.856-.854-1.856-1.904Z"
                                                      fill="#c41329" fill-rule="evenodd" data-name="Path 14"/>
                                            </g>
                                        </svg>
                                    {% endif %}
                                </div>
                                <div class="header animate_start"
                                     data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                                    <h3>{{ continentLang.name|default }} / {{ "pages.contact.company"|trans }}</h3>
                                </div>
                                {% if loop.first %}
                                    <div class="header animate_start"
                                         data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 600}'>
                                        <h3> {{ "pages.contact.request-form"|trans }} </h3>
                                        <p> {{ "pages.contact.direct-contact"|trans }}  </p>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="contact_info_box_body">
                                {% for contact in continent.contact %}
                                    <div class="contact_info_box_data_div animate_start"
                                         data-map-lat="{{ contact.lat|default }}" data-map-lng="{{ contact.lng }}"
                                         data-map-title="{{ contact.smallAddress|default }}" data-map-continent="KITA"
                                         data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                        <div class="contact_info_box_adress">
                                            <h5>{{ contact.smallAddress|default }}</h5>
                                            <p>{{ contact.companyName|default }}</p>
                                            <span>{{ contact.address|default }}</span>
                                        </div>
                                        <div class="contact_info_box_comms">
                                            {% if contact.phoneNumber %}
                                                <p>T: <span>{{ contact.phoneNumber|default }}</span></p>
                                            {% endif %}
                                            {% if contact.faxNumber %}
                                                <p>F: <span>{{ contact.faxNumber|default }}</span></p>
                                            {% endif %}
                                            {% if contact.whatsappNumber %}
                                                <p>W: <span>{{ contact.whatsappNumber|default }}</span></p>
                                            {% endif %}
                                            {% if contact.email %}
                                                <p>M: <span>{{ contact.email|default }}</span></p>
                                            {% endif %}
                                            {% if contact.secondEmail %}
                                                <p>M: <span>{{ contact.secondEmail|default }}</span></p>
                                            {% endif %}
                                            <a href="https://www.google.com/maps?q={{ contact.lat|default }},{{contact.lng|default}}" target="_blank"><span>{{ "pages.contact.get-directions"|trans }}</span><span><i class="fa-solid fa-map-pin"></i></span></a>
                                        </div>
                                    </div>
                                {% endfor %}
                                {% if loop.first %}
                                    <div class="contact_info_box_form col-6">
                                        <form action="{{ path('app_main_contact') }}" method="post" id="loginForm">
                                            <div class="split_input">
                                                <input type="text" class="company" name="company"
                                                       placeholder=" {{ "pages.contact.form-company"|trans }} ">
                                                <input type="text" class="name" name="name" placeholder="{{ "pages.contact.form-name"|trans }}">
                                            </div>
                                            <div class="split_input">
                                                <input type="email" class="email" name="email" placeholder="{{ "pages.contact.form-mail"|trans }}">
                                                <input type="text" class="phone" name="phone" placeholder="{{ "pages.contact.form-phone"|trans }}">
                                            </div>
                                            <div class="full_input">
                                                <input type="text" class="message" name="message"
                                                       placeholder="{{ "pages.contact.about-request"|trans }}">
                                            </div>
                                            <div class="privacy_policy">
                                                <a href="{{ path('app_main_privacy_policy') }}">» {{ "pages.contact.policy-show"|trans }}</a>
                                            </div>
                                            <div class="mailMessage">

                                            </div>
                                            <div class="label_checkbox">
                                                <input type="checkbox" id="privacyPolicyConfirm">
                                                <label for="privacyPolicyConfirm"> {{ "pages.contact.form-confirm"|trans }}

{#                                                    Lorem Ipsum is simply dummy text of#}
{#                                                    the printing and typesetting industry. Lorem Ipsum has been the#}
{#                                                    industry’s standard dummy text ever since.#}

                                                </label>
                                            </div>
                                            <div class="button_div">
                                                <button id="loginSubmitBtn" type="submit">{{ "pages.contact.send-message"|trans|upper }} </button>
                                            </div>
                                        </form>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                    {% set continents = getContinentContacts({'whichCompany': 'affiliatedCompanies'}) %}
                    {% for continent in continents %}
                        {% set continentLang = getContinentLangs({'Continent': continent, 'lang': app.request.locale }) %}
                        <div class="contact_info_box">
                            <div class="{{ ['contact_info_box_header', not loop.first ? 'location_subtitle' : null]|filter(v => v)|join(' ') }}">

                                <div class="icon animate_start"
                                     data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                    {% if loop.first %}
                                        <svg xmlns="http://www.w3.org/2000/svg" width="62.202" height="72.469"
                                             viewBox="192.398 1430.766 62.202 72.469">
                                            <g data-name="world-location-svgrepo-com">
                                                <path d="M226.45 1441.098c-2.47-6.054-8.406-10.332-15.324-10.332-9.126 0-16.551 7.444-16.551 16.593 0 3.124.796 6.222 2.02 9.14a30.967 30.967 0 0 0-4.197 15.596c0 17.17 13.952 31.14 31.101 31.14 17.15 0 31.101-13.97 31.101-31.14 0-16.174-12.38-29.503-28.15-30.997Zm20.23 18.813a26.044 26.044 0 0 1 2.887 9.725h-12.385c-.11-3.388-.444-6.665-.984-9.725h10.481Zm-3.347-4.917h-8.235a41.16 41.16 0 0 0-1.344-4.08 28.078 28.078 0 0 0-1.703-3.604 26.269 26.269 0 0 1 11.282 7.684Zm-11.07 14.642h-15.266c2.212-2.478 4.886-5.862 7.006-9.725h7.199c.583 3.014.944 6.3 1.061 9.725Zm-2.288-14.642h-3.733c.656-1.827 1.126-3.71 1.327-5.617.567.95 1.111 2.07 1.609 3.336.285.725.55 1.49.797 2.28Zm-18.849-19.311c6.416 0 11.635 5.238 11.635 11.676 0 8.655-8.094 17.76-11.636 21.33-3.544-3.565-11.633-12.653-11.633-21.33 0-6.438 5.219-11.676 11.634-11.676Zm-5.87 33.953h-7.825a26.038 26.038 0 0 1 1.962-7.768c1.887 3.048 4.033 5.718 5.863 7.768Zm-4.937 14.641a26.046 26.046 0 0 1-2.888-9.724h12.386c.109 3.388.442 6.665.983 9.724H200.32Zm3.346 4.917h8.235c.397 1.44.844 2.807 1.344 4.08a28.135 28.135 0 0 0 1.703 3.606 26.275 26.275 0 0 1-11.282-7.686Zm25.512 2.282c-1.657 4.22-3.833 6.841-5.678 6.841-1.845 0-4.02-2.621-5.678-6.84-.285-.727-.55-1.49-.798-2.282h12.953a34.64 34.64 0 0 1-.799 2.281Zm-13.38-7.199c-.584-3.013-.945-6.298-1.062-9.724h17.528c-.117 3.426-.478 6.71-1.061 9.724h-15.406Zm16.254 12.603a28.069 28.069 0 0 0 1.703-3.606 41 41 0 0 0 1.344-4.08h8.236a26.272 26.272 0 0 1-11.283 7.686Zm14.629-12.603h-10.482c.54-3.06.875-6.336.984-9.724h12.385a26.043 26.043 0 0 1-2.887 9.724Z"
                                                      fill="#153B5F" fill-rule="evenodd" data-name="Path 13"/>
                                                <path d="M217.9 1447.36c0-3.762-3.039-6.822-6.774-6.822s-6.774 3.06-6.774 6.821c0 3.761 3.04 6.82 6.774 6.82 3.735 0 6.775-3.059 6.775-6.82Zm-8.63 0c0-1.05.833-1.905 1.856-1.905 1.024 0 1.857.854 1.857 1.904 0 1.05-.833 1.904-1.857 1.904-1.023 0-1.856-.854-1.856-1.904Z"
                                                      fill="#153B5F" fill-rule="evenodd" data-name="Path 14"/>
                                            </g>
                                        </svg>
                                    {% endif %}
                                </div>
                                <div class="header animate_start"
                                     data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                                    <h3>{{ continentLang.name|default }} / {{ "pages.contact.affiliates"|trans }}  </h3>
                                </div>

                            </div>
                            <div class="contact_info_box_body">
                                {% for contact in continent.contact %}

                                    <div class="contact_info_box_data_div animate_start"
                                         data-map-lat="{{ contact.lat|default }}"
                                         data-map-lng="{{ contact.lng|default }}"
                                         data-map-title="{{ contact.smallAddress|default }}"
                                         data-map-continent="{{ continentLang.name|default }}"
                                         data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                        <div class="contact_info_box_adress">
                                            <h5>{{ contact.smallAddress|default }}</h5>
                                            <p>{{ contact.companyName|default }}</p>
                                            <span>{{ contact.address|default }}</span>
                                        </div>
                                        <div class="contact_info_box_comms">
                                            {% if contact.phoneNumber %}
                                                <p>T: <span>{{ contact.phoneNumber|default }}</span></p>
                                            {% endif %}
                                            {% if contact.faxNumber %}
                                                <p>F: <span>{{ contact.faxNumber|default }}</span></p>
                                            {% endif %}
                                            {% if contact.whatsappNumber %}
                                                <p>W: <span>{{ contact.whatsappNumber|default }}</span></p>
                                            {% endif %}
                                            {% if contact.email %}
                                                <p>M: <span>{{ contact.email|default }}</span></p>
                                            {% endif %}
                                            {% if contact.secondEmail %}
                                                <p>M: <span>{{ contact.secondEmail|default }}</span></p>
                                            {% endif %}
                                            <a href="https://www.google.com/maps?q={{ contact.lat|default }},{{contact.lng|default}}" target="_blank"><span> {{ "pages.contact.get-directions"|trans }} </span><span><i
                                                            class="fa-solid fa-map-pin"></i></span></a>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endfor %}

                    {% set contactsRepsentations = getContacts({'type': 'representations'}) %}
                    {% if contactsRepsentations is not empty %}
                        <div class="contact_info_box">
                            <div class="contact_info_box_header">
                                <div class="icon animate_start"
                                     data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="62.202" height="72.469"
                                         viewBox="192.398 1430.766 62.202 72.469">
                                        <g data-name="world-location-svgrepo-com">
                                            <path d="M226.45 1441.098c-2.47-6.054-8.406-10.332-15.324-10.332-9.126 0-16.551 7.444-16.551 16.593 0 3.124.796 6.222 2.02 9.14a30.967 30.967 0 0 0-4.197 15.596c0 17.17 13.952 31.14 31.101 31.14 17.15 0 31.101-13.97 31.101-31.14 0-16.174-12.38-29.503-28.15-30.997Zm20.23 18.813a26.044 26.044 0 0 1 2.887 9.725h-12.385c-.11-3.388-.444-6.665-.984-9.725h10.481Zm-3.347-4.917h-8.235a41.16 41.16 0 0 0-1.344-4.08 28.078 28.078 0 0 0-1.703-3.604 26.269 26.269 0 0 1 11.282 7.684Zm-11.07 14.642h-15.266c2.212-2.478 4.886-5.862 7.006-9.725h7.199c.583 3.014.944 6.3 1.061 9.725Zm-2.288-14.642h-3.733c.656-1.827 1.126-3.71 1.327-5.617.567.95 1.111 2.07 1.609 3.336.285.725.55 1.49.797 2.28Zm-18.849-19.311c6.416 0 11.635 5.238 11.635 11.676 0 8.655-8.094 17.76-11.636 21.33-3.544-3.565-11.633-12.653-11.633-21.33 0-6.438 5.219-11.676 11.634-11.676Zm-5.87 33.953h-7.825a26.038 26.038 0 0 1 1.962-7.768c1.887 3.048 4.033 5.718 5.863 7.768Zm-4.937 14.641a26.046 26.046 0 0 1-2.888-9.724h12.386c.109 3.388.442 6.665.983 9.724H200.32Zm3.346 4.917h8.235c.397 1.44.844 2.807 1.344 4.08a28.135 28.135 0 0 0 1.703 3.606 26.275 26.275 0 0 1-11.282-7.686Zm25.512 2.282c-1.657 4.22-3.833 6.841-5.678 6.841-1.845 0-4.02-2.621-5.678-6.84-.285-.727-.55-1.49-.798-2.282h12.953a34.64 34.64 0 0 1-.799 2.281Zm-13.38-7.199c-.584-3.013-.945-6.298-1.062-9.724h17.528c-.117 3.426-.478 6.71-1.061 9.724h-15.406Zm16.254 12.603a28.069 28.069 0 0 0 1.703-3.606 41 41 0 0 0 1.344-4.08h8.236a26.272 26.272 0 0 1-11.283 7.686Zm14.629-12.603h-10.482c.54-3.06.875-6.336.984-9.724h12.385a26.043 26.043 0 0 1-2.887 9.724Z"
                                                  fill="#153B5F" fill-rule="evenodd" data-name="Path 13"/>
                                            <path d="M217.9 1447.36c0-3.762-3.039-6.822-6.774-6.822s-6.774 3.06-6.774 6.821c0 3.761 3.04 6.82 6.774 6.82 3.735 0 6.775-3.059 6.775-6.82Zm-8.63 0c0-1.05.833-1.905 1.856-1.905 1.024 0 1.857.854 1.857 1.904 0 1.05-.833 1.904-1.857 1.904-1.023 0-1.856-.854-1.856-1.904Z"
                                                  fill="#153B5F" fill-rule="evenodd" data-name="Path 14"/>
                                        </g>
                                    </svg>
                                </div>
                                <div class="header animate_start"
                                     data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 300}'>
                                    <h3>Representations</h3>
                                </div>
                                <div class="header animate_start"
                                     data-params='{"opacity": [0, 1], "translateX": [-50, 0], "duration": 1000, "easing": "easeInOutQuad", "delay": 600}'>
                                    <h3></h3>
                                </div>
                            </div>
                            <div class="contact_info_box_body">
                                {% for contact in contactsRepsentations %}
                                    <div class="contact_info_box_data_div animate_start"
                                         data-map-lat="{{ contact.lat|default }}" data-map-lng="{{ contact.lng }}"
                                         data-map-title="{{ contact.smallAddress|default }}" data-map-continent="KITA"
                                         data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 1000, "easing": "easeInOutQuad"}'>
                                        <div class="contact_info_box_adress">
                                            <h5>{{ contact.smallAddress|default }}</h5>
                                            <p>{{ contact.companyName|default }}</p>
                                            <span>{{ contact.address|default }}</span>
                                        </div>
                                        <div class="contact_info_box_comms">
                                            {% if contact.phoneNumber %}
                                                <p>T: <span>{{ contact.phoneNumber|default }}</span></p>
                                            {% endif %}
                                            {% if contact.faxNumber %}
                                                <p>F: <span>{{ contact.faxNumber|default }}</span></p>
                                            {% endif %}
                                            {% if contact.whatsappNumber %}
                                                <p>W: <span>{{ contact.whatsappNumber|default }}</span></p>
                                            {% endif %}
                                            {% if contact.email %}
                                                <p>M: <span>{{ contact.email|default }}</span></p>
                                            {% endif %}
                                            {% if contact.secondEmail %}
                                                <p>M: <span>{{ contact.secondEmail|default }}</span></p>
                                            {% endif %}
                                            <a href="https://www.google.com/maps?q={{ contact.lat|default }},{{contact.lng|default}}" target="_blank"><span> {{ "pages.contact.get-directions"|trans }} </span><span><i
                                                            class="fa-solid fa-map-pin"></i></span></a>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
                {#                    <div class="map"> #}
                {#                        <iframe src="https://snazzymaps.com/embed/676772" width="100%" height="100%" style="border:none;"></iframe> #}
                {#                    </div> #}
                <div class="map" id="map"></div>
            </div>
        </div>
        {% include "components/innerPageFooter.html.twig" %}
    </div>


{#    <div class="modal" id="authModal" tabindex="-1">#}
{#        <div class="modal-dialog">#}
{#            <div class="modal-content">#}
{#                <div class="modal-header">#}
{#                    <h5 class="modal-title">Modal title</h5>#}
{#                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>#}
{#                </div>#}
{#                <div class="modal-body">#}
{#                    <input type="text" class="form-control" id="verificationCode" aria-label="Verification Code">#}

{#                    <div class="codeControl w-100 bg-success p-2" style="color: white;"></div>#}

{#                    <button type="button" class="form-control w-auto btn btn-success btn-sm" id="verifyBtn">Gönder#}
{#                    </button>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{#    <div class="alert alert-danger d-none"></div>#}


    <div class="modal fade" id="authModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ "pages.contact.modal-title"|trans|upper }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <h6 class="modal-text">{{ "pages.contact.modal-text"|trans }}</h6>
                    <div class="d-flex justify-content-center gap-2 mb-3" id="codeInputs">
                        {% for i in 1..6 %}
                            <input type="text" class="code-input form-control text-center" maxlength="1" />
                        {% endfor %}
                    </div>
                    <input type="text" hidden id="verificationCode">

                    <div class="codeControl w-100 bg-danger text-white mb-2"></div>
                    <button type="button" class="btn btn-sm text-white bg-danger" style="float: right" id="verifyBtn">
                        {{ "pages.contact.modal-submit"|trans|upper }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="alert alert-danger d-none"></div>
{% endblock %}

{% block javascripts_bottom %}

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const codeInputs = document.querySelectorAll(".code-input");
            const alertDanger = document.querySelector(".alert-danger");
            const authModalEl = document.getElementById("authModal");
            const authModal = new bootstrap.Modal(authModalEl);
            const loginForm = document.getElementById("loginForm");

            // Otomatik odak geçişi
            codeInputs.forEach((input, index) => {
                input.addEventListener("input", () => {
                    if (input.value.length === 1 && index < codeInputs.length - 1) {
                        codeInputs[index + 1].focus();
                    }
                });

                input.addEventListener("keydown", (e) => {
                    if (e.key === "Backspace" && input.value === "" && index > 0) {
                        codeInputs[index - 1].focus();
                    }
                });
            });

            // Modal kapandığında temizle
            authModalEl.addEventListener("hidden.bs.modal", () => {
                codeInputs.forEach(input => input.value = '');
                alertDanger.classList.add("d-none");
                document.querySelector(".codeControl").textContent = '';
            });

            // Doğrulama kodunu topla
            const getVerificationCode = () =>
                Array.from(codeInputs).map(input => input.value.trim()).join('');

            // Doğrulama işlemi
            const verifyControl = (code) => {
                const formValues = {
                    code,
                    email: document.querySelector('.email[name="email"]').value,
                    company: document.querySelector('.company[name="company"]').value,
                    name: document.querySelector('.name[name="name"]').value,
                    phone: document.querySelector('.phone[name="phone"]').value,
                    message: document.querySelector('.message[name="message"]').value
                };

                $.post('{{ path('verify_code') }}', formValues)
                    .done(data => {
                        document.querySelector('.codeControl').textContent = data.message;

                        if (data.status === 'success') {
                            bootstrap.Modal.getInstance(authModalEl).hide();
                            document.querySelector('.mailMessage').textContent = 'Mail Gönderildi';
                            loginForm.reset();

                            setTimeout(() => {
                                document.querySelector('.mailMessage').classList.add('d-none');
                            }, 3000);
                        }
                    });
            };

            // Kod gönderme butonu
            document.getElementById("verifyBtn").addEventListener("click", () => {
                const code = getVerificationCode();

                if (code.length !== 6) {
                    alertDanger.classList.remove("d-none");
                    alertDanger.textContent = "Lütfen 6 haneli kodu giriniz.";
                    return;
                }

                alertDanger.classList.add("d-none");
                verifyControl(code);
            });

            // Doğrulama kodu gönder
            const sendVerifyCode = () => {
                const email = document.querySelector('.email[name="email"]').value;

                $.post('{{ path('send_verification_code') }}', {
                    email,
                    userControl: 0
                }).done(console.log);
            };

            // Form gönderimi
            loginForm.addEventListener("submit", (e) => {
                e.preventDefault();

                const formData = new FormData(loginForm);

                $.ajax({
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done(data => {
                    if (data.status === 'success') {
                        if (data.isVerified) {
                            verifyControl(); // Not: Burada kod parametresi eksik gibi.
                        } else {
                            sendVerifyCode();
                            authModal.show();
                        }
                    }
                });
            });
        });
    </script>



    <style>
        body.modal-open {
            padding-right: 0 !important;
            overflow: hidden;
        }
    </style>

    <script async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCaVmIIj8Xl8XSxcYX59jP9A2058NyMWaE&callback=initMap"></script>
    <script src="{{ asset('assets/js/navbar.js') }}"></script>
    <script src="{{ asset('assets/js/map.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
{% endblock %}