{% extends 'main_base.html.twig' %}
{% block title %}
    {% if app.request.get('link') == '' and app.request.get('link2') == '' %}
        {{ 'anasayfa.urungruplarikucuk'|trans }}
    {% elseif app.request.get('link2') != '' %}
        {{ urunGruplariDil.baslik }}
    {% elseif app.request.get('link') != '' %}
        {{ urunKategorileriDil.baslik }}
    {% endif %}
{% endblock %}
{% block description %}
    {% if app.request.get('link') == '' and app.request.get('link2') == '' %}
        {{ 'anasayfa.urungruplarikucuk'|trans }}
    {% elseif app.request.get('link2') != '' %}
        {{ urunGruplariDil.baslik }}
    {% elseif app.request.get('link') != '' %}
        {{ urunKategorileriDil.baslik }}
    {% endif %}
{% endblock %}
{% block content %}
    <style>

        .navbar__section-links__wrapper :not(.PRODUCTS) {
            opacity: 0.4 !important;
        }

        .navbar__section-logo__wrapper-img {
            filter: brightness(0) invert(1) !important;
        }

        .navbar__section::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: -1;

        }

        .navbar__section::after {
            content: "";
            background-image: url("../../../public/assets/main/images/navbar/navbar-bg-products.jpg");
            background-position: center;
            background-size: cover;

            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: -2;

        }

    </style>

    <style>
        {#    <header>#}
        {#        <div class="header-image"><img src="{{ asset('assets/main/images/productGroups.webp') }}" alt=""></div>#}
        {#        <div class="header-text">#}
        {#            <a href="{{ path('app_main_default') }}">#}
        {#                <div class="header-logo"><img src="{{ asset('assets/main/images/elefante.svg') }}" alt=""></div>#}
        {#            </a>#}
        {#            <div class="header-name"><span>{{ 'anasayfa.urungruplarikucuk'|trans }}</span></div>#}
        {#            <div class="header-text-line">#}
        {#                <span>SINCE</span>#}
        {#                <span>1995</span>#}
        {#            </div>#}
        {#        </div>#}
        {#    </header>#}

        {#    <div id="container">#}
        {#        <div class="content">#}
        {#            <div class="router-url">#}
        {#                <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }}</a> /#}
        {#                <a href="{{ path('app_main_urun_gruplari') }}">{{ 'anasayfa.urungruplarikucuk'|trans }}</a>#}
        {#                {% if app.request.get('link') != '' %}#}
        {#                    / <a#}
        {#                        href="{{ path('app_main_urun_gruplari', {'link': urunKategorileriDil.link}) }}">{{ urunKategorileriDil.baslik }}</a>#}
        {#                {% endif %}#}
        {#                {% if app.request.get('link2') != '' %}#}
        {#                    / <a#}
        {#                        href="{{ path('app_main_urun_gruplari', {'link': urunKategorileriDil.link, 'link2': urunGruplariDil.link}) }}">{{ urunGruplariDil.baslik }}</a>#}
        {#                {% endif %}#}
        {#            </div>#}

        {#            <div class="product-groups-wrapper">#}
        {#                <div class="productgroups-nav">#}
        {#                    {% for uk in urunkategorileri %}#}
        {#                        {% set ukDil = uk.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
        {#                        <div class="productgroups-nav-item">#}
        {#                            <div class="productgroups-nav-item-header border {% if app.request.get('link') == ukDil.link %}active{% endif %}">#}
        {#                                <h1>{{ ukDil.baslik }} <span>({{ uk.gruplar|filter(r => r.del == 0)|length }})</span></h1>#}
        {#                                <i class="rotate-i active fas fa-chevron-down"></i>#}
        {#                            </div>#}
        {#                            <ul class="productgroups-nav-item-content {% if app.request.get('link') == ukDil.link %}productgroups-nav-item-content-all{% endif %}">#}
        {#                                {% for grup in uk.gruplar|filter(r => r.del == 0) %}#}
        {#                                    {% set grupDil = grup.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
        {#                                    <li>#}
        {#                                        <a href="{{ path('app_main_urun_gruplari', {'link': ukDil.link, 'link2': grupDil.link}) }}"#}
        {#                                           style="color: inherit;"><p>{{ grupDil.baslik }}#}
        {#                                                <span>({{ grup.urunler|filter(r => r.del == 0)|length }})</span>#}
        {#                                            </p>#}
        {#                                        </a>#}
        {#                                    </li>#}
        {#                                {% endfor %}#}
        {#                            </ul>#}
        {#                        </div>#}
        {#                    {% endfor %}#}
        {#                </div>#}
        {#                <div class="productgroups">#}
        {#                    {% for urun in urunler %}#}
        {#                        {% set urunDil = urun.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
        {#                        <div class="productgroup-item">#}
        {#                            <div class="productgroups-drop-items">#}
        {#                                <div class="productgroups-drop-item-off"><i class="bx bx-x"></i></div>#}
        {#                                <div class="productgroups-drop-item">#}
        {#                                    <div class="productgroups-drop-item-logo">#}
        {#                                        <img src="{{ asset('assets/main/images/elefante.svg') }}" alt="">#}
        {#                                    </div>#}
        {#                                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">#}
        {#                                        <symbol id="ei-arrow-left-icon" viewBox="0 0 50 50">#}
        {#                                            <path d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z"></path>#}
        {#                                            <path d="M25.3 34.7L15.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z"></path>#}
        {#                                            <path d="M17 24h17v2H17z"></path>#}
        {#                                        </symbol>#}
        {#                                        <symbol id="ei-arrow-right-icon" viewBox="0 0 50 50">#}
        {#                                            <path d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z"></path>#}
        {#                                            <path d="M24.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"></path>#}
        {#                                            <path d="M16 24h17v2H16z"></path>#}
        {#                                        </symbol>#}
        {#                                    </svg>#}
        {#                                    <div class="layout">#}
        {#                                        <ul class="slider">#}
        {#                                            {% for resim in urun.resimler|filter(r => r.del == 0) %}#}
        {#                                                <li>#}
        {#                                                    <div data-zoom="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}" class="zoom">#}
        {#                                                        <img src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}" />#}
        {#                                                    </div>#}
        {#                                                </li>#}
        {#                                            {% endfor %}#}
        {#                                        </ul>#}
        {#                                    </div>#}
        {#                                </div>#}

        {#                            <div class="productgroups-drop-item-content">#}
        {#                                <h2 class="productgroups-drop-item-content-header">{{ urunDil.baslik }}</h2>#}
        {#                                <h3 class="productgroups-drop-item-content-header-small">{{ urunDil.baslik }}</h3>#}
        {#                                <div class="productgroups-drop-item-content-text">#}
        {#                                    {{ urunDil.metin|raw }}#}
        {#                                </div>#}
        {#                            </div>#}
        {#                            </div>#}
        {#                            <div class="productgroup-item-image">#}
        {#                                {% if urun.resimler|length > 0 %}#}
        {#                                    <img src="{{ asset('uploads/urungruplari/urunler/' ~ urun.resimler|sort((a,b) => a.sira > b.sira)|first.resim) }}" alt="">#}
        {#                                {% endif %}#}
        {#                            </div>#}
        {#                            <div class="productgroup-item-content">#}
        {#                                <h3>{{ urunDil.baslik }}</h3>#}
        {#                                <p>{{ urunDil.baslik2 }}</p>#}
        {#                            </div>#}
        {#                        </div>#}
        {#                    {% endfor %}#}
        {#                </div>#}
        {#            </div>#}
        {#        </div>#}
        {#    </div> #}</style>
    <div id="products">
        {% include 'main/default/loader.html.twig' %}
        {% include 'main/default/cookie.html.twig' %}
        <div class="main-container">


            <div class="products__section">
                <div class="products__section-active__page">
                    <p><a href="https://technoone.net/elefante/">Elefante </a> / <a class="active"
                                                                                    href="https://technoone.net/elefante/products">Products</a>
                    </p>
                </div>

                <div class="products__section-description">
                    {% for urunsayfasi in sayfa[0].sayfabaslikDilleri %}

                        <h2>{{ urunsayfasi.baslik|raw }}</h2>
                        <p>{{ urunsayfasi.title|raw }}</p>

                    {% endfor %}
                </div>


                <div class="products__section-navbar__products">
                    <div class="products__section-navbar__products-navbar">
                        <ul class="controls">
                            <button class="filter-1 active All" onclick="kategoryClicked(this)" data-filter="all">ALL
                            </button>
                            {% for kategori in urunkategorileri|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
                                {% for kategoriler in kategori.diller %}
                                    <button class="filter-1" onclick="kategoryClicked(this)"
                                            data-filter=".{{ kategoriler.baslik|upper|replace({ '½': '-', '/': '-', '%': '-','&': '-', ' ': '-', '/\W+/': '-' }) }}">
                                        {{ kategoriler.baslik }}
                                    </button>
                                {% endfor %}
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="products__section-navbar__products-products container" id="MixItUp1">
                        {% for kategori in urunkategorileri|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
                            {% for kategoriDil in kategori.diller|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
                                {% for grup in kategori.gruplar|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
                                    {% for urunler in grup.urunler|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
                                        {% for urunlerDil in urunler.diller|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
                                            <div class="products__section-navbar__products-products-product mix {{ kategoriDil.baslik|upper|replace({ '½': '-', '%': '-','&': '-', ' ': '-', '/\W+/': '-' }) }}">
                                                <div class="products__section-navbar__products-products-product-img__wrapper">
                                                    {% for resim in urunler.resimler|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira)|slice(0, 2) %}
                                                        <img src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}"
                                                             alt="product-img">
                                                    {% endfor %}
                                                    <div class="products__section-navbar__products-products-product-mousetracker">
                                                        <div class="products__section-navbar__products-products-product-mousetracker-x"></div>
                                                        <div class="products__section-navbar__products-products-product-mousetracker-y"></div>
                                                    </div>
                                                    <template class="template">
                                                        {% for resim in urunler.resimler|filter(r => r.del == 0) %}
                                                            <img class="imgs"
                                                                 src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}"
                                                                 alt="product__img">
                                                        {% endfor %}
                                                        <h4 class="mini__title">{{ urunlerDil.baslik2|default }}</h4>
                                                        <h3 class="title">{{ urunlerDil.baslik2|default }}</h3>
                                                        <span class="size">{{ urunlerDil.boyut|default }}</span>
                                                        <span class="weight">{{ urunlerDil.agirlik|default }}</span>
                                                        <span class="metin">{{ urunlerDil.metin|default|raw }}</span>
                                                        <span class="material">{{ urunlerDil.materyal|default }}</span>
                                                        <span class="colorname1">{{ urunlerDil.renkAd1|default }}</span>
                                                        <span class="colorkod1">{{ urunlerDil.renkKod1|default }}</span>
                                                        <span class="colorname2">{{ urunlerDil.renkAd2|default }}</span>
                                                        <span class="colorkod2">{{ urunlerDil.renkKod2|default }}</span>
                                                        <span class="colorname3">{{ urunlerDil.renkAd3|default }}</span>
                                                        <span class="colorkod3">{{ urunlerDil.renkKod3|default }}</span>
                                                        <span class="colorname4">{{ urunlerDil.renkAd4|default }}</span>
                                                        <span class="colorkod4">{{ urunlerDil.renkKod4|default }}</span>
                                                        <span class="colorname5">{{ urunlerDil.renkAd5|default }}</span>
                                                        <span class="colorkod5">{{ urunlerDil.renkKod5|default }}</span>
                                                        <span class="colorname6">{{ urunlerDil.renkAd6|default }}</span>
                                                        <span class="colorkod6">{{ urunlerDil.renkKod6|default }}</span>
                                                    </template>
                                                </div>
                                                <h4>{{ kategoriDil.baslik|upper }}</h4>
                                                <h3>{{ urunlerDil.baslik|default }}</h3>


                                            </div>

                                        {% endfor %}

                                    {% endfor %}

                                {% endfor %}
                            {% endfor %}
                        {% endfor %}

                    </div>
                    <div class="products__section-navbar__products-button__wrapper">
                        <button class="products__section-navbar__products-button__wrapper-button"
                                onclick="AllProducts()" class="filter-1"
                                data-filter="all">All Products
                        </button>
                    </div>
                </div>
            </div>
        </div>


        {% include 'main/default/new-catalogue.html.twig' %}
        <div class="products__msayfabaslikl__wrapper">
            <div class="products__msayfabaslikl-bg">
                <div class="products__msayfabaslikl__wrapper-title">
                    <h3>White Maya Top Smocked Waist, Yoga/Harem Pants</h3>
                    <div class="products__msayfabaslikl__wrapper-title-crossed__out" id="products__prossed__out">
                        <div class="crossed__out-1"></div>
                        <div class="crossed__out-2"></div>
                    </div>
                </div>
                <div class="products__msayfabaslikl__wrapper-product__description">
                    <div class="products__msayfabaslikl__wrapper-product__description-img__wrapper">
                        <div class="swiper myProductsSwiper">
                            <div class="swiper-wrapper">
                            </div>
                            <div class="products-msayfabaslikl-swiper-button-next">
                                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
                                    <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
                                </svg>
                            </div>
                            <div class="products-msayfabaslikl-swiper-button-prev">
                                <svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
                                    <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="products__msayfabaslikl__wrapper-product__description-about__product">
                        <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors_wrapper">
                            <h4>Colours</h4>
                                <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors">
                                </div>
                        </div>
                        <div class="products__msayfabaslikl__wrapper-product__description-about__product-dimensions">
                            <p>Size:<span class="msayfabaslikl-size"></span></p>
                            <p>Weight:<span class="msayfabaslikl-weight"></span></p>
                            <p>Material:<span class="msayfabaslikl-material"></span></p>
                            <p>Description:<span class="msayfabaslikl-metin"></span></p>


                        </div>
                        <div class="products__msayfabaslikl__wrapper-product__description-about__product-logos">
                            <img src="{{ asset('uploads/ayarlar/referans/' ~ ayarlar.referans) }}"
                                 alt="references-logo">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



{% endblock %}

{% block body_js %}
    {% include 'main/default/scripts.html.twig' %}
    <script>
        const products = document.querySelectorAll(".products__section-navbar__products-products-product-img__wrapper");
        const productsMsayfabaslikl = document.querySelector(".products__msayfabaslikl__wrapper");
        const prossedOut = document.querySelector("#products__prossed__out");
        const swiperWrapper = document.querySelector(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper");


        function initializeSwiper() {
            swiper = new Swiper(".myProductsSwiper", {
                navigation: {
                    nextEl: ".products-msayfabaslikl-swiper-button-next",
                    prevEl: ".products-msayfabaslikl-swiper-button-prev",
                },
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false,
                },
                loop: true,
            });
        }

        initializeSwiper();


        products.forEach((item, index) => {
            item.addEventListener("click", () => {
                swiperWrapper.innerHTML = "";
                productsMsayfabaslikl.classList.add("active");
                document.body.style.overflow = "hidden";
                const templateEl = item.closest('.products__section-navbar__products-products-product-img__wrapper').querySelector('.template');

                if (templateEl) {
                    const templateClone = document.importNode(templateEl.content, true);
                    const titleEl = templateClone.querySelector(".title").textContent;
                    const sizeEl = templateClone.querySelector(".size").textContent;
                    const weightEl = templateClone.querySelector(".weight").textContent;
                    const materialEl = templateClone.querySelector(".material").textContent;
                    const metinlEl = templateClone.querySelector(".metin").textContent;

                    const imgs = templateClone.querySelectorAll(".imgs");

                    imgs.forEach((imgItem) => {
                        let swiperSlide = document.createElement("div");
                        swiperSlide.classList.add("swiper-slide");
                        let imgClone = imgItem.cloneNode(true);
                        swiperSlide.appendChild(imgClone);
                        swiperWrapper.appendChild(swiperSlide);
                    });

                    const msayfabasliklTitle = document.querySelector(".products__msayfabaslikl__wrapper-title h3");
                    const msayfabasliklSize = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[0];
                    const msayfabasliklWeight = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[1];
                    const msayfabasliklMaterial = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[2];
                    const msayfabasliklMetin = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[3];

                    msayfabasliklTitle.textContent = titleEl;
                    msayfabasliklSize.textContent = sizeEl;
                    msayfabasliklWeight.textContent = weightEl;
                    msayfabasliklMaterial.textContent = materialEl;
                    msayfabasliklMetin.textContent = metinlEl;

                    // Renkleri aktar
                    const colorsModal = document.querySelector(".products__msayfabaslikl__wrapper-product__description-about__product-colors");
                    colorsModal.innerHTML = ''; // Önceki renkleri temizle

                    const colorNames = templateClone.querySelectorAll("[class^='colorname']");
                    const colorCodes = templateClone.querySelectorAll("[class^='colorkod']");

                    colorNames.forEach((colorName, index) => {
                        const colorNameText = colorName.textContent;
                        const colorCodeText = colorCodes[index].textContent;

                        const colorItem = document.createElement("div");
                        colorItem.classList.add("products__msayfabaslikl__wrapper-product__description-about__product-colors-color");

                        const colorCircle = document.createElement("div");
                        colorCircle.classList.add("products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle");
                        colorCircle.style.backgroundColor = colorCodeText;

                        const colorDescription = document.createElement("p");
                        colorDescription.classList.add("products__modal__wrapper-product__description-about__product-colors-color-description");

                        colorDescription.textContent = colorNameText;

                        colorItem.appendChild(colorCircle);
                        colorItem.appendChild(colorDescription);
                        colorsModal.appendChild(colorItem);
                    });

                } else {
                    console.error("Template element not found!");
                }
                swiper.destroy();
                initializeSwiper();
                swiper.update();
                swiper.slideTo(0);
                swiper.autoplay.start();
            });
        });


        prossedOut.addEventListener("click", () => {
            productsMsayfabaslikl.classList.remove("active");
            document.body.style.overflow = "auto";
        })

        const productImgMainWrapper = document.querySelectorAll(".products__section-navbar__products-products-product-img__wrapper")
        const productimgsWrapper = document.querySelectorAll(".products__section-navbar__products-products-product .products__section-navbar__products-products-product-img__wrapper img")


        productImgMainWrapper.forEach((item) => {
            item.addEventListener("mouseover", () => {
                const secondaryImgs = item.getElementsByTagName('img');
                const specificSecondaryImg = secondaryImgs[1];
                const specificFirstImg = secondaryImgs[0];

                if (specificSecondaryImg) {
                    specificSecondaryImg.classList.add("active");

                }

                if (specificSecondaryImg) {
                    specificFirstImg.classList.add("remove");
                }

            })
            item.addEventListener("mouseleave", () => {
                const secondaryImgs = item.getElementsByTagName('img');
                const specificSecondaryImg = secondaryImgs[1];
                const specificFirstImg = secondaryImgs[0];

                if (specificSecondaryImg) {
                    specificSecondaryImg.classList.remove("active");

                }

                if (specificFirstImg) {
                    specificFirstImg.classList.remove("remove");
                }
            })


        });

    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const pageHeight = window.innerHeight;
            const msayfabasliklEl = document.querySelector(".products__msayfabaslikl-bg");

            if (pageHeight < 816) {
                msayfabasliklEl.classList.add("small")
            } else {
                msayfabasliklEl.classList.remove("small")
            }

            const contentEl = document.querySelector(".products__msayfabaslikl__wrapper-product__description-about__product");
            const containerEl = document.querySelector(".products__msayfabaslikl__wrapper-product__description");

            /* if (pageHeight < 800) {
                contentEl.style.overflowY = 'scroll';
            } else {
                contentEl.style.overflowY = 'hidden';
            } */
        })


    </script>
    <script>
        const controllerBtn = document.querySelectorAll(".products__section-navbar__products-navbar .controls button");
        controllerBtn.forEach((item) => {
            item.addEventListener("mouseover", () => {
                item.click();
            })
        })

        const kategoryClicked = (button) => {
            const controllerBtn = document.querySelectorAll(".products__section-navbar__products-navbar .controls button");
            controllerBtn.forEach((item) => {

                item.classList.remove("active");
            })

            button.classList.add("active");
        }


        var mixer = mixitup('#MixItUp1');
    </script>
    <script>
        function AllProducts() {
            document.querySelectorAll('.filter-1').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector('.All').classList.add('active');
        }
    </script>
{% endblock %}