<section class="company-addresses-section" x-data="{ mapType: '1' }">
    <span class="company-addresses-section__title">Наши адреса в Москве</span>
    
    <p class="company-addresses-section__desc">Вы можете оформить самовывоз в наши фирменные магазины</p>
    
    <div class="segmented-control company-addresses-section__segmented-control">
        <label class="segmented-control-item">
            <input type="radio" name="map-type" value="1" x-model="mapType">
            <div>Списком</div>
        </label>
        <label class="segmented-control-item">
            <input type="radio" name="map-type" value="2" x-model="mapType">
            <div>На карте</div>
        </label>
    </div>

    <div class="company-addresses-section__map-wrapper" x-show="mapType === '2'">
        <div id="map" class="company-addresses-section__map-ya"></div>
        <div class="company-addresses-section__map-address" data-address-idx="286c04e8-3766-405b-8242-2984daf7e6c9">
            <img src="/images/address.png" alt="" srcset="/images/address@2x.png 2x" class="company-addresses-section__map-address__img">
            <span class="company-addresses-section__map-address__title">Carakb Мытищи</span>
            <p class="company-addresses-section__map-address__desc">Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи</p>
            <span class="company-addresses-section__map-address__time">Доступно сегодня в 15:00</span>
            <div class="company-addresses-section__map-address__labels">
                <div class="company-addresses-section__map-address__label">
                    <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                    <span>09:00 до 21:00</span>
                </div>
                <div class="company-addresses-section__map-address__label">
                    <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                    <span>+7 (495) 118-43-17</span>
                </div>
            </div>
            <a href="" class="company-addresses-section__map-address__btn">Построить маршрут</a>
        </div>
        <div class="company-addresses-section__map-address" data-address-idx="7cd8bbba-5909-4329-89b4-aece5b2a5ad4">
            <img src="/images/branchs/2.jpg" alt="" class="company-addresses-section__map-address__img">
            <span class="company-addresses-section__map-address__title">Алтуфьево</span>
            <p class="company-addresses-section__map-address__desc">Алтуфьевское шоссе владение 77Б, 129347</p>
            <span class="company-addresses-section__map-address__time">Доступно сегодня в 15:00</span>
            <div class="company-addresses-section__map-address__labels">
                <div class="company-addresses-section__map-address__label">
                    <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                    <span>09:00 до 21:00</span>
                </div>
                <div class="company-addresses-section__map-address__label">
                    <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                    <span>+7 (495) 118-43-17</span>
                </div>
            </div>
            <a href="" class="company-addresses-section__map-address__btn">Построить маршрут</a>
        </div>
    </div>

    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

    <script type="text/javascript">
        ymaps.ready(init);

        function init(){
            const map = new ymaps.Map("map", {
                center: [55.76, 37.64],
                zoom: 10,
                controls: []
            });

            const list = [
                {
                    idx: "286c04e8-3766-405b-8242-2984daf7e6c9",
                    address: "Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи",
                    geo: [55.898492, 37.722828]
                },
                {
                    idx: "7cd8bbba-5909-4329-89b4-aece5b2a5ad4",
                    address: "Алтуфьевское шоссе, владение 77Б, 129347, Москва",
                    geo: [55.930140, 37.626484]
                }
            ];

            let preData = null;

            for (const item of list) {
                const placemark = new ymaps.Placemark(item.geo,
                    {
                        idx: item.idx,
                        hintContent: item.address,
                        iconContent: "",
                    },
                    {
                        iconLayout: "default#image",
                        iconImageHref: "data:image/svg+xml,%3Csvg width='36' height='45' viewBox='0 0 36 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 0C8.05888 0 0 7.91749 0 17.6842C0 21.818 1.44367 25.6205 3.86269 28.6316C4.99182 30.0371 7.58677 31.9652 10.0331 33.6219C13.4158 35.9126 15.9567 39.3009 16.8909 43.278L17.0265 43.8555C17.2681 44.8839 18.7319 44.8839 18.9735 43.8555L19.1091 43.278C20.0433 39.3009 22.5842 35.9126 25.9669 33.6219C28.4132 31.9652 31.0082 30.0371 32.1373 28.6316C34.5563 25.6205 36 21.818 36 17.6842C36 7.91749 27.9411 0 18 0Z' fill='%2327A56F'/%3E%3C/svg%3E",
                        iconImageSize: [36, 48],
                        iconImageOffset: [-18, -48],
                    }
                );

                placemark.events.add('click', function () {
                    if (preData) {
                        preData.placemark.options.set({
                            iconImageHref: "data:image/svg+xml,%3Csvg width='36' height='45' viewBox='0 0 36 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 0C8.05888 0 0 7.91749 0 17.6842C0 21.818 1.44367 25.6205 3.86269 28.6316C4.99182 30.0371 7.58677 31.9652 10.0331 33.6219C13.4158 35.9126 15.9567 39.3009 16.8909 43.278L17.0265 43.8555C17.2681 44.8839 18.7319 44.8839 18.9735 43.8555L19.1091 43.278C20.0433 39.3009 22.5842 35.9126 25.9669 33.6219C28.4132 31.9652 31.0082 30.0371 32.1373 28.6316C34.5563 25.6205 36 21.818 36 17.6842C36 7.91749 27.9411 0 18 0Z' fill='%2327A56F'/%3E%3C/svg%3E",
                        });

                        const container = document.querySelector(`[data-address-idx="${preData.idx}"]`);

                        if (container) {
                            container.classList.remove("active");
                        }
                    }

                    const idx = placemark.properties.get('idx')
                    
                    placemark.options.set({
                        iconImageHref: "data:image/svg+xml,%3Csvg width='36' height='45' viewBox='0 0 36 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 0C8.05888 0 0 7.91749 0 17.6842C0 21.818 1.44367 25.6205 3.86269 28.6316C4.99182 30.0371 7.58677 31.9652 10.0331 33.6219C13.4158 35.9126 15.9567 39.3009 16.8909 43.278L17.0265 43.8555C17.2681 44.8839 18.7319 44.8839 18.9735 43.8555L19.1091 43.278C20.0433 39.3009 22.5842 35.9126 25.9669 33.6219C28.4132 31.9652 31.0082 30.0371 32.1373 28.6316C34.5563 25.6205 36 21.818 36 17.6842C36 7.91749 27.9411 0 18 0Z' fill='%23f4511e'/%3E%3C/svg%3E",
                    });

                    preData = { idx, placemark };

                    const container = document.querySelector(`[data-address-idx="${idx}"]`);

                    if (container) {
                        container.classList.add("active");
                    }
                });

                map.geoObjects.add(placemark);
            }
        }
    </script>

    <div class="company-addresses-section__branchs" x-show="mapType === '1'">
        <div class="company-addresses-section__branch-item">
            <img src="/images/branchs/1.png" alt="" class="company-addresses-section__branch-item__img">
            <div class="company-addresses-section__branch-item__main">
                <span class="company-addresses-section__branch-item__title">Мытищи</span>
                <p class="company-addresses-section__branch-item__desc">Новомытищинский пр-кт, вл 47, кор 2, 141018, Мытищи</p>
                <div class="company-addresses-section__branch-item__labels">
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                        <span>09:00 до 21:00</span>
                    </div>
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                        <span>+7 (495) 118-43-17</span>
                    </div>
                </div>
                <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
            </div>
        </div>
        <div class="company-addresses-section__branch-item">
            <img src="/images/branchs/2.jpg" alt="" class="company-addresses-section__branch-item__img">
            <div class="company-addresses-section__branch-item__main">
                <span class="company-addresses-section__branch-item__title">Алтуфьево</span>
                <p class="company-addresses-section__branch-item__desc">Алтуфьевское шоссе владение 77Б, 129347</p>
                <div class="company-addresses-section__branch-item__labels">
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                        <span>09:00 до 21:00</span>
                    </div>
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                        <span>+7 (495) 118-43-17</span>
                    </div>
                </div>
                <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
            </div>
        </div>
        <div class="company-addresses-section__branch-item">
            <img src="/images/branchs/3.jpg" alt="" class="company-addresses-section__branch-item__img">
            <div class="company-addresses-section__branch-item__main">
                <span class="company-addresses-section__branch-item__title">Пражская</span>
                <p class="company-addresses-section__branch-item__desc">ул. Подольских Курсантов д.3 стр.29, 117545</p>
                <div class="company-addresses-section__branch-item__labels">
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                        <span>09:00 до 21:00</span>
                    </div>
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                        <span>+7 (495) 118-43-17</span>
                    </div>
                </div>
                <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
            </div>
        </div>
        <div class="company-addresses-section__branch-item">
            <img src="/images/branchs/4.jpg" alt="" class="company-addresses-section__branch-item__img">
            <div class="company-addresses-section__branch-item__main">
                <span class="company-addresses-section__branch-item__title">Кузьминки</span>
                <p class="company-addresses-section__branch-item__desc">Ташкентская 28с1 109472 Москва</p>
                <div class="company-addresses-section__branch-item__labels">
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                        <span>09:00 до 21:00</span>
                    </div>
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                        <span>+7 (495) 118-43-17</span>
                    </div>
                </div>
                <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
            </div>
        </div>
        <div class="company-addresses-section__branch-item">
            <img src="/images/branchs/5.png" alt="" class="company-addresses-section__branch-item__img">
            <div class="company-addresses-section__branch-item__main">
                <span class="company-addresses-section__branch-item__title">Кутузовская</span>
                <p class="company-addresses-section__branch-item__desc">1-й Сетуньский проезд, 2соор1 119136 Москва</p>
                <div class="company-addresses-section__branch-item__labels">
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#clock"></use></svg>
                        <span>09:00 до 21:00</span>
                    </div>
                    <div class="company-addresses-section__branch-item__label-item">
                        <svg><use xlink:href="/sprite.svg#phone"></use></svg>
                        <span>+7 (495) 118-43-17</span>
                    </div>
                </div>
                <a href="" class="company-addresses-section__branch-item__btn">Построить маршрут</a>
            </div>
        </div>
    </div>
</section>