{% extends 'main_base.html.twig' %}
{% block title %}Nachhilfe{% endblock %}
{% block description %}Nachhilfe{% endblock %}
{% block content %}
    <div class="tiichi__map__wrapper">
        <div id="mapTiichi"></div>
        <div class="marker__informations">
            <div class="marker__information">
                <img src="{{ asset('assets/main/img/yellow__circle.svg') }}" alt="yellow__circle">
                <span>Nachhilfe-Kurse</span>
            </div>
            <div class="marker__information">
                <img src="{{ asset('assets/main/img/gray__circle.svg') }}" alt="yellow__circle">
                <span>
                    Verkaufsstellen
                </span>
            </div>
        </div>
        <div class="information">

            <div class="information-details">
                <div class="information-description">
                    <h1>Lernmedienshop Zürich</h1>
                    <h3>
                        Lagerstrasse 14 <br> 8004 ... Zürich <br>zur Homepage
                    </h3>
                    <h4>
                        <div class="opened__time d-flex flex-column ">
                            Öffnungszeiten:
                            <span>Mo: 11:00 - 18:30 Uhr</span>
                            <span>Di - Fr: 09:00 - 18:30 Uhr</span>
                            <span>Sa: 11:00 - 17:00 Uhr</span>
                        </div>
                    </h4>
                </div>
                <div class="information-photo-wrapper">
                    <img src="{{ asset('assets/main/img/shop-photo.png') }}" alt="shop-photo">
                </div>
            </div>

        </div>
    </div>
{% endblock %}
{% block pageScript %}
    <script src="{{ asset('assets/main/js/markerclusterer.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <!-- JS Scripts  -->
    <script>

        const locations = [
            {
                locationName: "Zurich",
                lat: 47.37642236136966,
                lng: 8.540039533419773,
                markerColor: "yellow",
            },
            {
                locationName: "DifferentZurich",
                lat: 47.383745,
                lng: 8.533616,
                markerColor: "gray",
            },
        ]


        /* Map */
        function initMap() {
            // The location of Uluru

            var isMobile = window.innerWidth < 768;
            let gmarkers = [];
            let markerCluster;
            let markers = [];
            var styles = [
                {
                    url: 'https://www.modular-lernen.ch/public/assets/main/new/images/markers.png',
                    height: 34,
                    width: 34,
                    textColor: '#FFFFFF',
                    textSize: 14,
                    backgroundSize: 'contain'
                }
            ];
            var mapTiichi = new google.maps.Map(
                document.getElementById('mapTiichi'), {
                    zoom: isMobile ? 13 : 14,
                    center: {lat: 47.37642236136966, lng: 8.540039533419773},
                    // disableDefaultUI: true,
                    streetViewControl: false, // Sokak görünümü kontrolünü kaldırır
                    fullscreenControl: false, // Tam ekran kontrolünü kaldırır
                    mapTypeControl: false,    // Harita türü kontrolünü kaldırır
                    scaleControl: true,      // Ölçek kontrolünü kaldırır
                    styles: [
                        {
                            "featureType": "all",
                            "elementType": "labels.text.fill",
                            "stylers": [
                                {
                                    "saturation": 36
                                },
                                {
                                    "color": "#333333"
                                },
                                {
                                    "lightness": 40
                                }
                            ]
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.text.stroke",
                            "stylers": [
                                {
                                    "visibility": "on"
                                },
                                {
                                    "color": "#ffffff"
                                },
                                {
                                    "lightness": 16
                                }
                            ]
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.icon",
                            "stylers": [
                                {
                                    "visibility": "off"
                                }
                            ]
                        },
                        {
                            "featureType": "administrative",
                            "elementType": "geometry.fill",
                            "stylers": [
                                {
                                    "color": "#fefefe"
                                },
                                {
                                    "lightness": 20
                                }
                            ]
                        },
                        {
                            "featureType": "administrative",
                            "elementType": "geometry.stroke",
                            "stylers": [
                                {
                                    "color": "#fefefe"
                                },
                                {
                                    "lightness": 17
                                },
                                {
                                    "weight": 1.2
                                }
                            ]
                        },
                        {
                            "featureType": "landscape",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#f5f5f5"
                                },
                                {
                                    "lightness": 20
                                }
                            ]
                        },
                        {
                            "featureType": "poi",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#f5f5f5"
                                },
                                {
                                    "lightness": 21
                                }
                            ]
                        },
                        {
                            "featureType": "poi.park",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#dedede"
                                },
                                {
                                    "lightness": 21
                                }
                            ]
                        },
                        {
                            "featureType": "road.highway",
                            "elementType": "geometry.fill",
                            "stylers": [
                                {
                                    "color": "#ffffff"
                                },
                                {
                                    "lightness": 17
                                }
                            ]
                        },
                        {
                            "featureType": "road.highway",
                            "elementType": "geometry.stroke",
                            "stylers": [
                                {
                                    "color": "#ffffff"
                                },
                                {
                                    "lightness": 29
                                },
                                {
                                    "weight": 0.2
                                }
                            ]
                        },
                        {
                            "featureType": "road.arterial",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#ffffff"
                                },
                                {
                                    "lightness": 18
                                }
                            ]
                        },
                        {
                            "featureType": "road.local",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#ffffff"
                                },
                                {
                                    "lightness": 16
                                }
                            ]
                        },
                        {
                            "featureType": "transit",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#f2f2f2"
                                },
                                {
                                    "lightness": 19
                                }
                            ]
                        },
                        {
                            "featureType": "water",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#e9e9e9"
                                },
                                {
                                    "lightness": 17
                                }
                            ]
                        }
                    ]
                });


            locations.forEach(item => {
                var markers = new google.maps.Marker({
                    position: {lat: item.lat, lng: item.lng},
                    map: mapTiichi,
                    title: item.locationName,
                    icon: {
                        url: `./imgs/icons/${item.markerColor}__circle.svg`,
                        scaledSize: new google.maps.Size(25, 25)
                    }
                });
            });

            function updateMarkers() {
                var currentZoom = map.getZoom();

                if (currentZoom < 8) {
                    clearMarkers();
                } else {
                    clearMarkers();
                    addMarkers();
                }
            }

            google.maps.event.addListener(mapTiichi, 'zoom_changed', updateMarkers);
            markerCluster = new MarkerClusterer(mapTiichi, gmarkers, {
                imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m',
                styles: styles
            });


            /*  markerZurich.addListener("click", () => {
                 alert('aaaa');
             }) */


        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCaVmIIj8Xl8XSxcYX59jP9A2058NyMWaE&amp;callback=initMap"></script>
{% endblock %}