{% 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-image: url("https://elefante.com.tr/assets/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__pager">
                    {% for uk in urunkategorileri %}
                        {% for ukd in uk.diller %}
                            <div class="products__section-active__page">
                                <p><a href="{{ path('app_main_default') }}">Elefante  </a>  / <a class="active" href="{{ path('app_main_urun_gruplari') }}">Products</a> /  <a class="active" href=""> {{ ukd.baslik }}</a></p>
                            </div>

                        {% endfor %}
                    {% endfor %}   </div>
                <div class="products__section-description">
                    {% for urunsayfasi in sayfa[1].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">

{#                            {% for uk in urunkategorileri %}#}
{#                                {% for ukd in uk.diller %}#}
{#                                    <button class="filter-1 active" onclick="kategoryClicked(this)"#}
{#                                            data-filter=".{{ ukd.baslik|upper|replace({' ': '-'}) }}">#}
{#                                        {{ ukd.baslik }}#}
{#                                    </button>#}
{#                                {% endfor %}#}

{#                            {% endfor %}#}
                        </ul>
                    </div>
                    <div class="products__section-navbar__products-products container" id="MixItUp1">
                        {% for kategori in urunkategorileri %}
                            {% for grup in kategori.gruplar %}
                                {% for urun in grup.urunler %}
                                    {% set urunKategoriDil = urun.urungruplari.urunkategorileri.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                                    {% set ukDil = urun.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                                    <div class="products__section-navbar__products-products-product mix {{ urunKategoriDil.baslik|upper|replace({' ': '-'}) }}">
                                        <div class="products__section-navbar__products-products-product-img__wrapper">
                                            {% for resim in urun.resimler|filter(r => r.del == 0)|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 urun.resimler|filter(r => r.del == 0) %}
                                                    <img class="imgs"
                                                         src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}"
                                                         alt="product__img">
                                                {% endfor %}
                                                <h4 class="mini__title">{{ ukDil.baslik2|default }}</h4>
                                                <h3 class="title">{{ ukDil.baslik2|default }}</h3>
                                                <span class="size">{{ ukDil.boyut|default }}</span>
                                                <span class="weight">{{ ukDil.agirlik|default }}</span>
                                                <span class="material">{{ ukDil.materyal|default }}</span>
                                            </template>
                                        </div>
                                        <h4>{{ urunKategoriDil.baslik|upper }}</h4>
                                        <h3>{{ ukDil.baslik2|default }}</h3>
                                    </div>
                                {% endfor %}
                            {% endfor %}
                        {% endfor %}
                    </div>


                    <div class="products__section-navbar__products-button__wrapper">
                        <a href="{{ path('app_main_urun_gruplari') }}"><button class="products__section-navbar__products-button__wrapper-button"
                                   onclick="AllProducts()" class="filter-1"
                                   data-filter="all">All Products
                            </button></a>
                    </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 class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
                                    <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-1"></div>
                                    <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
                                        PH-ASR-BLACK</p>
                                </div>
                                <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
                                    <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-2"></div>
                                    <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
                                        PH-ASR-BLACK</p>
                                </div>
                                <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
                                    <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-3"></div>
                                    <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
                                        PH-ASR-BLACK</p>
                                </div>
                                <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
                                    <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-4"></div>
                                    <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
                                        PH-ASR-BLACK</p>
                                </div>
                                <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
                                    <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-5"></div>
                                    <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
                                        PH-ASR-BLACK</p>
                                </div>
                                <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
                                    <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-6"></div>
                                    <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
                                        PH-ASR-BLACK</p>
                                </div>
                            </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>


                        </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;
                    let imgEl1 = templateClone.querySelectorAll(".imgs")[0];
                    let imgEl2 = templateClone.querySelectorAll(".imgs")[1];
                    let imgEl3 = templateClone.querySelectorAll(".imgs")[2];
                    let imgEl4 = templateClone.querySelectorAll(".imgs")[3];
                    const sizeEl = templateClone.querySelector(".size").textContent;
                    const weightEl = templateClone.querySelector(".weight").textContent;
                    const materialEl = templateClone.querySelector(".material").textContent;

                    if (imgEl1) {
                        imgEl1 = templateClone.querySelectorAll(".imgs")[0].src;
                    }

                    if (imgEl2) {
                        imgEl2 = templateClone.querySelectorAll(".imgs")[1].src;
                    }

                    if (imgEl3) {
                        imgEl3 = templateClone.querySelectorAll(".imgs")[2].src;
                    }

                    if (imgEl4) {
                        imgEl4 = templateClone.querySelectorAll(".imgs")[3].src;
                    }

                    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 msayfabasliklImg = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper .swiper-slide img")[0];
                    const msayfabasliklImg2 = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper .swiper-slide img")[1];
                    const msayfabasliklImg3 = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper .swiper-slide img")[2];
                    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];


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


                    // İlgili işlemleri yapın
                } 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 %}