{% set header_title = 'Creative Agency - Contact' %}
{% set header_show = false %}

{% extends 'layouts/layout-creative-agency.html' %}

{% block content %}

    <div class="container">
        <div class="row vertical-gap">
            <div class="col-lg-4">
                <div class="nk-sidebar-sticky" data-offset-top="0">
                    <!-- START: Google Map -->
                    <div id="google-map-contact" class="nk-gmaps nk-gmaps-stretch nk-gmaps-full"></div>
                    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBlQNaWM2_jxXJbRwL2ozXWw3cg-uuld8w&sensor=false"></script>
                    <script>
                        function initializeGmaps() {
                            var LatLng = {lat: 40.716361, lng: -74.001836};
                            var mapCanvas = document.getElementById('google-map-contact');
                            var mapOptions = {
                                center      : LatLng,
                                scrollwheel : false,
                                zoom        : 14,
                                backgroundColor: 'none',
                                mapTypeId   : 'nKStyle'
                            };
                            var map = new google.maps.Map(mapCanvas, mapOptions);
                            var marker = new google.maps.Marker({
                                position: LatLng,
                                map: map,
                                icon: 'assets/images/marker.png',
                                title: 'Pond Park'
                            });

                            // style from https://snazzymaps.com/style/151/ultra-light-with-labels
                            var styledMapType = new google.maps.StyledMapType([{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}], { name: 'nKStyle' });
                            map.mapTypes.set('nKStyle', styledMapType);
                        }
                        if(typeof google !== 'undefined') {
                            google.maps.event.addDomListener(window, 'load', initializeGmaps);
                        }
                    </script>
                    <!-- END: Google Map -->
                </div>
            </div>
            <div class="col-lg-7 offset-lg-1">
                <div class="nk-gap-5 mnt-10"></div>

                <!-- START: Contact Info -->
                <h2>Contact Info:</h2>
                <div class="nk-gap mnt-10"></div>

                <p class="mw-400">Let us know what you're looking for in an agency. We'll take a look and see if this could be the start of something beautiful. Please get in touch and let’s schedule time to talk!</p>

                <ul class="nk-contact-info">
                    <li><strong>Address:</strong> 10111 Santa Monica Boulevard, LA</li>
                    <li><strong>Phone:</strong> +44 987 065 908</li>
                    <li><strong>Email:</strong> info@Example.com</li>
                    <li><strong>Fax:</strong> +44 987 065 909</li>
                </ul>
                <!-- END: Contact Info -->

                <div class="nk-gap-4"></div>
                <!-- START: Get in Touch -->
                <h2>Get in Touch:</h2>
                <div class="nk-gap mnt-10"></div>

                <form action="php/ajax-contact-form.php" class="nk-form nk-form-ajax">
                    <div class="row vertical-gap">
                        <div class="col-md-6">
                            <input type="text" class="form-control required" name="name" placeholder="Your Name">
                        </div>
                        <div class="col-md-6">
                            <input type="email" class="form-control required" name="email" placeholder="Your Email">
                        </div>
                    </div>

                    <div class="nk-gap-1"></div>
                    <input type="text" class="form-control required" name="title" placeholder="Your Title">

                    <div class="nk-gap-1"></div>
                    <textarea class="form-control required" name="message" rows="8" placeholder="Your Message" aria-required="true"></textarea>
                    <div class="nk-gap-1"></div>
                    <div class="nk-form-response-success"></div>
                    <div class="nk-form-response-error"></div>
                    <button class="nk-btn nk-btn-color-dark-1">Send Message</button>
                </form>
                <!-- END: Get in Touch -->

                <div class="nk-gap-5"></div>
            </div>
        </div>
    </div>

{% endblock %}