@extends('layouts.app')

@section('extraJs')

<script src="{{ asset('vendor/common-client-bundle/js/bootstrap-typeahead.js') }}"></script>
<script src="{{ asset('vendor/common-client-bundle/js/range-slider.js') }}"></script>
<script src="{{ asset('vendor/common-client-bundle/js/filter-form.js') }}"></script>
@if (Route::currentRouteName() != 'maisons')

<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_API_KEY') }}"></script>
{{-- <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> --}}

@endif
<script type="text/javascript">
    $(document).ready(function() {

        $('#sortby-select').change(function(){
            $('#sortby').val($(this).val());
            $('#form-filter').attr('action', '{{ URL::current() }}');
            $('#submit').click();
        });

        @if (Route::currentRouteName() != 'maisons')
        function extractUrlParams(){
            var t = location.search.substring(1).split('&');
            var f = [];
            for (var i=0; i<t.length; i++){
                var x = t[ i ].split('=');
                f[x[0]]=x[1];
            }
            return f;
        }

        var params = extractUrlParams();

        var map;
        var datas = {!! $map_datas !!};

        google.maps.event.addDomListener(window, 'load', init);


        function init() {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                maxZoom: 12,
                center: new google.maps.LatLng(46.3167, -0.466667),
                //styles: map_style

            });

            var currentInfoWindow = null;
            /*
            var image = {
                url: '{{ asset('/img/marker.png') }}',
                size: new google.maps.Size(32, 42),
                origin: new google.maps.Point(0,0),
                anchor: new google.maps.Point(16, 42)
            };*/


            var bounds = new google.maps.LatLngBounds();

            var markers = [];

            $.each(datas, function(key, data) {
                var latLng = new google.maps.LatLng(data.latitude, data.longitude);

                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: data.title,
                    //icon: image
                });

                markers.push(marker);

                var infowindow = new google.maps.InfoWindow({
                    content:   '<div class="infowindow text-center" style="height: auto;">\
                    <h6><strong>' + data.title + '</strong></h6>\
                    <p>' + data.content + '</p>\
                    <a class="btn bg-yellow red" href="'+ data.link +'">Voir la liste</a>\
                </div>',
                maxWidth: 250,
                hideCloseButton: true,
            });

                marker.addListener('click', function() {
                    if (currentInfoWindow != null) {
                        currentInfoWindow.close();
                    }
                    infowindow.open(map, marker);
                    currentInfoWindow = infowindow;
                });

                bounds.extend(latLng);
            });

            //var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
            map.fitBounds(bounds);

            if (typeof (params.latitude) != 'undefined' && typeof (params.longitude) != 'undefined' && typeof (params.radius) != 'undefined' && params.latitude != "" && params.longitude != "" && params.radius != ""){
                var radius = parseInt(params.radius)*1000;
                var center = [params.latitude, params.longitude];

                if (radius > 0 && center.length === 2) {

                    var radiusCircle = new google.maps.Circle({
                        fillOpacity: 0.15,
                        fillColor: "#ba191a",
                        strokeColor: '#FFB900',
                        map: map,
                        center: {lat: parseFloat(center[0]), lng: parseFloat(center[1])},
                        radius: radius
                    });

                    map.fitBounds(radiusCircle.getBounds());
                }
                else{
                    if (datas.length > 1) {
                        map.fitBounds(bounds);
                    }else if(datas.length == 1){
                        map.fitBounds((new google.maps.Circle({visible: false, map: map, center: new google.maps.LatLng(datas[0].latitude, datas[0].longitude), radius: 5000})).getBounds());
                    }
                }
            }
        }
        @endif
    });
</script>
@endsection