@extends('layouts.app')

@section('content')
<!-- Tailwind CDN for this page's specific design -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script>
    tailwind.config = {
        darkMode: "class",
        theme: {
            extend: {
                colors: {
                    "primary": "#d4af37", // Gold Accent
                    "primary-dark": "#bfa030", 
                    "background-light": "#faf9f6",
                    "background-dark": "#0f1c15", // Forest Green
                    "site-black": "#0f1c15",
                },
                fontFamily: {
                    "display": ["Montserrat", "sans-serif"],
                    "serif": ["Cinzel", "serif"],
                },
            },
        },
    }
</script>

<div class="font-display bg-background-light text-slate-900 antialiased">
    <main class="w-full max-w-[1440px] mx-auto px-6 lg:px-12 py-8 lg:py-16">
        <!-- Breadcrumbs -->
        <div class="flex items-center gap-2 text-sm text-slate-500 mb-8">
            <a class="hover:text-primary transition-colors" href="{{ url('/') }}">Home</a>
            <span class="text-xs">/</span>
            <a class="hover:text-primary transition-colors" href="{{ route('shop') }}">Shop</a>
            <span class="text-xs">/</span>
            <span class="text-slate-900 font-medium">{{ $product->name }}</span>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20">
            <!-- Left Column: Product Gallery -->
            <div class="lg:col-span-7 flex flex-col gap-4">
                <!-- Main Image -->
                <div class="w-full aspect-[4/5] lg:aspect-square bg-slate-100 rounded-xl overflow-hidden relative group">
                    <img id="mainImage" 
                         src="{{ $product->image ? (Str::startsWith($product->image, 'images/') ? asset($product->image) : asset('storage/' . $product->image)) : 'https://via.placeholder.com/600x600' }}" 
                         data-original-src="{{ $product->image ? (Str::startsWith($product->image, 'images/') ? asset($product->image) : asset('storage/' . $product->image)) : 'https://via.placeholder.com/600x600' }}"
                         alt="{{ $product->name }}" 
                         class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-700">
                    
                    @if($product->is_featured)
                        <div class="absolute top-4 left-4 bg-white/90 backdrop-blur text-xs font-bold px-3 py-1 uppercase tracking-wider rounded-full shadow-sm text-site-black">
                            Best Seller
                        </div>
                    @endif
                </div>

                <!-- Thumbnail Gallery -->
                @if($product->gallery->count() > 0)
                <div class="grid grid-cols-4 gap-4">
                    <!-- Main Image Thumb -->
                    <button class="aspect-square rounded-lg overflow-hidden border-2 border-primary cursor-pointer thumbnail-btn" 
                            onclick="changeImage(document.getElementById('mainImage').src, this)">
                        <img src="{{ $product->image ? (Str::startsWith($product->image, 'images/') ? asset($product->image) : asset('storage/' . $product->image)) : 'https://via.placeholder.com/600x600' }}" 
                             class="w-full h-full object-cover">
                    </button>

                    @foreach($product->gallery as $img)
                        <button class="aspect-square rounded-lg overflow-hidden border border-transparent hover:border-slate-300 cursor-pointer thumbnail-btn" 
                                onclick="changeMainImage('{{ asset('storage/' . $img->image_path) }}', this)">
                            <img src="{{ asset('storage/' . $img->image_path) }}" 
                                 class="w-full h-full object-cover">
                        </button>
                    @endforeach
                </div>
                @endif
            </div>

            <!-- Right Column: Product Details & Cart -->
            <div class="lg:col-span-5 flex flex-col h-full">
                <div class="sticky top-24">
                    <!-- Title & Price -->
                    <div class="border-b border-slate-200 pb-6 mb-8">
                        <h1 class="font-serif text-4xl lg:text-5xl text-site-black mb-4 leading-tight">{{ $product->name }}</h1>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                @if($product->regular_price && $product->regular_price > $product->price)
                                    <span class="text-2xl font-bold text-red-600" id="productPrice">LKR {{ number_format($product->price, 2) }}</span>
                                    <span class="text-lg text-slate-500 line-through">LKR {{ number_format($product->regular_price, 2) }}</span>
                                @else
                                    <span class="text-2xl font-bold text-site-black" id="productPrice">LKR {{ number_format($product->price, 2) }}</span>
                                @endif
                            </div>
                            
                            <!-- Dynamic Reviews -->
                            @php
                                $approvedReviews = $product->reviews->where('is_approved', true);
                                $reviewCount = $approvedReviews->count();
                                $avgRating = $reviewCount > 0 ? $approvedReviews->avg('rating') : 0;
                                $fullStars = floor($avgRating);
                                $halfStar = $avgRating - $fullStars >= 0.5;
                                $emptyStars = 5 - $fullStars - ($halfStar ? 1 : 0);
                            @endphp
                            <div class="flex items-center gap-1 text-yellow-500 text-sm">
                                @for($i=0; $i<$fullStars; $i++)
                                    <i class="bi bi-star-fill"></i>
                                @endfor
                                @if($halfStar)
                                    <i class="bi bi-star-half"></i>
                                @endif
                                @for($i=0; $i<$emptyStars; $i++)
                                    <i class="bi bi-star"></i>
                                @endfor
                                <span class="text-slate-500 ml-1">({{ $reviewCount }} Reviews)</span>
                            </div>
                        </div>
                        <p class="mt-6 text-slate-600 leading-relaxed font-light">
                            {{ Str::limit($product->description, 150) }}
                        </p>
                    </div>

                    <!-- Configuration (Attributes) -->
                    @if($product->type === 'variable')
                        <div id="variation-selector" class="space-y-8 mb-8">
                            @foreach($product->attributes as $attribute)
                                <div class="attribute-section" data-attribute-id="{{ $attribute->id }}">
                                    <div class="flex justify-between mb-3">
                                        <span class="text-sm font-bold uppercase tracking-wider text-site-black">{{ $attribute->name }}</span>
                                    </div>
                                    <div class="flex gap-3 flex-wrap">
                                        @foreach($attribute->values as $value)
                                            <button class="option-btn h-12 min-w-[3rem] px-4 rounded-lg border border-slate-200 text-slate-600 font-medium flex items-center justify-center gap-2 transition-all hover:border-primary hover:text-primary" 
                                                    data-value-id="{{ $value->id }}"
                                                    data-value-name="{{ $value->value }}">
                                                {{ $value->value }}
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                            <div id="stock-status" class="text-red-500 font-bold hidden">Out of Stock</div>
                        </div>
                    @endif

                    <!-- Actions -->
                    <div class="flex flex-col gap-4 mb-8">
                        <div class="grid grid-cols-2 gap-4">
                            <!-- Add to Cart -->
                            <!-- Add to Cart -->
                            <button id="addToCartBtn" class="h-14 bg-white border-2 border-site-black text-site-black rounded-full uppercase tracking-wider font-bold text-sm hover:bg-site-black hover:text-white transition-all duration-300 shadow-sm flex items-center justify-center gap-3"
                                    onclick="addToCart('cart')">
                                <i class="bi bi-bag"></i>
                                Add to Cart
                            </button>
                             <!-- Buy Now -->
                             <!-- Buy Now -->
                            <button id="buyNowBtn" class="h-14 bg-site-black text-white border-2 border-site-black rounded-full uppercase tracking-wider font-bold text-sm hover:bg-transparent hover:text-site-black transition-all duration-300 shadow-md flex items-center justify-center gap-3"
                                    onclick="addToCart('checkout')">
                                <i class="bi bi-credit-card-2-front-fill"></i>
                                Buy Now
                            </button>
                        </div>
                        <div class="flex gap-4">
                            <button class="flex-1 h-12 border border-slate-200 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors flex items-center justify-center gap-2">
                                <i class="bi bi-whatsapp"></i>
                                Chat with Us
                            </button>
                            <button class="flex-1 h-12 border border-slate-200 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors flex items-center justify-center gap-2">
                                <i class="bi bi-box-seam"></i>
                                Size Guide
                            </button>
                        </div>
                    </div>

                    <!-- Payment & Trust Banners -->
                    <div class="border-t border-slate-100 pt-6">
                        <p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">Guaranteed Safe Checkout</p>
                        
                        <div class="flex flex-col gap-4">
                            <!-- Koko Banner (3 Installments) -->
                            <div class="bg-[#f8f8f8] border border-slate-200 rounded-lg p-3 flex items-center justify-between">
                                <div class="flex flex-col">
                                    <span class="text-sm font-bold text-site-black">Pay in 3 with Koko</span>
                                    <span class="text-xs text-slate-500">Interest-free installments</span>
                                </div>
                                <img src="{{ asset('images/koko-banner.png') }}" alt="Pay via Koko" class="h-8 object-contain">
                            </div>

                            <!-- PayHere Banner -->
                            <div class="mt-2">
                                <img src="https://www.payhere.lk/downloads/images/payhere_short_banner.png" alt="PayHere" class="h-8 object-contain">
                            </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>
        
        <!-- Description & Reviews Sections -->
        <div class="mt-20 border-t border-slate-200 pt-12">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <!-- Description -->
                <div>
                    <h3 class="font-serif text-2xl font-bold text-site-black mb-6">Description</h3>
                    <div class="prose prose-slate text-slate-600 leading-relaxed">
                        {!! nl2br(e($product->description)) !!}
                    </div>
                </div>

                <!-- Reviews -->
                <div>
                    <h3 class="font-serif text-2xl font-bold text-site-black mb-6">Reviews ({{ $product->reviews->where('is_approved', true)->count() }})</h3>
                    
                    <!-- Write Review Form -->
                    @auth
                        <div class="mb-8 bg-slate-50 p-6 rounded-lg border border-slate-200">
                            <h4 class="font-bold text-lg mb-4">Write a Review</h4>
                            
                            <!-- Display Validation Errors -->
                            @if ($errors->any())
                                <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
                                    <strong class="font-bold">Whoops!</strong>
                                    <span class="block sm:inline">There were some problems with your input.</span>
                                    <ul class="mt-2 list-disc list-inside text-sm">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            @if(session('success'))
                                <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative">
                                    {{ session('success') }}
                                </div>
                            @endif

                            <form action="{{ route('reviews.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="product_id" value="{{ $product->id }}">
                                
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Rating <span class="text-red-500">*</span></label>
                                    <div class="flex gap-2 text-2xl text-gray-300 cursor-pointer" x-data="{ rating: 0, hover: 0 }">
                                        <input type="hidden" name="rating" x-model="rating" required>
                                        <template x-for="star in 5">
                                            <i class="bi bi-star-fill transition-colors"
                                               :class="(star <= (hover || rating)) ? 'text-yellow-400' : 'text-gray-300'"
                                               @mouseover="hover = star"
                                               @mouseleave="hover = 0"
                                               @click="rating = star"></i>
                                        </template>
                                    </div>
                                    @error('rating') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                                    <p class="text-xs text-slate-500 mt-1">Click a star to rate.</p>
                                </div>
                                
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Review <span class="text-red-500">*</span></label>
                                    <textarea name="review" rows="3" class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary" required>{{ old('review') }}</textarea>
                                    @error('review') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                                </div>
                                
                                <button type="submit" class="bg-site-black text-white px-6 py-2 rounded-lg font-bold hover:bg-gray-800 transition">Submit Review</button>
                            </form>
                        </div>
                    @else
                        <div class="mb-8 p-4 bg-slate-50 border border-slate-200 rounded-lg text-center">
                            <p class="text-slate-600 mb-2">Please <a href="{{ route('login') }}" class="text-primary underline font-bold">login</a> to write a review.</p>
                        </div>
                    @endauth

                    <div class="space-y-6">
                        @forelse($product->reviews->where('is_approved', true) as $review)
                        <div class="border-b border-slate-100 pb-6">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="flex text-yellow-500 text-xs">
                                    @for($i=0; $i<$review->rating; $i++) <i class="bi bi-star-fill"></i> @endfor
                                </div>
                                <span class="font-bold text-sm text-site-black">{{ $review->user->name }}</span>
                                <span class="text-xs text-slate-400 ml-2">- {{ $review->created_at->format('M d, Y') }}</span>
                            </div>
                            <p class="text-slate-600 text-sm">{{ $review->review }}</p>
                        </div>
                        @empty
                        <p class="text-slate-500 italic">No reviews yet. Be the first to review this product!</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- Related Products Section -->
        <div class="mt-20 border-t border-slate-200 pt-12">
            <h3 class="font-serif text-3xl font-bold text-site-black mb-8 text-center">You May Also Like</h3>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach($relatedProducts as $related)
                <div class="group">
                    <div class="relative overflow-hidden rounded-lg aspect-square mb-4">
                        <img src="{{ $related->image ? (Str::startsWith($related->image, 'images/') ? asset($related->image) : asset('storage/' . $related->image)) : 'https://via.placeholder.com/300' }}" 
                             alt="{{ $related->name }}" 
                             class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        
                        <!-- Overlay Actions -->
                        <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-4">
                            <a href="{{ route('product.show', $related->slug) }}" class="p-3 bg-white text-site-black rounded-full hover:bg-primary hover:text-white transition-colors shadow-lg">
                                <i class="bi bi-eye"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <h4 class="font-display font-medium text-site-black mb-1">
                            <a href="{{ route('product.show', $related->slug) }}" class="hover:text-primary transition-colors">{{ $related->name }}</a>
                        </h4>
                        <div class="flex items-center justify-center gap-2">
                            @if($related->regular_price && $related->regular_price > $related->price)
                                <span class="text-red-600 font-bold">LKR {{ number_format($related->price, 2) }}</span>
                                <span class="text-slate-400 text-sm line-through">LKR {{ number_format($related->regular_price, 2) }}</span>
                            @else
                                <span class="text-site-black font-bold">LKR {{ number_format($related->price, 2) }}</span>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            
            @if($relatedProducts->isEmpty())
                <p class="text-center text-slate-500">No related products found.</p>
            @endif
        </div>

    </main>
