@extends('public.skeleton')
@section('title', 'Contact Us')

@section('library-styles')
    <style>
        #map {
            width: 100%;
            height: 220px;
        }
    </style>
@endsection

@section('body')
    <div class="container-fluid p-0 menu_margin_top_fixed min_height_banner_inner" style="position: relative; clip-path: polygon(50% 9%, 100% 0, 100% 93%, 50% 100%, 0 93%, 0 0);">
        <img src="{{asset('images/banner_cont.jpg')}}" class="img-fluid">
        <div class="overlay_inner_img"></div>
        <div class="inner_caption">{{__('hf.menu.contact_us')}}</div>
    </div>
    <!---------------------------------------------------------------------->
    <div class="container-fluid"
         style="padding-top: 2.8rem; padding-bottom: 3rem">
        <div class="container">
            <div class="row">
                <div class="col-md-12 mb-2">
                    <div class="sec-title">
                        <span class="tag-line">{{__('hf.menu.contact_us')}}</span>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 1.5rem">
                <div class="col-md-5">
                    <div class="row" style="min-height: 30px">
                        <div class="col-md-1 col-1"><img src="{{asset('images/cont_icon_1.png')}}"> </div>
                        <div class="col-md-11 col-10">{{__('hf.footer.contact.location')}}</div>
                    </div>
                    <div class="row" style="min-height: 40px">
                        <div class="col-md-1 col-1"><img src="{{asset('images/cont_icon_2.png')}}"> </div>
                        <div class="col-md-11 col-10">{{__('hf.footer.contact.phone')}}</div>
                    </div>
                    <div class="row" style="min-height: 40px">
                        <div class="col-md-1 col-1"><img src="{{asset('images/cont_icon_3.png')}}" style="margin-top: -2px"> </div>
                        <div class="col-md-11 col-10">{{__('hf.footer.contact.mobile')}}</div>
                    </div>
                    <div class="row" style="min-height: 40px">
                        <div class="col-md-1 col-1"><img src="{{asset('images/cont_icon_4.png')}}" style="margin-top: -2px"> </div>
                        <div class="col-md-11 col-10">{{__('hf.footer.contact.fax')}}</div>
                    </div>
                    <div class="row" style="min-height: 40px">
                        <div class="col-md-1 col-1"><img src="{{asset('images/cont_icon_5.png')}}" style="margin-top: -2px"> </div>
                        <div class="col-md-11 col-10"><a href="mailto:{{__('hf.footer.contact.email')}}" style="color: #212529;"> {{__('hf.footer.contact.email')}}</a></div>
                    </div>
                </div>

                <div class="col-md-7">
                    <div id="map"></div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('library-scripts')
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBt91Jo3GVko_7xUebe4s75Xle_n4nds0A"></script>
@endsection

@section('footer-scripts')
    <script type="text/javascript">

        // Create and Initialise the Map (required) our google map below

        google.maps.event.addDomListener(window, 'load', init);

        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

            var mapOptions = {

                // How zoomed in you want the map to start at (always required)

                zoom: 14,
                scrollwheel: false,
                // The latitude and longitude to center the map (always required)

                center: new google.maps.LatLng(30.190278, 31.451090), // Nova Scotia

                // How you would like to style the map.
                // This is where you would paste any style found on [Snazzy Maps][1].
                // copy the Styles from Snazzy maps,  and paste that style info after the word "styles:"

                styles:
                    [
                        {
                            "featureType": "all",
                            "stylers": [
                                {
                                    "saturation": 0
                                },
                                {
                                    "hue": "#4E7034"
                                }
                            ]
                        },
                        {
                            "featureType": "road",
                            "stylers": [
                                {
                                    "saturation": -50
                                }
                            ]
                        },
                        {
                            "featureType": "transit",
                            "stylers": [
                                {
                                    "visibility": "off"
                                }
                            ]
                        },
                        {
                            "featureType": "poi",
                            "stylers": [
                                {
                                    "visibility": "off"
                                }
                            ]
                        },
                        {
                            "featureType": "water",
                            "stylers": [
                                {
                                    "visibility": "simplified"
                                },
                                {
                                    "saturation": -60
                                }
                            ]
                        }
                    ]

            };


            var mapElement = document.getElementById('map');

            // Create the Google Map using out element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);

            // Following section, you can create your info window content using html markup

            // Define the image to use for the map marker (58 x 44 px)

            var image = 'images/loc_icon.png';

            // Define the Lattitude and Longitude for the map location

            var myLatLng = new google.maps.LatLng(30.190278, 31.451090);

            // Define the map marker characteristics

            var mapMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: 'Tetralift'

            });

            // Following line turns the marker, into a clickable button and when clicked, opens the info window


            google.maps.event.addListener(mapMarker, 'click', function () {
                infowindow.open(map, mapMarker);
            });

        }

    </script>
@endsection