@extends('themes.schumann.layout.layout')
@section('title', trans('site.contact'))
@section('bodyClass', 'contact-page')
@section('content')
<div class="contact-wrapper">
  @include('themes.schumann.layout.inc.errors')
  @include('themes.schumann.layout.inc.message')
    <div class="title">
        {{ trans('site.contact') }}
    </div>

    <div class="left-side">
        <div class="contact-info">
            <ul>
                @if($item->phone)
                <li>
                    <a href="tel:{{ $item->phone }}">{{ $item->phone }}</a>
                </li>
                @endif
                @if($item->email)
                <li>
                    <a href="mailto:{{ $item->email }}">{{ $item->email }}</a>
                </li>
                @endif
                @if($item->addt_email)
                <li>
                    <a href="mailto:{{ $item->addt_email }}">{{ $item->addt_email }}</a>
                </li>
                @endif
                @if($item->address)
                <li>
                    <p> {{ $item->address }}</p>
                </li>
                @endif
                @if($item->addt_address)
                <li>
                    <p> {{ $item->addt_address }}</p>
                </li>
                @endif
            </ul>
        </div>
        <div class="shape"></div>
    </div>
    <div class="right-side">
        <div class="title-txt">
            {{ trans('site.message_us') }}
        </div>
        <div class="contact-form">
            <form action="" method="post">
                {{ csrf_field() }}
                <div class="input-item">
                    <input type="text" name="name" required="required">
                    <span class="placeholder">{{ trans('site.name_surname') }}</span>
                </div>
                <div class="input-item">
                    <input type="email" name="email" required="required">
                    <span class="placeholder">{{ trans('site.email') }}</span>
                </div>
                <div class="input-item">
                    <input type="text" name="message" required="required">
                    <span class="placeholder">{{ trans('site.message') }}</span>
                </div>
                <button type="submit">{{ trans('site.send') }} <span class="arr"></span></button>
            </form>
        </div>
        <div class="box"></div>
    </div>
</div>
<div class="map">
    <div id="googleMap" style="width:100%;height:400px;"></div>
</div>
@stop
@section('js')
<script>
  

          function myMap() {
                  let _lat = {{ $item->lat }};
                  let _lng = {{ $item->lng }};
                    let mapProp = {
                            center: new google.maps.LatLng(_lat, _lng),
                            zoom: 12,
                            styles : [
                                    {
                                        "featureType": "administrative",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                            {
                                                "color": "#591b1b"
                                            },
                                            {
                                                "visibility": "off"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "landscape",
                                        "elementType": "all",
                                        "stylers": [
                                            {
                                                "color": "#13183f"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "landscape",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                            {
                                                "color": "#c5c7e0"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "landscape",
                                        "elementType": "labels.text.stroke",
                                        "stylers": [
                                            {
                                                "visibility": "off"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "poi",
                                        "elementType": "all",
                                        "stylers": [
                                            {
                                                "visibility": "on"
                                            },
                                            {
                                                "color": "#1b214b"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "poi",
                                        "elementType": "labels.text",
                                        "stylers": [
                                            {
                                                "color": "#ff0000"
                                            },
                                            {
                                                "visibility": "off"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "poi",
                                        "elementType": "labels.text.stroke",
                                        "stylers": [
                                            {
                                                "visibility": "off"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "poi",
                                        "elementType": "labels.icon",
                                        "stylers": [
                                            {
                                                "visibility": "off"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "road",
                                        "elementType": "all",
                                        "stylers": [
                                            {
                                                "saturation": -100
                                            },
                                            {
                                                "lightness": 45
                                            },
                                            {
                                                "color": "#21264a"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "road.highway",
                                        "elementType": "all",
                                        "stylers": [
                                            {
                                                "visibility": "simplified"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "road.arterial",
                                        "elementType": "labels.icon",
                                        "stylers": [
                                            {
                                                "visibility": "off"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "road.local",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                            {
                                                "color": "#d5d4e9"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "transit",
                                        "elementType": "all",
                                        "stylers": [
                                            {
                                                "visibility": "off"
                                            }
                                        ]
                                    },
                                    {
                                        "featureType": "water",
                                        "elementType": "all",
                                        "stylers": [
                                            {
                                                "color": "#37a3bb"
                                            },
                                            {
                                                "visibility": "on"
                                            }
                                        ]
                                    }
                                ]
                        };
                      
                    let map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
                    let image = "{{ asset('themes/schumann/img/marker.png') }}";
                    
                    let beachMarker = new google.maps.Marker({
                            position: {lat: _lat, lng: _lng},
                            map: map,
                            icon: image
                        });
                }

    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZ-g5PlrZ89ZlL5TyVGlXwGYJjh6pR_5s&callback=myMap"></script>
@stop