</div>

<!-- JavaScript for Interactivity -->
<script>
    function changeMainImage(src, btn) {
        document.getElementById('mainImage').src = src;
        // Reset borders
        document.querySelectorAll('.thumbnail-btn').forEach(el => {
            el.classList.remove('border-primary', 'border-2');
            el.classList.add('border-transparent');
        });
        // Highlight active
        btn.classList.remove('border-transparent');
        btn.classList.add('border-primary', 'border-2');
    }

    // Global Logic
    let selectedVariationId = null; 

    function addToCart(action) {
        const productType = "{{ $product->type }}";
        
        // Validation for Variable Products
        if(productType === 'variable' && !selectedVariationId) {
             alert('Please select all options (Metal, Size, etc) before adding to cart.');
             return;
        }

        const payload = {
            product_id: {{ $product->id }},
            quantity: 1, // Can extend to allow quantity selection
            variation_id: selectedVariationId
        };
        
        // Disable buttons
        const btn = action === 'checkout' ? document.getElementById('buyNowBtn') : document.getElementById('addToCartBtn');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<span class="animate-spin inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full"></span> Processing...';
        btn.disabled = true;

        fetch('{{ route("cart.add") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: JSON.stringify(payload)
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                // Update Cart Count in Header
                updateCartCount();
                
                if(action === 'checkout') {
                    window.location.href = "{{ route('checkout') }}";
                } else {
                    // Show success feedback
                    btn.innerHTML = '<i class="bi bi-check-lg"></i> Added!';
                    setTimeout(() => {
                        btn.innerHTML = originalText;
                        btn.disabled = false;
                    }, 2000);
                }
            } else {
                alert('Something went wrong!');
                btn.innerHTML = originalText;
                btn.disabled = false;
            }
        })
        .catch(error => {
            console.error('Error:', error);
             btn.innerHTML = originalText;
            btn.disabled = false;
        });
    }
    
    // Header update helper (assuming header has an element with class .cart-count)
    function updateCartCount() {
        fetch('{{ route("cart.count") }}')
            .then(res => res.json())
            .then(data => {
                document.querySelectorAll('.cart-count').forEach(el => el.textContent = data.count);
            });
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Initial Count Load
        updateCartCount();

        const variations = @json($variations ?? []); // Default to empty array if not set
        const productType = "{{ $product->type }}";
        
        if (productType === 'variable') {
            const options = document.querySelectorAll('.option-btn');
            const priceEl = document.getElementById('productPrice');
            const mainImageEl = document.getElementById('mainImage');
            const stockStatus = document.getElementById('stock-status');
            const addToCartBtn = document.getElementById('addToCartBtn');
            const buyNowBtn = document.getElementById('buyNowBtn');
    
            let selectedAttributes = {};
    
            options.forEach(option => {
                option.addEventListener('click', function() {
                    const parent = this.closest('.attribute-section');
                    // Deselect siblings
                    parent.querySelectorAll('.option-btn').forEach(btn => {
                        btn.classList.remove('border-primary', 'text-primary', 'bg-primary/10', 'ring-1', 'ring-primary');
                        btn.classList.add('border-slate-200');
                    });
                    
                    // Select clicked
                    this.classList.remove('border-slate-200');
                    this.classList.add('border-primary', 'text-primary', 'bg-primary/10', 'ring-1', 'ring-primary');
    
                    // Store selection
                    const attrId = parent.dataset.attributeId;
                    const valueId = this.dataset.valueId;
                    selectedAttributes[attrId] = parseInt(valueId);
    
                    checkMatch();
                });
            });
    
            function checkMatch() {
                const totalAttributes = document.querySelectorAll('.attribute-section').length;
                if (Object.keys(selectedAttributes).length < totalAttributes) return;
    
                const match = variations.find(variation => {
                    return Object.entries(selectedAttributes).every(([attrId, valId]) => {
                        // Loose comparison because keys might be string/int mismatch issues
                        return variation.attributes[attrId] == valId;
                    });
                });
    
                if (match) {
                    selectedVariationId = match.id; // STORE FOR ADD TO CART
                    
                    // Update Price
                    priceEl.textContent = 'LKR ' + new Intl.NumberFormat('en-US', { minimumFractionDigits: 2 }).format(match.price);
                    
                // Update Image if available, else revert to default
                if (match.image) {
                     mainImageEl.src = match.image;
                } else {
                     if(mainImageEl.dataset.originalSrc) {
                        mainImageEl.src = mainImageEl.dataset.originalSrc;
                     }
                }
    
                    // Update Stock
                    if (match.stock > 0) {
                        addToCartBtn.disabled = false;
                        buyNowBtn.disabled = false;
                        stockStatus.classList.add('hidden');
                    } else {
                        addToCartBtn.disabled = true;
                        buyNowBtn.disabled = true;
                        stockStatus.classList.remove('hidden');
                    }
                } else {
                    selectedVariationId = null;
                    addToCartBtn.disabled = true;
                    buyNowBtn.disabled = true;
                }
            }
        } else {
             // Simple Product
             // No variation logic needed, ready to add
        }
    });
</script>
@endsection