@extends('front.layouts.master')
@section('content')

<main>
    <div class="mb-4 pb-lg-3"></div>

    <section class="shop-main container d-flex">
        <div class="shop-sidebar side-sticky bg-body" id="shopFilter">
            <div class="aside-header d-flex d-lg-none align-items-center">
                <h3 class="text-uppercase fs-6 mb-0">{{ __('front.filter_by') }}</h3>
                <button class="btn-close-lg js-close-aside btn-close-aside ms-auto"></button>
            </div>
            <!-- /.aside-header -->

            <div class="pt-4 pt-lg-0"></div>

            <div class="accordion" id="categories-list">
                <div class="accordion-item mb-4 pb-3">
                    <h5 class="accordion-header" id="accordion-heading-11">
                        <button class="accordion-button p-0 border-0 fs-5 text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-filter-1" aria-expanded="true" aria-controls="accordion-filter-1">
                            {{ __('front.product_categories') }}
                            <svg class="accordion-button__icon type2" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
                                <g aria-hidden="true" stroke="none" fill-rule="evenodd">
                                    <path
                                        d="M5.35668 0.159286C5.16235 -0.053094 4.83769 -0.0530941 4.64287 0.159286L0.147611 5.05963C-0.0492049 5.27473 -0.049205 5.62357 0.147611 5.83813C0.344427 6.05323 0.664108 6.05323 0.860924 5.83813L5 1.32706L9.13858 5.83867C9.33589 6.05378 9.65507 6.05378 9.85239 5.83867C10.0492 5.62357 10.0492 5.27473 9.85239 5.06018L5.35668 0.159286Z"
                                    />
                                </g>
                            </svg>
                        </button>
                    </h5>
                    <div id="accordion-filter-1" class="accordion-collapse collapse show border-0" aria-labelledby="accordion-heading-11" data-bs-parent="#categories-list">
                        <div class="accordion-body px-0 pb-0 pt-3">
                            <ul class="list list-inline mb-0">
                                @foreach ($main_product_categories as $category)
                                <li class="list-item">
                                    <a href="{{ route('front.products.categories.show', $category->slug) }}" class="menu-link py-1">
                                        {{ $category->getTranslatedAttribute('title') }}
                                    </a>

                                    <button class="open-toggle-sub-menu" type="button">
                                        <svg class="accordion-button__icon type2" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
                                            <g aria-hidden="true" stroke="none" fill-rule="evenodd">
                                                <path
                                                    d="M5.35668 0.159286C5.16235 -0.053094 4.83769 -0.0530941 4.64287 0.159286L0.147611 5.05963C-0.0492049 5.27473 -0.049205 5.62357 0.147611 5.83813C0.344427 6.05323 0.664108 6.05323 0.860924 5.83813L5 1.32706L9.13858 5.83867C9.33589 6.05378 9.65507 6.05378 9.85239 5.83867C10.0492 5.62357 10.0492 5.27473 9.85239 5.06018L5.35668 0.159286Z"
                                                ></path>
                                            </g>
                                        </svg>
                                    </button>

                                    @if($category->childrens->count() > 0)
                                    <ul class="list list-inline ps-3">
                                        @foreach($category->childrens as $key => $children)
                                        <li>
                                            <a href="{{ route('front.products.categories.show', $children->slug) }}" class="menu-link py-1">
                                                - {{ $children->getTranslatedAttribute('title') }}
                                            </a>
                                            <button class="open-toggle-sub-menu" type="button">
                                                <svg class="accordion-button__icon type2" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
                                                    <g aria-hidden="true" stroke="none" fill-rule="evenodd">
                                                        <path
                                                            d="M5.35668 0.159286C5.16235 -0.053094 4.83769 -0.0530941 4.64287 0.159286L0.147611 5.05963C-0.0492049 5.27473 -0.049205 5.62357 0.147611 5.83813C0.344427 6.05323 0.664108 6.05323 0.860924 5.83813L5 1.32706L9.13858 5.83867C9.33589 6.05378 9.65507 6.05378 9.85239 5.83867C10.0492 5.62357 10.0492 5.27473 9.85239 5.06018L5.35668 0.159286Z"
                                                        ></path>
                                                    </g>
                                                </svg>
                                            </button>

                                            @if($children->childrens->count() > 0)
                                            <ul class="list list-inline ps-3">
                                                @foreach($children->childrens as $key => $childrenAschildren)
                                                <li>
                                                    <a href="{{ route('front.products.categories.show', $childrenAschildren->getTranslatedAttribute('slug')) }}" class="menu-link py-1">
                                                        {{ $childrenAschildren->getTranslatedAttribute('title') }}
                                                    </a>
                                                    <button class="open-toggle-sub-menu" type="button">
                                                        <svg class="accordion-button__icon type2" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
                                                            <g aria-hidden="true" stroke="none" fill-rule="evenodd">
                                                                <path
                                                                    d="M5.35668 0.159286C5.16235 -0.053094 4.83769 -0.0530941 4.64287 0.159286L0.147611 5.05963C-0.0492049 5.27473 -0.049205 5.62357 0.147611 5.83813C0.344427 6.05323 0.664108 6.05323 0.860924 5.83813L5 1.32706L9.13858 5.83867C9.33589 6.05378 9.65507 6.05378 9.85239 5.83867C10.0492 5.62357 10.0492 5.27473 9.85239 5.06018L5.35668 0.159286Z"
                                                                ></path>
                                                            </g>
                                                        </svg>
                                                    </button>
                                                </li>
                                                @endforeach
                                            </ul>
                                            @endif
                                        </li>
                                        @endforeach
                                    </ul>
                                    @endif
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- /.accordion-item -->
            </div>
            <!-- /.accordion-item -->
        </div>
        <!-- /.shop-sidebar -->

        <div class="shop-list flex-grow-1">
            <div class="d-flex justify-content-between mb-4 pb-md-2">
                <div class="breadcrumb mb-0 d-none d-md-block flex-grow-1">
                    <!-- Ana sayfa linki -->
                    <a href="{{ route('front.home') }}" class="menu-link menu-link_us-s text-uppercase fw-medium">
                        {{ __('front.home') }}
                    </a>

                    @if ($productCategory)
                        <span class="breadcrumb-separator menu-link fw-medium ps-1 pe-1">/</span>

                        <!-- Dinamik kategori linkleri -->
                        @php
                            $categories = [];
                            $currentCategory = $productCategory;
                            while ($currentCategory) {
                                $categories[] = $currentCategory;
                                $currentCategory = $currentCategory->parent; // Üst kategoriyi al
                            }
                            $categories = array_reverse($categories); // Üstten alta sıralamak için ters çevir
                        @endphp

                        @foreach($categories as $key => $category)
                            <a href="{{ route('front.products.categories.show', $category->getTranslatedAttribute('slug')) }}"
                                class="menu-link menu-link_us-s text-uppercase fw-medium">
                                {{ $category->getTranslatedAttribute('title') }}
                            </a>
                            @if (!$loop->last)
                                <span class="breadcrumb-separator menu-link fw-medium ps-1 pe-1">/</span>
                            @endif
                        @endforeach
                    @endif
                </div>
                <!-- /.breadcrumb -->

                <div class="shop-acs d-flex align-items-center justify-content-between justify-content-md-end flex-grow-1">
                    {{-- <select class="shop-acs__select form-select w-auto border-0 py-0 order-1 order-md-0" aria-label="{{ __('front.sort_items') }}" name="total-number">
                        <option selected>{{ __('front.default_sorting') }}</option>
                        <option value="1">{{ __('front.featured') }}</option>
                        <option value="2">{{ __('front.best_selling') }}</option>
                        <option value="3">{{ __('front.alphabetically_a_to_z') }}</option>
                        <option value="3">{{ __('front.alphabetically_z_to_a') }}</option>
                        <option value="3">{{ __('front.price_low_to_high') }}</option>
                        <option value="3">{{ __('front.price_high_to_low') }}</option>
                        <option value="3">{{ __('front.date_old_to_new') }}</option>
                        <option value="3">{{ __('front.date_new_to_old') }}</option>
                    </select>

                    <div class="shop-asc__seprator mx-3 bg-light d-none d-md-block order-md-0"></div> --}}

                    <div class="col-size align-items-center order-1 d-none d-lg-flex">
                        <span class="text-uppercase fw-medium me-2">{{ __('front.view') }}</span>
                        <button class="btn-link fw-medium me-2 js-cols-size" data-target="products-grid" data-cols="2">2</button>
                        <button class="btn-link fw-medium me-2 js-cols-size" data-target="products-grid" data-cols="3">3</button>
                        <button class="btn-link fw-medium js-cols-size" data-target="products-grid" data-cols="4">4</button>
                    </div>
                    <!-- /.col-size -->

                    <div class="shop-filter d-flex align-items-center order-0 order-md-3 d-lg-none">
                        <button class="btn-link btn-link_f d-flex align-items-center ps-0 js-open-aside" data-aside="shopFilter">
                            <svg class="d-inline-block align-middle me-2" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><use href="#icon_filter" /></svg>
                            <span class="text-uppercase fw-medium d-inline-block align-middle">{{ __('front.filter') }}</span>
                        </button>
                    </div>
                    <!-- /.col-size d-flex align-items-center ms-auto ms-md-3 -->
                </div>
                <!-- /.shop-acs -->
            </div>
            <!-- /.d-flex justify-content-between -->

            <!-- BURADAN BAŞLADI -->

            @if (isset($productCategory) && $productCategory->childrens()->count() > 0)
            <div>
                <section class="products-carousel container">
                    <div id="product_hot_deals" class="position-relative">
                        <div
                            class="swiper-container js-swiper-slider"
                            data-settings='{
                            "autoplay": {
                                "delay": 5000
                            },
                            "slidesPerView": 5,
                            "slidesPerGroup": 1,
                            "effect": "none",
                            "loop": false,
                            "navigation": {
                                "nextEl": "#product_hot_deals .products-carousel__next",
                                "prevEl": "#product_hot_deals .products-carousel__prev"
                            },
                            "breakpoints": {
                                "320": {
                                    "slidesPerView": 2,
                                    "slidesPerGroup": 2,
                                    "spaceBetween": 14
                                },
                                "768": {
                                    "slidesPerView": 3,
                                    "slidesPerGroup": 3,
                                    "spaceBetween": 24
                                },
                                "992": {
                                    "slidesPerView": 4,
                                    "slidesPerGroup": 1,
                                    "spaceBetween": 30,
                                    "pagination": false
                                },
                                "1200": {
                                    "slidesPerView": 5,
                                    "slidesPerGroup": 1,
                                    "spaceBetween": 35,
                                    "pagination": false
                                }
                            }
                        }'
                        >
                            <div class="swiper-wrapper h-auto">
                                @foreach ($productCategory->childrens as $children)
                                <div class="swiper-slide product-card product-card_style8">
                                    <div class="pc__img-wrapper pc__img-wrapper_wide2">
                                        <a href="{{ route('front.products.categories.show', $children->getTranslatedAttribute('slug')) }}">
                                            <img loading="lazy" src="{{ $children->getCover() }}" width="252" height="229" alt="{{ $children->getTranslatedAttribute('title') }}" class="pc__img" />
                                        </a>
                                    </div>
                                    <!-- /.pc__img-wrapper -->

                                    <div class="pc__info position-relative">
                                        <h6 class="pc__title text-center"><a href="{{ route('front.products.categories.show', $children->getTranslatedAttribute('slug')) }}">{{ $children->getTranslatedAttribute('title') }}</a></h6>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <!-- /.swiper-wrapper -->
                        </div>
                        <!-- /.swiper-container js-swiper-slider -->

                        <div class="products-carousel__prev navigation-sm bg-grey-eeeeee position-absolute top-50 d-flex align-items-center justify-content-center">
                            <svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><use href="#icon_prev_md" /></svg>
                        </div>
                        <!-- /.products-carousel__prev -->
                        <div class="products-carousel__next navigation-sm bg-grey-eeeeee position-absolute top-50 d-flex align-items-center justify-content-center">
                            <svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><use href="#icon_next_md" /></svg>
                        </div>
                        <!-- /.products-carousel__next -->
                    </div>
                    <!-- /.position-relative -->
                </section>
            </div>
            @endif

            <!-- BURADAN bitti -->

            <x-front.product-list :products="$products" />
        </div>
    </section>
    <!-- /.shop-main container -->

    <div class="mb-4 pb-lg-3"></div>
