@extends('layout')

@section('title', $product->name)

@section('content')
    <div class="product-page-content">
        <div class="product-info__container">
            <div class="product-info__block">
                <div class="product__image">
                    <div class="swiper">
                        <div class="swiper-container main-slider">
                            <div class="swiper-wrapper">
                                @if ($product->productPhotos->isNotEmpty())
                                    @foreach ($product->productPhotos as $photo)
                                        <div class="swiper-slide">
                                            <img src="{{ asset('products/' . $photo->photo_url) }}"
                                                alt="{{ $product->name }}">
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            <!-- Додані кнопки навігації -->
                            <div class="swiper-button-next">
                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M20.9455 18.5828H3.65527V14.2023H20.9455L14.3142 6.99L17.1622 3.89251L28.6553 16.3925L17.1622 28.8925L14.3142 25.795L20.9455 18.5828Z"
                                        fill="#FFBAA4" />
                                </svg>
                            </div>
                            <div class="swiper-button-prev">
                                <svg width="26" height="26" viewBox="0 0 26 26" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M8.68291 10.6089H25.9731V14.9894H8.68291L15.3142 22.2017L12.4662 25.2992L0.973145 12.7992L12.4662 0.299175L15.3142 3.39666L8.68291 10.6089Z"
                                        fill="#FFBAA4" />
                                </svg>
                            </div>
                        </div>
                        <div class="swiper-container thumbnail-slider">
                            <div class="swiper-wrapper">
                                @if ($product->productPhotos->isNotEmpty())
                                    @foreach ($product->productPhotos as $photo)
                                        <div class="swiper-slide">
                                            <img src="{{ asset('products/' . $photo->photo_url) }}"
                                                alt="{{ $product->name }}">
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product__info">
                    <h2 class="product-name">{{ $product->name }}</h2>
                    <p class="product-price">{{ $product->price }} грн</p>
                    <p class="product-in-stock {{ $product->availability_status != 'В наявності' ? 'not' : '' }}">
                        <span></span>
                        {{ $product->availability_status }}
                    </p>
                    <p class="product-material text"><span>Матеріал:</span> {{ $product->material }}</p>
                    <p class="product-filler text"><span>Наповнювач:</span> {{ $product->filler }}</p>
                    <p class="product-size text"><span>Розмір:</span> {{ $product->size }}</p>
                    <div class="product-color text">
                        <span>Колір: </span>
                        @foreach ($anotherColors as $anotherProduct)
                            @if ($anotherProduct->product_id < $product->product_id)
                                <div class="color-block">
                                    @php
                                        $colors = explode(',', $anotherProduct->color_hash);
                                    @endphp
                                    <div class="color-circle"
                                        style="{{ in_array('#ffffff', $colors) ? 'border: 1px solid #000;' : '' }}">
                                        @foreach ($colors as $color)
                                            <div class="color" style="background-color: {{ $color }}"></div>
                                        @endforeach
                                    </div>
                                    <a href="{{ route('product-info', ['product_name' => $anotherProduct->name, 'color' => $anotherProduct->color_text, 'color_hash' => $anotherProduct->color_hash]) }}"
                                        class="color-name text">{{ $anotherProduct->color_text }}</a>
                                </div>
                            @endif
                        @endforeach
                        <div class="color-block">
                            @php
                                $colors = explode(',', $product->color_hash);
                            @endphp
                            <div class="color-circle"
                                style="{{ in_array('#ffffff', $colors) ? 'border: 1px solid #000;' : '' }}">
                                @foreach ($colors as $color)
                                    <div class="color" style="background-color: {{ $color }}"></div>
                                @endforeach
                            </div>
                            <p class="color-name active">{{ $product->color_text }}</p>
                        </div>
                        @foreach ($anotherColors as $anotherProduct)
                            @if ($anotherProduct->product_id > $product->product_id)
                                <div class="color-block">
                                    @php
                                        $colors = explode(',', $anotherProduct->color_hash);
                                    @endphp
                                    <div class="color-circle"
                                        style="{{ in_array('#ffffff', $colors) ? 'border: 1px solid #000;' : '' }}">
                                        @foreach ($colors as $color)
                                            <div class="color" style="background-color: {{ $color }}"></div>
                                        @endforeach
                                    </div>
                                    <a href="{{ route('product-info', ['product_name' => $anotherProduct->name, 'color' => $anotherProduct->color_text, 'color_hash' => $anotherProduct->color_hash]) }}"
                                        class="color-name text">{{ $anotherProduct->color_text }}</a>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    <h4 class="product-desc-title">Опис</h4>
                    <p class="product-description text">{{ $product->description }}</p>
                    <div class="order-buttons">
                        <a href="{{ route('buy-product', ['productId' => $product->product_id]) }}"
                            class="buy__button button">Придбати</a>
                        <button onclick="addToCart({{ $product->product_id }})" class="in-cart__button button">До
                            кошика</button>
                    </div>
                </div>
            </div>
            <div class="order-details__info">
                <div class="delivery__methods order-details__item">
                    <h4 class="delivery-methods__title order-details__title">
                        Способи доставки
                    </h4>
                    <div class="delivery-methods__item info-item">
                        <img src="{{ asset('assets/Ukrposhta-ua.png') }}" alt="">
                        <p class="text">Укрпошта 30 грн (до 15 кг)</p>
                    </div>
                    <div class="delivery-methods__item info-item">
                        <img src="{{ asset('assets/Nova_Poshta_logo.png') }}" alt="">
                        <p class="text">Нова Пошта від 70 грн</p>
                    </div>
                </div>
                <div class="payment__methods order-details__item">
                    <h4 class="payment-methods__title order-details__title">
                        Способи оплати
                    </h4>
                    <p class="text info-item">Оплата після отримання товару</p>
                </div>
                <div class="return__methods order-details__item">
                    <h4 class="return-methods__title order-details__title">
                        Повернення
                    </h4>
                    <p class="text info-item">Товар підлягає поверненню тільки при огляді у відділенні пошти</p>
                </div>
            </div>
            <div class="related__products">
                <div class="swiper related-products-slider">
                    <div class="swiper-header-block">
                        <h2 class="related-products__title title">Вам також може сподобатися</h2>
                        <div class="related-products__controll-block">
                            <div class="swiper-button-prev slider-arrow">
                                <svg width="26" height="26" viewBox="0 0 26 26" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M8.68291 10.6089H25.9731V14.9894H8.68291L15.3142 22.2017L12.4662 25.2992L0.973145 12.7992L12.4662 0.299194L15.3142 3.39668L8.68291 10.6089Z"
                                        fill="#FFBAA4" />
                                </svg>
                            </div>
                            <div class="swiper-button-next slider-arrow">
                                <svg width="26" height="26" viewBox="0 0 26 26" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M17.9455 15.5828H0.655273V11.2023H17.9455L11.3142 3.99L14.1622 0.892517L25.6553 13.3925L14.1622 25.8925L11.3142 22.795L17.9455 15.5828Z"
                                        fill="#FFBAA4" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-wrapper related-products-wrapper">
                        @foreach ($relatedProducts as $similarProduct)
                            <div class="swiper-slide related-product-slide">
                                @include('components.product-item', ['product' => $similarProduct])
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <img class="product-bottom" src="{{ asset('assets/catalog/catalog-list-bottom.png') }}" alt="">
        @include('components.order-form')
    </div>
@endsection