{% extends 'main_base.html.twig' %}
{% block title %}Nachhilfe{% endblock %}
{% block description %}Nachhilfe{% endblock %}
{% block content %}
    <div class="tiichi__map__wrapper">
        <div id="map"></div>
        <div class="information">

            <div class="information-details visible">
                <div class="information-description">
                    <h1>Lernmedienshop Zürich</h1>
                    <h3>
                        Lagerstrasse 14 <br> 8004 ... Zürich <br>zur Homepage
                    </h3>
                </div>
                <div class="information-photo-wrapper">
                    <img src="{{ asset('assets/main/img/shop-photo.png') }}" alt="shop-photo">
                </div>
            </div>

            <div class="col-sm-auto empty__view col-3 h-100 position-static" id="gymikurse">
                <div class="page-side">
                    <div class="d-block d-xl-none text-center">
                        <a class="mb-4 page-side-expander" onclick="openBlog(this)">
                            <img src="/public/assets/main/images/img/arrow_text.svg" alt="">
                        </a>
                    </div>
                    <div class="h-100 page-side-content empty">
                        <div class="content-scroll-gutter">
                            <div class="yellow__right__section-top__section yellow__right__section-top__section__not__selected">

                                <div class="TextMainContainer">
                                    <div class="rectangleContainer">
                                        <div class="text-BoxContainer animate__backInDown">
                                            <div class="Text-Box">
                                                <p>
                                                    <span class="textDactilo"><strong>Suchst du einen Vorbereitungskurs? Buche einen Einzel- oder Gruppenkurs – meine Lernunterlagen sind im Preis inklusive!
