@if (count($data) > 0)
    <div id="info" class="container">
        <div class="columns pt-10 pl-20">
            <div class="column col-sm-12 col-md-6 col-4 form-group pl-3 pr-3">
                <select class="form-select inline select-sm" id="cities">
                    @foreach ($data['cities'] as $item)
                        @php
                            if ($item->id == $data['slug']) {
                                $cityName = $item->name;
                            }
                        @endphp
                        <option value="{{ $item->id }}" {{ $item->id == $data['slug'] ? 'selected' : '' }}>
                            {{ $item->name }}</option>
                    @endforeach
                </select>
            </div>
            @if (isset($data['category']))
                <div class="column col-sm-12 col-md-6 col-4 form-group pl-3 pr-3"
                    style="{{ isset($data['hideCat']) ? 'display:none' : '' }}">
                    <select class="form-select select-sm" id="categories">
                        <option value="all" {{ $data['category'] == 'all' ? 'selected' : '' }}>Todas</option>
                        @foreach ($data['categories'] as $item)
                            <option value="{{ $item->id }}" {{ $item->id == $data['category'] ? 'selected' : '' }}>
                                {{ $item->name }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
            <div class="column col-sm-12 col-md-12 col-4 form-group div-search pl-3 pr-3">
                <button class="btn btn-primary btn-sm" id="search">Buscar</button>
            </div>
        </div>
    </div>
    <div id="map-alert">
        <div>
            <p class="text-light inline m-0 pt-5 pr-5">Resultados para: <strong>Bogotá</strong></p>
        </div>
    </div>
@endif
<div id="map" class="mr-0" style="height: {{ $divHeight }}; width: 100%;"></div>

<script>
    $('body').on('click', '#search', function() {
        var cat = $('#categories').val();
        var city = $('#cities').val();
        var url = window.location.href;

        if (url.includes('categories')) {
            var newUrl = '/' + city + '/' + cat + '/categories/all';
        } else if (url.includes('partners')) {
            var partnerId = url.split('/')[6];
            var newUrl = '/' + city + '/' + cat + '/partners/' + partnerId.split('#')[0];
        } else {
            var newUrl = '/' + city + '/' + cat;
        }
        window.location.href = newUrl + '#info';
    });

    // Initialize and add the map
    function initMap() {
        var bounds = new google.maps.LatLngBounds();
        // console.log( bounds );
        var opts = {
            center: {{ $map['center'] }},
            zoom: {{ $map['zoom'] }},
            styles: [{
                "featureType": "all",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "saturation": 36
                }, {
                    "color": "#000000"
                }, {
                    "lightness": 40
                }]
            }, {
                "featureType": "all",
                "elementType": "labels.text.stroke",
                "stylers": [{
                    "visibility": "on"
                }, {
                    "color": "#000000"
                }, {
                    "lightness": 16
                }]
            }, {
                "featureType": "all",
                "elementType": "labels.icon",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "featureType": "administrative",
                "elementType": "geometry.fill",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 20
                }]
            }, {
                "featureType": "administrative",
                "elementType": "geometry.stroke",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 17
                }, {
                    "weight": 1.2
                }]
            }, {
                "featureType": "landscape",
                "elementType": "geometry",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 20
                }]
            }, {
                "featureType": "poi",
                "elementType": "geometry",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 21
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "geometry.fill",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 17
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "geometry.stroke",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 29
                }, {
                    "weight": 0.2
                }]
            }, {
                "featureType": "road.arterial",
                "elementType": "geometry",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 18
                }]
            }, {
                "featureType": "road.local",
                "elementType": "geometry",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 16
                }]
            }, {
                "featureType": "transit",
                "elementType": "geometry",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 19
                }]
            }, {
                "featureType": "water",
                "elementType": "geometry",
                "stylers": [{
                    "color": "#000000"
                }, {
                    "lightness": 17
                }]
            }],
            maxZoom: 20,
            minZoom: 0,
            mapTypeId: 'roadmap',
        };
        opts.clickableIcons = true;
        opts.disableDoubleClickZoom = false;
        opts.draggable = true;
        opts.keyboardShortcuts = true;
        opts.scrollwheel = false;

        var setControlOptions = function(key, enabled, position, style, mapTypeIds) {
            opts[key + 'Control'] = enabled;
            opts[key + 'ControlOptions'] = {
                position: google.maps.ControlPosition[position],
                style: google.maps.MapTypeControlStyle[style],
                mapTypeIds: mapTypeIds
            };
        };
        setControlOptions('fullscreen', false, 'DEFAULT', '', null);
        setControlOptions('mapType', false, 'DEFAULT', 'DEFAULT', ["roadmap", "satellite", "terrain"]);
        setControlOptions('rotate', false, 'TOP_LEFT', '', null);
        setControlOptions('scale', false, '', '', null);
        setControlOptions('streetView', true, 'DEFAULT', '', null);
        setControlOptions('zoom', true, 'DEFAULT', '', null);

        var map = new google.maps.Map(document.getElementById('map'), opts);

        @php $i = 0; @endphp
        var markers = [];
        @foreach ($markers as $marker)
            @php
                $i++;
                $cover = str_replace(' ', '%20', trim($marker['data']['banner'], ' '));
            @endphp

            var markerOptions{{ $i }} = {
                map: map,
                position: {{ $marker['position'] }}
            };
            markerOptions{{ $i }}.icon = {
                url: '{{ $marker['icon'] }}',
                scaledSize: new google.maps.Size(42, 42),
                size: new google.maps.Size(42, 42),
                anchor: new google.maps.Point(21, 42),
                radius: Math.sqrt(42)
            };
            markerOptions{{ $i }}.styles = [{
                "featureType": "icon",
                "elementType": "icon",
                "stylers": [{
                    "border-radius": "50%"
                }]
            }];
            markerOptions{{ $i }}.options = {
                optimized: true
            };

            var marker{{ $i }} = new google.maps.Marker(markerOptions{{ $i }});

            var contentString{{ $i }} =
                '<div id="content" class="show-modal-map" style="background-image:url({{ $cover }});">' +
                '<div id="siteNotice"></div>' +
                '<div class="bodyContent">' +
                '<h5 id="firstHeading" class="firstHeading">{{ $marker['data']['name'] }}</h5>' +
                '<p style="margin-bottom: 5px;"></p>' +
                '<p style="margin-bottom: 5px;">{{ $marker['first_address'] }}</p>' +
                @if ($marker['data']['id'] != null)
                    '<a class="btn bg-primary btn-sm" href="/{{ $marker['slug'] }}/{{ $marker['category'] }}/partners/{{ $marker['data']['id'] }}">' +
                    'Ir al convenio</a> ' +
                @endif
            '</div></div>';


            var infowindow{{ $i }} = new google.maps.InfoWindow({
                content: contentString{{ $i }}
            });
            marker{{ $i }}.addListener('click', function() {
                infowindow{{ $i }}.open(map, marker{{ $i }});
            });
            markers.push(marker{{ $i }});
        @endforeach
        //var markerCluster = new MarkerClusterer(map, markers,
        //  {imagePath: '{{ asset('img/amway/map-cluster') }}'});
    }
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXRL-VY52-ouJkyysmOQMWCK4EG2fUjx4&callback=initMap"></script>
<script src="{{ asset('js/vendor/g-maps/map-clusters.js') }}"></script>