@extends('layouts.app')

@section('content')
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        <!-- Product Image Gallery -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="p-4">
                <!-- Main Image/Video -->
                <div class="relative w-full aspect-square mb-4 overflow-hidden rounded-lg bg-white flex items-center justify-center">
                    <img id="mainImage" src="{{ $product->image }}" alt="{{ $product->name }}" class="w-full h-full object-contain transition-opacity duration-300 {{ $product->video ? 'hidden' : '' }}">
                    
                    <video id="mainVideo" controls class="w-full h-full object-contain {{ $product->video ? '' : 'hidden' }}">
                        <source src="{{ $product->video }}" type="video/mp4">
                        Browser Anda tidak mendukung tag video.
                    </video>
                    
                    @if($product->is_top_seller)
                        <div class="absolute top-0 left-0 bg-yellow-600 text-white text-xs font-bold px-3 py-1.5 rounded-br-lg shadow-md z-10 pointer-events-none">
                            TOP SELLER
                        </div>
                    @endif

                    @if($product->discount_percentage > 0)
                        <div class="absolute top-0 right-0 bg-red-600 text-white text-xs font-bold px-3 py-1.5 rounded-bl-lg shadow-md z-10 pointer-events-none">
                            DISCOUNT {{ $product->discount_percentage }}%
                        </div>
                    @endif
                </div>

                <!-- Thumbnails -->
                <div class="grid grid-cols-5 gap-2 overflow-x-auto pb-2">
                    <!-- Video Thumbnail -->
                    @if($product->video)
                    <div class="cursor-pointer border-2 {{ $product->video ? 'border-yellow-500' : 'border-transparent' }} hover:border-yellow-400 rounded-lg overflow-hidden aspect-square w-full relative group" onclick="changeMedia(this, '{{ $product->video }}', 'video')">
                        <video src="{{ $product->video }}#t=1" class="w-full h-full object-cover opacity-75 group-hover:opacity-100 transition" muted preload="metadata"></video>
                        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                            <i class="fas fa-play-circle text-white text-3xl drop-shadow-lg group-hover:scale-110 transition-transform"></i>
                        </div>
                    </div>
                    @endif

                    <!-- Default Main Image -->
                    @if($product->image)
                    <div class="cursor-pointer border-2 {{ $product->video ? 'border-transparent' : 'border-yellow-500' }} rounded-lg overflow-hidden aspect-square w-full" onclick="changeMedia(this, '{{ $product->image }}', 'image')">
                        <img src="{{ $product->image }}" alt="Thumbnail Utama" class="w-full h-full object-cover hover:opacity-75 transition">
                    </div>
                    @endif

                    <!-- Gallery Images -->
                    @foreach($product->images as $img)
                    <div class="cursor-pointer border-2 border-transparent hover:border-yellow-400 rounded-lg overflow-hidden aspect-square w-full" onclick="changeMedia(this, '{{ $img->image_path }}', 'image')">
                        <img src="{{ $img->image_path }}" alt="Thumbnail Gallery" class="w-full h-full object-cover hover:opacity-75 transition">
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <script>
            function changeMedia(el, src, type) {
                const mainImg = document.getElementById('mainImage');
                const mainVideo = document.getElementById('mainVideo');
                
                if (type === 'video') {
                    // Switch to Video
                    mainImg.classList.add('hidden');
                    mainVideo.classList.remove('hidden');
                    
                    // Only update src if different to avoid reloading
                    if (!mainVideo.src.includes(src)) {
                         mainVideo.src = src;
                    }
                    mainVideo.play();
                } else {
                    // Switch to Image
                    mainVideo.pause();
                    mainVideo.classList.add('hidden');
                    mainImg.classList.remove('hidden');
                    
                    // Simple fade effect
                    mainImg.style.opacity = '0.5';
                    setTimeout(() => {
                        mainImg.src = src;
                        mainImg.style.opacity = '1';
                    }, 150);
                }

                // Update active border
                const siblings = el.parentElement.children;
                for(let sibling of siblings) {
                    sibling.classList.remove('border-yellow-500');
                    sibling.classList.add('border-transparent');
                }
                el.classList.remove('border-transparent');
                el.classList.add('border-yellow-500');
            }
        </script>

        <!-- Product Details & Bidding -->
        <div class="space-y-6">
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <div class="flex items-center justify-between mb-2">
                    <div>
                        <div class="flex flex-wrap gap-1 mb-1">
                            @foreach($product->categories as $cat)
                                <a href="{{ route('home', ['category' => $cat->slug]) }}" class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded transition inline-block">
                                    {{ $cat->name }}
                                </a>
                            @endforeach
                        </div>
                        <h1 class="text-3xl font-bold mt-2 text-gray-800">{{ $product->name }}</h1>
                    </div>
                </div>

                <div class="flex items-center gap-4 mb-4">
                    <div class="flex items-center gap-1 text-sm font-medium text-gray-800">
                        <span>{{ number_format($product->manual_rating ?? $product->reviews_avg_rating ?? 0, 1) }}</span>
                        <i class="fas fa-star text-yellow-400"></i>
                    </div>
                    <div class="text-sm text-gray-500 flex items-center border-l pl-4 border-gray-300">
                        <i class="fas fa-shopping-bag mr-1"></i> {{ $product->sold_count }} Terjual
                    </div>
                </div>

                @if($product->discount_percentage > 0)
                    <div class="mb-4">
                        <div class="flex items-center gap-2">
                            <span id="price-original" class="text-gray-400 line-through text-lg">{{ \App\Models\Setting::get('currency_symbol', 'Rp') }} {{ number_format($product->starting_price, 0, ',', '.') }}</span>
                            <span id="discount-badge" class="bg-red-100 text-red-600 text-xs font-bold px-2 py-0.5 rounded">-{{ $product->discount_percentage }}%</span>
                        </div>
                        <p id="price-final" class="text-3xl font-bold text-yellow-600">{{ \App\Models\Setting::get('currency_symbol', 'Rp') }} {{ number_format($product->starting_price * (1 - $product->discount_percentage/100), 0, ',', '.') }}</p>
                    </div>
                @else
                    <p id="price-final" class="text-3xl font-bold text-yellow-600 mb-4">{{ \App\Models\Setting::get('currency_symbol', 'Rp') }} {{ number_format($product->starting_price, 0, ',', '.') }}</p>
                    <!-- Hidden elements to maintain structure if discount is applied later or for JS consistency -->
                    <span id="price-original" class="hidden text-gray-400 line-through text-lg"></span>
                    <span id="discount-badge" class="hidden bg-red-100 text-red-600 text-xs font-bold px-2 py-0.5 rounded"></span>
                @endif

                <p class="text-gray-600 mb-6 whitespace-pre-wrap">{{ $product->description }}</p>

                <!-- Product Variations -->
                @php
                    $variationStructure = [];
                    $allVariations = $product->productVariations;
                    $variationKeys = []; // Keys that determine the variation ID
                    
                    if ($allVariations->count() > 0) {
                        foreach ($allVariations as $variation) {
                            $attributes = $variation->attributes;
                            if (is_string($attributes)) {
                                $attributes = json_decode($attributes, true) ?? [];
                            }
                            foreach ($attributes as $key => $value) {
                                $variationStructure[$key][] = $value;
                                if (!in_array($key, $variationKeys)) {
                                    $variationKeys[] = $key;
                                }
                            }
                        }
                        
                        foreach ($variationStructure as $key => $values) {
                            $variationStructure[$key] = array_values(array_unique($values));
                        }
                    } 
                    
                    // Merge Global Variations (stored in variation_options)
                    $globalOptions = $product->variation_options;
                    if (is_string($globalOptions)) {
                        $globalOptions = json_decode($globalOptions, true);
                    }
                    
                    if (is_array($globalOptions)) {
                        // Check if associative array (key => options)
                        $isAssociative = count(array_filter(array_keys($globalOptions), 'is_string')) > 0;
                        
                        if ($isAssociative) {
                            foreach ($globalOptions as $name => $opts) {
                                if (is_array($opts) && count($opts) > 0) {
                                    if (!isset($variationStructure[$name])) {
                                        $variationStructure[$name] = $opts;
                                    } else {
                                        $variationStructure[$name] = array_values(array_unique(array_merge($variationStructure[$name], $opts)));
                                    }
                                }
                            }
                        } elseif (!empty($product->variation_name)) {
                            // Legacy single variation
                            $legacyName = $product->variation_name;
                            if (!isset($variationStructure[$legacyName])) {
                                $variationStructure[$legacyName] = $globalOptions;
                            } else {
                                $variationStructure[$legacyName] = array_values(array_unique(array_merge($variationStructure[$legacyName], $globalOptions)));
                            }
                        }
                    }
                @endphp

                @if(!empty($variationStructure))
                <div class="mb-6">
                    @foreach($variationStructure as $groupName => $options)
                    <div class="mb-4">
                        <h3 class="font-bold text-gray-700 mb-2">{{ $groupName }}</h3>
                        <div class="flex flex-wrap gap-2 variation-group" data-group="{{ $groupName }}">
                            @foreach($options as $option)
                                <button type="button" 
                                    onclick="selectVariation(this, '{{ $groupName }}', '{{ $option }}')"
                                    class="px-4 py-2 border rounded-lg text-sm font-medium transition hover:border-yellow-500 hover:text-yellow-600 focus:outline-none variation-btn"
                                    data-value="{{ $option }}">
                                    {{ $option }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                    
                    <input type="hidden" id="selected_variation_id" name="variation_id">
                    <input type="hidden" id="selected_variation_attributes" name="variation">
                    <p id="variation_error" class="text-red-500 text-sm mt-1 hidden">Silakan pilih semua variasi.</p>
                </div>

                <script>
                    const allVariations = @json($allVariations);
                    const variationStructure = @json($variationStructure);
                    const variationKeys = @json($variationKeys);
                    const currencySymbol = "{{ \App\Models\Setting::get('currency_symbol', 'Rp') }}";
                    const discountPercentage = {{ $product->discount_percentage ?? 0 }};
                    const defaultPrice = {{ $product->starting_price }};
                    let selectedAttributes = {};

                    function formatMoney(amount) {
                        return currencySymbol + ' ' + new Intl.NumberFormat('id-ID').format(amount);
                    }

                    function updatePriceDisplay(price) {
                        const finalPriceEl = document.getElementById('price-final');
                        const originalPriceEl = document.getElementById('price-original');
                        
                        let finalPrice = price;
                        
                        if (discountPercentage > 0) {
                            finalPrice = price * (1 - discountPercentage / 100);
                            if (originalPriceEl) {
                                originalPriceEl.textContent = formatMoney(price);
                            }
                        }
                        
                        if (finalPriceEl) {
                            finalPriceEl.textContent = formatMoney(finalPrice);
                        }
                    }

                    function selectVariation(btn, group, value) {
                        // Reset buttons in this group
                        const groupContainer = btn.closest('.variation-group');
                        groupContainer.querySelectorAll('.variation-btn').forEach(b => {
                            b.classList.remove('bg-yellow-100', 'border-yellow-500', 'text-yellow-800');
                            b.classList.add('border-gray-300', 'text-gray-700');
                        });

                        // Highlight selected
                        btn.classList.remove('border-gray-300', 'text-gray-700');
                        btn.classList.add('bg-yellow-100', 'border-yellow-500', 'text-yellow-800');

                        // Update state
                        selectedAttributes[group] = value;
                        
                        checkSelection();
                    }

                    function checkSelection() {
                        const requiredGroups = Object.keys(variationStructure);
                        const selectedGroups = Object.keys(selectedAttributes);
                        const isComplete = requiredGroups.every(g => selectedGroups.includes(g));

                        const errorEl = document.getElementById('variation_error');
                        const variationSectionInput = document.getElementById('selected_variation_attributes');
                        const variationSectionIdInput = document.getElementById('selected_variation_id');
                        
                        const cartFormInput = document.getElementById('cart_variation_input');
                        const cartFormIdInput = document.getElementById('cart_variation_id_input');

                        // Find matching variation based ONLY on variationKeys (e.g. Pakaian)
                        let match = null;
                        // Check if we have selected all keys required for identifying the variation (e.g. Pakaian)
                        // Even if "Size" (legacy) is not selected yet.
                        const variationKeysSatisfied = variationKeys.every(k => selectedAttributes[k]);

                        if (allVariations.length > 0 && variationKeysSatisfied) {
                            match = allVariations.find(v => {
                                const attrs = typeof v.attributes === 'string' ? JSON.parse(v.attributes) : v.attributes;
                                // Check if all variationKeys match
                                return variationKeys.every(key => attrs[key] === selectedAttributes[key]);
                            });
                        }

                        // Update Price Display regardless of isComplete (as long as we found a match)
                        let currentPrice = defaultPrice;
                        if (match && match.price) {
                            currentPrice = parseFloat(match.price);
                        }
                        updatePriceDisplay(currentPrice);

                        if (isComplete) {
                            errorEl.classList.add('hidden');

                            // Always allow as long as selection is complete (Hybrid support: DB Match OR Global Fallback)
                            const jsonAttrs = JSON.stringify(selectedAttributes);
                            
                            // Set hidden inputs in variation section
                            variationSectionInput.value = jsonAttrs;
                            variationSectionIdInput.value = match ? match.id : '';
                            
                            // Set hidden inputs in cart form
                            if (cartFormInput) cartFormInput.value = jsonAttrs;
                            if (cartFormIdInput) cartFormIdInput.value = match ? match.id : '';
                            
                            // Update Checkout Link
                            const checkoutBtn = document.getElementById('checkout-btn');
                            if (checkoutBtn) {
                                const originalUrl = checkoutBtn.getAttribute('data-url');
                                let quantity = 1;
                                const qtyInput = document.getElementById('quantity_display');
                                if (qtyInput) quantity = qtyInput.value;

                                let newUrl = originalUrl + '&variation=' + encodeURIComponent(jsonAttrs);
                                if (match) {
                                    newUrl += '&variation_id=' + match.id;
                                }
                                newUrl += '&quantity=' + quantity;
                                checkoutBtn.href = newUrl;
                            }
                        } else {
                            variationSectionInput.value = '';
                            variationSectionIdInput.value = '';
                            if (cartFormInput) cartFormInput.value = '';
                            if (cartFormIdInput) cartFormIdInput.value = '';
                        }
                    }

                    function validateVariation() {
                        const requiredGroups = Object.keys(variationStructure);
                        const selectedGroups = Object.keys(selectedAttributes);
                        
                        if (requiredGroups.length > 0 && requiredGroups.length !== selectedGroups.length) {
                            const errorEl = document.getElementById('variation_error');
                            errorEl.textContent = "Silakan pilih semua variasi.";
                            errorEl.classList.remove('hidden');
                            errorEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            return false;
                        }
                        
                        // Check if valid combination found (Allow Global Variations without specific ID)
                        const variationAttributes = document.getElementById('selected_variation_attributes').value;
                        
                        if (requiredGroups.length > 0 && !variationAttributes) {
                             const errorEl = document.getElementById('variation_error');
                             if (errorEl.classList.contains('hidden')) {
                                 errorEl.textContent = "Kombinasi variasi ini tidak tersedia.";
                                 errorEl.classList.remove('hidden');
                             }
                             errorEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                             return false;
                        }
                        
                        return true;
                    }
                </script>
                @endif

                <!-- Quantity Selector -->
                <div class="mb-6">
                    <label class="block font-bold text-gray-700 mb-2">Jumlah</label>
                    <div class="flex items-center gap-3">
                        <button type="button" onclick="updateQuantity(-1)" class="w-10 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 font-bold flex items-center justify-center transition border border-gray-300">
                            <i class="fas fa-minus"></i>
                        </button>
                        <input type="number" id="quantity_display" value="1" min="1" class="w-16 h-10 text-center border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500 font-bold text-gray-700" readonly>
                        <button type="button" onclick="updateQuantity(1)" class="w-10 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 font-bold flex items-center justify-center transition border border-gray-300">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>

                <script>
                    function updateQuantity(change) {
                        const input = document.getElementById('quantity_display');
                        let currentQuantity = parseInt(input.value) || 1;
                        let newQuantity = currentQuantity + change;
                        
                        if (newQuantity < 1) newQuantity = 1;
                        
                        input.value = newQuantity;
                        
                        // Update Hidden Input for Cart
                        const cartInput = document.getElementById('cart_quantity_input');
                        if (cartInput) cartInput.value = newQuantity;

                        // Update Checkout Link URL
                        if (typeof checkSelection === 'function') {
                            checkSelection();
                        } else {
                            updateCheckoutUrlSimple(newQuantity);
                        }
                    }

                    function updateCheckoutUrlSimple(quantity) {
                        const checkoutBtn = document.getElementById('checkout-btn');
                        if (checkoutBtn) {
                            const originalUrl = checkoutBtn.getAttribute('data-url');
                            // Handle if originalUrl already has params
                            const separator = originalUrl.includes('?') ? '&' : '?';
                            checkoutBtn.href = originalUrl + separator + 'quantity=' + quantity;
                        }
                    }
                </script>

                @if($product->status == 'active')
                    <a href="{{ route('checkout.index', ['product_id' => $product->id]) }}" 
                       id="checkout-btn" 
                       data-url="{{ route('checkout.index', ['product_id' => $product->id]) }}"
                       onclick="return validateVariation()"
                       class="block w-full text-center bg-green-500 text-white font-bold py-3 rounded-lg hover:bg-green-600 transition shadow-lg mb-4">
                        Order/Beli Sekarang
                    </a>

                    <form action="{{ route('cart.add', $product->id) }}" method="POST" onsubmit="return validateVariation()">
                        @csrf
                        <input type="hidden" name="quantity" id="cart_quantity_input" value="1">
                        <input type="hidden" name="variation" id="cart_variation_input">
                        <input type="hidden" name="variation_id" id="cart_variation_id_input">
                        <button type="submit" class="block w-full text-center bg-yellow-500 text-white font-bold py-3 rounded-lg hover:bg-yellow-600 transition shadow-lg">
                            <i class="fas fa-shopping-cart mr-2"></i> Masukkan ke Keranjang
                        </button>
                    </form>
                @else
                    <div class="bg-gray-100 p-4 rounded text-center text-gray-500 font-semibold">
                        Produk ini tidak tersedia.
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Reviews -->
    <div class="bg-white rounded-lg shadow-lg p-8 mb-12">
        <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
            <i class="fas fa-star text-yellow-500"></i> Testimoni Member
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Reviews List -->
            <div class="space-y-6">
                @forelse($allReviews as $review)
                    <div class="border-b border-gray-100 pb-6 last:border-0">
                        <div class="flex items-center gap-2 mb-2">
                            @if($review->profile_photo)
                                <img src="{{ $review->profile_photo }}" alt="{{ $review->user->name }}" class="w-10 h-10 rounded-full object-cover">
                            @else
                                <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-700 font-bold">
                                    {{ substr($review->user->name, 0, 1) }}
                                </div>
                            @endif
                            <div>
                                <p class="font-semibold text-gray-800">{{ $review->user->name }}</p>
                                <div class="flex text-yellow-400 text-xs">
                                    @for($i=1; $i<=5; $i++)
                                        <i class="fas fa-star {{ $i <= $review->rating ? '' : 'text-gray-300' }}"></i>
                                    @endfor
                                </div>
                            </div>
                            <span class="ml-auto text-xs text-gray-400">{{ $review->created_at->diffForHumans() }}</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-3">{{ $review->comment }}</p>
                        
                        @if(!empty($review->video_url) || (!empty($review->images) && is_array($review->images)) || $review->image)
                            <div class="flex gap-2 overflow-x-auto pb-2">
                                <!-- Video Thumbnail -->
                                @if(!empty($review->video_url))
                                    @php
                                        $video_id = '';
                                        $is_youtube = false;
                                        if(preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $review->video_url, $match)) {
                                            $video_id = $match[1];
                                            $is_youtube = true;
                                        }
                                    @endphp
                                    
                                    <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-gray-200 relative group cursor-pointer" 
                                         onclick="{{ $is_youtube ? "openVideoModal('$video_id')" : "openVideoUrlModal('$review->video_url')" }}">
                                        @if($is_youtube)
                                            <img src="https://img.youtube.com/vi/{{ $video_id }}/mqdefault.jpg" alt="Video Review" class="w-full h-full object-cover">
                                        @else
                                            <video src="{{ $review->video_url }}#t=0.1" class="w-full h-full object-cover" muted preload="metadata"></video>
                                        @endif
                                        
                                        <!-- Overlay -->
                                        <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 rounded px-1.5 py-0.5 flex items-center">
                                            <i class="fas fa-video text-white text-[10px] mr-1"></i>
                                            <span class="text-white text-[10px] font-medium">Video</span>
                                        </div>
                                        
                                        <!-- Play Button Overlay (Centered) -->
                                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition bg-black bg-opacity-20">
                                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-lg">
                                                <i class="fas fa-play text-gray-800 text-xs ml-0.5"></i>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <!-- Images -->
                                @if(!empty($review->images) && is_array($review->images))
                                    @foreach($review->images as $img)
                                        <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-gray-200 cursor-pointer" onclick="openImageModal('{{ $img }}')">
                                            <img src="{{ $img }}" alt="Review Image" class="w-full h-full object-cover hover:scale-105 transition duration-300">
                                        </div>
                                    @endforeach
                                @elseif($review->image)
                                     <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-gray-200 cursor-pointer" onclick="openImageModal('{{ $review->image }}')">
                                        <img src="{{ $review->image }}" alt="Review Image" class="w-full h-full object-cover hover:scale-105 transition duration-300">
                                    </div>
                                @endif
                            </div>
                        @endif

                        <!-- Admin Reply -->
                        @if($review->reply_comment)
                            <div class="mt-4 ml-4 md:ml-12">
                                <div class="text-[#ffce3d] text-sm italic mb-1">Balasan Admin</div>
                                <div class="bg-gray-50 rounded-xl p-4 border-l-4 border-yellow-500 relative">
                                    <div class="flex items-start gap-3">
                                        <div class="flex-shrink-0">
                                            @if(isset($globalAdminPhoto) && $globalAdminPhoto)
                                                <img src="{{ $globalAdminPhoto }}" alt="Admin" class="w-10 h-10 rounded-full object-cover border-2 border-yellow-500/50">
                                            @elseif($review->admin_photo)
                                                <img src="{{ $review->admin_photo }}" alt="Admin" class="w-10 h-10 rounded-full object-cover border-2 border-yellow-500/50">
                                            @else
                                                <div class="w-10 h-10 rounded-full bg-yellow-600 flex items-center justify-center text-white font-bold text-xs border-2 border-yellow-500/50">
                                                    ADM
                                                </div>
                                            @endif
                                        </div>
                                        <div>
                                            <div class="flex items-center gap-2 mb-1">
                                                <span class="text-sm font-bold text-[#ffce3d]">Admin {{ $storeName ?? 'Response' }}</span>
                                                <i class="fas fa-check-circle text-blue-500 text-xs" title="Verified Admin"></i>
                                            </div>
                                            <p class="text-gray-600 text-sm italic">
                                                {{ $review->reply_comment }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                @empty
                    <p class="text-gray-500 italic">Belum ada testimoni dari member kami.</p>
                @endforelse
            </div>

            <!-- Add Review Form -->
            <div class="bg-gray-50 p-6 rounded-lg">
                <h3 class="font-bold text-lg mb-4">Tulis Testimoni</h3>
                <form action="#" method="POST" onsubmit="showMemberModal(); return false;">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Rating</label>
                        <select name="rating" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-yellow-500 focus:border-yellow-500">
                            <option value="5">⭐⭐⭐⭐⭐ (Sangat Puas)</option>
                            <option value="4">⭐⭐⭐⭐ (Puas)</option>
                            <option value="3">⭐⭐⭐ (Cukup)</option>
                            <option value="2">⭐⭐ (Kurang)</option>
                            <option value="1">⭐ (Kecewa)</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Komentar</label>
                        <textarea name="comment" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-yellow-500 focus:border-yellow-500" placeholder="Ceritakan pengalaman Anda..."></textarea>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Foto & Video (Opsional)</label>
                        <div class="flex gap-2">
                            <label class="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white text-gray-500 rounded-lg border border-dashed border-gray-300 cursor-pointer hover:bg-gray-50 hover:border-yellow-500 hover:text-yellow-600 transition group" onclick="showMemberModal(); return false;">
                                <i class="fas fa-camera text-base group-hover:scale-110 transition-transform"></i>
                                <span class="text-xs font-medium">Upload Foto</span>
                            </label>
                            <label class="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-white text-gray-500 rounded-lg border border-dashed border-gray-300 cursor-pointer hover:bg-gray-50 hover:border-yellow-500 hover:text-yellow-600 transition group" onclick="showMemberModal(); return false;">
                                <i class="fas fa-video text-base group-hover:scale-110 transition-transform"></i>
                                <span class="text-xs font-medium">Upload Video</span>
                            </label>
                        </div>
                    </div>

                    <button type="button" onclick="showMemberModal()" class="w-full bg-gray-800 text-white font-semibold py-2 rounded hover:bg-gray-700 transition">
                        Kirim Testimoni
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Related Products -->
    @if($relatedProducts->count() > 0)
        <div>
            <h2 class="text-2xl font-bold mb-6">Produk Sejenis Lainnya</h2>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                @foreach($relatedProducts as $related)
                    <div class="bg-white rounded-lg shadow hover:shadow-lg transition">
                        <div class="relative w-full aspect-square">
                            <img src="{{ $related->image }}" alt="{{ $related->name }}" class="w-full h-full object-cover rounded-t-lg">
                        </div>
                        <div class="p-4">
                            <h3 class="font-bold text-gray-800 truncate">{{ $related->name }}</h3>
                            
                            <div class="flex items-center gap-2 text-sm text-gray-500 mb-2 mt-1">
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-400 text-xs"></i>
                                    <span class="ml-1 text-gray-700 font-medium">{{ number_format($related->manual_rating ?? $related->reviews_avg_rating ?? 0, 1) }}</span>
                                </div>
                                <span class="text-gray-300">|</span>
                                <div class="flex items-center">
                                    <i class="fas fa-shopping-bag text-gray-400 text-xs mr-1"></i>
                                    <span class="text-gray-500">{{ $related->sold_count ?? 0 }} Terjual</span>
                                </div>
                            </div>

                            <p class="text-yellow-600 font-semibold text-lg">{{ \App\Models\Setting::get('currency_symbol', 'Rp') }} {{ number_format($related->current_price ?? $related->starting_price, 0, ',', '.') }}</p>
                            <a href="{{ route('auction.show', $related->id) }}" class="block mt-3 text-center text-sm text-blue-600 hover:text-blue-700 font-medium border border-blue-200 hover:border-blue-600 rounded py-2 transition">Lihat</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
    <!-- Member Only Modal -->
    <div id="memberModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <!-- Background overlay -->
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeMemberModal()"></div>

            <!-- Modal panel -->
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-exclamation-triangle text-yellow-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                Pemberitahuan
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500">
                                    Maaf, Anda belum bisa mengirimkan testimoni karena belum terdaftar menjadi member <strong>{{ \App\Models\Setting::get('store_name', 'Sultan Lelong Emas') }}</strong>.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" onclick="closeMemberModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Mengerti
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function showMemberModal() {
            document.getElementById('memberModal').classList.remove('hidden');
        }

        function closeMemberModal() {
            document.getElementById('memberModal').classList.add('hidden');
        }
    </script>
    <!-- Video Modal -->
    <div id="videoModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-black bg-opacity-90 transition-opacity" aria-hidden="true" onclick="closeVideoModal()"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-black rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full relative">
                <button onclick="closeVideoModal()" class="absolute top-2 right-2 text-white hover:text-gray-300 z-10 focus:outline-none">
                    <i class="fas fa-times text-2xl"></i>
                </button>
                <div class="aspect-w-16 aspect-h-9 w-full">
                    <iframe id="videoFrame" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full h-[500px]"></iframe>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Modal -->
    <div id="imageModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-black bg-opacity-90 transition-opacity" aria-hidden="true" onclick="closeImageModal()"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-transparent rounded-lg text-center overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full relative">
                <button onclick="closeImageModal()" class="absolute top-2 right-2 text-white hover:text-gray-300 z-10 focus:outline-none bg-black bg-opacity-50 rounded-full w-8 h-8 flex items-center justify-center">
                    <i class="fas fa-times text-xl"></i>
                </button>
                <img id="modalImage" src="" alt="Full Size Image" class="max-w-full max-h-[85vh] mx-auto rounded-lg shadow-2xl">
            </div>
        </div>
    </div>

    <script>
        function openVideoModal(videoId) {
            document.getElementById('videoFrame').src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1";
            document.getElementById('videoModal').classList.remove('hidden');
        }

        function openVideoUrlModal(videoUrl) {
            // For non-YouTube videos, try to load in iframe. 
            // Note: Some sites (like Google Drive) might block embedding.
            document.getElementById('videoFrame').src = videoUrl;
            document.getElementById('videoModal').classList.remove('hidden');
        }

        function closeVideoModal() {
            document.getElementById('videoModal').classList.add('hidden');
            document.getElementById('videoFrame').src = "";
        }

        function openImageModal(imageUrl) {
            document.getElementById('modalImage').src = imageUrl;
            document.getElementById('imageModal').classList.remove('hidden');
        }

        function closeImageModal() {
            document.getElementById('imageModal').classList.add('hidden');
            setTimeout(() => {
                document.getElementById('modalImage').src = "";
            }, 300);
        }
    </script>
@endsection