@if ($site->exists)
    {!! Form::open([
        'id' => 'siteForm',
        'method' => 'PATCH',
        'route' => ['sites.update', $site->id],
    ]) !!}
@else
    {!! Form::open([
        'id' => 'siteForm',
        'method' => 'POST',
        'route' => 'sites.store',
    ]) !!}
@endif
    <fieldset>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Name</label>
                    {!! Form::text('name', $site->name, [
                        'placeholder' => 'Name',
                    ]) !!}
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Local Authority</label>
                    {!! Form::select('local_authority_id', $localAuthorities, $site->local_authority_id, [
                        'class' => 'select2',
                        'placeholder' => 'Local Authority',
                        'data-placeholder' => 'Local Authority',
                    ]) !!}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="control-label">Contact Person</label>
                    {!! Form::text('contact_person', $site->contact_person, [
                        'placeholder' => 'Contact Person',
                    ]) !!}
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="control-label">Phone Number</label>
                    {!! Form::text('phone_number', $site->phone_number, [
                        'placeholder' => 'Phone Number',
                    ]) !!}
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="control-label">E-Mail Address</label>
                    {!! Form::email('email', $site->email, [
                        'placeholder' => 'E-Mail Address',
                    ]) !!}
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="control-label">Visit Season</label>
                    {!! Form::select('visit_season', $site::$visit_seasons, $site->visit_season, [
                        'class' => 'select2',
                        'placeholder' => 'Visit Season',
                        'data-placeholder' => 'Visit Season',
                    ]) !!}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label">Address</label>
                    {!! Form::text('address', $site->address, [
                        'id' => 'address',
                        'placeholder' => 'Address',
                    ]) !!}
                </div>
                <div class="form-group">
                    <label class="control-label">Postcode</label>
                    {!! Form::text('postcode', $site->postcode, [
                        'id' => 'postcode',
                        'placeholder' => 'Postcode',
                    ]) !!}
                </div>
                <div class="form-group">
                    <label class="control-label">Longitude</label>
                    {!! Form::number('longitude', $site->longitude, [
                        'id' => 'longitude',
                        'readonly' => 'readonly',
                        'placeholder' => 'Longitude',
                    ]) !!}
                </div>
                <div class="form-group">
                    <label class="control-label">Latitude</label>
                    {!! Form::number('latitude', $site->latitude, [
                        'id' => 'latitude',
                        'readonly' => 'readonly',
                        'placeholder' => 'Latitude',
                    ]) !!}
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <div id="map"></div>
                </div>
            </div>
        </div>
{{--         <div class="form-group">
            <label class="control-label">Site Assessors</label>
            {!! Form::select('site_assessors[]', $siteAssessors, $siteSiteAssessorIds, [
                'class' => 'select2',
                'multiple',
                'placeholder' => 'Site Assessors',
                'data-placeholder' => 'Site Assessors',
            ]) !!}
        </div> --}}
    </fieldset>
    <div class="form-actions">
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-primary btn-block" type="submit">
                    {{ $site->exists ? 'Edit' : 'Create' }}
                </button>
            </div>
        </div>
    </div>
{!! Form::close() !!}

@section('css')
    @parent

    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
        height: 280px;
    }

    #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
    }

    #infowindow-content .title {
        font-weight: bold;
    }

    #infowindow-content {
        display: none;
    }

    #map #infowindow-content {
        display: inline;
    }

    .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
    }

    #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
    }

    .pac-controls {
        display: inline-block;
        padding: 5px 11px;
    }

    .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
    }

    #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
    }

    #pac-input:focus {
        border-color: #4d90fe;
    }

    #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
    }
    </style>
    <style type="text/css">
        .pac-container:after {
            background-image: none !important;
            height: 0px;
        }
    </style>
@stop

@section('scripts')
    @parent

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5RfbW8vOIS6BU_CX_m7aW3Twk-8DpHJg&libraries=places&callback=init" async defer></script>

    <script type="text/javascript">
        var autocomplete, map, infowindow, infowindowContent, marker;
        var componentForm = {
            postal_code: 'postcode',
        };

        $('#address').keydown(function (e) {
            if (e.which == 13 && $('.pac-container:visible').length) 
                return false;
        });

        var siteLocation = false;

        @if ($site->exists)
            siteLocation = {
                lat: {{ $site->latitude }},
                lng: {{ $site->longitude }},
            };
        @endif

        function init() {
            if (siteLocation) {
                initMap(siteLocation);
            } else {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        function(position) {
                            geolocation = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            };

                            initMap(geolocation);
                        },
                        function(failure) {
                            $.getJSON('https://ipinfo.io/geo', function(response) { 
                                var loc = response.loc.split(',');
                                geolocation = {
                                    lat: parseFloat(loc[0]),
                                    lng: parseFloat(loc[1]),
                                };
                                
                                initMap(geolocation);
                            });  
                        },
                        {
                            enableHighAccuracy: true,
                        }
                    );
                } else {
                    initMap({
                        lat: 0,
                        lng: 0,
                    });
                }
            }
        }

        function initMap(geolocation) {
            map = new google.maps.Map(document.getElementById('map'), {
                center: geolocation,
                zoom: (siteLocation) ? 17 : 13,
            });

            infowindow = new google.maps.InfoWindow();
            infowindowContent = document.getElementById('infowindow-content');
            infowindow.setContent(infowindowContent);

            marker = new google.maps.Marker({
                map: map,
                anchorPoint: new google.maps.Point(0, -29)
            });

            // Create the autocomplete object, restricting the search to geographical location types.
            autocomplete = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('address')),
                {types: ['geocode']}
            );

            // When the user selects an address from the dropdown, populate the address
            // fields in the form.
            autocomplete.addListener('place_changed', function() {
                // Get the place details from the autocomplete object.
                var place = autocomplete.getPlace();

                // Set latitude & longitude...
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();
                document.getElementById('latitude').value = latitude;
                document.getElementById('longitude').value = longitude;

                // Get each component of the address from the place details
                // and fill the corresponding field on the form.
                for (var i = 0; i < place.address_components.length; i++) {
                    var addressType = place.address_components[i].types[0];
                    if (componentForm[addressType]) {
                        var inputId = componentForm[addressType];
                        var val = place.address_components[i]['long_name'];
                        document.getElementById(inputId).value = val;
                    }
                }

                infowindow.close();
                marker.setVisible(false);
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    // User entered the name of a Place that was not suggested and
                    // pressed the Enter key, or the Place Details request failed.
                    window.alert("No details available for input: '" + place.name + "'");
                    return;
                }

                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);  // Why 17? Because it looks good.
                }
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);

                var address = '';
                if (place.address_components) {
                    address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                    ].join(' ');
                }

                infowindowContent.children['place-icon'].src = place.icon;
                infowindowContent.children['place-name'].textContent = place.name;
                infowindowContent.children['place-address'].textContent = address;
                infowindow.open(map, marker);
            });
        }
    </script>
@stop