@if(!empty($cities) && count($cities))
    @foreach($cities as $one_city)
        @if(!empty($shops[$one_city->id]) && count($shops[$one_city->id]))
            <div class="stores-locations-item">
                <div class="stores-locations-name">
                    <p>{{ $one_city->name or '' }}</p>
                </div>
                <div class="stores-list">
                    @foreach($shops[$one_city->id] as $one_shop)
                        <div class="stores-item">
                            <div class="stores-name">
                                <p>{{ $one_shop->name or '' }}</p>
                            </div>
                            <div class="stores-contacts">
                                <ul>
                                    <li>
                                        <div>
                                            <img src="{{ asset('front-assets/img/icons/pin.svg') }}"
                                                 alt="address">
                                        </div>
                                        <div>
                                            <p>{{ $one_shop->address or '' }}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="{{ asset('front-assets/img/icons/phone-2.svg') }}"
                                                 alt="phone">
                                        </div>
                                        <div>
                                            <a href="tel:{{ str_replace([' ', '(', ')', '-'], '', $one_shop->phone) }}">{{ $one_shop->phone or '' }}</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="{{ asset('front-assets/img/icons/clock.svg') }}"
                                                 alt="clock">
                                        </div>
                                        <div>
                                            <p>{{ $one_shop->schedule or '' }}</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            @if($one_shop->shops_type)
                                @php
                                    $shop_types = explode(',', $one_shop->shops_type);
                                @endphp
                                <div class="stores-info">
                                    <ul>
                                        @foreach($shop_types as $one_shop_type)
                                            <li>
                                                <img src="{{ asset('front-assets/img/shop-filter/'. $one_shop_type . '.svg') }}"
                                                     alt="{{ $one_shop_type or '' }}" title="{{ ucfirst($one_shop_type) }}">
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>

            </div>
        @endif
    @endforeach
@endif

<div class="stores-map">
    <div id="map-ajax" style="width:100%;height:400px;"></div>
    <script type="text/javascript">
        var map;
        var prev_infowindow = false;
        var my_prev_infowindow = false;

        function initialize() {

            map = new google.maps.Map(document.getElementById('map-ajax'), {
                zoom: 12,
                center: new google.maps.LatLng(47.025739, 28.827264)
            });

                    @if(!empty($find_location))
                    @foreach($find_location as $key => $one_find_location)

            var contentString{{$key}} =
                '<div class="map-content">' +
                '<div class="content-info">' +
                '<div class="my-content-info">' +
                '<span class="map-shop-name">{{$one_find_location->name or ''}}</span>, {{$one_find_location->address or ''}}' +
                '</div>' +
                '<div class="my-content-info">' +
                '{{trans('variables.phone')}}: {{$one_find_location->phone or ''}}' +
                '</div>' +
                '<div class="my-content-info">' +
                '{{trans('variables.schedule')}}: {{$one_find_location->schedule or ''}}' +
                '</div>' +
                '</div>' +
                '</div>';

            var infowindow{{$key}} = new google.maps.InfoWindow({
                content: contentString{{$key}}
            });

            var marker{{$key}} = new google.maps.Marker({
                position: new google.maps.LatLng(parseFloat({{$one_find_location->latitude}}), parseFloat({{$one_find_location->longitude}})),
                map: map,
                title: "{{$one_find_location->name or ''}}",
                //
                icon: {
                    url: "/front-assets/img/map_marker.png"
                },
                zIndex: 99{{$key}}
            });

            google.maps.event.addListener(marker{{$key}}, 'click', function () {
                if (prev_infowindow) {
                    prev_infowindow.close();
                }

                if (my_prev_infowindow) {
                    my_prev_infowindow.close();
                }

                prev_infowindow = infowindow{{$key}};

                infowindow{{$key}}.open(map, marker{{$key}});

            });

            @endforeach
            @endif
        }

    </script>
</div>