@extends('layouts.app')

@php
    $storeName = $shopSettings['shop_name'] ?? 'Orange Groceries';
    $productTitle = !empty($product->meta_title) ? $product->meta_title : ($product->name . ($product->weight ? ' (' . $product->weight . ')' : '') . ' - ' . $storeName);
    $productPrice = $product->discount_price ? $product->discount_price : $product->selling_price;
    $cleanDesc = Str::limit(strip_tags($product->description ?? ''), 150);
    $productDesc = !empty($product->meta_description) ? $product->meta_description : ('Buy ' . $product->name . ' online at best price of ₹' . $productPrice . ' from ' . $storeName . '.' . ($cleanDesc ? ' ' . $cleanDesc : ' Fast 30-minute delivery to your doorstep.'));
    $productKeywords = !empty($product->meta_keywords) ? $product->meta_keywords : implode(', ', array_filter([
        $product->name,
        'buy ' . $product->name . ' online',
        $product->category->name ?? null,
        $product->subcategory->name ?? null,
        $product->brand ?? null,
        'grocery online',
        $storeName
    ]));
    $canonicalUrl = !empty($product->canonical_url) ? $product->canonical_url : route('products.show', $product->slug);
    $productImage = $product->image ? (Str::startsWith($product->image, 'http') ? $product->image : asset($product->image)) : '';

    $schemaData = [
        "@context" => "https://schema.org/",
        "@type" => "Product",
        "name" => $product->name,
        "image" => $productImage,
        "description" => $cleanDesc ?: $productDesc,
        "sku" => $product->sku ?? ('SKU-' . $product->id),
        "offers" => [
            "@type" => "Offer",
            "url" => route('products.show', $product->slug),
            "priceCurrency" => "INR",
            "price" => (string)$productPrice,
            "availability" => $product->stock_quantity > 0 ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
            "itemCondition" => "https://schema.org/NewCondition"
        ]
    ];
    if (!empty($product->brand)) {
        $schemaData["brand"] = [
            "@type" => "Brand",
            "name" => $product->brand
        ];
    }
@endphp

@section('title', $productTitle)
@section('meta_description', $productDesc)
@section('meta_keywords', $productKeywords)
@section('canonical', $canonicalUrl)
@section('og_type', 'product')
@section('og_image', $productImage)

