@extends('digitalmenu::layouts.public')

@section('title', ($product->name ?? 'Item') . ' — ' . ($shop->name ?? 'Shop'))

@section('header-left')
<a href="{{ url('/digital-menu/shop/' . $qr) }}"
   class="text-slate-600 hover:opacity-70 active:scale-95 transition-all flex items-center justify-center p-1">
    <span class="material-symbols-outlined text-2xl">arrow_back</span>
</a>
@endsection

@section('content')
<main class="flex-1 w-full max-w-3xl mx-auto pb-16">

    @php
        $galleries   = $product->productGalleries ?? collect();
        $hasGallery  = $galleries->count() > 0;
        $allImages   = collect(array_merge([$product->picture_url], $galleries->pluck('picture_url')->toArray()));
        $discountPrice = $product->is_discount ? $product->getDiscountPrice($product->unit_price) : false;
    @endphp

    <!-- Hero / Image Carousel -->
    <div class="relative w-full aspect-square sm:aspect-[4/3] overflow-hidden bg-surface-container-low" id="hero-carousel">
        <!-- Slides -->
        <div class="flex h-full transition-transform duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]" id="hero-track">
            @foreach($allImages as $imgSrc)
            <div class="min-w-full h-full flex-shrink-0">
                <img src="{{ $imgSrc }}"
                     alt="{{ $product->name }}"
                     onerror="this.src='{{ config('global.s3_path') . 'shop/' . $shop->logo }}'"
                     class="w-full h-full object-cover"/>
            </div>
            @endforeach
        </div>

        <!-- Gradient overlay -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none"></div>

        <!-- Badges -->
        @if($product->is_new_arrived || $product->is_discount)
        <div class="absolute bottom-5 left-5 flex items-center gap-2">
            @if($product->is_new_arrived)
                <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-primary text-on-primary text-xs font-bold tracking-wider shadow-xl uppercase">New Arrival</span>
            @endif
            @if($product->is_discount)
                <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-orange-500 text-white text-xs font-bold tracking-wider shadow-xl uppercase">
                    @if($product->discount_amount) {{ (int) $product->discount_amount }}% Off @else Promo @endif
                </span>
            @endif
        </div>
        @endif

        <!-- Prev / Next arrows (only when gallery exists) -->
        @if($hasGallery)
        <button id="hero-prev"
                class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/40 text-white flex items-center justify-center backdrop-blur-sm hover:bg-black/60 transition-colors z-10">
            <span class="material-symbols-outlined text-xl">chevron_left</span>
        </button>
        <button id="hero-next"
                class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-black/40 text-white flex items-center justify-center backdrop-blur-sm hover:bg-black/60 transition-colors z-10">
            <span class="material-symbols-outlined text-xl">chevron_right</span>
        </button>
        @endif
    </div>

    <!-- Thumbnail Strip (only when gallery exists) -->
    @if($hasGallery)
    <div class="flex gap-2 px-4 pt-3 overflow-x-auto hide-scrollbar" id="hero-thumbs">
        @foreach($allImages as $i => $imgSrc)
        <button type="button"
                data-index="{{ $i }}"
                class="hero-thumb flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all
                       {{ $i === 0 ? 'border-primary' : 'border-transparent opacity-60' }}">
            <img src="{{ $imgSrc }}"
                 alt=""
                 onerror="this.src='{{ config('global.s3_path') . 'shop/' . $shop->logo }}'"
                 class="w-full h-full object-cover"/>
        </button>
        @endforeach
    </div>
    @endif

    <!-- Product Info -->
    <section class="px-6 pt-7">

        <!-- Breadcrumb -->
        <nav class="text-xs uppercase tracking-widest text-slate-400 mb-4 flex items-center gap-1.5">
            <a href="{{ url('/digital-menu/shop/' . $qr) }}" class="hover:text-slate-700 transition-colors">Menu</a>
            @if(!empty($categoryName))
            <span>/</span>
            <span class="text-slate-500">{{ $categoryName }}</span>
            @endif
        </nav>

        <!-- Name & Price -->
        <div class="flex flex-col md:flex-row md:justify-between md:items-start gap-2 mb-5">
            <h1 class="text-3xl font-extrabold text-zinc-900 leading-tight font-['Plus_Jakarta_Sans']">{{ $product->name }}</h1>
            <div class="shrink-0">
                @if($discountPrice !== false)
                    <div class="flex items-baseline gap-2">
                        <span class="text-2xl font-bold text-primary">{{ $currencySymbol }}{{ number_format($discountPrice, 2) }}</span>
                        <span class="text-base text-slate-400 line-through">{{ $currencySymbol }}{{ number_format($product->unit_price, 2) }}</span>
                    </div>
                @else
                    <span class="text-2xl font-bold text-primary">{{ $currencySymbol }}{{ number_format($product->unit_price, 2) }}</span>
                @endif
            </div>
        </div>

        <!-- Description -->
        @if(!empty($product->description) || !empty($product->short_description))
        <p class="text-base text-zinc-600 leading-relaxed mb-8 font-light">
            {!! nl2br(e($product->description ?: $product->short_description)) !!}
        </p>
        @endif

        <div class="h-px bg-zinc-200 mb-8"></div>

        <!-- Meta: Category / SKU -->
        <div class="flex flex-col gap-3 mb-8">
            @if(!empty($categoryName))
            <div class="flex items-center gap-3">
                <span class="material-symbols-outlined text-primary text-lg">category</span>
                <div>
                    <p class="text-xs uppercase tracking-widest text-slate-400 font-semibold">Category</p>
                    <p class="text-sm text-zinc-700 font-medium">{{ $categoryName }}</p>
                </div>
            </div>
            @endif
            @if(!empty($product->sku))
            <div class="flex items-center gap-3">
                <span class="material-symbols-outlined text-primary text-lg">qr_code</span>
                <div>
                    <p class="text-xs uppercase tracking-widest text-slate-400 font-semibold">SKU</p>
                    <p class="text-sm text-zinc-700 font-medium">{{ $product->sku }}</p>
                </div>
            </div>
            @endif
        </div>

    </section>

    <!-- Related Items -->
    @if($related->count() > 0)
    <section class="px-6 border-t border-zinc-100 pt-8">
        <h2 class="font-['Plus_Jakarta_Sans'] text-xl font-bold text-zinc-900 mb-5">You May Also Like</h2>
        <div class="flex flex-col gap-grid-gutter">
            @foreach($related as $item)
            @php $itemDiscount = $item->is_discount ? $item->getDiscountPrice($item->unit_price) : false; @endphp
            <a href="{{ route('digitalmenu.public.product', ['qr' => $qr, 'id' => $item->id]) }}"
               class="bg-surface-container-lowest rounded-xl p-4 flex gap-4 shadow-sm border border-zinc-50 hover:shadow-md active:scale-[0.99] transition-all">
                <div class="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0 bg-surface-container-low">
                    <img src="{{ $item->picture_url }}"
                         alt="{{ $item->name }}"
                         onerror="this.src='{{ config('global.s3_path') . 'shop/' . $shop->logo }}'"
                         class="w-full h-full object-cover"/>
                </div>
                <div class="flex-1 flex flex-col justify-between min-w-0">
                    <div>
                        <h4 class="font-semibold text-zinc-900 truncate text-sm">{{ $item->name }}</h4>
                        @if($item->is_new_arrived || $item->is_discount)
                        <div class="flex items-center gap-1.5 mt-1">
                            @if($item->is_new_arrived)
                                <span class="bg-primary text-on-primary px-2 py-0.5 rounded font-label-bold text-[10px] uppercase">New</span>
                            @endif
                            @if($item->is_discount)
                                <span class="bg-orange-100 text-orange-600 px-2 py-0.5 rounded font-label-bold text-[10px] uppercase">Promo</span>
                            @endif
                        </div>
                        @endif
                        @if(!empty($item->short_description))
                        <p class="text-xs text-zinc-500 line-clamp-1 mt-0.5">{{ $item->short_description }}</p>
                        @endif
                    </div>
                    <div class="mt-2">
                        @if($itemDiscount !== false)
                            <div class="flex items-center gap-2">
                                <span class="text-primary font-bold text-sm">{{ $currencySymbol }}{{ number_format($itemDiscount, 2) }}</span>
                                <span class="text-slate-400 line-through text-xs">{{ $currencySymbol }}{{ number_format($item->unit_price, 2) }}</span>
                            </div>
                        @else
                            <span class="text-primary font-bold text-sm">{{ $currencySymbol }}{{ number_format($item->unit_price, 2) }}</span>
                        @endif
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </section>
    @endif

</main>
@endsection

@section('scripts')
@if($hasGallery)
<script>
(function () {
    const track  = document.getElementById('hero-track');
    const thumbs = document.querySelectorAll('.hero-thumb');
    const total  = {{ $allImages->count() }};
    let   current = 0;

    function goTo(index) {
        current = (index + total) % total;
        track.style.transform = 'translateX(-' + (current * 100) + '%)';
        thumbs.forEach(function (t, i) {
            t.classList.toggle('border-primary', i === current);
            t.classList.toggle('opacity-60',     i !== current);
            t.classList.toggle('border-transparent', i !== current);
        });
    }

    document.getElementById('hero-prev').addEventListener('click', function () { goTo(current - 1); });
    document.getElementById('hero-next').addEventListener('click', function () { goTo(current + 1); });
    thumbs.forEach(function (t) {
        t.addEventListener('click', function () { goTo(parseInt(this.dataset.index)); });
    });
})();
</script>
@endif
@endsection