@extends('layouts.app')

@php
    $productImages = collect($images ?? array_merge([$product['primary_image']], $product['gallery'] ?? []))
        ->filter()
        ->unique()
        ->values();
    $primaryImage = $productImages->first();
    $specifications = collect([
        'Category' => $product['category_label'] ?? null,
        'Product format' => $product['format'] ?? null,
        'Packaging directions' => !empty($product['packaging_options']) ? implode(' / ', $product['packaging_options']) : null,
        'Suitable for' => !empty($product['suitable_for']) ? implode(' / ', $product['suitable_for']) : null,
        'Sales channels' => !empty($product['sales_channels']) ? implode(' / ', $product['sales_channels']) : null,
        'Range role' => $product['range_role'] ?? null,
        'Development status' => $product['development_status'] ?? null,
    ])->filter(fn ($value) => filled($value));
@endphp

@section('title', $product['seo_title'])
@section('meta_description', $product['seo_description'])

@section('content')
<main class="overflow-hidden bg-white text-[#1f3443]" data-page-product-detail>
    <section class="bg-[#f7f1ea] pb-14 pt-28 sm:pb-16 sm:pt-32 lg:pb-20" aria-labelledby="product-title">
        <div class="mx-auto grid max-w-[1400px] gap-12 px-5 md:px-10 lg:grid-cols-[minmax(0,1.12fr)_minmax(22rem,.88fr)] lg:items-start lg:gap-16 lg:px-16">
            <div data-product-gallery data-inner-image>
                @if($primaryImage)
                    <figure class="product-gallery__stage">
                        <img
                            src="{{ asset($primaryImage) }}"
                            alt="{{ $product['name'] }} product presentation"
                            width="900"
                            height="900"
                            fetchpriority="high"
                            data-product-main-image
                        >
                    </figure>
                @endif

                @if($productImages->count() > 1)
                    <div class="product-gallery__thumbnails" aria-label="Choose a {{ $product['name'] }} image">
                        @foreach($productImages as $index => $image)
                            <button
                                type="button"
                                class="product-gallery__thumbnail {{ $index === 0 ? 'is-active' : '' }}"
                                aria-label="Show {{ $product['name'] }} image {{ $index + 1 }} of {{ $productImages->count() }}"
                                aria-pressed="{{ $index === 0 ? 'true' : 'false' }}"
                                data-product-thumbnail
                                data-image-src="{{ asset($image) }}"
                                data-image-alt="{{ $product['name'] }} product presentation, view {{ $index + 1 }}"
                            >
                                <img src="{{ asset($image) }}" alt="" width="150" height="150" loading="lazy">
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="product-detail-summary" data-inner-stagger>
                @if(!empty($product['category_label']))
                    <p class="inner-eyebrow">{{ $product['category_label'] }}</p>
                @endif
                <h1 id="product-title" class="product-detail__title mt-6 max-w-[16ch]">{{ $product['name'] }}</h1>
                @if(!empty($product['short_description']))
                    <p class="mt-6 max-w-xl text-base leading-8 text-[#40261a]/70">{{ $product['short_description'] }}</p>
                @endif

                <dl class="mt-8 divide-y divide-[#1f3443]/10 border-y border-[#1f3443]/10 text-sm">
                    @foreach([
                        'Category' => $product['category_label'] ?? null,
                        'Format' => $product['format'] ?? null,
                        'Packaging' => !empty($product['packaging_options']) ? implode(' / ', $product['packaging_options']) : null,
                    ] as $label => $value)
                        @if(filled($value))
                            <div class="grid grid-cols-[7.5rem_1fr] gap-4 py-4">
                                <dt class="text-[#40261a]/48">{{ $label }}</dt>
                                <dd class="leading-6 text-[#1f3443]/82">{{ $value }}</dd>
                            </div>
                        @endif
                    @endforeach
                </dl>

                <div class="mt-8 flex flex-col gap-4 sm:flex-row sm:items-center">
                    <a href="{{ route('contact', ['product' => $product['slug']]) }}" class="inner-button sm:min-w-[10rem]">Enquire Now</a>
                    <a href="{{ route('products') }}" class="inline-flex min-h-11 items-center self-start text-sm font-semibold text-[#1f3443] underline decoration-[#bb7a58]/45 underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#bb7a58] sm:self-auto">Back to Products</a>
                </div>
            </div>
        </div>
    </section>

    <section class="product-tabs-section py-16 sm:py-20 lg:py-24" aria-label="{{ $product['name'] }} information" data-inner-reveal>
        <div class="mx-auto max-w-[1400px] px-5 md:px-10 lg:px-16">
            <div class="product-tabs" data-product-tabs>
                <div class="product-tabs__list" role="tablist" aria-label="Product information tabs">
                    <button type="button" id="description-tab" class="product-tabs__tab is-active" role="tab" aria-selected="true" aria-controls="description-panel" tabindex="0" data-product-tab>DESCRIPTION</button>
                    <button type="button" id="specifications-tab" class="product-tabs__tab" role="tab" aria-selected="false" aria-controls="specifications-panel" tabindex="-1" data-product-tab>SPECIFICATIONS</button>
                </div>

                <div id="description-panel" class="product-tabs__panel" role="tabpanel" aria-labelledby="description-tab" tabindex="0" data-product-panel>
                    <h2 class="sr-only">{{ $product['name'] }} description</h2>
                    @if(!empty($product['long_description']))
                        <p class="max-w-4xl text-base leading-8 text-[#40261a]/72">{{ $product['long_description'] }}</p>
                    @else
                        <p class="text-sm leading-7 text-[#40261a]/58">A detailed description is not currently available. Please enquire for product-specific information.</p>
                    @endif
                </div>

                <div id="specifications-panel" class="product-tabs__panel" role="tabpanel" aria-labelledby="specifications-tab" tabindex="0" data-product-panel>
                    <h2 class="sr-only">{{ $product['name'] }} specifications</h2>
                    @if($specifications->isNotEmpty())
                        <dl class="divide-y divide-[#1f3443]/10 border-y border-[#1f3443]/10">
                            @foreach($specifications as $label => $value)
                                <div class="grid gap-2 py-4 sm:grid-cols-[11rem_1fr] sm:gap-6">
                                    <dt class="text-sm font-semibold text-[#1f3443]">{{ $label }}</dt>
                                    <dd class="text-sm leading-7 text-[#40261a]/68">{{ $value }}</dd>
                                </div>
                            @endforeach
                        </dl>
                    @else
                        <p class="text-sm leading-7 text-[#40261a]/58">No additional specifications are currently available.</p>
                    @endif
                </div>
            </div>
        </div>
    </section>

    @if(!empty($related))
        <section class="border-t border-[#1f3443]/10 bg-[#f7f1ea] py-20 lg:py-24" aria-labelledby="related-products-heading">
            <div class="mx-auto max-w-[1400px] px-5 md:px-10 lg:px-16">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between" data-inner-reveal>
                    <div><p class="inner-eyebrow">Continue the range</p><h2 id="related-products-heading" class="mt-5 text-4xl leading-none tracking-[-.05em] sm:text-5xl">Related Products</h2></div>
                    <a href="{{ route('products') }}" class="text-sm font-semibold underline decoration-[#bb7a58]/45 underline-offset-4">View all products</a>
                </div>
                <div class="mt-9 grid gap-5 sm:grid-cols-2 lg:grid-cols-3" data-inner-stagger>
                    @foreach($related as $item)
                        <x-product-card :product="$item" :related="true" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif
</main>
@endsection