{% extends 'main/base.html.twig' %}
{% set pageCode = "contact" %}
  {% block title %}{{ entity ? entity.title }}{% endblock %}
 {% block description %}{{ entity ? entity.description }}{% endblock %}
{% block pageMeta %}
    {% for lang in get_diller() %}
        <link rel="alternate" hreflang="{{ lang|default }}" href="{{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': lang}))) }}">
    {% endfor %}

    <link rel="canonical" href="{{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': app.request.locale}))) }}">
{% endblock %}
{% block pageStyle %}
    
    <link rel="stylesheet" href="{{ asset('assets/main/css/lib/owl.carousel.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/main/css/lib/aos.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/main/css/font.min.css') }}">
    <link rel="stylesheet"  href="{{ asset('assets/main/css/form.css') }}"/>
    <link rel="stylesheet"  href="{{ asset('assets/main/css/pages/contact/contact.css') }}"/>
    <script type="text/javascript" data-skip-lazy="" nowprocket="" src="https://www.provenexpert.com/widget/richsnippet.js?u=2Dmo2xGZiMwZ4VmA4two0LQZjNapkRQp&v=2" async></script>
{% endblock %}
{% block content %}
    {#    {% set banner = sayfa.blog.banner %} #}
    {#    {% set bannerPath = asset('uploads/blog/banner/') %} #}
    {#    {% if banner is null %} #}
    {#        {% set banner = 'blog-banner.png' %} #}
    {#        {% set bannerPath = asset('assets/main/img/') %} #}
    {#        #}{# <header> #}
    {#            <div class="header-img"> #}
    {#                <img loading="lazy" src="img/dentmax-basindan.png" alt="Dentmax Basından"> #}
    {#            </div> #}
    {#            <div class="header-content"> #}
    {#                <h1 data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">Tedaviler</h1> #}
    {#                <p data-aos="fade-in" data-aos-duration="800" data-aos-delay="500">Lorem ipsum dolor sit amet, #}
    {#                    consectetur adipisicing elit.</p> #}

    {#            </div> #}
    {#            <div class="header-invisalign"> #}
    {#                <img loading="lazy" src="img/icons/dentMax.png" alt="Dentmax invisailgn" data-aos="fade-in" data-aos-duration="800" #}
    {#                    data-aos-delay="600"> #}
    {#            </div> #}
    {#            <div class="header-document-path"> #}
    {#                <div class="header-document-path-text"> #}
    {#                    <strong class="path-title">TEDAVİLER</strong> #}
    {#                        <div class="content-router-links-path"> #}
    {#                            <a href="index">Anasayfa /</a> #}
    {#                            <a href="tedaviler">Tedaviler</a> #}
    {#                        </div> #}
    {#                     #}
    {#                </div> #}
    {#            </div> #}
    {#        </header> #}
    {#    {% endif %} #}
    <header>
        <div class="header-img">
            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-basindan.webp') }}" alt="Dentmax Basından">
        </div>
        <div class="header-content">
            <h1 data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">{{ 'iletisim'|trans }}</h1>
            {#<p data-aos="fade-in" data-aos-duration="800" data-aos-delay="500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>#}
        </div>
        <div class="header-invisalign">
            <img loading="lazy" src="{{ asset('build/main/img/icons/dentMax.webp') }}" alt="Dentmax invisailgn"
                 data-aos="fade-in" data-aos-duration="800"
                 data-aos-delay="600">
        </div>
        <div class="header-document-path">
            <strong class="path-title">{{ 'iletisim'|trans|upper }}</strong>
            <div class="content-router-links-path">
                <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }} /</a>
                <button>{{ 'iletisim'|trans }}</button>
            </div>
        </div>
    </header>
    {% block container %}
        <div class="wrapper">
            {% block navbar %}
                {{ render(controller('App\\Controller\\Main\\DefaultController::header', {request: app.request})) }}
            {% endblock %}
            <div class="content">
                <div class="global-content global-content-contact">
                    <div class="content-wrapper content-wrapper-document content-contact-wrapper">
                        <div class="contact-main">
                            <div class="contact-main-top" id="#subeContent">
                                {% for sube in subeler %}
                                    {% set subeIndex = loop.index %}
                                    {% set subeDil = sube.diller|first %}
                                    <div class="contact-{{ subeIndex % 2 == 0 ? 'right' : 'left' }}">
                                        <div class="contact-left-inside">
                                            <div class="contact-text-wrapper">
                                                <div class="contact-text" data-aos="fade-right"
                                                     data-aos-duration="1000">
                                                    <div class="contact-text-content">
                                                        <h3>{{ subeDil.baslik|default }}</h3>
                                                        <h2>
                                                            {{ sube.telefonUlkeKodu|last~' '~sube.telefonNo~' '~sube.telefonSonEk }}
                                                        </h2>
                                                        <div class="contact-tex-address">
                                                            <a href="{{ sube.googleMapLink ?? sube.yandexMapLink }}"
                                                               target="_blank">{{ sube.adres|raw }}</a>
                                                        </div>
                                                    </div>

                                                    <div class="contact-support-line-adress">
                                                        <div class="contact-support-line-buttons">
                                                            <a href="{{ path('app_main_online_randevu') }}" class="contact-support-randevu">
                                                                <img loading="lazy" src="{{ asset('assets/main/img/appointment.svg') }}"
                                                                     alt="Dentmax Menü">
                                                                <span>{{ 'randevu_al'|trans|upper }}</span>
                                                            </a>
                                                        </div>
                                                        {% if sube.googleMapLink is not null %}
                                                            <a href="{{ sube.googleMapLink }}"
                                                               target="_blank">
                                                                <img loading="lazy" src="{{ asset('assets/main/img/marker.svg') }}"
                                                                     alt="Google Maps">
                                                                <span>{{ 'yol_tarifi'|trans({'%platform%': 'Google'}) }}</span>
                                                            </a>
                                                        {% endif %}
                                                        {% if sube.yandexMapLink is not null %}
                                                            <a href="{{ sube.yandexMapLink }}" target="_blank">
                                                                <img loading="lazy" src="{{ asset('assets/main/img/marker.svg') }}"
                                                                     alt="Yandex Maps">
                                                                <span>{{ 'yol_tarifi'|trans({'%platform%': 'Yandex'}) }}</span>
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                                <div class="contact-support-line">
                                                    <div class="contact-support-line-text">
                                                        {% for hat in sube.lines %}
                                                            {% set hatDil = hat.diller|first %}
                                                            <div class="contact-support-line-text-content">
                                                                <h2>{{ hatDil.baslik|default }}</h2>
                                                                {% for telefon in hat.telefonlar %}
                                                                    <p>
                                                                        <a href="tel:{{ telefon.no }}">
                                                                            <span>
                                                                                {{ telefon.onEk ? telefon.onEk~':' : '' }}
                                                                                {{ telefon.ulkeCode ? '+'~telefon.ulkeCode : '' }}
                                                                                {{ telefon.no }}
                                                                                {{ telefon.sonEk ?? '' }}
                                                                            </span>
                                                                            <br>
                                                                        </a>
                                                                    </p>
                                                                {% endfor %}
                                                                {% for mail in hat.mailler %}
                                                                    <p>
                                                                        <a href="mailto:{{ mail }}">{{ mail }}</a>
                                                                    </p>
                                                                {% endfor %}
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                    <div class="contact-support-line-video">
                                                        <div class="contact-support-line-video-content">
                                                            {{ sube.youtube|default|raw }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="contact-main-info-header-images">
                                                {% for ulasim in sube.ulasimlar %}
                                                    <div class="contact-main-info-header-images-item{{ subeIndex % 2 == 0 ? '-right' : '' }}">
                                                        <img loading="lazy" src="{{ asset('uploads/sube/ulasim/' ~ ulasim.resim) }}"
                                                             alt="Dentmax Metrobüs ile Ulaşım"
                                                             data-aos="fade-left" data-aos-duration="1000"
                                                             data-aos-delay="500"
                                                             class="aos-init aos-animate">
                                                    </div>
                                                {% endfor %}
                                            </div>
                                            <div class="contact-main-info-content-text">
                                                {% for ulasim in sube.ulasimlar %}
                                                    {% set ulasimDil = ulasim.diller|first %}
                                                    <div class="contact-main-info-content-text-item{{ subeIndex % 2 == 0 ? '-right' : '' }}"
                                                         style="display: none;">
                                                        <h2 data-aos="fade-right" data-aos-duration="1000"
                                                            data-aos-delay="600"
                                                            class="aos-init aos-animate">
                                                            {{ ulasimDil.baslik|default }}</h2>
                                                        {{ ulasimDil.metin|default|raw }}
                                                        {# <h3 data-aos="fade-right" data-aos-duration="1000"
                                                            data-aos-delay="700"
                                                            class="aos-init aos-animate">
                                                            {{ ulasim.yol }}</h3>
                                                        <a href="{{ ulasim.konum }}" data-aos="fade-up"
                                                           data-aos-duration="1000" data-aos-delay="800"
                                                           class="aos-init aos-animate">Harita üzerinden tarif al...</a> #}
                                                    </div>
                                                {% endfor %}
                                                <div id="proSealWidget"></div>

                                            </div>
                                            <div class="contact-map">
                                                <div id="{{ subeIndex % 2 == 0 ? 'mapBalikesir' : 'mapIstanbul' }}"></div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="contact-main-bottom">
                                <div class="contact-form">
                                    <form method="POST" id="contactPageForm">
                                        <div class="pe-richsnippets mb-3"></div>
                                        <p class="form-contact-text" data-aos="fade-right" data-aos-duration="1000">
                                            {{ 'dogrudan_iletisime_gecin'|trans }}
                                        </p>
                                        <div class="contact-form-line">
                                            <input type="text" placeholder="{{ 'adiniz'|trans }}" name="contactName"
                                                   data-aos="fade-right"
                                                   data-aos-duration="1000">
                                            <input type="text" placeholder="{{ 'soyadiniz'|trans }}"
                                                   name="contactSurname"
                                                   data-aos="fade-left"
                                                   data-aos-duration="1000">
                                        </div>
                                        <div class="contact-form-line">
                                            <input type="text" placeholder="{{ 'eposta'|trans }}" name="contactEmail"
                                                   data-aos="fade-right"
                                                   data-aos-duration="1000" data-aos-delay="200">
                                            <input type="text" placeholder="{{ 'telefon'|trans }}" name="contactPhone"
                                                   data-aos="fade-left"
                                                   data-aos-duration="1000" data-aos-delay="200">
                                        </div>
                                        <div class="contact-form-line">
                                        <textarea id="contactQuestions" name="contact_questions"
                                                  placeholder="{{ 'soru_oneri_bekliyoruz'|trans }}..."
                                                  data-aos="fade-right" data-aos-duration="1000"
                                                  data-aos-delay="300"></textarea>
                                        </div>
                                        <div class="kvkk-text" data-aos="fade-left" data-aos-duration="700"
                                             data-aos-delay="100">
                                            <input type="checkbox" id="kvkk" name="contact_kvkk">
                                            <label for="kvkk">{{ 'gizlilik_onay'|trans }}</label>
                                        </div>
                                        <div class="contact-info-text" data-aos="fade-left" data-aos-duration="700"
                                             data-aos-delay="200">
                                            <p>{{ 'yanit_bilgilendirme'|trans }}</p>
                                        </div>
                                        <div class="contact-button" data-aos="fade-up" data-aos-duration="700"
                                             data-aos-delay="500">
                                            <div class="g-recaptcha"
                                                 data-sitekey="6Lc1ZG8qAAAAAFjwbMYquzQ5Erd3nhvYcic_Y8pY"></div>
                                            <button type="button" class="contact-page-submit-button">
                                                <a class="turquoise-button compact-button" href="#">{{ 'gonder'|trans|upper }}</a>
                                            </button>
                                        </div>
                                    </form>
                                    <div class="contact-main-info-content-image">
                                        <div class="contact-main-info-content-image-content" data-aos="fade-left"
                                             data-aos-duration="1000" data-aos-delay="600">
                                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-dogru-dis-fircalama.webp') }}"
                                                 alt="Dentmax İletişim">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
{% endblock %}

{% block pageScript %}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="{{ asset('build/assets/main/js/toastr.js') }}" async defer></script>
    <script>
        document.querySelector(".contact-page-submit-button").addEventListener("click", ()=>{
        var captchaResponse1 = grecaptcha.getResponse();
        if (captchaResponse1.length == 0) {
            toastr.error('Lütfen captcha bölümünü kontrol ediniz!');
        } else {
            document.getElementById('contactPageForm').submit();
        }
    });
</script>
{% endblock %}