

<?php $__env->startSection('title', $product->name); ?>
<?php $__env->startSection('meta_description', Str::limit($product->short_description ?? $product->description ?? $product->name, 160)); ?>

<?php $__env->startSection('content'); ?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <nav class="text-sm text-gray-500 mb-4 flex items-center gap-2 flex-wrap">
        <a href="<?php echo e(route('home')); ?>" class="hover:text-blinkit-green transition">Home</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="<?php echo e(route('categories.index')); ?>" class="hover:text-blinkit-green transition">Categories</a>
        <?php if($product->category): ?>
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="<?php echo e(route('categories.show', $product->category->slug)); ?>" class="hover:text-blinkit-green transition"><?php echo e($product->category->name); ?></a>
        <?php endif; ?>
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-gray-800 font-medium line-clamp-1"><?php echo e($product->name); ?></span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 mb-10">
        
        <div class="card overflow-hidden p-4">
            <?php
                $images = $product->images->sortBy('sort_order');
                $primary = $images->firstWhere('is_primary', true) ?? $images->first();
            ?>
            <div class="aspect-square bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl relative group mb-4 overflow-hidden">
                <img id="mainImage" src="<?php echo e(ImageHelper::urlOrPlaceholder($primary->image_path ?? null, 'https://images.unsplash.com/photo-1542838132-92c53300491e?w=600')); ?>" alt="<?php echo e($product->name); ?>" class="w-full h-full object-contain p-4 group-hover:scale-105 transition-transform duration-500 cursor-zoom-in" onerror="this.src='https://images.unsplash.com/photo-1542838132-92c53300491e?w=600'">
                <?php if($images->count() > 1): ?>
                <button onclick="document.getElementById('imageModal').classList.remove('hidden')" class="absolute top-4 right-4 bg-white/90 hover:bg-white text-gray-700 p-2 rounded-lg shadow-md transition">
                    <i class="fas fa-expand"></i>
                </button>
                <?php endif; ?>
            </div>
            <?php if($images->count() > 1): ?>
            <div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
                <?php $__currentLoopData = $images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php if($img->image_path): ?>
                <?php $thumbUrl = ImageHelper::urlOrPlaceholder($img->image_path, 'https://images.unsplash.com/photo-1542838132-92c53300491e?w=100'); ?>
                <button type="button" class="flex-shrink-0 w-20 h-20 rounded-xl overflow-hidden border-2 transition-all <?php echo e($loop->first ? 'border-blinkit-green shadow-md' : 'border-transparent hover:border-gray-300'); ?>" data-src="<?php echo e(ImageHelper::url($img->image_path)); ?>">
                    <img src="<?php echo e($thumbUrl); ?>" alt="" class="w-full h-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1542838132-92c53300491e?w=100'">
                </button>
                <?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <?php endif; ?>
        </div>

        
        <div class="space-y-6">
            <div>
                <h1 class="text-3xl sm:text-4xl font-black text-gray-900 mb-3"><?php echo e($product->name); ?></h1>
                <?php if($product->average_rating > 0 || ($product->ratings_count ?? 0) > 0): ?>
                <div class="flex items-center gap-3 mb-4">
                    <div class="flex items-center gap-1">
                        <?php for($i = 1; $i <= 5; $i++): ?>
                        <i class="fas fa-star text-sm <?php echo e($i <= round($product->average_rating ?? 0) ? 'text-blinkit-yellow' : 'text-gray-300'); ?>"></i>
                        <?php endfor; ?>
                    </div>
                    <span class="font-bold text-gray-800"><?php echo e(number_format($product->average_rating ?? 0, 1)); ?></span>
                    <span class="text-gray-500 text-sm">(<?php echo e($product->ratings_count ?? 0); ?> reviews)</span>
                    <a href="#reviews" class="text-blinkit-green text-sm font-semibold hover:underline ml-auto">View all reviews</a>
                </div>
                <?php endif; ?>
                <div class="flex items-baseline gap-3 mb-4">
                    <span class="text-3xl sm:text-4xl font-black text-blinkit-green"><?php echo e($currency_symbol); ?><?php echo e(number_format($product->min_price ?? $product->base_price, 0)); ?></span>
                    <?php if(($product->base_price ?? 0) > ($product->min_price ?? $product->base_price)): ?>
                    <span class="text-xl text-gray-400 line-through font-medium"><?php echo e($currency_symbol); ?><?php echo e(number_format($product->base_price, 0)); ?></span>
                    <?php $discountPct = round((($product->base_price - ($product->min_price ?? $product->base_price)) / $product->base_price) * 100); ?>
                    <span class="bg-red-500 text-white text-sm font-bold px-2 py-1 rounded-lg"><?php echo e($discountPct); ?>% OFF</span>
                    <?php endif; ?>
                </div>
            </div>

            
            <div class="card p-4 bg-gradient-to-r from-green-50 to-blue-50 border-2 border-green-100">
                <div class="flex items-center gap-4 flex-wrap">
                    <div class="flex items-center gap-2">
                        <i class="fas fa-truck text-blinkit-green text-lg"></i>
                        <span class="text-sm font-semibold text-gray-700">Delivery in <span class="text-blinkit-green font-bold">10 minutes</span></span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i>
                        <span class="text-sm font-semibold text-gray-700">In Stock</span>
                    </div>
                </div>
            </div>

            <?php if($product->short_description): ?>
            <div class="card p-5">
                <h3 class="font-bold text-gray-800 mb-2">About this product</h3>
                <p class="text-gray-600 leading-relaxed"><?php echo e($product->short_description); ?></p>
            </div>
            <?php endif; ?>

            
            <form action="<?php echo e(route('cart.add')); ?>" method="POST" class="card p-6" id="addToCartForm">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                <?php if($product->variants->isNotEmpty()): ?>
                <div class="mb-5">
                    <label class="block text-sm font-bold text-gray-700 mb-3">Select Variant</label>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <?php $__currentLoopData = $product->variants; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $v): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <label class="relative cursor-pointer">
                            <input type="radio" name="product_variant_id" value="<?php echo e($v->id); ?>" required class="peer sr-only" <?php echo e($loop->first ? 'checked' : ''); ?>>
                            <div class="card p-4 border-2 border-gray-200 peer-checked:border-blinkit-green peer-checked:bg-blinkit-green/5 transition-all hover:border-blinkit-green/50">
                                <div class="flex items-center justify-between">
                                    <span class="font-semibold text-gray-800"><?php echo e($v->name); ?></span>
                                    <span class="font-bold text-blinkit-green"><?php echo e($currency_symbol); ?><?php echo e(number_format($v->price, 0)); ?></span>
                                </div>
                                <?php if($v->stock_quantity > 0): ?>
                                <span class="text-xs text-green-600 mt-1 block">In Stock</span>
                                <?php else: ?>
                                <span class="text-xs text-red-600 mt-1 block">Out of Stock</span>
                                <?php endif; ?>
                            </div>
                        </label>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
                <?php endif; ?>
                <div class="mb-5">
                    <label class="block text-sm font-bold text-gray-700 mb-3">Quantity</label>
                    <div class="flex items-center gap-3">
                        <button type="button" onclick="changeQty(-1)" class="w-10 h-10 rounded-lg border-2 border-gray-200 hover:border-blinkit-green hover:bg-blinkit-green/5 transition flex items-center justify-center font-bold text-gray-600">
                            <i class="fas fa-minus"></i>
                        </button>
                        <input type="number" name="quantity" id="quantityInput" value="1" min="1" max="99" class="input w-20 text-center font-bold text-lg">
                        <button type="button" onclick="changeQty(1)" class="w-10 h-10 rounded-lg border-2 border-gray-200 hover:border-blinkit-green hover:bg-blinkit-green/5 transition flex items-center justify-center font-bold text-gray-600">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>
                <button type="submit" class="btn-primary w-full py-4 text-lg">
                    <i class="fas fa-cart-plus mr-2"></i> Add to Cart
                </button>
            </form>

            
            <div class="grid grid-cols-2 gap-3">
                <div class="trust-badge">
                    <i class="fas fa-leaf text-green-500"></i>
                    <span class="text-xs font-semibold text-gray-700">100% Fresh</span>
                </div>
                <div class="trust-badge">
                    <i class="fas fa-shield-alt text-purple-500"></i>
                    <span class="text-xs font-semibold text-gray-700">Quality Assured</span>
                </div>
                <div class="trust-badge">
                    <i class="fas fa-undo text-orange-500"></i>
                    <span class="text-xs font-semibold text-gray-700">Easy Returns</span>
                </div>
                <div class="trust-badge">
                    <i class="fas fa-headset text-blue-500"></i>
                    <span class="text-xs font-semibold text-gray-700">24/7 Support</span>
                </div>
            </div>
        </div>
    </div>

    
    <?php if($product->description): ?>
    <div class="card p-6 mb-10">
        <h2 class="text-xl font-black text-gray-900 mb-4">Product Details</h2>
        <div class="text-gray-600 leading-relaxed prose prose-sm max-w-none"><?php echo nl2br(e($product->description)); ?></div>
    </div>
    <?php endif; ?>

    
    <section class="card p-6 mb-10" id="reviews">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-black text-gray-900">Customer Reviews</h2>
            <?php if($product->average_rating > 0 || ($product->ratings_count ?? 0) > 0): ?>
            <div class="flex items-center gap-2 text-blinkit-yellow">
                <i class="fas fa-star text-xl"></i>
                <span class="font-black text-lg"><?php echo e(number_format($product->average_rating ?? 0, 1)); ?></span>
                <span class="text-gray-500 text-sm">· <?php echo e($product->ratings_count ?? 0); ?> reviews</span>
            </div>
            <?php endif; ?>
        </div>
        <?php if($product->productRatings && $product->productRatings->isNotEmpty()): ?>
        <div class="space-y-5">
            <?php $__currentLoopData = $product->productRatings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $review): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="border-b border-gray-100 pb-5 last:border-0 last:pb-0">
                <div class="flex items-start justify-between mb-2">
                    <div>
                        <span class="font-bold text-gray-900"><?php echo e($review->order && $review->order->user ? ($review->order->user->name ?: $review->order->user->email) : 'Customer'); ?></span>
                        <div class="flex items-center gap-1 mt-1">
                            <?php for($i = 1; $i <= 5; $i++): ?>
                            <i class="fas fa-star text-xs <?php echo e($i <= ($review->rating ?? 0) ? 'text-blinkit-yellow' : 'text-gray-300'); ?>"></i>
                            <?php endfor; ?>
                        </div>
                    </div>
                    <?php if($review->created_at): ?>
                    <span class="text-xs text-gray-400"><?php echo e($review->created_at->format('M j, Y')); ?></span>
                    <?php endif; ?>
                </div>
                <?php if($review->review_text): ?>
                <p class="text-gray-600 text-sm leading-relaxed mt-2"><?php echo e($review->review_text); ?></p>
                <?php endif; ?>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        <?php else: ?>
        <p class="text-gray-500 italic text-center py-8">No reviews yet. Be the first to review this product!</p>
        <?php endif; ?>
    </section>

    
    <?php if($related->isNotEmpty()): ?>
    <section class="mb-10">
        <h2 class="text-2xl font-black text-gray-900 mb-6">Similar Products</h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-5">
            <?php $__currentLoopData = $related; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php echo $__env->make('store.components.product-card', ['product' => $p], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </section>
    <?php endif; ?>
</div>


<div class="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-gray-200 shadow-floating p-4 z-40 md:hidden" id="stickyCartBar">
    <div class="max-w-7xl mx-auto flex items-center justify-between gap-4">
        <div>
            <p class="font-black text-blinkit-green text-lg"><?php echo e($currency_symbol); ?><?php echo e(number_format($product->min_price ?? $product->base_price, 0)); ?></p>
            <?php if(($product->base_price ?? 0) > ($product->min_price ?? $product->base_price)): ?>
            <p class="text-xs text-gray-400 line-through"><?php echo e($currency_symbol); ?><?php echo e(number_format($product->base_price, 0)); ?></p>
            <?php endif; ?>
        </div>
        <form action="<?php echo e(route('cart.add')); ?>" method="POST" class="flex-1 max-w-xs">
            <?php echo csrf_field(); ?>
            <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
            <?php if($product->variants->isNotEmpty()): ?>
            <input type="hidden" name="product_variant_id" value="<?php echo e($product->variants->first()->id); ?>" id="stickyVariantId">
            <?php endif; ?>
            <input type="hidden" name="quantity" value="1" id="stickyQuantity">
            <button type="submit" class="btn-primary w-full py-3">
                <i class="fas fa-cart-plus mr-2"></i> Add to Cart
            </button>
        </form>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
function changeQty(delta) {
    const input = document.getElementById('quantityInput');
    const stickyQty = document.getElementById('stickyQuantity');
    let val = parseInt(input.value) + delta;
    val = Math.max(1, Math.min(99, val));
    input.value = val;
    if(stickyQty) stickyQty.value = val;
}

document.querySelectorAll('[data-src]').forEach(function(btn) {
    btn.addEventListener('click', function() {
        document.getElementById('mainImage').src = this.dataset.src;
        document.querySelectorAll('[data-src]').forEach(function(b) { b.classList.remove('border-blinkit-green', 'shadow-md'); b.classList.add('border-transparent'); });
        this.classList.add('border-blinkit-green', 'shadow-md');
        this.classList.remove('border-transparent');
    });
});

// Update sticky variant when selected
<?php if($product->variants->isNotEmpty()): ?>
document.querySelectorAll('input[name="product_variant_id"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        document.getElementById('stickyVariantId').value = this.value;
    });
});
<?php endif; ?>

// Hide sticky bar on scroll up (optional enhancement)
let lastScroll = 0;
window.addEventListener('scroll', function() {
    const currentScroll = window.pageYOffset;
    const stickyBar = document.getElementById('stickyCartBar');
    if (currentScroll <= 0) {
        stickyBar.style.transform = 'translateY(0)';
    } else if (currentScroll > lastScroll && currentScroll > 200) {
        stickyBar.style.transform = 'translateY(100%)';
    } else {
        stickyBar.style.transform = 'translateY(0)';
    }
    lastScroll = currentScroll;
});
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('store.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\laragon\www\ReactNative\grocery-api\resources\views/store/products/show.blade.php ENDPATH**/ ?>