{% extends 'base.html.twig' %}

{% set pageTitle = "contact"|trans|capitalize|replace({'I': 'İ'}) %}

{% block meta %}
    <meta name="description" content='{{ "contact_intro_description"|trans|capitalize }}'>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/contact.css') }}">
    <style>
        .intro-img {
            background-image: url("{{ asset('img/contact/intro.webp') }}");
        }
    </style>
{% endblock %}

{% set queryTypes = getQueryTypes() %}

{% set locations = getLocations() %}
{% block content %}
    {% include "components/_intro.html.twig" with {options: {
        title: "contact_to_us"|trans|title|replace({'I': 'İ'}),
        description: "contact_intro_description"|trans|capitalize,
        skip: ".locations-wrapper"
    }} %}
    <div class="section-wrapper locations-wrapper">
        <div class="content-section locations">
            <div class="content-title-wrapper">
                <h2 class="content-title">{{ 'locations'|trans|title }}</h2>
            </div>
            <div class="locations-content">
                <div class="location-side">
                    <div class="location-side-text">{{ 'office_locations'|trans|title }}</div>
                    <div class="location-items">
                        {% for location in locations %}
                            {% set locationLang = getLang(location.getLocationLangs(), app.request) %}
                            {% if locationLang %}
                                <div class="location-item">
                                    <div class="location-name">{{ locationLang.officeName|upper }}</div>
                                    <a class="location-address" href="{{ location.url }}" target="_blank">{{ locationLang.address|title }}</a>
                                    <div class="location-item-content">
                                        <a href="tel:{{ location.phoneNumber }}" class="location-phone">+{{ location.phoneNumber }}</a>
                                        <a href="mailto:{{ location.email }}" class="location-mail">{{ location.email }}</a>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div class="form-side">
                    <div class="contact-form">
                        <h1>{{ 'contact_form'|trans|title }}</h1>
                        <span>{{ 'contact_form_description'|trans|capitalize }}</span>
                        <div class="contact-form-content">
                            <div class="name-container">
                                <div class="first-name-input">
                                    <label for="firstName">{{ 'first_name'|trans|capitalize }} *</label>
                                    <input type="text" id="firstName" placeholder="{{ 'enter_first_name'|trans|capitalize }}">
                                </div>
                                <div class="last-name-input">
                                    <label for="lastName">{{ 'last_name'|trans|capitalize }} *</label>
                                    <input type="text" id="lastName" placeholder="{{ 'enter_last_name'|trans|capitalize }}">
                                </div>
                            </div>
                            <div class="mail-input">
                                    <label for="mail">{{ 'e-mail'|trans|capitalize }} *</label>
                                    <input type="text" id="mail" placeholder="{{ 'enter_e-mail'|trans|capitalize }}">
                                </div>
                            <div class="query-type relative">
                                <label for="query_type">{{ 'query_type'|trans|capitalize }} *</label>
                                <input type="text" class="selected" id="query_type" placeholder="{{ 'choose_query'|trans|capitalize }}" readonly/>
                                <div class="select-menu-trigger activate focusout_inactivate input-select noselect" tabindex="0">
                                    <div class="select-menu no_propagation">
                                        <ul>
                                            {% for queryType in queryTypes %}
                                                <li><a class="hvr" data-id="{{ queryType.id }}">{{ getText(queryType.identifier, app.request)|capitalize }}</a></li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="message">
                                <label for="message">{{ 'message'|trans|capitalize }} *</label>
                                <textarea type="text" id="message" placeholder="{{ 'enter_message'|trans|capitalize }}"></textarea>
                            </div>
                            <a class="black-button standart-button send-email arrow-anim">{{ 'send_message'|trans|capitalize }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-wrapper map-section-wrapper">
        <div class="content-section map-section">
            <div class="content-title-wrapper">
                <h2 class="content-title">{{ "contact"|trans|title }}</h2>
            </div>
            <div class="content-inner">
                <div id='map'></div>
            </div>
        </div>
    </div>
    {% include "components/_intern-section.html.twig" %}
{% endblock %}

{% block javascripts %}
    <script src="{{asset('js/map.js')}}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCaVmIIj8Xl8XSxcYX59jP9A2058NyMWaE&callback=initMap&v=weekly&libraries=marker"</script>
    <script src="{{asset('js/googlemaps-map.js')}}"></script>
{% endblock %}