@extends('storefront.layout')

@section('title', $product->title . ' — Wholesale')
@section('description', 'View current wholesale pricing and availability for ' . $product->title . '.')

@push('head')
@php $galleryUrls = collect($product->images ?? [])->pluck('src')->filter()->values(); @endphp
@foreach ($galleryUrls as $imgUrl)
    <link rel="preload" as="image" href="{{ $imgUrl }}">
@endforeach
@endpush

@section('content')
@php
    $catalogPricePresenter = new \App\Services\Catalog\CatalogPricePresenter($priceResolver);
    $catalogStockPresenter = new \App\Services\Catalog\CatalogStockPresenter($stockResolver);
@endphp
<section class="max-w-7xl mx-auto px-6 lg:px-8 py-10">

    <nav class="mb-6 min-w-0 break-words text-sm text-stone-500">
        <a href="{{ route('storefront.catalog') }}" class="hover:text-stone-900">Catalog</a>
        <span class="mx-2">/</span>
        <span class="text-stone-700">{{ $product->title }}</span>
    </nav>

    <div class="grid min-w-0 gap-12 lg:grid-cols-2">

        {{-- Gallery --}}
        <div
            class="min-w-0"
            x-data="{
                images: {{ collect($product->images ?? [])->pluck('src')->filter()->values()->toJson() ?: ($product->image_url ? json_encode([$product->image_url]) : '[]') }},
                active: 0,
                zoom: false,
                lightbox: false,
                auto: true,
                _timer: null,
                _resumeTimer: null,
                next() { this.active = (this.active + 1) % this.images.length; },
                prev() { this.active = (this.active - 1 + this.images.length) % this.images.length; },
                pick(i) { this.active = i; this.stopAuto(); },
                userNext() { this.next(); this.stopAuto(); },
                userPrev() { this.prev(); this.stopAuto(); },
                openLightbox() { this.lightbox = true; this.stopAuto(); },
                stopAuto() {
                    this.auto = false;
                    clearInterval(this._timer);
                    clearTimeout(this._resumeTimer);
                    this._resumeTimer = setTimeout(() => { this.auto = true; this.startAuto(); }, 15000);
                },
                startAuto() {
                    if (this.images.length < 2) return;
                    this._timer = setInterval(() => { if (this.auto) this.next(); }, 6000);
                },
                init() {
                    // Preload all images via JS and only start the timer when all are ready
                    if (this.images.length < 2) return;
                    let loaded = 0;
                    const total = this.images.length;
                    const tryStart = () => { if (++loaded >= total) this.startAuto(); };
                    this.images.forEach(src => {
                        const img = new Image();
                        img.onload = img.onerror = tryStart;
                        img.src = src;
                    });
                }
            }"
            @keydown.escape.window="lightbox = false"
        >
            {{-- Main image + arrows wrapper --}}
            <div class="relative" style="aspect-ratio:1/1">

                {{-- Image container --}}
                <div
                    class="absolute inset-0 rounded-2xl overflow-hidden bg-stone-100 border border-stone-200 shadow-sm cursor-zoom-in"
                    @click="openLightbox()"
                    @mouseenter="zoom = true"
                    @mouseleave="zoom = false"
                >
                    <template x-if="images.length === 0">
                        <div class="absolute inset-0 flex items-center justify-center text-stone-400 text-sm">No image</div>
                    </template>

                    <template x-for="(img, i) in images" :key="i">
                        <img
                            :src="img"
                            :alt="'{{ addslashes($product->title) }}'"
                            :style="`position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                                     opacity:${i === active ? 1 : 0};
                                     transform:${zoom && i === active ? 'scale(1.05)' : 'scale(1)'};
                                     transition:opacity 700ms ease-in-out,transform 500ms ease-in-out;
                                     pointer-events:${i === active ? 'auto' : 'none'}`"
                        >
                    </template>


                </div>

                {{-- Prev / Next arrows — outside overflow-hidden, straddling the edge --}}
            </div>

            {{-- Thumbnail strip --}}
            <template x-if="images.length > 1">
                <div class="mt-3 flex gap-2 overflow-x-auto pb-1">
                    <template x-for="(img, i) in images" :key="i">
                        <button
                            @click="pick(i)"
                            class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all"
                            :class="i === active ? 'border-emerald-600 shadow-sm' : 'border-stone-200 opacity-60 hover:opacity-100'"
                        >
                            <img :src="img" class="w-full h-full object-cover">
                        </button>
                    </template>
                </div>
            </template>

            @if ($colorVariants->isNotEmpty())
                <div class="mt-5 border-t border-stone-200 pt-5">
                    <div class="flex items-end justify-between gap-4">
                        <div>
                            <p class="text-xs uppercase tracking-[0.18em] text-emerald-700 font-semibold">Available colors</p>
                            <p class="mt-1 text-sm text-stone-600">See the other colors available for this product.</p>
                        </div>
                    </div>

                    <div class="mt-3 grid grid-cols-2 gap-3 min-[420px]:grid-cols-3 sm:grid-cols-4 md:grid-cols-5">
                        @foreach ($colorVariants as $variantProduct)
                            <a href="{{ route('storefront.product', ['handle' => $variantProduct->handle]) }}"
                               class="group w-24"
                               title="{{ $variantProduct->title }}"
                               aria-label="View {{ $variantProduct->title }}">
                                <span class="block w-24 h-24 rounded-lg overflow-hidden border-2 border-stone-200 bg-stone-100 transition-all group-hover:border-emerald-600 group-hover:shadow-sm">
                                    <img src="{{ $variantProduct->image_url }}"
                                         alt="{{ $variantProduct->title }}"
                                         class="w-full h-full object-cover"
                                         loading="lazy">
                                </span>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Lightbox --}}
            <div
                x-show="lightbox"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                @click.self="lightbox = false"
                class="fixed inset-0 z-50 flex items-center justify-center p-4"
                style="display:none;background-color:rgba(0,0,0,0.6)"
            >
                {{-- Close --}}
                <button @click="lightbox = false" class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition z-10" aria-label="Close">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>

                {{-- Image --}}
                <img :src="images[active]" :alt="'{{ addslashes($product->title) }}'" class="object-contain rounded-xl shadow-2xl select-none" style="max-height:84vh;max-width:84vw">

                {{-- Lightbox arrows --}}
                <template x-if="images.length > 1">
                    <div>
                        <button @click="userPrev()" class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition z-10" aria-label="Previous">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                                <polyline points="15 18 9 12 15 6"/>
                            </svg>
                        </button>
                        <button @click="userNext()" class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition z-10" aria-label="Next">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                                <polyline points="9 18 15 12 9 6"/>
                            </svg>
                        </button>
                    </div>
                </template>
            </div>
        </div>

        {{-- Info --}}
        <div class="min-w-0">
            <div class="text-xs uppercase tracking-wide text-stone-500">{{ $product->vendor ?? 'Vida Mansa' }}</div>
            <h1 class="mt-1 break-words text-3xl font-semibold tracking-tight text-stone-900">{{ $product->title }}</h1>

            @if ($product->product_type)
                <div class="mt-2 inline-flex items-center text-xs px-2 py-0.5 rounded-full bg-stone-100 text-stone-700">{{ $product->product_type }}</div>
            @endif

            <div class="mt-4 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm font-bold text-stone-700">
                <svg class="h-5 w-5 text-emerald-700" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6.75m-9.75 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125a1.125 1.125 0 0 0 1.125-1.125V14.25m-17.5 0V5.625A1.125 1.125 0 0 1 3.375 4.5h9.75a1.125 1.125 0 0 1 1.125 1.125V14.25m-12 0h12m0-9.75h2.786c.298 0 .585.119.796.33l3.088 3.088c.211.211.33.498.33.796v5.536m-7 0h7" />
                </svg>
                <span>Factory-Direct Wholesale</span>
                <span class="text-stone-300" aria-hidden="true">&bull;</span>
                <span>${{ number_format($minimumOrder, 0) }} Minimum Order</span>
                <span class="text-stone-300" aria-hidden="true">&bull;</span>
                <span class="text-emerald-700">Free Shipping</span>
            </div>

            <div class="mt-8 space-y-4">
                    @php
                        $sortedVariants = $product->variants->sortBy('position');
                        $allVariantsOutOfStock = $sortedVariants->isNotEmpty()
                            && $sortedVariants->every(fn ($variant): bool => $stockResolver->statusFor($variant) === \App\Enums\StockStatus::OutOfStock);
                    @endphp

                    @if ($allVariantsOutOfStock)
                        <div class="overflow-hidden rounded-2xl border border-amber-200 bg-[#fffaf0] shadow-[0_18px_45px_rgba(120,53,15,0.08)]">
                            <div class="h-1 bg-amber-500"></div>
                            <div class="p-6 sm:p-7">
                                <div class="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
                                    <div class="max-w-xl">
                                        <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-700">Out of stock</p>
                                        <h2 class="mt-2 text-2xl font-semibold tracking-tight text-stone-950">Unfortunately, all items have been sold.</h2>
                                        <p class="mt-3 text-sm leading-6 text-stone-600">
                                            This product is currently unavailable. Please return to the catalog and choose another item for your order.
                                        </p>
                                    </div>

                                    <a href="{{ route('storefront.catalog') }}"
                                       class="inline-flex h-11 shrink-0 items-center justify-center rounded-xl bg-emerald-700 px-5 text-sm font-semibold uppercase tracking-[0.14em] text-white shadow-lg shadow-emerald-900/20 transition hover:-translate-y-0.5 hover:bg-emerald-800">
                                        Back to catalog
                                    </a>
                                </div>
                            </div>
                        </div>
                    @else
                    @foreach ($sortedVariants as $v)
                        @php
                            try {
                                $price = $priceResolver->priceFor($v, $customer);
                                $msrp = $priceResolver->compareAtFor($v, $customer);
                                $grossMargin = $priceResolver->grossMarginFor($v, $customer);
                            } catch (\App\Exceptions\WholesalePriceUnavailable) {
                                $price = null;
                                $msrp = null;
                                $grossMargin = null;
                            }
                            $stock = $stockResolver->statusFor($v);
                            $hasPrice = $price !== null;
                            $isAvailable = $hasPrice && $stock !== \App\Enums\StockStatus::OutOfStock;
                        @endphp

                        <form method="POST"
                              action="{{ route('storefront.cart.add') }}"
                              x-data="{ qty: 1 }"
                              class="relative overflow-hidden rounded-2xl border {{ $isAvailable ? 'border-emerald-200 bg-white shadow-[0_18px_45px_rgba(15,118,110,0.12)]' : 'border-stone-200 bg-stone-50 opacity-80' }}">
                            @csrf
                            <input type="hidden" name="variant_id" value="{{ $v->id }}">
                            <div class="absolute inset-x-0 top-0 h-1 {{ $isAvailable ? 'bg-emerald-700' : 'bg-stone-300' }}"></div>

                            <div class="p-5 sm:p-6">
                                <div class="flex flex-wrap items-start justify-between gap-4">
                                    <div>
                                        <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-stone-400">Wholesale price</p>
                                        <div class="mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1">
                                            @if ($hasPrice)
                                                <span class="text-4xl font-semibold tracking-tight text-stone-950">${{ number_format($price, 2) }}</span>
                                            @else
                                                <span class="text-base font-semibold text-amber-800">Temporarily unavailable</span>
                                            @endif
                                        </div>
                                        @if ($msrp !== null)
                                            <dl class="mt-4 flex items-center divide-x divide-stone-200 text-sm">
                                                <div class="pr-4">
                                                    <dt class="text-[10px] font-semibold uppercase tracking-[0.18em] text-stone-400" title="Manufacturer's Suggested Retail Price">MSRP</dt>
                                                    <dd class="mt-0.5 font-semibold tabular-nums text-stone-700">${{ number_format($msrp, 2) }}</dd>
                                                </div>
                                                @if ($grossMargin !== null)
                                                    <div class="pl-4">
                                                        <dt class="text-[10px] font-semibold uppercase tracking-[0.18em] text-stone-400">Gross margin</dt>
                                                        <dd class="mt-0.5 font-semibold tabular-nums text-emerald-700">{{ $grossMargin }}%</dd>
                                                    </div>
                                                @endif
                                            </dl>
                                        @endif
                                        <p class="mt-2 font-mono text-xs text-stone-500">SKU {{ $v->sku ?? 'N/A' }}</p>
                                    </div>

                                    <div class="text-right">
                                        <p class="mb-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-stone-400">Availability</p>
                                        <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold ring-1 ring-inset {{ $stock->badgeClass() }}">
                                            <span class="h-1.5 w-1.5 rounded-full {{ $isAvailable ? 'bg-emerald-600' : 'bg-stone-400' }}"></span>
                                            {{ $stock->label() }}
                                        </span>
                                    </div>
                                </div>

                                <div class="mt-6 grid gap-3 sm:grid-cols-[12rem_1fr]">
                                    <label class="block">
                                        <span class="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-stone-500">Quantity</span>
                                        <span class="flex h-12 overflow-hidden rounded-xl border border-stone-300 bg-stone-50 shadow-inner">
                                            <button type="button"
                                                    @click="qty = Math.max(1, qty - 1)"
                                                    @disabled(! $isAvailable)
                                                    class="flex w-12 items-center justify-center text-2xl leading-none text-stone-500 transition hover:bg-white hover:text-stone-900 disabled:cursor-not-allowed disabled:opacity-40"
                                                    aria-label="Decrease quantity">-</button>
                                            <input type="number"
                                                   name="quantity"
                                                   min="1"
                                                   max="9999"
                                                   x-model.number="qty"
                                                   @disabled(! $isAvailable)
                                                   class="vm-form-compact h-full w-full border-x border-stone-200 bg-white text-center text-base font-semibold text-stone-950 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:bg-stone-100 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none">
                                            <button type="button"
                                                    @click="qty = Math.min(9999, qty + 1)"
                                                    @disabled(! $isAvailable)
                                                    class="flex w-12 items-center justify-center text-2xl leading-none text-stone-500 transition hover:bg-white hover:text-stone-900 disabled:cursor-not-allowed disabled:opacity-40"
                                                    aria-label="Increase quantity">+</button>
                                        </span>
                                    </label>

                                    <button type="submit"
                                            @disabled(! $isAvailable)
                                            class="group mt-auto inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-emerald-700 px-5 text-sm font-semibold uppercase tracking-[0.14em] text-white shadow-lg shadow-emerald-900/20 transition hover:-translate-y-0.5 hover:bg-emerald-800 hover:shadow-xl disabled:cursor-not-allowed disabled:bg-stone-300 disabled:text-stone-500 disabled:shadow-none disabled:hover:translate-y-0">
                                        @if (! $hasPrice)
                                            Pricing unavailable
                                        @elseif ($isAvailable)
                                            <svg class="h-5 w-5 transition group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke-width="1.9" stroke="currentColor" aria-hidden="true">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437m0 0L7.5 14.25h9.75c1.01 0 1.895-.674 2.163-1.648l1.338-4.869A1.5 1.5 0 0 0 19.306 5.75H5.106m2.394 8.5L5.106 5.272M8.25 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm9.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
                                            </svg>
                                            Add to cart
                                        @else
                                            Out of stock
                                        @endif
                                    </button>
                                </div>
                            </div>
                        </form>
                    @endforeach
                    @endif
                </div>

            </div>

            @if ($product->body_html)
                <div class="prose prose-stone mt-10 min-w-0 max-w-none overflow-hidden break-words text-stone-700 lg:col-span-2 [&_iframe]:max-w-full [&_img]:h-auto [&_img]:max-w-full [&_table]:block [&_table]:max-w-full [&_table]:overflow-x-auto">
                    {!! $sanitizedDescription !!}
                </div>
            @endif
        </div>
    </div>

    @if ($related->isNotEmpty())
        <div class="mt-20">
            <h2 class="text-xl font-semibold tracking-tight text-stone-900 mb-6">More from {{ $product->vendor ?? 'this brand' }}</h2>
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach ($related as $r)
                    @php
                        $relatedPrice = $catalogPricePresenter->forProduct($r, $customer);
                        $relatedStock = $catalogStockPresenter->forProduct($r);
                    @endphp
                    <a href="{{ route('storefront.product', ['handle' => $r->handle]) }}" class="group rounded-xl border border-stone-200 bg-white overflow-hidden hover:shadow-md transition">
                        <div class="relative aspect-square bg-stone-100 flex items-center justify-center overflow-hidden">
                            @if ($r->image_url)
                                <img src="{{ $r->image_url }}" alt="{{ $r->title }}" class="w-full h-full object-cover transition duration-500 group-hover:scale-105" loading="lazy">
                            @endif
                            @if ($relatedStock)
                                <span class="absolute left-3 top-3 inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold shadow-sm ring-1 ring-inset {{ $relatedStock->badgeClass() }}">
                                    {{ $relatedStock->label() }}
                                </span>
                            @endif
                        </div>
                        <div class="p-4">
                            <div class="text-xs text-stone-500">{{ $r->vendor }}</div>
                            <div class="font-medium text-stone-900 group-hover:text-emerald-800 line-clamp-2">{{ $r->title }}</div>
                            <div class="mt-3 text-lg font-semibold tracking-tight text-stone-950">
                                {{ $relatedPrice?->from() ?? 'Price unavailable' }}
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    @endif

    <section class="mt-12 overflow-hidden rounded-2xl bg-emerald-700 text-white" style="margin-top: 3rem;">
        <div class="max-w-5xl mx-auto px-6 lg:px-8 py-16 text-center">
            <h2 class="text-3xl md:text-4xl font-semibold tracking-tight">Keep building your Vida Mansa order.</h2>
            <p class="mx-auto mt-3 max-w-xl text-emerald-50/85">Compare the full line, see current wholesale pricing, and reach the ${{ number_format($minimumOrder, 0) }} order minimum.</p>
            <p class="mt-2 font-semibold text-[#ffd400]">Free Shipping Across the U.S.</p>
            <div class="mt-8">
                <a href="{{ route('storefront.catalog') }}" class="inline-flex items-center rounded-md bg-[#ffd400] px-6 py-3 text-sm font-semibold text-[#007a55] shadow-sm transition hover:bg-yellow-300">
                    Back to Catalog
                </a>
            </div>
        </div>
    </section>
</section>

<script>
document.querySelectorAll('[data-action]').forEach(function (btn) {
    btn.addEventListener('click', function () {
        var input = btn.closest('form').querySelector('input[name="quantity"]');
        var val = parseInt(input.value) || 1;
        if (btn.dataset.action === 'dec' && val > 1) input.value = val - 1;
        if (btn.dataset.action === 'inc') input.value = val + 1;
    });
});
</script>
@endsection