@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/product-page.css') }}?v=20260626-1">
@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']));
    $colorVariants = collect($product->color_variants ?? [])
        ->filter(fn ($color) => !empty($color['name']))
        ->values();
    if ($features->isEmpty() && $product->description) {
        $features = collect([[
            'image' => $gallery->first(),
            'title' => $product->short_description ?: $product->name,
            'text' => $product->description,
        ]]);
    }

    $videoUrl = trim((string) $product->video);
    $videoEmbedUrl = null;
    $videoIsDirect = false;

    if ($videoUrl !== '') {
        $videoIsDirect = (bool) preg_match('/\.(mp4|webm|ogg)(\?.*)?$/i', $videoUrl);

        if (preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([A-Za-z0-9_-]+)/i', $videoUrl, $matches)) {
            $videoEmbedUrl = 'https://www.youtube.com/embed/' . $matches[1];
        } elseif (preg_match('/vimeo\.com\/(?:video\/)?(\d+)/i', $videoUrl, $matches)) {
            $videoEmbedUrl = 'https://player.vimeo.com/video/' . $matches[1];
        } elseif (!$videoIsDirect) {
            $videoEmbedUrl = $videoUrl;
        }
    }
@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">
                <picture>
                    @if(image_has_webp($gallery->first()))
                        <source id="product-main-image-webp" type="image/webp" srcset="{{ image_webp_url($gallery->first()) }}">
                    @endif
                    <img id="product-main-image" src="{{ asset('images/' . $gallery->first()) }}" alt="{{ $product->name }}" decoding="async" fetchpriority="high">
                </picture>
            </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) }}" data-product-webp="{{ image_has_webp($image) ? image_webp_url($image) : '' }}" aria-label="{{ $product->name }} {{ $index + 1 }}">
                            <picture>
                                @if(image_has_webp($image))
                                    <source type="image/webp" srcset="{{ image_webp_url($image) }}">
                                @endif
                                <img src="{{ asset('images/' . $image) }}" alt="" loading="lazy" decoding="async">
                            </picture>
                        </button>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="bork-product-hero__content">
            <div>
                <h1>{{ $product->name }}</h1>
                @if($colorVariants->isNotEmpty())
                    <div class="bork-product-colors" data-product-colors>
                        <p>Rəng</p>
                        <div>
                            @foreach($colorVariants as $index => $color)
                                <button
                                    type="button"
                                    class="{{ $index === 0 ? 'is-active' : '' }}"
                                    style="--product-color: {{ $color['hex'] ?? '#c77d4a' }}"
                                    data-product-color="{{ $color['name'] }}"
                                    aria-label="Rəng: {{ $color['name'] }}"
                                    title="{{ $color['name'] }}"
                                >
                                    <span></span>
                                    <strong>{{ $color['name'] }}</strong>
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif
                <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">
                            <picture>
                                @if(image_has_webp($feature['image']))
                                    <source type="image/webp" srcset="{{ image_webp_url($feature['image']) }}">
                                @endif
                                <img src="{{ asset('images/' . $feature['image']) }}" alt="{{ $feature['title'] ?? $product->name }}" loading="lazy" decoding="async">
                            </picture>
                        </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($videoUrl)
        <section class="bork-product-video">
            <div class="bork-product-video__inner">
                <div class="bork-product-video__heading">
                    <span>Video</span>
                    <h2>{{ $product->name }}</h2>
                </div>

                <div class="bork-product-video__frame">
                    @if($videoIsDirect)
                        <video src="{{ $videoUrl }}" controls playsinline preload="metadata"></video>
                    @else
                        <iframe
                            src="{{ $videoEmbedUrl }}"
                            title="{{ $product->name }} video"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen
                        ></iframe>
                    @endif
                </div>
            </div>
        </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">
                @php($infoImage = $product->main_image ?: $product->image)
                <picture>
                    @if(image_has_webp($infoImage))
                        <source type="image/webp" srcset="{{ image_webp_url($infoImage) }}">
                    @endif
                    <img src="{{ asset('images/' . $infoImage) }}" alt="{{ $product->name }}" loading="lazy" decoding="async">
                </picture>
            </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(() => {
            const mainImageWebp = document.getElementById('product-main-image-webp');
            if (mainImageWebp) {
                if (button.dataset.productWebp) {
                    mainImageWebp.srcset = button.dataset.productWebp;
                } else {
                    mainImageWebp.removeAttribute('srcset');
                }
            }
            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);
}

document.querySelectorAll('[data-product-color]').forEach((button) => {
    button.addEventListener('click', () => {
        const color = button.dataset.productColor || '';
        document.querySelectorAll('[data-product-color]').forEach((item) => item.classList.remove('is-active'));
        button.classList.add('is-active');
        document.querySelectorAll('[data-selected-product-color]').forEach((input) => {
            input.value = color;
        });
    });
});
</script>
@endsection