@extends('layouts.app')

@section('content')
<div class="wrapper wrapper-content">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="pull-right">
                @if(auth()->user()->role_id==1 || auth()->user()->role_id==4)
                <a class="btn btn-warning" href="{{route('sites.edit',$site->id)}}">Промяна</a>
                @endif
                <button class="btn btn-primary back-btn" onclick="window.history.back()">Назад</button>
            </div>
            <div class="panel-heading">
                <h3 class="panel-title">Показване на обект</h3>                
            </div>

            <div class="panel-body">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Име: </strong>
                        {{ $site->name }}
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Град: </strong>
                        {{ $site->city->name }}
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Описание: </strong>
                        {{ $site->description }}
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Техник: </strong>
                        {{ $site->technician->name }}
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Главен техник: </strong>
                        {{ $site->chief_technician->name }}
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>ПТО: </strong>
                        {{$site->pto_users}}
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Активен: </strong>
                        {{ $site->active==1 ? 'Да' : 'Не' }}
                    </div>
                </div> 
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Забележка: </strong>
                        {{ $site->note }}
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <strong>Адрес: </strong>
                        {{ $site->address }}
                    </div>
                    <div id="map" style="width:100%;height:300px;"></div>
                </div>                          
            </div>
            <div class="panel-footer"></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 = {!! $site->gps_lat !!}, lng = {!! $site->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