@section('structured_data')
<script type="application/ld+json">
{!! json_encode($schemaData, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
</script>
@endsection

@php
    $firstVariant = $product->variants->first();
    $defaultWeight = $firstVariant ? ($firstVariant->weight ?: $firstVariant->variant_name) : ($product->weight ?? '');
    $defaultDiscount = $firstVariant ? $firstVariant->discount_percent : $product->discount_percent;
    $defaultSku = $firstVariant && $firstVariant->sku ? $firstVariant->sku : ($product->sku ?? 'GROC-PROD');
    $defaultBarcode = $firstVariant && $firstVariant->barcode ? $firstVariant->barcode : ($product->barcode ?? '');
@endphp

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" 
     x-data="{ 
         selectedVariant: {{ $firstVariant ? $firstVariant->id : 'null' }},
         selectedPrice: {{ $firstVariant ? $firstVariant->effective_price : $product->effective_price }},
         selectedMrp: {{ $firstVariant ? $firstVariant->selling_price : $product->selling_price }},
         selectedStock: {{ $firstVariant ? $firstVariant->stock_quantity : $product->stock_quantity }},
         selectedWeight: '{{ addslashes($defaultWeight) }}',
         selectedDiscount: {{ $defaultDiscount }},
         selectedSku: '{{ addslashes($defaultSku) }}',
         selectedBarcode: '{{ addslashes($defaultBarcode) }}',
         qty: 1
     }">
    
    <!-- Breadcrumb -->
    <nav class="flex text-xs font-semibold text-slate-400 mb-6 gap-2">
        <a href="{{ route('home') }}" class="hover:text-brand-600">Home</a>
        <span>/</span>
        <a href="{{ route('products.index', ['category' => $product->category->slug ?? '']) }}" class="hover:text-brand-600">{{ $product->category->name ?? 'Category' }}</a>
        <span>/</span>
        <span class="text-slate-800 truncate max-w-xs">{{ $product->name }}</span>
    </nav>

    <!-- PDP Main Grid -->
    <div class="bg-white rounded-3xl p-6 sm:p-10 border border-slate-200/80 shadow-xl shadow-slate-200/40 grid grid-cols-1 md:grid-cols-2 gap-10">
        
        <!-- Left: Image Gallery & BigBasket Zoom Lens -->
        @php
            $galleryImages = is_array($product->multiple_images) && count($product->multiple_images) > 0 
                ? array_values(array_filter($product->multiple_images))
                : [$product->image];
            if (!in_array($product->image, $galleryImages)) {
                array_unshift($galleryImages, $product->image);
            }
            $galleryImages = array_values(array_unique($galleryImages));
        @endphp
        <div class="space-y-4 relative" 
             x-data="{ 
                 activeImage: '{{ $galleryImages[0] }}',
                 isZooming: false,
                 bgPosX: '50%',
                 bgPosY: '50%',
                 handleMouseMove(e) {
                     const rect = this.$refs.imgContainer.getBoundingClientRect();
                     const x = e.clientX - rect.left;
                     const y = e.clientY - rect.top;
                     
                     const percentX = Math.max(0, Math.min(100, (x / rect.width) * 100));
                     const percentY = Math.max(0, Math.min(100, (y / rect.height) * 100));
                     
                     this.bgPosX = `${percentX.toFixed(1)}%`;
                     this.bgPosY = `${percentY.toFixed(1)}%`;
                     this.isZooming = true;
                 },
                 handleMouseLeave() {
                     this.isZooming = false;
                 }
             }">
            
            <!-- Main Product Image Container -->
            <div x-ref="imgContainer"
                 @mousemove="handleMouseMove($event)"
                 @mouseenter="isZooming = true"
                 @mouseleave="handleMouseLeave()"
                 class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200/80 flex items-center justify-center h-80 sm:h-96 relative overflow-hidden cursor-crosshair select-none">
                
                <span x-show="selectedDiscount > 0" 
                      x-text="selectedDiscount + '% OFF'"
                      class="absolute top-4 left-4 bg-rose-500 text-white text-xs font-black px-3 py-1 rounded-full uppercase shadow z-10">
                </span>

                <img :src="activeImage" alt="{{ $product->name }}" class="max-h-full max-w-full object-contain pointer-events-none">
            </div>

            <!-- BigBasket-Style Clean Zoom Preview Box (Gentle 130% Magnification) -->
            <div x-show="isZooming" 
                 x-cloak 
                 x-transition:enter="transition ease-out duration-150"
                 x-transition:enter-start="opacity-0 scale-98"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-100"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-98"
                 class="hidden md:block absolute left-[103%] top-0 z-50 w-[480px] h-[380px] bg-white rounded-2xl border border-slate-200 shadow-2xl overflow-hidden pointer-events-none">
                <div class="w-full h-full bg-white bg-no-repeat"
                     :style="`
                         background-image: url('${activeImage}');
                         background-size: 130%;
                         background-position: ${bgPosX} ${bgPosY};
                     `">
                </div>
            </div>

            @if(count($galleryImages) > 1)
            <div class="flex items-center gap-3 overflow-x-auto pb-2 scrollbar-thin">
                @foreach($galleryImages as $index => $gImg)
                    <button type="button" 
                            @click="activeImage = '{{ $gImg }}'"
                            :class="activeImage === '{{ $gImg }}' ? 'border-brand-600 ring-2 ring-brand-500/20 scale-105 opacity-100' : 'border-slate-200 opacity-60 hover:opacity-100'"
                            class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl border-2 bg-slate-50 p-2 flex items-center justify-center shrink-0 transition-all cursor-pointer">
                        <img src="{{ $gImg }}" class="max-h-full max-w-full object-contain">
                    </button>
                @endforeach
            </div>
            @endif
        </div>

        <!-- Right: Details & Buying Box -->
        <div class="space-y-6">
            
            <div>
                <div class="flex items-center gap-2 mb-2 flex-wrap">
                    <span class="bg-brand-50 text-brand-700 font-extrabold text-xs px-3 py-1 rounded-full uppercase tracking-wider">
                        {{ $product->brand ?? 'Daily Essentials' }}
                    </span>
                    @if($product->subcategory)
                        <span class="text-xs text-slate-400 font-semibold">• {{ $product->subcategory->name }}</span>
                    @endif
                    <template x-if="selectedWeight">
                        <span class="bg-amber-100 text-amber-900 border border-amber-200 font-black text-xs px-3 py-1 rounded-full uppercase tracking-wider shadow-2xs">
                            <i class="fa-solid fa-weight-hanging mr-1 text-amber-700"></i> PACK SIZE: <span x-text="selectedWeight"></span>
                        </span>
                    </template>
                </div>

                <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight leading-snug">
                    {{ $product->name }}
                    <template x-if="selectedWeight">
                        <span class="text-lg sm:text-xl font-bold text-slate-500 font-mono ml-1" x-text="'(' + selectedWeight + ')'"></span>
                    </template>
                </h1>
                
                <p class="text-xs text-slate-500 font-medium mt-1">
                    SKU: <code class="font-mono text-slate-700" x-text="selectedSku"></code> 
                    <template x-if="selectedBarcode">
                        <span>| Barcode: <code class="font-mono text-slate-700" x-text="selectedBarcode"></code></span>
                    </template>
                </p>
            </div>

            <!-- Price & Discount -->
            <div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 flex items-baseline gap-3">
                <span class="text-3xl font-black text-brand-700" x-text="'₹' + selectedPrice.toFixed(2)">₹{{ number_format($product->effective_price, 2) }}</span>
                <span class="text-sm text-slate-400 line-through" x-show="selectedMrp > selectedPrice" x-text="'MRP ₹' + selectedMrp.toFixed(2)">MRP ₹{{ number_format($product->selling_price, 2) }}</span>
                <span class="text-xs font-bold text-emerald-700 bg-emerald-100 px-2.5 py-0.5 rounded-full ml-auto">Inclusive of all taxes (GST {{ $product->gst_percent }}%)</span>
            </div>

            <!-- BigBasket-Style Pack Sizes Selector -->
            @if($product->variants->count() > 0)
            <div class="space-y-2.5">
                <div class="flex items-center justify-between">
                    <label class="text-sm font-extrabold text-slate-900">Pack sizes</label>
                    <span class="text-xs font-semibold text-slate-400">{{ $product->variants->count() }} options available</span>
                </div>
                
                <div class="space-y-2">
                    @foreach($product->variants as $variant)
                        <div @click="
                                selectedVariant = {{ $variant->id }};
                                selectedPrice = {{ $variant->effective_price }};
                                selectedMrp = {{ $variant->selling_price }};
                                selectedStock = {{ $variant->stock_quantity }};
                                selectedWeight = '{{ addslashes($variant->weight ?: $variant->variant_name) }}';
                                selectedDiscount = {{ $variant->discount_percent }};
                                selectedSku = '{{ addslashes($variant->sku ?: ($product->sku ?? 'GROC-PROD')) }}';
                                selectedBarcode = '{{ addslashes($variant->barcode ?: ($product->barcode ?? '')) }}';
                             "
                             :class="selectedVariant === {{ $variant->id }} ? 'border-emerald-600 bg-emerald-50/40 ring-2 ring-emerald-500/20' : 'border-slate-200 hover:border-slate-300 bg-white'"
                             class="p-3.5 sm:p-4 rounded-2xl border-2 transition cursor-pointer flex items-center justify-between gap-4">
                            
                            <div class="space-y-0.5">
                                <div class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2">
                                    <span>{{ $variant->variant_name }}</span>
                                    @if($variant->stock_quantity <= 0)
                                        <span class="text-[10px] font-bold text-rose-500 bg-rose-50 border border-rose-200 px-2 py-0.5 rounded-full">Out of Stock</span>
                                    @endif
                                </div>
                                <div class="text-[11px] text-slate-400 font-semibold flex items-center gap-1.5">
                                    <span>{{ $variant->weight ?: $variant->variant_name }}</span>
                                    <span>•</span>
                                    <span class="text-emerald-700 font-bold"><i class="fa-solid fa-bolt text-amber-500 text-[10px]"></i> 30 MINS</span>
                                </div>
                            </div>

                            <div class="flex items-center gap-3 shrink-0">
                                <div class="text-right">
                                    <div class="flex items-baseline gap-1.5 justify-end">
                                        <span class="text-base sm:text-lg font-black text-slate-900">₹{{ number_format($variant->effective_price, 2) }}</span>
                                        @if($variant->selling_price > $variant->effective_price)
                                            <span class="text-xs text-slate-400 line-through">₹{{ number_format($variant->selling_price, 2) }}</span>
                                        @endif
                                    </div>
                                    @if($variant->discount_percent > 0)
                                        <span class="text-[10px] font-extrabold text-emerald-700 bg-emerald-100 px-2 py-0.5 rounded-full">
                                            {{ $variant->discount_percent }}% OFF
                                        </span>
                                    @endif
                                </div>

                                <div class="w-6 h-6 rounded-full flex items-center justify-center transition"
                                     :class="selectedVariant === {{ $variant->id }} ? 'bg-emerald-600 text-white shadow-xs' : 'border border-slate-200 text-transparent'">
                                    <i class="fa-solid fa-check text-xs"></i>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Stock Availability Badge -->
            <div class="flex items-center gap-2 text-xs font-extrabold">
                <span class="text-slate-500">Availability:</span>
                <template x-if="selectedStock > 0">
                    <span class="text-emerald-700 bg-emerald-50 border border-emerald-200 px-3.5 py-1 rounded-full flex items-center gap-1.5 shadow-2xs">
                        <span class="w-2 h-2 rounded-full bg-emerald-500"></span> In Stock ( <strong x-text="selectedStock" class="font-mono"></strong> packs available )
                    </span>
                </template>
                <template x-if="selectedStock <= 0">
                    <span class="text-rose-700 bg-rose-50 border border-rose-200 px-3.5 py-1 rounded-full flex items-center gap-1.5">
                        <span class="w-2 h-2 rounded-full bg-rose-500"></span> Out of Stock
                    </span>
                </template>
            </div>

            <!-- Action Controls: Add to Cart & Wishlist -->
            <div class="pt-2 flex flex-col sm:flex-row gap-4">
                <form action="{{ route('cart.add') }}" method="POST" class="flex-1 flex flex-col sm:flex-row gap-4">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <input type="hidden" name="variant_id" :value="selectedVariant">
                    <input type="hidden" name="quantity" :value="qty">

                    <!-- Quantity Buttons -->
                    <div class="flex items-center bg-slate-100 rounded-2xl p-1.5 border border-slate-200 w-fit">
                        <button type="button" @click="if(qty > 1) qty--" class="w-9 h-9 rounded-xl bg-white hover:bg-slate-200 text-slate-700 font-bold flex items-center justify-center transition shadow-sm"><i class="fa-solid fa-minus text-xs"></i></button>
                        <span class="w-12 text-center font-extrabold text-sm text-slate-900" x-text="qty">1</span>
                        <button type="button" @click="qty++" class="w-9 h-9 rounded-xl bg-white hover:bg-slate-200 text-slate-700 font-bold flex items-center justify-center transition shadow-sm"><i class="fa-solid fa-plus text-xs"></i></button>
                    </div>

                    @auth
                        <button type="submit" 
                                :disabled="selectedStock <= 0"
                                :class="selectedStock <= 0 ? 'bg-slate-200 text-slate-400 cursor-not-allowed' : 'bg-brand-600 hover:bg-brand-700 text-white shadow-xl shadow-brand-600/30'"
                                class="flex-1 font-extrabold text-sm py-3.5 px-6 rounded-2xl transition flex items-center justify-center gap-2">
                            <i class="fa-solid fa-basket-shopping text-base"></i>
                            <span>Add To Cart</span>
                        </button>
                    @else
                        <button type="button" 
                                onclick="window.showCustomerLoginModal('add_to_cart')"
                                :disabled="selectedStock <= 0"
                                :class="selectedStock <= 0 ? 'bg-slate-200 text-slate-400 cursor-not-allowed' : 'bg-brand-600 hover:bg-brand-700 text-white shadow-xl shadow-brand-600/30'"
                                class="flex-1 font-extrabold text-sm py-3.5 px-6 rounded-2xl transition flex items-center justify-center gap-2">
                            <i class="fa-solid fa-basket-shopping text-base"></i>
                            <span>Add To Cart</span>
                        </button>
                    @endauth
                </form>

                <form action="{{ route('wishlist.toggle', $product->id) }}" method="POST">
                    @csrf
                    @auth
                        <button type="submit" class="p-3.5 rounded-2xl border border-slate-200 hover:border-rose-300 hover:bg-rose-50 text-slate-400 hover:text-rose-600 transition h-full flex items-center justify-center">
                            <i class="fa-solid fa-heart text-lg"></i>
                        </button>
                    @else
                        <button type="button" onclick="window.showCustomerLoginModal('wishlist')" class="p-3.5 rounded-2xl border border-slate-200 hover:border-rose-300 hover:bg-rose-50 text-slate-400 hover:text-rose-600 transition h-full flex items-center justify-center">
                            <i class="fa-solid fa-heart text-lg"></i>
                        </button>
                    @endauth
                </form>
            </div>

            <!-- Product Description -->
            <div class="border-t border-slate-100 pt-6">
                <h4 class="text-xs font-extrabold text-slate-900 uppercase tracking-wider mb-2">Product Description</h4>
                <p class="text-xs text-slate-600 leading-relaxed font-medium">
                    {{ $product->description ?? 'High-grade grocery product directly sourced from verified brands and quality suppliers. Guaranteed purity and freshness delivered to your door.' }}
                </p>
            </div>
        </div>
    </div>

    <!-- Related Products -->
    @if(count($relatedProducts) > 0)
    <div class="mt-16">
        <h3 class="text-xl font-extrabold text-slate-900 mb-6">Related Products You May Like</h3>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6">
            @foreach($relatedProducts as $rel)
                @include('customer.components.product_card', ['product' => $rel])
            @endforeach
        </div>
    </div>
    @endif
</div>
@endsection