@extends('front.layouts.master')

@section('content')
<main>
    <div class="mb-4 pb-lg-3"></div>
    <div class="mb-md-1 pb-md-3"></div>
    <section class="product-single container product-single__type-9">
        <div class="row">
            <div class="col-lg-7">
                <div class="product-single__media" data-media-type="vertical-thumbnail">
                    <div class="product-single__image">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                @foreach ($product->galleries as $image)
                                    <div class="swiper-slide product-single__image-item">
                                        <img loading="lazy" class="h-auto" src="{{ $image->getImage('medium') }}" width="674" height="674" alt="" />
                                        <a data-fancybox="gallery" href="{{ $image->getImage('original') }}" data-bs-toggle="tooltip" data-bs-placement="left" title="Zoom">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><use href="#icon_zoom" /></svg>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper-button-prev">
                                <svg width="7" height="11" viewBox="0 0 7 11" xmlns="http://www.w3.org/2000/svg"><use href="#icon_prev_sm" /></svg>
                            </div>
                            <div class="swiper-button-next">
                                <svg width="7" height="11" viewBox="0 0 7 11" xmlns="http://www.w3.org/2000/svg"><use href="#icon_next_sm" /></svg>
                            </div>
                        </div>
                    </div>
                    <div class="product-single__thumbnail">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                @foreach ($product->galleries as $image)
                                    <div class="swiper-slide product-single__image-item">
                                        <img loading="lazy" class="h-auto" src="{{ $image->getImage('small') }}" style="width: 100% !important; height: 100% !important; object-fit:contain" alt="{{ $product?->getTranslatedAttribute('title') }}" />
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <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">
                        <a href="{{ route('front.home') }}" class="menu-link menu-link_us-s text-uppercase fw-medium">{{ __('front.home') }}</a>
                        <span class="breadcrumb-separator menu-link fw-medium ps-1 pe-1">/</span>
                        <a href="{{ route('front.products.index', $product?->category?->getTranslatedAttribute('slug')) }}" class="menu-link menu-link_us-s text-uppercase fw-medium">{{ $product?->category?->getTranslatedAttribute('title') }}</a>
                        <span class="breadcrumb-separator menu-link fw-medium ps-1 pe-1">/</span>
                        <a href="#" class="menu-link menu-link_us-s text-uppercase fw-medium">{{ $product?->getTranslatedAttribute('title') }}</a>
                    </div>
                    <!-- /.breadcrumb -->
                </div>
                <h1 class="product-single__name">{{ $product->getTranslatedAttribute('title') }}</h1>
                <div class="product-single__meta-info">
                    <div class="meta-item">
                        <label>{{ __('front.product_code') }}:</label>
                        <span>{{ $product->code }}</span>
                    </div>
                    <div class="meta-item">
                        <label>{{ __('front.category') }}:</label>
                        <span>{{ $product?->category?->getTranslatedAttribute('title') }}</span>
                    </div>
                </div>
                <form name="addtocart-form" method="post">
                    <div class="product-single__swatches">
                        @if($product->isvariant() && $product->main_product)
                            <div class="product-swatch color-swatches">
                                <label>{{ __('front.main_product') }}</label>
                                <div class="swatch-list w-100">
                                    <a href="{{ route('front.products.show', $product?->main_product?->getTranslatedAttribute('slug')) }}"
                                        class="align-items-center d-flex gap-3 js-swatch justify-content-start pe-3 swatch swatch-image w-fit ms-0"
                                        aria-label="{{ $product?->main_product?->getTranslatedAttribute('title') }}"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="top"
                                        title="{{ $product?->main_product?->getTranslatedAttribute('title') }}">
                                        <img loading="lazy" src="{{ $product?->main_product?->getCover() }}" width="60" height="60" alt="" class="w-none" />
                                        <p class="mb-0 text-center text-muted">{{ $product?->main_product?->getTranslatedAttribute('title') }}</p>
                                    </a>
                                </div>
                            </div>
                        @endif
                        @if($product->variants()->count() > 0)
                            <div class="product-swatch color-swatches">
                                <label>{{ __('front.variants') }}</label>
                                <div class="swatch-list w-100">
                                    @foreach ($product->variants as $variant)
                                    <a href="{{ route('front.products.show_variant', [$product?->getTranslatedAttribute('slug'), $variant?->getTranslatedAttribute('slug')]) }}"
                                        class="swatch swatch-image js-swatch d-block" aria-label="{{ $variant->getTranslatedAttribute('title') }}"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="top"
                                        title="{{ $variant?->getTranslatedAttribute('title') }}">
                                        <img loading="lazy" src="{{ $variant?->getCover() }}" width="60" height="60" alt="{{ $variant?->getTranslatedAttribute('title') }}" />
                                        <p class="mb-0 text-center text-muted">{{ $variant?->getTranslatedAttribute('title') }}</p>
                                    </a>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                    <x-front.add-cart-button :product="$product" />
                </form>
            </div>
        </div>
        <div class="product-single__details-list">
            {!! $product->getTranslatedAttribute('body') !!}
        </div>
    </section>
    <section class="products-carousel container">
        <h2 class="h3 text-uppercase mb-4 pb-xl-2 mb-xl-4"><strong>{{ __('front.related_products') }}</strong></h2>

        <div id="related_products" class="position-relative">
            <div
                class="swiper-container js-swiper-slider"
                data-settings='{
                    "autoplay": false,
                    "slidesPerView": 4,
                    "slidesPerGroup": 4,
                    "effect": "none",
                    "loop": true,
                    "pagination": {
                    "el": "#related_products .products-pagination",
                    "type": "bullets",
                    "clickable": true
                    },
                    "navigation": {
                        "nextEl": "#related_products .products-carousel__next",
                        "prevEl": "#related_products .products-carousel__prev"
                    },
                    "breakpoints": {
                        "320": {
                            "slidesPerView": 2,
                            "slidesPerGroup": 2,
                            "spaceBetween": 14
                        },
                        "768": {
                            "slidesPerView": 3,
                            "slidesPerGroup": 3,
                            "spaceBetween": 24
                        },
                        "992": {
                            "slidesPerView": 4,
                            "slidesPerGroup": 4,
                            "spaceBetween": 30
                        }
                    }
                }'>
                <div class="swiper-wrapper">
                    <!-- TODO: Ürün listeleme yapılacak  -->
                    @foreach($product->getRelatedProducts(12) as $related)
                    <div class="swiper-slide product-card">
                        <x-front.product :product="$related" />
                    </div>
                    @endforeach
                </div>
                <!-- /.swiper-wrapper -->
            </div>
            <!-- /.swiper-container js-swiper-slider -->

            <div class="products-carousel__prev 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 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 class="products-pagination mt-4 mb-5 d-flex align-items-center justify-content-center"></div>
            <!-- /.products-pagination -->
        </div>
        <!-- /.position-relative -->
    </section>
    <!-- /.products-carousel container -->
</main>


@endsection