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

{% block title %}Contact{% endblock %}
{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <!-- //END PAGE ASIDE PANEL --><!-- SIDEPANEL -->
    <div class="page-sidepanel" id="page-sidepanel">
        <div class="page-sidepanel__content">
            <div class="content margin-bottom-0">
                <p class="caption margin-bottom-10">Addresses</p>
                <div class="form-group margin-bottom-10"><span class="text-bold">New York</span><br><span
                            class="text-muted">114 West 17th Street, NY 10011</span></div>
                <div class="form-group margin-bottom-50"><span class="text-bold">London</span><br><span
                            class="text-muted">1131-151 Great Street, W1W 5BB</span></div>
                <p class="caption margin-bottom-10">Contacts</p>
                <div class="form-group margin-bottom-10">
                    <div class="icon-box icon-box--sm margin-right-5"><span class="fa fa-tty"></span></div>
                    +01 2345 6789 01
                </div>
                <div class="form-group margin-bottom-10">
                    <div class="icon-box icon-box--sm margin-right-5"><span class="fa fa-tty"></span></div>
                    +09 8765 4321 98
                </div>
                <div class="form-group margin-bottom-10">
                    <div class="icon-box icon-box--sm margin-right-5"><span class="fa fa-envelope-o"></span></div>
                    <a href="#">no-reply-sales@domain.com</a>
                </div>
                <div class="form-group margin-bottom-50">
                    <div class="icon-box icon-box--sm margin-right-5"><span class="fa fa-envelope-o"></span></div>
                    <a href="#">support@domain.com</a>
                </div>
                <p class="caption margin-bottom-10">Work hours</p>
                <div class="form-group margin-bottom-10">
                    <div class="form-row">
                        <div class="col-7">
                            <div class="icon-box icon-box--sm margin-right-5"><span class="fa fa-clock-o"></span>
                            </div>
                            Monday - Friday
                        </div>
                        <div class="col-5 text-right"><span class="text-bold">8:00 - 18:00</span></div>
                    </div>
                </div>
                <div class="form-group margin-bottom-10">
                    <div class="form-row">
                        <div class="col-7">
                            <div class="icon-box icon-box--sm margin-right-5"><span class="fa fa-clock-o"></span>
                            </div>
                            Saturday
                        </div>
                        <div class="col-5 text-right"><span class="text-bold">9:00 - 17:00</span></div>
                    </div>
                </div>
                <div class="form-group margin-bottom-50">
                    <div class="form-row">
                        <div class="col-7">
                            <div class="icon-box icon-box--sm margin-right-5"><span class="fa fa-clock-o"></span>
                            </div>
                            Sunday
                        </div>
                        <div class="col-5 text-right"><span class="text-bold">Not working</span></div>
                    </div>
                </div>
                <p class="caption margin-bottom-10">Send a message</p>
                {% include "@AppBundle/Default/flashBag.html.twig" %}
                {{ form_start(form) }}
                <div class="form-group margin-bottom-10">
                    {{ form_widget(form.phone, { 'attr': {'class': 'form-control', 'placeholder': 'Enter phone number','name':'phone','id':'phone','required':'true'} }) }}
                </div>
                <div class="form-group margin-bottom-10">
                    {{ form_widget(form.email, { 'attr': {'class': 'form-control', 'placeholder': 'Enter email','name':'email','id':'email','required':'true'} }) }}
                </div>
                <div class="form-group margin-bottom-10">
                    {{ form_widget(form.subject, { 'attr': {'class': 'form-control', 'placeholder': 'Enter subject','name':'subject','id':'subject','required':'true'} }) }}
                </div>
                <div class="form-group">
                    {{ form_widget(form.message, { 'attr': {'class': 'form-control', 'placeholder': 'Enter Message','name':'message','id':'message','required':'true'} }) }}
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-outline-primary btn-block">Send a message</button>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
        <div class="page-sidepanel__button page-sidepanel__button--lower" data-action="sidepanel-hide">
            <div></div>
        </div>
    </div>
    <!-- //END SIDEPANEL --><!-- PAGE CONTENT CONTAINER -->
    <div class="content" id="content">
        <!-- PAGE HEADING -->
        <div class="page-heading">
            <div class="page-heading__container">
                <div class="icon"><span class="li-telephone2"></span></div>
                <h1 class="title">Contact us</h1>
                <p class="caption">The Right Way - Admin Template</p>
            </div>
            <!--div class="page-heading__container float-right d-none d-sm-block"><a
                        href="https://themeforest.net/item/the-right-way-bootstrap-4-admin-template/21916885?ref=aqvatarius&amp;license=regular&amp;open_purchase_for_item_id=21916885"
                        target="_blank" class="btn btn-primary btn--icon btn--icon-stacked btn--anon d-none d-lg-block"><span
                            class="text">$24</span> Get template now</a> <a
                        href="https://themeforest.net/item/the-right-way-bootstrap-4-admin-template/21916885?ref=aqvatarius&amp;license=regular&amp;open_purchase_for_item_id=21916885"
                        target="_blank"
                        class="btn btn-primary btn--icon btn--icon-stacked btn--anon d-none d-sm-block d-lg-none"><span
                            class="text">$24</span> Buy</a></div>-->
            <nav aria-label="breadcrumb" role="navigation">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">Pages</a></li>
                    <li class="breadcrumb-item active">Contact us</li>
                </ol>
            </nav>
        </div>
        <!-- //END PAGE HEADING -->
        <div id="google_contact" class="pull-left" style="width: 100%; height: 100%"></div>
    </div>
    <!-- //END PAGE CONTENT CONTAINER -->
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <!-- THIS PAGE SCRIPTS ONLY -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdT8Vc4Gc2uMed0VG2kPbibbytrVAwuv0"></script>
    <script>document.addEventListener("DOMContentLoaded", function () {
            var icon = 'assets/map-marker.png';
            var mapStyle = [{
                "featureType": "administrative.country",
                "elementType": "geometry.fill",
                "stylers": [{"visibility": "on"}]
            }];
            var gMapContactCords = new google.maps.LatLng(50.43, 30.55);
            var gMapContactOptions = {
                styles: mapStyle,
                zoom: 15,
                disableDefaultUI: true,
                center: gMapContactCords,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var gMapContact = new google.maps.Map(document.getElementById("google_contact"), gMapContactOptions);

            var cords = new google.maps.LatLng(50.43, 30.55);
            var marker2 = new google.maps.Marker({position: cords, map: gMapContact, title: "Marker 3", icon: icon});
        });
    </script>
{% endblock %}