</main>

@endsection
@push('javascript')
<script>
    $(document).ready(function () {
        $(".open-toggle-sub-menu").click(function () {
            $(this).parent().toggleClass("active");
        });
    });

    document.addEventListener("DOMContentLoaded", function () {
        // Mevcut sayfanın URL'ini al
        const currentUrl = window.location.href;

        // Tüm <a> etiketlerini seç
        const links = document.querySelectorAll("#accordion-filter-1 a");

        links.forEach((link) => {
            // Eğer <a> etiketi mevcut URL ile eşleşiyorsa
            if (link.href === currentUrl) {
                let currentElement = link;

                // Eşleşen linkin üst <li> elementlerine kadar çık ve active class ekle
                while (currentElement) {
                    if (currentElement.tagName === "LI") {
                        currentElement.classList.add("active");
                    }
                    currentElement = currentElement.parentElement;

                    // En üst `ul`'a ulaştığımızda veya `div`'i geçtiğimizde dur
                    if (!currentElement || currentElement.tagName === "DIV") {
                        break;
                    }
                }
            }
        });
    });
</script>
@endpush

<style>
    #accordion-filter-1 li:has(.open-toggle-sub-menu) {
        position: relative;
    }

    #accordion-filter-1 li:not(:has(ul)) .open-toggle-sub-menu {
        display: none;
    }

    #accordion-filter-1 .open-toggle-sub-menu {
        position: absolute;
        right: 0;
        top: 0;
        width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 0;
        width: unset;
        border: 0;
        background: #eee;
        border-radius: 4px;
        transform: rotate(180deg);
    }

    #accordion-filter-1 .open-toggle-sub-menu svg {
        fill: #5d5d5d;
    }

    #accordion-filter-1 .active > .open-toggle-sub-menu {
        transform: rotate(0);
    }

    #accordion-filter-1 .active > .open-toggle-sub-menu {
        background: #858585;
    }

    #accordion-filter-1 .active > .open-toggle-sub-menu svg {
        fill: #fff;
    }

    #accordion-filter-1 li:not(.active) > ul {
        display: none;
    }
</style>