@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/product-page.css') }}?v=20260623-2">
@endpush

@section('content')
@php
    $locale = current_locale();
    $labels = match($locale) {
        'en' => [
            'catalog' => 'Catalog', 'buy' => 'Add to cart', 'contact' => 'Contact us',
            'details' => 'Product details', 'kit' => 'Included', 'warranty' => 'Warranty',
            'shipping' => 'Delivery', 'related' => 'You may also like', 'features' => 'Advantages',
        ],
        'ru' => [
            'catalog' => 'Каталог', 'buy' => 'В корзину', 'contact' => 'Связаться',
            'details' => 'О товаре', 'kit' => 'Комплектация', 'warranty' => 'Гарантия',
            'shipping' => 'Доставка', 'related' => 'Вам может понравиться', 'features' => 'Преимущества',
        ],
        default => [
            'catalog' => 'Kataloq', 'buy' => 'Səbətə əlavə et', 'contact' => 'Əlaqə saxla',
            'details' => 'Məhsul haqqında', 'kit' => 'Dəstə daxildir', 'warranty' => 'Zəmanət',
            'shipping' => 'Çatdırılma', 'related' => 'Bunlar da maraqlı ola bilər',
            'features' => 'Xüsusiyyətlər', 'more' => 'Daha ətraflı',
        ],
    };

    $gallery = collect([$product->main_image ?: $product->image])
        ->merge($product->gallery_images ?? [])
        ->filter()
        ->unique()
        ->values();
    $features = collect($product->feature_sections ?? [])->filter(fn ($item) => !empty($item['image']) || !empty($item['title']) || !empty($item['text']));
    if ($features->isEmpty() && $product->description) {
        $features = collect([[
            'image' => $gallery->first(),
            'title' => $product->short_description ?: $product->name,
            'text' => $product->description,
        ]]);
    }
@endphp

<article class="bork-product-page">
    <section class="bork-product-hero">
        <div class="bork-product-hero__visual">
            <nav class="bork-product-breadcrumbs">
                <a href="{{ localized_route('categories.show', $product->category->slug) }}">
                    <span aria-hidden="true">‹</span>{{ $product->category->name }}
                </a>
            </nav>
            <div class="bork-product-hero__media">
                <img id="product-main-image" src="{{ asset('images/' . $gallery->first()) }}" alt="{{ $product->name }}">
            </div>

            @if($gallery->count() > 1)
                <div class="bork-product-gallery">
                    @foreach($gallery as $index => $image)
                        <button type="button" class="{{ $index === 0 ? 'is-active' : '' }}" data-product-image="{{ asset('images/' . $image) }}" aria-label="{{ $product->name }} {{ $index + 1 }}">
                            <img src="{{ asset('images/' . $image) }}" alt="">
                        </button>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="bork-product-hero__content">
            <div>
                <h1>{{ $product->name }}</h1>
                <div class="bork-product-buy">
                    <div class="bork-product-price">
                        <strong>{{ $product->formattedPrice() }}</strong>
                        @if($product->old_price)<span>{{ $product->formattedOldPrice() }}</span>@endif
                    </div>
                    @include('partials.product-purchase-button', ['product' => $product, 'label' => $labels['buy'], 'contactLabel' => $labels['contact']])
                </div>
            </div>
        </div>
    </section>

    <aside class="bork-product-sticky-buy" data-product-sticky-buy>
        <div>
            <strong>{{ $product->name }}</strong>
            <span>{{ $product->formattedPrice() }}</span>
        </div>
        @include('partials.product-purchase-button', ['product' => $product, 'label' => $labels['buy'], 'contactLabel' => $labels['contact']])
    </aside>

    @if($features->isNotEmpty())
        <section class="bork-product-features">
            @foreach($features as $index => $feature)
                <figure class="bork-product-feature {{ $index % 2 ? 'is-reversed' : '' }}">
                    @if(!empty($feature['image']))
                        <div class="bork-product-feature__image">
                            <img src="{{ asset('images/' . $feature['image']) }}" alt="{{ $feature['title'] ?? $product->name }}" loading="lazy">
                        </div>
                    @endif
                    <figcaption>
                        @if(!empty($feature['title']))<h2>{{ $feature['title'] }}</h2>@endif
                        @if(!empty($feature['text']))<p>{{ $feature['text'] }}</p>@endif
                    </figcaption>
                </figure>
            @endforeach
        </section>
    @endif

    @if($product->description || $product->detailed_description || $product->kit_contents || $product->warranty_info || $product->shipping_info || $product->attributeValues->isNotEmpty())
        <section class="bork-product-information">
            <div class="bork-product-information__visual">
                <img src="{{ asset('images/' . ($product->main_image ?: $product->image)) }}" alt="{{ $product->name }}">
            </div>
            <div class="bork-product-information__content">
                <h2>{{ $labels['features'] }}</h2>
                <div class="bork-product-information__list">
                @if($product->attributeValues->isNotEmpty())
                    @foreach($product->attributeValues->filter(fn($value) => $value->attribute?->show_on_product)->groupBy('attribute.name') as $attributeName => $values)
                        <div><span>{{ $attributeName }}</span><strong>{{ $values->pluck('name')->implode(', ') }}</strong></div>
                    @endforeach
                @endif
                <div><span>{{ __('category') }}</span><strong>{{ $product->category->name }}</strong></div>
                <div><span>{{ __('status') }}</span><strong>{{ __('available') }}</strong></div>
                @if($product->kit_contents)<div><span>{{ $labels['kit'] }}</span><strong>{{ $product->kit_contents }}</strong></div>@endif
                @if($product->warranty_info)<div><span>{{ $labels['warranty'] }}</span><strong>{{ $product->warranty_info }}</strong></div>@endif
                @if($product->shipping_info)<div><span>{{ $labels['shipping'] }}</span><strong>{{ $product->shipping_info }}</strong></div>@endif
                </div>
                <details>
                    <summary><span>＋</span>{{ $labels['more'] ?? 'More details' }}</summary>
                    <p>{{ $product->detailed_description ?: $product->description }}</p>
                </details>
            </div>
        </section>
    @endif

    @if($relatedProducts->count())
        <section class="bork-product-related">
            <h2>{{ $labels['related'] }}</h2>
            <div>
                @foreach($relatedProducts as $relatedProduct)
                    @include('partials.product-card', ['product' => $relatedProduct])
                @endforeach
            </div>
        </section>
    @endif
</article>

<script>
document.querySelectorAll('[data-product-image]').forEach((button) => {
    button.addEventListener('click', () => {
        const mainImage = document.getElementById('product-main-image');
        if (!mainImage) return;
        mainImage.style.opacity = '0';
        window.setTimeout(() => {
            mainImage.src = button.dataset.productImage;
            mainImage.style.opacity = '1';
        }, 160);
        document.querySelectorAll('[data-product-image]').forEach((item) => item.classList.remove('is-active'));
        button.classList.add('is-active');
    });
});

const productHero = document.querySelector('.bork-product-hero');
const stickyBuy = document.querySelector('[data-product-sticky-buy]');
if (productHero && stickyBuy) {
    const observer = new IntersectionObserver(([entry]) => {
        stickyBuy.classList.toggle('is-visible', !entry.isIntersecting);
    }, { threshold: 0.1 });
    observer.observe(productHero);
}
</script>
@endsection