@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 style="background-color: #4242ea">
        <p class="text-light inline m-0 pt-5 pr-5">Resultados para: <strong>{{ $cityName }}</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>