{% extends 'main_base.html.twig' %}
  {% block title %}{{ entity ? entity.title }}{% endblock %}
 {% block description %}{{ entity ? entity.description }}{% endblock %}
{% block pageStyle %}
    
    <style>
        #loader-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #40e0d0 !important;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: top 1s ease-out;
            column-gap: 1%;
        }

        #loader {
            width: 100px;
            height: 100px;
        }

        #loader-container img:first-child {
            width: 3%;
            height: auto;
        }

        #loader-container img {
            width: 15%;
            height: auto;
        }

        @media (max-width: 992px) {
            #loader-container img:first-child {
                width: 8%;
                height: auto;
            }

            #loader-container img {
                width: 40%;
                height: auto;
            }
        }

        #loader-container.hidden {
            transition: 0.6s ease-in;
            opacity: 0;
            visibility: hidden;
        }

    </style>
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css"/>

    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <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 %}
    <div id="loader-container">
        <img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Loading...">
        <img loading="lazy" src="{{ asset('assets/main/img/dentmaxLogotxt.svg') }}" alt="Loading...">
    </div>
    {#    {% 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('assets/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>
                <a href="javascript:void(0)">{{ 'iletisim'|trans }}</a>
            </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" onclick="contactPageSubmitForm()">
                                                <a class="turquoise-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://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js"></script>
    <script src="{{ asset('assets/main/js/map.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCaVmIIj8Xl8XSxcYX59jP9A2058NyMWaE&amp;callback=initMap">
    </script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        AOS.init({once: true});

        function contactPageSubmitForm() {
            var captchaResponse1 = grecaptcha.getResponse();
            if (captchaResponse1.length == 0) {
                alert('Lütfen captcha bölümünü kontrol ediniz!');
            } else {
                document.getElementById('contactPageForm').submit();
            }
        }

        $(document).ready(function () {
            $('.contact-main-info-content-text-item').hide();
            $('.contact-main-info-content-text-item:first').show();
            // Tıklanan resmi işleyin
            $('.contact-main-info-header-images-item').hover(function () {
                // Tüm içerikleri gizleyin
                $('.contact-main-info-content-text-item').slideUp(0);

                // Tıklanan resmin sırasını alın
                var index = $(this).index();

                // İlgili içeriği gösterin
                $('.contact-main-info-content-text-item:eq(' + index + ')').slideDown(0);
            });

            $('.contact-main-info-content-text-item-right').hide();
            $('.contact-main-info-content-text-item-right:first').show();
            // Tıklanan resmi işleyin
            $('.contact-main-info-header-images-item-right').hover(function () {
                // Tüm içerikleri gizleyin
                $('.contact-main-info-content-text-item-right').slideUp(0);

                // Tıklanan resmin sırasını alın
                var index = $(this).index();

                // İlgili içeriği gösterin
                $('.contact-main-info-content-text-item-right:eq(' + index + ')').slideDown(0);
            });
        });
    </script>
{% endblock %}