Du möchtest die Bücher lieber im Original ansehen? Dann besuche einen Buchladen vor Ort.</strong></span><span
                                                            class="typed-cursor typed-cursor--blink"
                                                            aria-hidden="true"></span>

                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <img class="photo__desk" src="{{ asset('assets/main/img/yondy-maps-photo-desk.png') }}"
                                     alt="photo">
                                <img class="photo__mobile"
                                     src="{{ asset('assets/main/img/yondy-maps-photo-mobile.png') }}" alt="photo">

                            </div>
                            <div class="yellow__right__section-top__section yellow__right__section-top__section__selected empty">
                                <div class="page-side-title">
                                    <div class="page-side-title-logo__wrapper">

                                    </div>
                                    <p class="yellow__right__section-top__section-location__information">
                                        Lorem ipsum dolor sit amet consectetur adipisicing.
                                    </p>
                                    <div class="d-flex flex-column flex-xl-column mps mpsDelete">
                                        <button class="align-items-center nummer-anzeigen btn btn-modal kurseButton d-flex p-0 border-0"
                                                id="nummer-anzeigen" onclick="phoneClick()">
                                            <span class="barlowlight" id="number__modal">Telefonnummer anzeigen</span>
                                        </button>
                                        <button class="align-items-center mehr-erfahren btn btn-modal kurseButton d-flex p-0 border-0 mt-0"
                                                id="mehr-erfahren" onclick="siteClick()"
                                                data-link="https://www.fit4school.ch/buelach">
                                            <span class="barlowlight"><img
                                                        src="{{ asset('assets/main/img/icons/link__btn.svg') }}"></img> zur Homepage</span>
                                        </button>
                                    </div>
                                </div>
                                <div class="page-side-img">
                                    <div style="line-height: 1.2em; font-weight: 300; font-size: .8em; margin-top: 2em;">
                                        Bitte
                                        wählen Sie auf der Karte Ihr gewünschtes Nachhilfezentrum.
                                    </div>
                                </div>
                            </div>

                            <div class="swiper mt-3 mps swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden mpsDelete"
                                 id="gymikurseSwiperRight">
                                <div class="swiper-header">
                                    <div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button"
                                         aria-label="Previous slide" aria-controls="swiper-wrapper-99a546950edfca62"
                                         aria-disabled="true"></div>
                                    <span class="swiper-title barlowsemibold">6. Klasse Langzeitgymmi - Sa.</span>
                                    <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
                                         aria-controls="swiper-wrapper-99a546950edfca62" aria-disabled="false"></div>
                                </div>
                                <div class="swiper-wrapper" id="swiper-wrapper-99a546950edfca62" aria-live="polite"
                                     style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                                    <div class="swiper-slide swiper-slide-active"
                                         data-kurs="6. Klasse Langzeitgymmi - Sa." style="width: 314px;">
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Kursort</div>
                                            <div class="kurseText barlowlight">
                                                <div>Bülach</div>
                                                <div></div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Dauer</div>
                                            <div class="kurseText barlowlight">
                                                <div>20 Kurswochen, Samstag</div>
                                                <div>2.5h à 60 min. / Woche</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Start</div>
                                            <div class="kurseText barlowlight">
                                                <div>09.09.2023</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Fächer</div>
                                            <div class="kurseText barlowlight">
                                                <div>Mathematik und Deutsch/Aufsatz</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Preis</div>
                                            <div class="kurseText barlowlight">
                                                <div>auf Anfrage</div>
                                                <div>Ratenzahlung möglich.</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Extras</div>
                                            <div class="kurseText barlowlight">
                                                <div>inkl. Prüfungssimulation</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Plätze</div>
                                            <div class="kurseText barlowlight">
                                                <div>bis 6 Schüler maximal</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide swiper-slide-next"
                                         data-kurs="2. /3. Sek. Kurzzeitgymmi - Sa." style="width: 314px;">
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Kursort</div>
                                            <div class="kurseText barlowlight">
                                                <div>Bülach</div>
                                                <div></div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Dauer</div>
                                            <div class="kurseText barlowlight">
                                                <div>20 Kurswochen, Samstag</div>
                                                <div></div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Start</div>
                                            <div class="kurseText barlowlight">
                                                <div>09.09.2023</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Fächer</div>
                                            <div class="kurseText barlowlight">
                                                <div>Mathematik und Deutsch/Aufsatz</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Preis</div>
                                            <div class="kurseText barlowlight">
                                                <div>auf Anfrage</div>
                                                <div>Ratenzahlung möglich.</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Extras</div>
                                            <div class="kurseText barlowlight">
                                                <div>inkl. Prüfungssimulation</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Plätze</div>
                                            <div class="kurseText barlowlight">
                                                <div>6</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide" data-kurs="Einzelkurse Langzeit- / Kurzzeitgymi"
                                         style="width: 314px;">
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Kursort</div>
                                            <div class="kurseText barlowlight">
                                                <div>Bülach</div>
                                                <div></div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Dauer</div>
                                            <div class="kurseText barlowlight">
                                                <div>20 Kurswochen, Individuell</div>
                                                <div>auf den Schüler angepasst</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Start</div>
                                            <div class="kurseText barlowlight">
                                                <div>28.07.2023</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Fächer</div>
                                            <div class="kurseText barlowlight">
                                                <div>Mathematik und Deutsch/Aufsatz</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Preis</div>
                                            <div class="kurseText barlowlight">
                                                <div>auf Anfrage</div>
                                                <div></div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Extras</div>
                                            <div class="kurseText barlowlight">
                                                <div>inkl. Prüfungssimulation bei Anmeldung bis zum 30.7.23</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Plätze</div>
                                            <div class="kurseText barlowlight">
                                                <div></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide" data-kurs="Einzelkurse BMS/FMS/HMS Prüfugnsvorbereitung"
                                         style="width: 314px;">
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Kursort</div>
                                            <div class="kurseText barlowlight">
                                                <div>Bülach</div>
                                                <div></div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Dauer</div>
                                            <div class="kurseText barlowlight">
                                                <div>20 Kurswochen, Individuell</div>
                                                <div>auf den Schüler angepasst</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Start</div>
                                            <div class="kurseText barlowlight">
                                                <div>28.07.2023</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Fächer</div>
                                            <div class="kurseText barlowlight">
                                                <div>Mathematik und Deutsch/Aufsatz</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Preis</div>
                                            <div class="kurseText barlowlight">
                                                <div>auf Anfrage</div>
                                                <div></div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Extras</div>
                                            <div class="kurseText barlowlight">
                                                <div>inkl. Prüfungssimulation bei Anmeldung bis zum 30.7.23</div>
                                            </div>
                                        </div>
                                        <div class="kursRow">
                                            <div class="kurseTitle barlowlight">Plätze</div>
                                            <div class="kurseText barlowlight">
                                                <div></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="marker__informations">
            <button class="marker__information" id="marker__information__yellow">
                <img src="{{ asset('assets/main/img/icons/yellow__circle.svg') }}" alt="yellow__circle">
                <span>Nachhilfe-Kurse</span>
            </button>
            <button class="marker__information" id="marker__information__gray">
                <img src="{{ asset('assets/main/img/icons/gray__circle.svg') }}" alt="yellow__circle">
                <span>
                    Verkaufsstellen
                </span>
            </button>
            <button class="marker__information" id="marker__information__all">
                <img src="{{ asset('assets/main/img/icons/gray__yellow__circle.svg') }}" alt="yellow__circle">
                <span>
                    Alle anzeigen
                </span>
            </button>
        </div>

    </div>

