@extends('store.layouts.app')

@section('title', $product->name)
@section('meta_description', Str::limit($product->short_description ?? $product->description ?? $product->name, 160))

@section('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="{{ route('home') }}" class="hover:text-blinkit-green transition">Home</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="{{ route('categories.index') }}" class="hover:text-blinkit-green transition">Categories</a>
        @if($product->category)
        <i class="fas fa-chevron-right text-xs"></i>
        <a href="{{ route('categories.show', $product->category->slug) }}" class="hover:text-blinkit-green transition">{{ $product->category->name }}</a>
        @endif
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-gray-800 font-medium line-clamp-1">{{ $product->name }}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 mb-10">
        {{-- Gallery --}}
        <div class="card overflow-hidden p-4">
            @php
                $images = $product->images->sortBy('sort_order');
                $primary = $images->firstWhere('is_primary', true) ?? $images->first();
            @endphp
            <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="{{ \App\Helpers\ImageHelper::urlOrPlaceholder($primary->image_path ?? null, 'https://images.unsplash.com/photo-1542838132-92c53300491e?w=600') }}" alt="{{ $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'">
                @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>
                @endif
            </div>
            @if($images->count() > 1)
            <div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
                @foreach($images as $img)
                @if($img->image_path)
                @php $thumbUrl = \App\Helpers\ImageHelper::urlOrPlaceholder($img->image_path, 'https://images.unsplash.com/photo-1542838132-92c53300491e?w=100'); @endphp
                <button type="button" class="flex-shrink-0 w-20 h-20 rounded-xl overflow-hidden border-2 transition-all {{ $loop->first ? 'border-blinkit-green shadow-md' : 'border-transparent hover:border-gray-300' }}" data-src="{{ \App\Helpers\ImageHelper::url($img->image_path) }}">
                    <img src="{{ $thumbUrl }}" alt="" class="w-full h-full object-cover" onerror="this.src='https://images.unsplash.com/photo-1542838132-92c53300491e?w=100'">
                </button>
                @endif
                @endforeach
            </div>
            @endif
        </div>

        {{-- Info --}}
        <div class="space-y-6">
            <div>
                <h1 class="text-3xl sm:text-4xl font-black text-gray-900 mb-3">{{ $product->name }}</h1>
                @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">
                        @for($i = 1; $i <= 5; $i++)
                        <i class="fas fa-star text-sm {{ $i <= round($product->average_rating ?? 0) ? 'text-blinkit-yellow' : 'text-gray-300' }}"></i>
                        @endfor
                    </div>
                    <span class="font-bold text-gray-800">{{ number_format($product->average_rating ?? 0, 1) }}</span>
                    <span class="text-gray-500 text-sm">({{ $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>
                @endif
                <div class="flex items-baseline gap-3 mb-4">
                    <span class="text-3xl sm:text-4xl font-black text-blinkit-green">{{ $currency_symbol }}{{ number_format($product->min_price ?? $product->base_price, 0) }}</span>
                    @if(($product->base_price ?? 0) > ($product->min_price ?? $product->base_price))
                    <span class="text-xl text-gray-400 line-through font-medium">{{ $currency_symbol }}{{ number_format($product->base_price, 0) }}</span>
                    @php $discountPct = round((($product->base_price - ($product->min_price ?? $product->base_price)) / $product->base_price) * 100); @endphp
                    <span class="bg-red-500 text-white text-sm font-bold px-2 py-1 rounded-lg">{{ $discountPct }}% OFF</span>
                    @endif
                </div>
            </div>

            {{-- Delivery & Trust Info --}}
            <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>

            @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">{{ $product->short_description }}</p>
            </div>
            @endif

            {{-- Add to Cart Form --}}
            <form action="{{ route('cart.add') }}" method="POST" class="card p-6" id="addToCartForm">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                @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">
                        @foreach($product->variants as $v)
                        <label class="relative cursor-pointer">
                            <input type="radio" name="product_variant_id" value="{{ $v->id }}" required class="peer sr-only" {{ $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">{{ $v->name }}</span>
                                    <span class="font-bold text-blinkit-green">{{ $currency_symbol }}{{ number_format($v->price, 0) }}</span>
                                </div>
                                @if($v->stock_quantity > 0)
                                <span class="text-xs text-green-600 mt-1 block">In Stock</span>
                                @else
                                <span class="text-xs text-red-600 mt-1 block">Out of Stock</span>
                                @endif
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
                @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>

            {{-- Trust Badges --}}
            <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>

    {{-- Description & Nutrition --}}
    @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">{!! nl2br(e($product->description)) !!}</div>
    </div>
    @endif

    {{-- Reviews --}}
    <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>
            @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">{{ number_format($product->average_rating ?? 0, 1) }}</span>
                <span class="text-gray-500 text-sm">· {{ $product->ratings_count ?? 0 }} reviews</span>
            </div>
            @endif
        </div>
        @if($product->productRatings && $product->productRatings->isNotEmpty())
        <div class="space-y-5">
            @foreach($product->productRatings as $review)
            <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">{{ $review->order && $review->order->user ? ($review->order->user->name ?: $review->order->user->email) : 'Customer' }}</span>
                        <div class="flex items-center gap-1 mt-1">
                            @for($i = 1; $i <= 5; $i++)
                            <i class="fas fa-star text-xs {{ $i <= ($review->rating ?? 0) ? 'text-blinkit-yellow' : 'text-gray-300' }}"></i>
                            @endfor
                        </div>
                    </div>
                    @if($review->created_at)
                    <span class="text-xs text-gray-400">{{ $review->created_at->format('M j, Y') }}</span>
                    @endif
                </div>
                @if($review->review_text)
                <p class="text-gray-600 text-sm leading-relaxed mt-2">{{ $review->review_text }}</p>
                @endif
            </div>
            @endforeach
        </div>
        @else
        <p class="text-gray-500 italic text-center py-8">No reviews yet. Be the first to review this product!</p>
        @endif
    </section>

    {{-- Related --}}
    @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">
            @foreach($related as $p)
            @include('store.components.product-card', ['product' => $p])
            @endforeach
        </div>
    </section>
    @endif
</div>

{{-- Sticky Add to Cart Bar (Mobile) --}}
<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">{{ $currency_symbol }}{{ number_format($product->min_price ?? $product->base_price, 0) }}</p>
            @if(($product->base_price ?? 0) > ($product->min_price ?? $product->base_price))
            <p class="text-xs text-gray-400 line-through">{{ $currency_symbol }}{{ number_format($product->base_price, 0) }}</p>
            @endif
        </div>
        <form action="{{ route('cart.add') }}" method="POST" class="flex-1 max-w-xs">
            @csrf
            <input type="hidden" name="product_id" value="{{ $product->id }}">
            @if($product->variants->isNotEmpty())
            <input type="hidden" name="product_variant_id" value="{{ $product->variants->first()->id }}" id="stickyVariantId">
            @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>

@push('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
@if($product->variants->isNotEmpty())
document.querySelectorAll('input[name="product_variant_id"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        document.getElementById('stickyVariantId').value = this.value;
    });
});
@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>
@endpush
@endsection