@extends('layouts.app')

@section('content')
    {{-- Success Message --}}
    @if(session('success'))
        <div id="success-alert" class="fixed top-24 right-5 z-[200] bg-white border border-emerald-200 text-emerald-700 pl-4 pr-5 py-3.5 rounded-xl shadow-lg flex items-center gap-3 animate-[slideIn_0.35s_ease-out]">
            <span class="w-8 h-8 rounded-full bg-emerald-500 text-white flex items-center justify-center flex-shrink-0">
                <i class="fa fa-check text-xs"></i>
            </span>
            <span class="font-semibold text-sm">{{ session('success') }}</span>
        </div>
        <script>setTimeout(() => document.getElementById('success-alert')?.remove(), 5000);</script>
    @endif

    @php
        $hasDiscount = $product->sale_price && $product->sale_price < $product->price;
        $discountPct = $hasDiscount ? round(($product->price - $product->sale_price) / $product->price * 100) : 0;
        $savings = $hasDiscount ? $product->price - $product->sale_price : 0;
    @endphp

    <div class="bg-gray-50/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 py-6 md:py-8">

            {{-- Breadcrumb --}}
            <nav class="flex items-center gap-1.5 text-sm text-gray-400 mb-5 flex-wrap">
                <a href="{{ route('home') }}" class="hover:text-orange-500 transition-colors">হোম</a>
                @if($product->category)
                    <i class="fa fa-chevron-right text-[8px] text-gray-300"></i>
                    <a href="{{ route('category.products', $product->category->slug) }}" class="hover:text-orange-500 transition-colors">{{ $product->category->name }}</a>
                @endif
                <i class="fa fa-chevron-right text-[8px] text-gray-300"></i>
                <span class="text-gray-600 font-medium truncate max-w-[200px]">{{ $product->name }}</span>
            </nav>

            {{-- Main Card --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">

                {{-- Top action bar --}}
                <div class="flex justify-end items-center gap-1 px-5 pt-4 md:px-8 md:pt-6">
                    <button class="w-10 h-10 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-50 hover:text-red-500 transition-all" onclick="event.preventDefault(); this.querySelector('i').classList.toggle('fa-solid'); this.querySelector('i').classList.toggle('fa-regular'); this.classList.toggle('text-red-500');">
                        <i class="fa-regular fa-heart text-lg"></i>
                    </button>
                    <div class="relative group">
                        <button class="w-10 h-10 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-50 hover:text-gray-600 transition-all" onclick="this.nextElementSibling.classList.toggle('hidden')">
                            <i class="fa fa-share-nodes text-lg"></i>
                        </button>
                        <div class="hidden absolute right-0 top-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg p-2 flex gap-1.5 z-20">
                            <a href="https://wa.me/?text={{ urlencode(request()->url()) }}" target="_blank" class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-green-50 text-gray-400 hover:text-green-500 transition-all"><i class="fab fa-whatsapp text-base"></i></a>
                            <a href="https://facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" class="w-9 h-9 rounded-lg flex items-center justify-center hover:bg-blue-50 text-gray-400 hover:text-blue-600 transition-all"><i class="fab fa-facebook text-base"></i></a>
                        </div>
                    </div>
                </div>

                {{-- Main Grid --}}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 p-5 md:p-8 pt-3 md:pt-4">

                    {{-- Left: Image Gallery --}}
                    <div>
                        <div class="lg:sticky lg:top-24 flex flex-col gap-4">
                            {{-- Main Image --}}
                            <div class="relative aspect-[4/5] w-full overflow-hidden rounded-xl border border-gray-100 bg-gray-50 group">
                                @if($hasDiscount)
                                    <span class="absolute top-3 left-3 z-10 bg-red-500 text-white text-[11px] font-bold px-2.5 py-1 rounded-md shadow-sm">
                                        -{{ $discountPct }}%
                                    </span>
                                @endif
                                @if($product->image)
                                    <img id="mainImage" src="{{ asset('uploads/' . $product->image) }}"
                                         class="w-full h-full object-contain p-6 transition-transform duration-500 group-hover:scale-[1.03]"
                                         alt="{{ $product->name }}">
                                @else
                                    <div class="flex flex-col items-center justify-center h-full text-gray-300 gap-2">
                                        <i class="fa fa-image text-3xl"></i>
                                        <span class="italic text-sm">ছবি পাওয়া যায়নি</span>
                                    </div>
                                @endif
                            </div>

                            {{-- Thumbnails --}}
                            <div class="flex items-center justify-between">
                                <div class="flex gap-2 overflow-x-auto no-scrollbar">
                                    @if($product->image)
                                        <div onclick="changeImage('{{ asset('uploads/' . $product->image) }}', this)"
                                             class="thumbnail-img w-16 h-16 rounded-lg border-2 border-orange-500 p-1 cursor-pointer bg-white flex-shrink-0 transition-all hover:-translate-y-0.5">
                                            <img src="{{ asset('uploads/' . $product->image) }}" class="w-full h-full object-cover rounded-md">
                                        </div>
                                    @endif
                                    @foreach($product->images as $img)
                                        <div onclick="changeImage('{{ asset('uploads/' . $img->image_path) }}', this)"
                                             class="thumbnail-img w-16 h-16 rounded-lg border-2 border-gray-100 hover:border-orange-300 p-1 cursor-pointer bg-white flex-shrink-0 transition-all hover:-translate-y-0.5">
                                            <img src="{{ asset('uploads/' . $img->image_path) }}" class="w-full h-full object-cover rounded-md">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Right: Product Details --}}
                    <div class="flex flex-col">
                        {{-- Title --}}
                        <h1 class="text-2xl md:text-3xl font-bold tracking-tight text-gray-900 leading-snug">
                            {{ $product->name }}
                        </h1>

                        {{-- Rating --}}
                        @if(isset($product->average_rating) && $product->average_rating > 0)
                            <div class="flex items-center gap-2.5 mt-3">
                                <div class="flex items-center gap-0.5">
                                    @for($i = 1; $i <= 5; $i++)
                                        <i class="fa fa-star text-sm {{ $i <= round($product->average_rating) ? 'text-yellow-400' : 'text-gray-200' }}"></i>
                                    @endfor
                                </div>
                                <span class="text-sm font-medium text-gray-500">{{ number_format($product->average_rating, 1) }}</span>
                                @if(isset($product->reviews_count))
                                    <span class="text-sm text-gray-400">({{ $product->reviews_count }} টি রিভিউ)</span>
                                @endif
                            </div>
                        @endif

                        {{-- Price --}}
                        <div class="mt-4">
                            <div class="flex items-baseline gap-3">
                                <span class="text-3xl md:text-4xl font-bold text-gray-900">৳{{ number_format($product->sale_price ?? $product->price) }}</span>
                                @if($hasDiscount)
                                    <span class="text-base text-gray-400 line-through">৳{{ number_format($product->price) }}</span>
                                @endif
                            </div>
                            @if($hasDiscount)
                                <p class="text-sm text-emerald-600 font-medium mt-1.5 flex items-center gap-1.5">
                                    <i class="fa fa-tag text-xs"></i> আপনি সাশ্রয় করছেন ৳{{ number_format($savings) }}
                                </p>
                            @endif
                        </div>

                        {{-- Action Buttons --}}
                        <div class="flex flex-col sm:flex-row gap-3 my-6">
                            <button onclick="openOrderModal({{ $product->id }}, '{{ $product->name }}', {{ $product->sale_price ?? $product->price }})"
                                class="flex-1 bg-orange-500 hover:bg-orange-600 active:scale-[0.98] text-white py-3.5 rounded-lg text-sm font-semibold transition-all shadow-sm flex items-center justify-center gap-2">
                                <i class="fa fa-bolt text-xs"></i> Buy Now
                            </button>
                            <button onclick="addToCart({{ $product->id }}, 1)"
                                class="flex-1 border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 hover:text-orange-600 active:scale-[0.98] py-3.5 rounded-lg text-sm font-semibold transition-all shadow-sm flex items-center justify-center gap-2">
                                <i class="fa fa-cart-plus"></i> Add to Cart
                            </button>
                        </div>

                        {{-- Tags / Badges --}}
                        <div class="flex flex-wrap gap-2 mb-6">
                            @if($product->brand)
                                <span class="inline-flex items-center gap-1.5 bg-gray-100 text-gray-600 rounded-md px-3 py-1.5 text-xs font-medium">
                                    <i class="fa fa-tag text-[10px] text-gray-400"></i> {{ $product->brand }}
                                </span>
                            @endif
                            @if($product->category)
                                <a href="{{ route('category.products', $product->category->slug) }}" class="inline-flex items-center gap-1.5 bg-orange-50 text-orange-600 rounded-md px-3 py-1.5 text-xs font-medium hover:bg-orange-100 transition-colors">
                                    <i class="fa fa-folder text-[10px]"></i> {{ $product->category->name }}
                                </a>
                            @endif
                            @if($product->tags ?? false)
                                @foreach($product->tags as $tag)
                                    <span class="inline-flex items-center bg-gray-100 text-gray-600 rounded-md px-3 py-1.5 text-xs font-medium hover:bg-gray-200 transition-colors cursor-default">{{ $tag }}</span>
                                @endforeach
                            @endif
                        </div>

                        {{-- Promo strip --}}
                        @if($product->promo_text ?? false)
                            <div class="bg-blue-50 border border-blue-100 text-blue-700 text-sm font-medium rounded-lg px-4 py-3 mb-6 flex items-center gap-2">
                                <i class="fa fa-bullhorn text-xs opacity-70"></i>
                                {{ $product->promo_text }}
                            </div>
                        @endif

                        {{-- Highlights --}}
                        @if($product->highlights ?? false)
                            <div class="mb-6">
                                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">বৈশিষ্ট্য</p>
                                <ul class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-gray-600">
                                    @foreach($product->highlights as $key => $value)
                                        <li class="flex items-start gap-2.5 bg-gray-50 rounded-lg px-3.5 py-2.5">
                                            <span class="w-1.5 h-1.5 rounded-full bg-orange-400 mt-1.5 flex-shrink-0"></span>
                                            <span class="leading-snug">{{ $key }}: <span class="font-semibold text-gray-800">{{ $value }}</span></span>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        {{-- WhatsApp Contact (Seller section style) --}}
                        <div class="mt-auto pt-6 border-t border-gray-100">
                            <a href="https://wa.me/01795469462?text={{ urlencode('আসসালামু আলাইকুম, আমি ' . $product->name . ' নিতে চাই।') }}"
                               target="_blank"
                               class="w-full bg-emerald-50 border border-emerald-200 text-emerald-700 hover:bg-emerald-100 py-3 rounded-lg text-sm font-semibold transition-all flex items-center justify-center gap-2">
                                <i class="fab fa-whatsapp text-lg"></i> হোয়াটসঅ্যাপে যোগাযোগ করুন
                            </a>
                        </div>
                    </div>
                </div>

                {{-- Specification Section --}}
                <div class="border-t border-gray-100 px-5 md:px-8 py-6 md:py-8">
                    <h3 class="text-lg font-bold text-gray-900 tracking-tight mb-4">Specification</h3>
                    <div class="border border-gray-100 rounded-xl overflow-hidden">
                        <div class="grid grid-cols-[130px_1fr] md:grid-cols-[200px_1fr] bg-gray-50">
                            <div class="p-4 text-sm text-gray-400 font-medium">Title</div>
                            <div class="p-4 text-sm font-semibold text-gray-800 border-l border-gray-100">{{ $product->name }}</div>
                        </div>
                        @if($product->brand)
                            <div class="grid grid-cols-[130px_1fr] md:grid-cols-[200px_1fr] border-t border-gray-100">
                                <div class="p-4 text-sm text-gray-400 font-medium">Brand</div>
                                <div class="p-4 text-sm font-semibold text-orange-600 border-l border-gray-100">{{ $product->brand }}</div>
                            </div>
                        @endif
                        @if($product->highlights ?? false)
                            @foreach($product->highlights as $key => $value)
                                <div class="grid grid-cols-[130px_1fr] md:grid-cols-[200px_1fr] border-t border-gray-100 {{ $loop->even ? 'bg-gray-50/60' : '' }}">
                                    <div class="p-4 text-sm text-gray-400 font-medium">{{ $key }}</div>
                                    <div class="p-4 text-sm font-semibold text-gray-800 border-l border-gray-100">{{ $value }}</div>
                                </div>
                            @endforeach
                        @endif
                    </div>

                    {{-- Description --}}
                    @if($product->description)
                        <div class="mt-8 pt-6 border-t border-gray-100">
                            <h3 class="text-lg font-bold text-gray-900 tracking-tight mb-3">পণ্যের বিবরণ</h3>
                            <p class="text-gray-500 leading-relaxed text-sm">{{ $product->description }}</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Customer Reviews Section --}}
            <div class="mt-8 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="px-5 md:px-8 py-6 md:py-8">
                    <h3 class="text-lg font-bold text-gray-900 tracking-tight mb-6">Customer Reviews</h3>

                    {{-- Average Rating Summary --}}
                    @if($product->reviews_count > 0)
                    <div class="flex items-center gap-4 mb-8 pb-6 border-b border-gray-100">
                        <div class="text-center">
                            <div class="text-4xl font-bold text-gray-900">{{ number_format($product->average_rating, 1) }}</div>
                            <div class="flex items-center gap-0.5 mt-1" id="avg-stars">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fa fa-star text-sm {{ $i <= round($product->average_rating) ? 'text-yellow-400' : 'text-gray-200' }}"></i>
                                @endfor
                            </div>
                            <p class="text-xs text-gray-400 mt-1">{{ $product->reviews_count }} reviews</p>
                        </div>
                    </div>
                    @endif

                    {{-- Existing Reviews --}}
                    @if($reviews->count() > 0)
                        <div class="flex flex-wrap justify-center gap-6 mb-8">
                            @foreach($reviews as $review)
                                @php
                                    $colors = ['from-purple-500 via-orange-400 to-pink-500', 'from-blue-500 via-teal-400 to-green-500', 'from-pink-500 via-red-400 to-yellow-500', 'from-cyan-500 via-blue-400 to-indigo-500', 'from-orange-500 via-yellow-400 to-red-500'];
                                    $gradient = $colors[$loop->index % count($colors)];
                                    $initial = strtoupper(substr($review->customer_name, 0, 1));
                                    $userPhoto = $review->user ? ($review->user->google_avatar ?? $review->user->image ?? null) : null;
                                @endphp
                                <div class="max-w-80 bg-black text-white rounded-2xl overflow-hidden flex flex-col">
                                    <div class="relative -mt-px overflow-hidden">
                                        @if($userPhoto)
                                            <img src="{{ $userPhoto }}" alt="" class="h-[270px] w-full object-cover object-top hover:scale-105 transition-all duration-300">
                                        @else
                                            <div class="h-[270px] w-full bg-gradient-to-br {{ $gradient }} flex items-center justify-center">
                                                <span class="text-8xl font-black text-white/30 select-none">{{ $initial }}</span>
                                            </div>
                                        @endif
                                        <div class="absolute bottom-0 z-10 h-60 w-full bg-gradient-to-t pointer-events-none from-black to-transparent"></div>
                                    </div>
                                    <div class="px-4 pb-4 flex flex-col flex-1">
                                        <p class="font-medium border-b border-gray-600 pb-5 leading-relaxed">“{{ $review->review ?: 'No comment provided.' }}”</p>
                                        <p class="mt-4 font-semibold">{{ $review->customer_name }}</p>
                                        <div class="flex items-center gap-1 mt-1">
                                            @for($i = 1; $i <= 5; $i++)
                                                <svg class="w-4 h-4 {{ $i <= $review->rating ? 'text-yellow-400' : 'text-gray-600' }}" viewBox="0 0 20 20" fill="currentColor">
                                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                                </svg>
                                            @endfor
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">{{ $review->created_at->diffForHumans() }}</p>
                                        <p class="text-sm font-medium bg-gradient-to-r from-[#8B5CF6] via-[#E0724A] to-[#9938CA] text-transparent bg-clip-text mt-auto pt-3">Verified Buyer</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @if($reviews->hasPages())
                            <div class="mb-6">{{ $reviews->links() }}</div>
                        @endif
                    @else
                        <p class="text-sm text-gray-400 mb-6 text-center py-4">No reviews yet. Be the first to review!</p>
                    @endif

                    {{-- Review Form --}}
                    <div class="border-t border-gray-100 pt-6">
                        <h4 class="text-base font-semibold text-gray-900 mb-4">Write a Review</h4>

                        @auth
                            @if($canReview)
                                <form method="POST" action="{{ route('review.submit', $product) }}">
                                    @csrf
                                    <div class="space-y-4">
                                        {{-- Star Rating --}}
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Your Rating</label>
                                            <div class="flex items-center gap-1" id="star-rating">
                                                @for($i = 1; $i <= 5; $i++)
                                                    <button type="button" data-value="{{ $i }}"
                                                        class="star-btn w-9 h-9 flex items-center justify-center rounded-lg hover:bg-yellow-50 transition-all focus:outline-none focus:ring-2 focus:ring-yellow-500/40">
                                                        <svg class="w-7 h-7 text-gray-300 transition-colors" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0">
                                                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                                        </svg>
                                                    </button>
                                                @endfor
                                                <input type="hidden" name="rating" id="rating-value" value="0">
                                                <span id="rating-label" class="text-sm text-gray-400 ml-2">Select rating</span>
                                            </div>
                                            @error('rating')
                                                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                                            @enderror
                                        </div>

                                        {{-- Name --}}
                                        <div>
                                            <label for="customer_name" class="block text-sm font-medium text-gray-700 mb-1.5">Your Name <span class="text-red-400">*</span></label>
                                            <input type="text" name="customer_name" id="customer_name" required
                                                value="{{ old('customer_name', auth()->user()->name ?? '') }}"
                                                class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg focus:border-orange-500 focus:ring-2 focus:ring-orange-500/20 outline-none text-sm transition-all shadow-sm">
                                            @error('customer_name')
                                                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                                            @enderror
                                        </div>

                                        {{-- Review --}}
                                        <div>
                                            <label for="review" class="block text-sm font-medium text-gray-700 mb-1.5">Your Review</label>
                                            <textarea name="review" id="review" rows="3"
                                                class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg focus:border-orange-500 focus:ring-2 focus:ring-orange-500/20 outline-none text-sm transition-all shadow-sm resize-none"
                                                placeholder="Share your experience with this product...">{{ old('review') }}</textarea>
                                        </div>

                                        <button type="submit"
                                            class="bg-orange-500 hover:bg-orange-600 text-white py-2.5 px-6 rounded-lg text-sm font-semibold transition-all shadow-sm active:scale-[0.98]">
                                            Submit Review
                                        </button>
                                    </div>
                                </form>
                            @else
                                <div class="bg-gray-50 rounded-xl p-6 text-center">
                                    <svg class="w-10 h-10 text-gray-300 mx-auto mb-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                    </svg>
                                    <p class="text-sm text-gray-500 font-medium">You haven't purchased this product yet.</p>
                                    <p class="text-xs text-gray-400 mt-1">Only verified buyers can submit reviews.</p>
                                </div>
                            @endif
                        @else
                            <div class="bg-gray-50 rounded-xl p-6 text-center">
                                <svg class="w-10 h-10 text-gray-300 mx-auto mb-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
                                </svg>
                                <p class="text-sm text-gray-500 font-medium">Please log in to submit a review.</p>
                                <a href="{{ route('login') }}"
                                    class="mt-3 inline-block bg-orange-500 hover:bg-orange-600 text-white py-2 px-5 rounded-lg text-sm font-semibold transition-all">
                                    Log In
                                </a>
                            </div>
                        @endauth
                    </div>
                </div>
            </div>

            {{-- Related Products ("You might also like" style) --}}
            @if($relatedProducts->count())
            <div class="mt-8 mb-4">
                <div class="flex items-center justify-between mb-5">
                    <h2 class="text-xl font-bold tracking-tight text-gray-900">You might also like</h2>
                    <div class="flex items-center gap-2">
                        <button id="rel-prev" class="w-9 h-9 rounded-lg border border-gray-200 bg-white flex items-center justify-center text-gray-400 hover:bg-gray-50 hover:text-orange-500 hover:border-orange-300 transition-all shadow-sm disabled:opacity-50">
                            <i class="fa fa-chevron-left text-xs"></i>
                        </button>
                        <button id="rel-next" class="w-9 h-9 rounded-lg border border-gray-200 bg-white flex items-center justify-center text-gray-400 hover:bg-gray-50 hover:text-orange-500 hover:border-orange-300 transition-all shadow-sm disabled:opacity-50">
                            <i class="fa fa-chevron-right text-xs"></i>
                        </button>
                    </div>
                </div>
                <div id="rel-slider" class="flex gap-4 overflow-x-auto no-scrollbar scroll-smooth pb-2">
                    @foreach($relatedProducts as $related)
                        @php
                            $rHasDiscount = $related->sale_price && $related->sale_price < $related->price;
                            $rPct = $rHasDiscount ? round(($related->price - $related->sale_price) / $related->price * 100) : 0;
                        @endphp
                        <a href="{{ route('product.details', $related->slug) }}"
                           class="group bg-white rounded-xl border border-gray-100 hover:border-orange-200 hover:shadow-md hover:-translate-y-1 transition-all duration-300 overflow-hidden flex-shrink-0 w-[165px] md:w-[200px] relative">
                            @if($rHasDiscount)
                                <span class="absolute top-2.5 left-2.5 z-10 bg-red-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-md shadow-sm">
                                    -{{ $rPct }}%
                                </span>
                            @endif
                            <div class="aspect-square bg-gray-50 overflow-hidden rounded-t-xl">
                                <img src="{{ asset('uploads/' . $related->image) }}" class="w-full h-full object-contain p-4 group-hover:scale-105 transition-transform duration-300">
                            </div>
                            <div class="p-3 border-t border-gray-50">
                                <h4 class="text-sm text-gray-700 line-clamp-2 leading-snug mb-1.5 min-h-[2.4em] group-hover:text-orange-600 transition-colors font-medium">{{ $related->name }}</h4>
                                @if($related->brand ?? false)
                                    <p class="text-[11px] text-gray-400 mb-1.5">{{ $related->brand }}</p>
                                @endif
                                <div class="flex items-center gap-1.5 flex-wrap">
                                    @if($rHasDiscount)
                                        <span class="text-gray-400 line-through text-[11px]">৳{{ number_format($related->price) }}</span>
                                    @endif
                                    <span class="text-gray-900 font-bold text-sm">৳{{ number_format($related->sale_price ?? $related->price) }}</span>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>

    <script>
        // Star rating interaction
        document.addEventListener('DOMContentLoaded', function () {
            var stars = document.querySelectorAll('.star-btn');
            var ratingInput = document.getElementById('rating-value');
            var ratingLabel = document.getElementById('rating-label');
            var labels = ['', 'Poor', 'Fair', 'Good', 'Very Good', 'Excellent'];

            function highlight(rating) {
                stars.forEach(function (btn) {
                    var val = parseInt(btn.dataset.value);
                    var svg = btn.querySelector('svg');
                    if (val <= rating) {
                        svg.classList.remove('text-gray-300');
                        svg.classList.add('text-yellow-400');
                    } else {
                        svg.classList.remove('text-yellow-400');
                        svg.classList.add('text-gray-300');
                    }
                });
            }

            stars.forEach(function (btn) {
                btn.addEventListener('mouseenter', function () {
                    highlight(parseInt(btn.dataset.value));
                });
                btn.addEventListener('mouseleave', function () {
                    highlight(parseInt(ratingInput.value));
                });
                btn.addEventListener('click', function () {
                    var val = parseInt(btn.dataset.value);
                    ratingInput.value = val;
                    ratingLabel.textContent = labels[val];
                    highlight(val);
                });
            });
        });

        function changeImage(src, el) {
            document.getElementById('mainImage').src = src;
            document.querySelectorAll('.thumbnail-img').forEach(t => t.classList.remove('border-orange-500'));
            document.querySelectorAll('.thumbnail-img').forEach(t => t.classList.add('border-gray-100'));
            el.classList.remove('border-gray-100');
            el.classList.add('border-orange-500');
        }

        (function() {
            var slider = document.getElementById('rel-slider');
            var prev = document.getElementById('rel-prev');
            var next = document.getElementById('rel-next');
            if (!slider) return;
            prev.addEventListener('click', () => slider.scrollBy({ left: -320, behavior: 'smooth' }));
            next.addEventListener('click', () => slider.scrollBy({ left: 320, behavior: 'smooth' }));
        })();
    </script>

    <style>
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes slideIn {
            from { opacity: 0; transform: translateX(16px); }
            to { opacity: 1; transform: translateX(0); }
        }
    </style>
@endsection