{% endblock %}
{% block pageScript %}
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
    <script src="{{ asset('assets/main/new/js/swiper-bundle.min.js') }}"></script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCaVmIIj8Xl8XSxcYX59jP9A2058NyMWaE&amp;callback=initMap"></script>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="{{ asset('assets/main/js/typed.js') }}"></script>
    <script>
        $(document).ready(function () {
            $(".text-BoxContainer").css({"display": "block"});

            var typed2 = new Typed('.textDactilo', {
                strings: ['<strong> Suchst du einen Vorbereitungskurs? Buche einen Einzel- oder Gruppenkurs – meine Lernunterlagen sind im Preis inklusive! Du möchtest die Bücher lieber im Original ansehen? Dann besuche einen Buchladen vor Ort.</strong>'],
                typeSpeed: 15,
                backSpeed: 0,
                fadeOut: true,
            });

            const gymikurseSwiperRight = new Swiper("#gymikurseSwiperRight", {
                observer: true,
                observeParents: true,
                watchOverflow: false,
                autoHeight: true,
                navigation: {
                    nextEl: "#gymikurseSwiperRight .swiper-button-next",
                    prevEl: "#gymikurseSwiperRight .swiper-button-prev",
                },
                on: {
                    'slideChange': function (s) {
                        let activeSlide = s.slides[s.activeIndex];
                        let activeKurs = activeSlide.dataset.kurs;
                        $("#gymikurseSwiperRight .swiper-title").text(activeKurs);
                    }
                }, breakpoints: {
                    1200: {
                        autoHeight: false
                    }
                }
            });
        });

        let markersGray = [];
        let markersYellow = [];
        let map, markerClusterGray, markerClusterYellow;

        async function initMap() {
            const {Map, InfoWindow} = await google.maps.importLibrary("maps");

            let arr_verkaufstellen = [];
            {% for verkauItem in verkaufsstellen %}
            arr_verkaufstellen[{{ loop.index-1 }}] = {
                id: {{ verkauItem.id }},
                icon: '{{ asset('media/site/yellow.svg') }}',
                title: '{{ verkauItem.uberschriftBolt }}',
                text: '{{ verkauItem.text|replace({'\n': ' ', '\r': ' '}) }}',
                adresse: '{{ verkauItem.adresse|replace({'"':'\'', '\n': ' ', '\r': ' '})|raw }}',
                coordX: {{ verkauItem.xCoord }},
                coordY: {{ verkauItem.yCoord }},
                isActive: false
            };
            {% if verkauItem.logo is not null %}
            arr_verkaufstellen[{{ loop.index-1 }}].logo = '{{ asset('media/verkaufsstellen/logo/'~verkauItem.logo) }}';
            {% endif %}
            {% if verkauItem.bild is not null %}
            arr_verkaufstellen[{{ loop.index-1 }}].image = '{{ asset('media/verkaufsstellen/'~verkauItem.bild) }}';
            {% endif %}
            {% endfor %}

            var isMobile = window.innerWidth < 768;

            {# ! Map #}
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: window.innerWidth < 768 ? 9 : 10,
                center: {lat: 47.268676, lng: 8.654243},
                streetViewControl: false,
                fullscreenControl: false,
                mapTypeControl: false,
                scaleControl: true,
                scrollWheelZoom: false,
                dragging: true,
                gestureHandling: 'cooperative',
                styles: [
                    {
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#f5f5f5"
                            }
                        ]
                    },
                    {
                        "elementType": "labels.icon",
                        "stylers": [
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#616161"
                            }
                        ]
                    },
                    {
                        "elementType": "labels.text.stroke",
                        "stylers": [
                            {
                                "color": "#f5f5f5"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.land_parcel",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#bdbdbd"
                            }
                        ]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#eeeeee"
                            }
                        ]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#757575"
                            }
                        ]
                    },
                    {
                        "featureType": "poi.park",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#e5e5e5"
                            }
                        ]
                    },
                    {
                        "featureType": "poi.park",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#9e9e9e"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#ffffff"
                            }
                        ]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#757575"
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#dadada"
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#616161"
                            }
                        ]
                    },
                    {
                        "featureType": "road.local",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#9e9e9e"
                            }
                        ]
                    },
                    {
                        "featureType": "transit.line",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#e5e5e5"
                            }
                        ]
                    },
                    {
                        "featureType": "transit.station",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#eeeeee"
                            }
                        ]
                    },
                    {
                        "featureType": "water",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#c9c9c9"
                            }
                        ]
                    },
                    {
                        "featureType": "water",
                        "elementType": "labels.text.fill",
                        "stylers": [
                            {
                                "color": "#9e9e9e"
                            }
                        ]
                    },
                    {
                        "featureType": "administrative.country",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#000000"
                            }
                        ]
                    }
                ]
            });

            const infoWindow = new google.maps.InfoWindow({
                content: "",
                disableAutoPan: true,
            });

            const allMarkers = [
                {% for verkauItem in verkaufsstellen %}
                {
                    markerColor: "gray",
                    id: {{ verkauItem.id }},
                    icon: '{{ asset('media/site/yellow.svg') }}',
                    lat: {{ verkauItem.xCoord }},
                    lng: {{ verkauItem.yCoord }},

                },

                {% endfor %}

                {% for kurseItem in kurse %}
                {
                    markerColor: "yellow",
                    id: {{ kurseItem.id }},
                    lat: {% if kurseItem.xCoord %}{{ kurseItem.xCoord }}{% else %}''{% endif %},
                    lng: {% if kurseItem.yCoord %}{{ kurseItem.yCoord }}{% else %}''{% endif %},
                } {% if not loop.last %},{% endif %}
                {% endfor %}
            ]

            const locationsGray = [
                {% for verkauItem in verkaufsstellen %}
                {
                    markerColor: "gray",
                    id: {{ verkauItem.id }},
                    icon: '{{ asset('media/site/yellow.svg') }}',
                    title: '{{ verkauItem.uberschriftBolt }}',
                    text: '{{ verkauItem.text|replace({'\n': ' ', '\r': ' '}) }}',
                    adresse: '{{ verkauItem.adresse|replace({'"':'\'', '\n': ' ', '\r': ' '})|raw }}',
                    lat: {{ verkauItem.xCoord }},
                    lng: {{ verkauItem.yCoord }},

                    {% if verkauItem.logo is not null %}
                    logo: '{{ asset('media/verkaufsstellen/logo/'~verkauItem.logo) }}',
                    {% endif %}
                    {% if verkauItem.bild is not null %}
                    image: '{{ asset('media/verkaufsstellen/'~verkauItem.bild) }}',

                    {% endif %}
                    isActive: false
                } {% if not loop.last %},{% endif %}

                {% endfor %}
            ];

            const locationsYellow = [
                {% for kurseItem in kurse %}
                {
                    markerColor: "yellow",
                    id: {{ kurseItem.id }},
                    firma: '{{ kurseItem.firma }}',
                    name: '{{ kurseItem.name }}',
                    name2: '{{ kurseItem.name2 }}',
                    phoneNumber: "{{ kurseItem.telefon }}",
                    link: '{{ kurseItem.link }}',
                    adresse: '{{ kurseItem.adresse|default|replace({'\n': ' ', '\r': ' '}) }}',
                    lat: {% if kurseItem.xCoord %}{{ kurseItem.xCoord }}{% else %}''{% endif %},
                    lng: {% if kurseItem.yCoord %}{{ kurseItem.yCoord }}{% else %}''{% endif %},
                    isActive: false,
                    {% if kurseItem.logo is not null %}
                    logo: '{{ asset('media/kurse/logo/'~kurseItem.logo) }}',
                    {% endif %}
                    {% if kurseItem.photo is not null %}
                    photo: '{{ asset('media/kurse/'~kurseItem.photo) }}',
                    {% endif %}
                    kurses: [
                        {% for lesson in kurseItem.lesson|sort((a,b) => a.anordnungdAt <=> b.anordnungdAt) %}
                        {% if lesson.isEnabled == 1 and lesson.type == 1 %}
                        {
                            'id': {{ lesson.id }},
                            'kurs': '{{ lesson.kurs|default }}',
                            'platze': '{{ lesson.platze|default }}',
                            'gebucht': '{{ lesson.gebucht|default }}',
                            'dauer': '{{ lesson.dauer|default }}',
                            'dauer2': '{{ lesson.dauer2|default }}',
                            'facher': '{{ lesson.facher|default }}',
                            'price': '{{ lesson.price|default }}',
                            'price2': '{{ lesson.preis2|default }}',
                            'extras': '{{ lesson.extras|default }}',
                            'startdatum': '{{ lesson.startdatum|date('d.m.Y') }}',
                            'frei': '{{ lesson.frei|default }}'
                        },
                        {% endif %}
                        {% endfor %}
                    ]
                } {% if not loop.last %},{% endif %}
                {% endfor %}
            ];

            const yellowIconUrl = '{{ asset('assets/main/img/icons/yellow__circle.svg') }}';
            const activeYellowIconUrl = '{{ asset('assets/main/img/icons/active__yellow__circle.svg') }}';
            const grayIconUrl = '{{ asset('assets/main/img/icons/gray__circle.svg') }}';
            const activeGrayIconUrl = '{{ asset('assets/main/img/icons/active__gray__circle.svg') }}';
            const gmarkers = [];
            const gmarkersGray = [];
            const gmarkersYellow = [];


            markersGray = locationsGray.map((data) => {
                var marker = new google.maps.Marker({
                    position: {lat: data.lat, lng: data.lng},
                    icon: {
                        url: grayIconUrl,
                        scaledSize: new google.maps.Size(25, 25)
                    },
                    markerColor: "gray"
                });
                gmarkersGray.push(marker);
                gmarkers.push(marker);


                marker.addListener("click", () => {
                    $(".yellow__right__section-top__section__not__selected").addClass("empty");
                    $(".yellow__right__section-top__section__selected").removeClass("empty");
                    $(".page-side .page-side-content").removeClass("empty");

                    gmarkersGray.forEach((m) => {
                        m.setIcon({
                            url: grayIconUrl,
                            scaledSize: new google.maps.Size(25, 25)
                        });
                    });

                    gmarkersYellow.forEach((m) => {
                        m.setIcon({
                            url: yellowIconUrl,
                            scaledSize: new google.maps.Size(25, 25)
                        });
                    });

                    marker.setIcon({
                        url: activeGrayIconUrl,
                        scaledSize: new google.maps.Size(27, 27)
                    });


                    updateInfoPanel(data)
                    map.panTo(marker.getPosition());

                });
                return marker;
            });


            markersYellow = locationsYellow.map((data) => {
                var marker = new google.maps.Marker({
                    position: {lat: data.lat, lng: data.lng},
                    icon: {
                        url: yellowIconUrl,
                        scaledSize: new google.maps.Size(25, 25)
                    },
                    markerColor: "yellow"
                });
                gmarkersYellow.push(marker);
                gmarkers.push(marker);

                marker.addListener("click", () => {
                    $(".yellow__right__section-top__section__not__selected").addClass("empty");
                    $(".yellow__right__section-top__section__selected").removeClass("empty");
                    $(".page-side .page-side-content").removeClass("empty");

                    gmarkersGray.forEach((m) => {
                        m.setIcon({
                            url: grayIconUrl,
                            scaledSize: new google.maps.Size(25, 25)
                        });
                    });

                    gmarkersYellow.forEach((m) => {
                        m.setIcon({
                            url: yellowIconUrl,
                            scaledSize: new google.maps.Size(25, 25)
                        });
                    });

                    marker.setIcon({
                        url: activeYellowIconUrl,
                        scaledSize: new google.maps.Size(27, 27)
                    });


                    updateInfoPanel2(data)
                    $("#nummer-anzeigen").attr('onclick', `phoneClick(${data.id}, "${data.phoneNumber}")`);
                    map.panTo(marker.getPosition());

                });
                return marker;
            });


            const clusterStylesGray = {
                textColor: 'white',
                url: grayIconUrl,
                height: 50,
                width: 50,
                textSize: 14
            };

            const clusterStylesYellow = {
                textColor: 'white',
                url: yellowIconUrl,
                height: 50,
                width: 50,
                textSize: 14
            };


            markerClusterGray = new markerClusterer.MarkerClusterer({
                markers: markersGray,
                map: map,
                renderer: {
                    render: ({count, position, markers}) => {
                        return new google.maps.Marker({
                            position,
                            icon: {
                                url: clusterStylesGray.url,
                                scaledSize: new google.maps.Size(clusterStylesGray.width, clusterStylesGray.height),
                                labelOrigin: new google.maps.Point(clusterStylesGray.width / 2, clusterStylesGray.height / 2),
                            },
                            label: {
                                text: String(count),
                                color: clusterStylesGray.textColor,
                                fontSize: clusterStylesGray.textSize + "px"
                            }
                        });
                    }
                }
            });

            markerClusterYellow = new markerClusterer.MarkerClusterer({
                markers: markersYellow,
                map: map,
                renderer: {
                    render: ({count, position, markers}) => {
                        return new google.maps.Marker({
                            position,
                            icon: {
                                url: clusterStylesYellow.url,
                                scaledSize: new google.maps.Size(clusterStylesYellow.width, clusterStylesYellow.height),
                                labelOrigin: new google.maps.Point(clusterStylesYellow.width / 2, clusterStylesYellow.height / 2),
                            },
                            label: {
                                text: String(count),
                                color: clusterStylesYellow.textColor,
                                fontSize: clusterStylesYellow.textSize + "px"
                            }
                        });
                    }
                }
            });

        }

        function yellowHideMarkers() {
            markersGray.forEach(marker => {
                marker.setVisible(true);
            });

            markersYellow.forEach(marker => {
                marker.setVisible(false);
            });

            markerClusterGray.addMarkers(markersGray);
            markerClusterYellow.removeMarkers(markersYellow);

        }

        // Markerları gizle
        function grayHideMarkers() {
            markersGray.forEach(marker => {
                marker.setVisible(false);
            });

            markersYellow.forEach(marker => {
                marker.setVisible(true);
            });

            markerClusterYellow.addMarkers(markersYellow);

            markerClusterGray.removeMarkers(markersGray);
        }

        function showAllMarkers() {
            markersGray.forEach(marker => {
                marker.setVisible(true);
            });
            markersYellow.forEach(marker => {
                marker.setVisible(true);
            });

            markerClusterYellow.addMarkers(markersYellow);

            markerClusterGray.addMarkers(markersGray);

        }

        function showOnlyGrayMarkers() {
            yellowHideMarkers();
        }

        function showOnlyYellowMarkers() {
            grayHideMarkers();
        }

        function showOnlyAllMarkers() {
            showAllMarkers();
            /*$("#marker__information__all img").attr("src", "{{ asset('public/assets/main/img/icons/active') }}");*/
        }

        document.getElementById('marker__information__yellow').addEventListener('click', showOnlyYellowMarkers);
        document.getElementById('marker__information__gray').addEventListener('click', showOnlyGrayMarkers);
        document.getElementById('marker__information__all').addEventListener('click', showOnlyAllMarkers);


        initMap();

        function phoneClick(data, phoneNumber) {

            let type = 0;
            $.ajax({
                type: 'POST',
                url: '{{ path('main_ajax_kurse_statistik') }}',
                data: {type: type, kurse: data},
                success: function (data) {
                }
            });
        }

        function siteClick(data) {
            let type = 1;
            $.ajax({
                type: 'POST',
                url: '{{ path('main_ajax_kurse_statistik') }}',
                data: {type: type, kurse: data},
                success: function (data) {

                }
            });
        }

        function updateInfoPanel(marker) {
            $("#gymikurse").addClass("visible");
            $(".information-details").removeClass("visible");

            let image = marker.image ? '<img src="' + marker.image + '" alt="">' : '';
            $(".tiichi__map__wrapper .information .information-description h1").html(marker.title);
            $(".information-photo-wrapper").html(image);
            $(".tiichi__map__wrapper .information .information-description h3").html(marker.adresse);
        }

        function updateInfoPanel2(markerData) {
            $(".information-details").addClass("visible");
            $("#gymikurse").removeClass("visible");


            $('.mps').removeClass('mpsDelete');
            $('.content-scroll-gutter .page-side-label').remove();

            let logo = markerData.logo ? '<img src="' + markerData.logo + '" alt="">' : '';
            let image = markerData.photo ? '<img src="' + markerData.photo + '" alt="">' : '';
            let name = markerData.name ? markerData.name : '';
            let imgs = markerData.imgs ? markerData.imgs : ''; // Buraya uygun bir değeri eklemelisin
            $("#gymikurse .page-side-content .page-side-title .page-side-title-logo__wrapper").html(logo);
            $("#gymikurse .page-side-content .page-side-img").html(image);
            $(".yellow__right__section-top__section-location__information").html(name);

            let additionalInfoHTML = "";
            if (markerData.additionalInfo) {
                additionalInfoHTML += '<div class="additional-info">' + markerData.additionalInfo + '</div>';
            }

            if (markerData.kurses && markerData.kurses.length > 0) {
                let $swiperWrapper = $("#gymikurseSwiperRight .swiper-wrapper");
                $swiperWrapper.html("");

                markerData.kurses.forEach(function (lesson) {
                    let newSlideHTML = '<div class="swiper-slide" data-kurs="' + lesson.kurs + '">' +
                        '<div class="kursRow">' +
                        '  <div class="kurseTitle barlowlight">Kursort</div>' +
                        '     <div class="kurseText barlowlight">' +
                        '         <div>' + markerData.name + '</div>' +
                        '         <div>' + markerData.name2 + '</div>' +
                        '     </div>' +
                        '</div>' +
                        '<div class="kursRow">' +
                        '   <div class="kurseTitle barlowlight">Dauer</div>' +
                        '      <div class="kurseText barlowlight">' +
                        '         <div>' + lesson.dauer + '</div>' +
                        '         <div>' + lesson.dauer2 + '</div>' +
                        '      </div>' +
                        '</div>' +
                        '<div class="kursRow">' +
                        '   <div class="kurseTitle barlowlight">Start</div>' +
                        '       <div class="kurseText barlowlight">' +
                        '          <div>' + lesson.startdatum + '</div>' +
                        '      </div>' +
                        '</div>' +
                        '<div class="kursRow">' +
                        '   <div class="kurseTitle barlowlight">Fächer</div>' +
                        '       <div class="kurseText barlowlight">' +
                        '          <div>' + lesson.facher + '</div>' +
                        '       </div>' +
                        '</div>' +
                        '<div class="kursRow">' +
                        '   <div class="kurseTitle barlowlight">Preis</div>' +
                        '       <div class="kurseText barlowlight">' +
                        '          <div>' + lesson.price + '</div>' +
                        '          <div>' + lesson.price2 + '</div>' +
                        '        </div>' +
                        '</div>' +
                        '<div class="kursRow">' +
                        '   <div class="kurseTitle barlowlight">Extras</div>' +
                        '     <div class="kurseText barlowlight">' +
                        '        <div>' + lesson.extras + '</div>' +
                        '     </div>' +
                        '</div>' +
                        '<div class="kursRow">' +
                        '   <div class="kurseTitle barlowlight">Plätze</div>' +
                        '      <div class="kurseText barlowlight">' +
                        '       <div>' + lesson.platze + '</div>' +
                        '   </div>' +
                        '</div>'


                    '<div class="align-items-center d-flex justify-content-center w-100">';


                    newSlideHTML += '</div>';

                    $swiperWrapper.append(newSlideHTML);
                });

                $("#gymikurseSwiperRight .swiper-title").text(markerData.kurses[0].kurs);
            }

            // Diğer bilgileri ekleyebilirsiniz...
            if (markerData.anotherInfo) {
                additionalInfoHTML += '<div class="additional-info">' + markerData.anotherInfo + '</div>';
            }

            $("#gymikurse .page-side-content").append(additionalInfoHTML);

            $("#mehr-erfahren").attr('onclick', 'siteClick(' + markerData.id + ')');

            $('.nummer-anzeigen').click(function () {
                $('#number__modal').text(markerData.phoneNumber);
            });
            $(".mehr-erfahren").attr('data-link', markerData.link);

            $(".mehr-erfahren").off('click').on('click', function () {
                window.open(this.dataset.link, '_blank');
            });
        }
    </script>
{% endblock %}