@extends('layouts.website')

@section('content')
<div class="col-lg-12">
    <div class="ibox ">
        <div class="ibox-title">
            <h3>Спортен комплекс {{$location->name}}</h3>
        </div>

        <div class="ibox-content">
            <div>
                {!!$location->address!!}
            </div>
        </div>
    </div>

    <div class="ibox ">
        <div class="ibox-title">
            <h3>Локация</h3>
        </div>

        <div id="map" class="ibox-content" style="height:400px;">
            
        </div>
    </div>
</div>       
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrU5w4OnkGgneaQOGDKJzcv2wpYRZo7Bk&callback=initMap&libraries=places&v=weekly" defer></script>

<script type="text/javascript" charset="utf-8">
    var map;
    var marker;
    
    $(document).ready(function(){       
        initMap();    
    });
    
    
    function initMap() {
        var lat = {!! $location->gps_lat !!}, lng = {!! $location->gps_lng !!};
        
        var options = {
            zoom: 17,
            center: new google.maps.LatLng(lat, lng),
            mapTypeControlOptions: { mapTypeIds: [] },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            draggableCursor:'crosshair',
            draggingCursor: 'move'
        }
        
        map = new google.maps.Map(document.getElementById('map'), options);
        
        const card = document.getElementById("pac-card");
        const input = document.getElementById("pac-input");
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
        const autocomplete = new google.maps.places.Autocomplete(input); // Bind the map's bounds (viewport) property to the autocomplete object,
        // so that the autocomplete requests use the current map bounds for the
        // bounds option in the request.

        autocomplete.bindTo("bounds", map); // Set the data fields to return when the user selects a place.

        autocomplete.setFields([
          "address_components",
          "geometry",
          "icon",
          "name",
        ]);
        
        marker = new google.maps.Marker({position: {lat: lat, lng: lng}, map: map});
    }
</script>
@endsection