@extends('layouts.front')


@section('content')
        <div class="content-area">
            <div class="row contacts-row">
                <div class="col-md-6">
                    <div class="bg-image" style="background-image: url({{ asset('images/works/k.jpg') }})"></div>
                </div>
                <div class="col-md-6">
                    <div id="map-contacts"></div>
                </div>
            </div>
            <div class="row contacts-row">
                <div class="col-md-6">
                    <div class="contacts-address">
                        <p> <span class="country">Portugal</span> <br>
                        Rua Machado dos Santos nº 43, 1ºB <br>
                        2490-128, Leiria <br>
                        </p>
                    </div>
                    <div class="contact-buttons">
                        <a href="mailto:geral@gvmaa.com" class="btn btn-default">Email</a>  
                        <a href="https://www.google.pt/maps/place/R.+Machado+dos+Santos+43+1%C2%BAB,+2400-137+Leiria/@39.7429256,-8.8069386,19.72z/data=!4m5!3m4!1s0xd22736eed1f710d:0x42edad38862fde7c!8m2!3d39.7429127!4d-8.806808" target="_blank" class="btn btn-default">View map</a>  
                    </div>
                </div>
            </div>
            @include('components.footer')
        </div>
        @endsection
        
        
        @section('scripts')
        
        <script>
        var map;
        function initMap() {
            var myLatLng = {lat: 39.742666, lng: -8.808907};
                
            map = new google.maps.Map(document.getElementById('map-contacts'), {
                center: myLatLng,
                zoom: 18,
                styles: [
                {
                    "featureType": "administrative",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": "-100"
                    }
                    ]
                },
                {
                    "featureType": "administrative.province",
                    "elementType": "all",
                    "stylers": [
                    {
                        "visibility": "off"
                    }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": -100
                    },
                    {
                        "lightness": 65
                    },
                    {
                        "visibility": "on"
                    }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": -100
                    },
                    {
                        "lightness": "50"
                    },
                    {
                        "visibility": "simplified"
                    }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": "-100"
                    }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "all",
                    "stylers": [
                    {
                        "visibility": "simplified"
                    }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "all",
                    "stylers": [
                    {
                        "lightness": "30"
                    }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "all",
                    "stylers": [
                    {
                        "lightness": "40"
                    }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "all",
                    "stylers": [
                    {
                        "saturation": -100
                    },
                    {
                        "visibility": "simplified"
                    }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                    {
                        "hue": "#ffff00"
                    },
                    {
                        "lightness": -25
                    },
                    {
                        "saturation": -97
                    }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels",
                    "stylers": [
                    {
                        "lightness": -25
                    },
                    {
                        "saturation": -100
                    }
                    ]
                }
                ]
            });

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'GvMAA Office'
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZ-talNoxc9PvjPU2z6Nn77FlXPa6xef4&callback=initMap"
    async defer></script>
    @endsection