{% extends 'main_base.html.twig' %}
{% block title %}{{ entity.title }}{% endblock %}
{% block description %}{{ entity.description }}{% endblock %}
{% block content %}
    <div class="page_head" id="iletisim-banner" style="background-image: url('{{ asset('uploads/iletisim/banner/'~entity.contact.banner) }}')">
        <h1 class="page-title animate__animated animate__flipInX">{{ 'contact'|trans }}</h1>
        <div class="tree animate__animated animate__slideInDown">
            <a href="{{ path('app_main_default') }}">{{ 'home'|trans }} </a>
            <span>/</span>
            <a href="javascript:void(0);" class="activetree">{{ 'contact'|trans }}</a>
        </div>
        {#<div class="innerPage-banner-img-hiz">
            <img src="{{ asset('assets/main/img/cert.png') }}" alt="">
        </div>#}
    </div>
    <div class="container">
        <div id="contact-head">
            <div class="contact-t">{{ entity.baslik }}</div>
            <div class="contact-tx">{{ entity.metin|default|raw }}</div>
            <div class="ex-social-media ">
                {% for medya in sosyalMedya %}
                    <a href="{{ medya.link }}" class="social-item iletisim-social-item" target="_blank">
                        {% if medya.tip == 'linkedin'  %}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="18px" height="18px">
                                <path fill="#ed852d" stroke="#ed852d"
                                      d="M8.421 14h.052 0C11.263 14 13 12 13 9.5 12.948 6.945 11.263 5 8.526 5 5.789 5 4 6.945 4 9.5 4 12 5.736 14 8.421 14zM4 17H13V43H4zM44 26.5c0-5.247-4.253-9.5-9.5-9.5-3.053 0-5.762 1.446-7.5 3.684V17h-9v26h9V28h0c0-2.209 1.791-4 4-4s4 1.791 4 4v15h9C44 43 44 27.955 44 26.5z"/>
                            </svg>
                        {% elseif medya.tip == 'instagram' %}
                            <svg fill="#ed852d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                 width="24px" height="24px">
                                <path
                                        d="M 8 3 C 5.243 3 3 5.243 3 8 L 3 16 C 3 18.757 5.243 21 8 21 L 16 21 C 18.757 21 21 18.757 21 16 L 21 8 C 21 5.243 18.757 3 16 3 L 8 3 z M 8 5 L 16 5 C 17.654 5 19 6.346 19 8 L 19 16 C 19 17.654 17.654 19 16 19 L 8 19 C 6.346 19 5 17.654 5 16 L 5 8 C 5 6.346 6.346 5 8 5 z M 17 6 A 1 1 0 0 0 16 7 A 1 1 0 0 0 17 8 A 1 1 0 0 0 18 7 A 1 1 0 0 0 17 6 z M 12 7 C 9.243 7 7 9.243 7 12 C 7 14.757 9.243 17 12 17 C 14.757 17 17 14.757 17 12 C 17 9.243 14.757 7 12 7 z M 12 9 C 13.654 9 15 10.346 15 12 C 15 13.654 13.654 15 12 15 C 10.346 15 9 13.654 9 12 C 9 10.346 10.346 9 12 9 z"/>
                            </svg>
                        {% elseif medya.tip == 'youtube' %}
                            <svg height="24" viewBox="0 0 24 24" width="24" fill="#ed852d" xmlns="http://www.w3.org/2000/svg">
                                <path d="M23,11.9972 C23,15.0688707 22.7080514,16.9571365 22.0247481,18.1281724 C21.3347709,19.3777602 20.5269977,19.7708297 18.8782989,19.8862992 C17.7148693,19.9542414 14.794638,20 12.0026667,20 C9.2044172,20 6.28275714,19.9542562 5.10860514,19.8855427 C3.47493151,19.7708031 2.66701263,19.37838 1.97791182,18.142374 C1.29279472,16.9480084 1,15.052042 1,12.0084 C1,8.94737365 1.29138368,7.06090428 1.97193166,5.86259947 C2.67010997,4.61046509 3.49111627,4.21325835 5.11100471,4.1184917 C6.23144506,4.04250638 8.99660854,4 12.0026667,4 C15.002263,4 17.766208,4.04252223 18.8782989,4.11790083 C20.5073007,4.21303163 21.3281267,4.60936303 22.020213,5.8580297 C22.7108012,7.06048454 23,8.93778123 23,11.9972 Z M20.283329,6.84963647 C19.9603324,6.26505017 19.7713697,6.17346202 18.752413,6.11391338 C17.6926261,6.04212137 14.954737,6 12.0026667,6 C9.04424331,6 6.3050775,6.04210674 5.2370951,6.1144916 C4.22844212,6.17352647 4.03674592,6.26627 3.71489655,6.84342165 C3.2475376,7.66638709 3,9.26898917 3,11.9972 C3,14.7270394 3.24886149,16.33852 3.71873501,17.1577995 C4.03565111,17.7261665 4.22600958,17.8186276 5.23703026,17.8897046 C6.34874254,17.9546989 9.24212825,18 12.0026667,18 C14.7569983,18 17.6489264,17.9546849 18.7500936,17.8904464 C19.7737637,17.8187098 19.961409,17.7274 20.2855157,17.1409953 C20.752236,16.3407623 21,14.7382734 21,12.0084 C21,9.25771396 20.7535449,7.66399511 20.283329,6.84963647 Z M10,9 L15,12 L10,15 L10,9 Z" fill-rule="evenodd"/>
                            </svg>
                        {% endif %}
                    </a>
                {% endfor %}
            </div>
        </div>
        <div class="temizle"></div>
    </div>
    <div id="cont-sect">
        <div class="row row-setting">
            <div class="col-md-6 cont-left">
                <h4>{{ 'contact.section_1_title'|trans|raw }}</h4>
                <div class="row contact-row">
                    {% for adres in adresler|slice(0,2) %}
                        <div class="cont-row">
                            <h5 class="row-title">{{ adres.baslik }}</h5>
                            <div class="row-cont">
                                {% for telefon in adres.telefonlar|filter(t => t.numara != '') %}
                                    <span>{{ telefon.baslik ~' '~ telefon.ulkeKodu ~' '~ telefon.numara }}</span>
                                {% endfor %}
                                <span>M: {{ adres.email }}</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="col-md-6 cont-rigth">
                <h4>{{ 'contact.section_2_title'|trans|raw }}</h4>
                <div class="row contact-row">
                    {% for adres in adresler|slice(2,10) %}
                        <div class="cont-row">
                            <h5 class="row-title">{{ adres.baslik }}</h5>
                            <div class="row-cont">
                                <span>{{ adres.adres }}</span>
                            </div>
                        </div>
                        <div class="cont-row mt-3">
                            {% for telefon in adres.telefonlar|filter(t => t.numara != '') %}
                                <span>{{ telefon.baslik ~' '~ telefon.ulkeKodu ~' '~ telefon.numara }}</span><br>
                            {% endfor %}
                            {% if adres.email %}
                            <span>M: {{ adres.email }}</span>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div id="cont-form">
        <div class="container">
            <div class="row">
                <div class="col-md-6 px-5">
                    <div class="contact-t">{{ 'contact.title_1'|trans }}</div>
                    <div class="contact-tx">{{ 'contact.text_1'|trans }}</div>
                    <div id="c-formx">
                        {% set urlMailStatus = app.request.get('mailStatus') %}
                        {% if urlMailStatus %}
                            <div id="mailStatusMessage">
                                {% if urlMailStatus == 'success' %}
                                    <p class="mail-status-text text-success">İletişim formu bize başarıyla ulaştı</p>
                                {% else %}
                                    <p class="mail-status-text text-error">Maalesef iletişim formu bize ulaşamadı</p>
                                {% endif %}
                            </div>
                        {% endif %}
                        <form method="post">
                            <input type="text" name="adsoyad" class="form-control" placeholder="{{ 'contact.name_surname'|trans }}" required>
                            <input type="text" name="sirket" class="form-control" placeholder="{{ 'contact.company'|trans }}">
                            <input type="text" name="tel" class="form-control" placeholder="{{ 'contact.phone'|trans }}" required>
                            <select name="konu" class="form-control" required>
                                <option value="" selected disabled>{{ 'contact.subject_label'|trans }}</option>
                                <option value="soru">{{ 'contact.subject_question'|trans }}</option>
                                <option value="öneri">{{ 'contact.subject_suggestion'|trans }}</option>
                                <option value="şikayet">{{ 'contact.subject_complaint'|trans }}</option>
                                <option value="diğer">{{ 'contact.subject_other'|trans }}</option>
                            </select>
                            <input type="text" name="info" class="form-control" placeholder="{{ 'contact.help_text'|trans }}" required>
                            <div class="g-recaptcha" data-sitekey="6LcsUkghAAAAAIzSDNwZObTDNLmiSgHXO78kkomY" data-callback="verifyCaptcha"></div>
                            <br/>
                            <div id="cont-cook">
                                {% if app.request.locale == 'tr' %}
                                    <span>* Gizlilik Politikası Görüntüle</span>
                                {% else %}
                                    <span>* View Privacy Policy</span>
                                {% endif %}

                                <div id="cont-cc">
                                    <input type="checkbox">
                                    {% if app.request.locale == 'tr' %}
                                        <span>
                                        Aşağıda yer alan iletişim bilgilerimi doğruladığımı ve tarafıma ait olduğunu onaylıyorum. Bu bilgiler arasında cep telefonu-GSM numarası, e-posta adresi gibi veriler bulunmaktadır.
                                        Lütfen, ilettiğiniz bilgilerde özel nitelikli kişisel verilerin (ırk, etnik köken, siyasi düşünce, felsefi inanç, din, mezhep veya diğer inançlar, kılık ve kıyafet, dernek, vakıf ya da sendika üyeliği, sağlık, cinsel hayata ilişkin veriler, ceza mahkûmiyeti ve güvenlik tedbirleriyle ilgili veriler, biyometrik ve genetik veriler) bulunmadığından emin olmanızı rica ederiz.
                                        Şirketimize ileteceğiniz talep, şikayet ve önerilerinizin değerlendirilmesi ve sonuçlandırılması sürecinde kişisel verilerinizin işlenmesine ilişkin detaylı bilgilere <a
                                                    href="{{ path('app_main_sayfa', {'link': 'kisisel-verilerin-korunmasi'}) }}" target="_blank">Aydınlatma Metni</a>'nden ulaşabilirsiniz.
                                        </span>
                                    {% else %}
                                        <span>
                                            I confirm that I have verified my contact information below and that it belongs to me.
                                            This information includes data such as mobile phone-GSM number, e-mail address.
                                            Please, in the information you transmit, personal data of special nature
                                            (race, ethnicity, political opinion, philosophical belief, religion, sect or
                                            other beliefs, dress and dress, association, foundation or union membership, health,
                                            data on sexual life, criminal conviction and security) We kindly ask you to
                                            make sure that there are no data related to precautionary measures (biometric and genetic data).
                                            You can find detailed information on the processing of your personal data in
                                            the process of evaluating and finalizing your requests, complaints and suggestions
                                            to our company from the <a href="{{ path('app_main_sayfa', {'link': 'kisisel-verilerin-korunmasi'}) }}" target="_blank">Clarification Text</a>.
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                            <button type="submit" disabled>{{ 'contact.form_submit'|trans }}</button>
                        </form>
                    </div>
                </div>
                <div class="col-md-6 px-5">
                    <div class="contact-t2">{{ 'contact.title_2'|trans }}</div>
                    <div class="contact-tx">{{ 'contact.text_2'|trans }}</div>
                    <div class="cont-mMail">
                        {% if app.request.locale == 'tr' %}
                            <span><b>Pazarlama: </b> pazarlama@askondemir.com</span>
                        {% else %}
                            <span><b>Marketing: </b> pazarlama@askondemir.com</span>
                        {% endif %}
                        {% if app.request.locale == 'tr' %}
                            <span><b>İmalat: </b> imalat@askondemir.com</span>
                        {% else %}
                            <span><b>Production: </b> imalat@askondemir.com</span>
                        {% endif %}
                        {% if app.request.locale == 'tr' %}
                            <span><b>Proje: </b> proje@askondemir.com</span>
                        {% else %}
                            <span><b>Project: </b> proje@askondemir.com</span>
                        {% endif %}
                        {% if app.request.locale == 'tr' %}
                            <span><b>Muhasebe: </b> muhasebe@askondemir.com</span>
                        {% else %}
                            <span><b>Accounting: </b> muhasebe@askondemir.com</span>
                        {% endif %}
                        {% if app.request.locale == 'tr' %}
                            <span><b>İnsan Kaynakları: </b> ik@askondemir.com</span>
                        {% else %}
                            <span><b>Human Resources: </b> ik@askondemir.com</span>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="temizle"></div>
        </div>
    </div>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    {#<script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJefPQ-ErELuh4-9OZpqgwu9UDuMeCBaI&callback=initMap"
            type="text/javascript"></script>#}
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCaVmIIj8Xl8XSxcYX59jP9A2058NyMWaE&callback=initMap"></script>
    <script>
        $("#cont-sect .cont-left").css("min-height", $("#cont-sect .cont-left h4").outerWidth() + 30 + "px");
        $("#cont-sect .cont-right").css("min-height", $("#cont-sect .cont-right h4").outerWidth() + 30 + "px");

        $('#cont-cook input[type="checkbox"]').change(function () {
            if ($(this).is(":checked")) {
                $('#c-formx button[type="submit"]').removeAttr('disabled');
            } else {
                $('#c-formx button[type="submit"]').attr('disabled', true);
            }
        });

        function initMap() {
            // The map, centered at Uluru
            var map = new google.maps.Map(
                document.getElementById('map'), {
                    zoom: 3,
                    center: {lat: 45.000000, lng: 18.000000},
                    styles: [
                        {
                            "featureType": "administrative",
                            "elementType": "labels.text.fill",
                            "stylers": [
                                {
                                    "color": "#444444"
                                }
                            ]
                        },
                        {
                            "featureType": "landscape",
                            "elementType": "all",
                            "stylers": [
                                {
                                    "color": "#f2f2f2"
                                }
                            ]
                        },
                        {
                            "featureType": "poi",
                            "elementType": "all",
                            "stylers": [
                                {
                                    "visibility": "off"
                                }
                            ]
                        },
                        {
                            "featureType": "road",
                            "elementType": "all",
                            "stylers": [
                                {
                                    "saturation": -100
                                },
                                {
                                    "lightness": 45
                                }
                            ]
                        },
                        {
                            "featureType": "road.highway",
                            "elementType": "all",
                            "stylers": [
                                {
                                    "visibility": "simplified"
                                }
                            ]
                        },
                        {
                            "featureType": "road.arterial",
                            "elementType": "labels.icon",
                            "stylers": [
                                {
                                    "visibility": "off"
                                }
                            ]
                        },
                        {
                            "featureType": "transit",
                            "elementType": "all",
                            "stylers": [
                                {
                                    "visibility": "off"
                                }
                            ]
                        },
                        {
                            "featureType": "water",
                            "elementType": "all",
                            "stylers": [
                                {
                                    "color": "#4f595d"
                                },
                                {
                                    "visibility": "on"
                                }
                            ]
                        }]
                });
            // The marker, positioned at Uluru
            {% for sube in subeler %}
                var marker{{ loop.index }} = new google.maps.Marker({position: {lat: {{ sube.lat }}, lng: {{ sube.lng }}}, map: map});
            {% endfor %}
        }
    </script>
    <div id="map"></div>
{% endblock %}