@extends('layouts.app')

@section('content')
<div class="container">
    @include('shared.messages')
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Показване на спортна площадка</h3>
                    <div class="pull-right">
                        <a class="btn btn-warning" href="{{route('admin.playgrounds.edit',$playground->id)}}">Промяна</a>
                        <button class="btn btn-primary back-btn" onclick="window.history.back()">Назад</button>
                    </div>
                </div>

                @if($playground->image)
                    <div class="col-xs-12 col-sm-12 col-md-12" style="margin-bottom: 20px;">
                        <div class="form-group">                     
                            <div width="10%">
                                <img src="{{asset('/images/playgrounds/thumbs/'.$playground->image->name)}}" alt="{{$playground->image->title}}" style="width:10%;float:left;margin-right:5px;">
                            </div>                            
                        </div>
                    </div>
                @endif
                    
                <div class="panel-body">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Име: </strong>
                            {{ $playground->name }}
                        </div>
                    </div>
                    
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Потребител: </strong>
                            {{ $playground->user->name }}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Местоположение: </strong>
                            {{ $playground->location->name }}
                        </div>
                    </div>
                    
                    <div class="col-xs-12 col-sm-12 col-md-12"  style="margin-bottom:30px;">
                        <div class="form-group">
                            <strong>Спортове: </strong>
                            {{ $playground->sports() }}
                        </div>
                    </div>  
                    
                    @if(isset($playground->info))
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Информация: </strong>
                            {!! $playground->info !!}
                        </div>
                    </div>
                    @endif
                    
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <strong>Адрес: </strong>
                            {{ $playground->address }}
                        </div>
                        <div id="map" style="width:100%;height:300px;"></div>
                    </div>                    
                </div>
                <div class="panel-footer"></div>
            </div>
        </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 = {!! $playground->gps_lat !!}, lng = {!! $playground->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