@extends('layouts.app')

@section('title', '{{ $product->name }} | OraFresh Beauty')

@section('content')
    <div class="bg-gradient-to-b from-rose-50/30 to-white min-h-screen">
        <div class="max-w-7xl mx-auto px-6 py-12 pt-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-20 mb-24">
                <!-- Images -->
                <div class="space-y-4">
                    @if($product->images && $product->images->count() > 0)
                        <!-- Image principale -->
                        <div class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-3xl overflow-hidden shadow-xl relative">
                            <!-- Badge Promotion -->
                            @if($product->promo_price && $product->promo_price < $product->price)
                            <div class="absolute top-6 left-6 z-10">
                                <div class="bg-gradient-to-r from-orange-500 to-red-500 text-white px-4 py-2 rounded-full text-sm font-bold shadow-xl flex items-center gap-2">
                                    <i data-lucide="percent" class="w-4 h-4"></i>
                                    -{{ round((($product->price - $product->promo_price) / $product->price) * 100) }}% DE RÉDUCTION
                                </div>
                            </div>
                            @endif
                            
                            <!-- Badge Stock -->
                            @if($product->stock !== null)
                            <div class="absolute top-6 right-6 z-10">
                                @if($product->stock == 0)
                                    <div class="bg-red-500 text-white px-4 py-2 rounded-full text-sm font-bold shadow-xl flex items-center gap-2">
                                        <i data-lucide="x-circle" class="w-4 h-4"></i>
                                        ÉPUISÉ
                                    </div>
                                @elseif($product->stock <= 5)
                                    <div class="bg-orange-500 text-white px-4 py-2 rounded-full text-sm font-bold shadow-xl animate-pulse flex items-center gap-2">
                                        <i data-lucide="alert-triangle" class="w-4 h-4"></i>
                                        STOCK LIMITÉ ({{ $product->stock }})
                                    </div>
                                @else
                                    <div class="bg-green-500 text-white px-4 py-2 rounded-full text-sm font-bold shadow-xl flex items-center gap-2">
                                        <i data-lucide="check-circle" class="w-4 h-4"></i>
                                        EN STOCK ({{ $product->stock }})
                                    </div>
                                @endif
                            </div>
                            @endif
                            
                            <img id="mainImage" src="{{ asset('uploads/' . $product->images->where('is_primary', true)->first()?->image_path ?? $product->images->first()->image_path) }}"
                                class="w-full h-[400px] md:h-[600px] object-cover hover:scale-105 transition-transform duration-700">
                        </div>
                        
                        <!-- Vignettes -->
                        @if($product->images->count() > 1)
                            <div class="grid grid-cols-{{ min($product->images->count(), 4) }} gap-4">
                                @foreach($product->images as $image)
                                    <div class="bg-gradient-to-br from-rose-50 to-pink-50 h-32 rounded-2xl overflow-hidden shadow-md cursor-pointer hover:shadow-lg transition"
                                         onclick="changeMainImage('{{ asset('uploads/' . $image->image_path) }}')">
                                        <img src="{{ asset('uploads/' . $image->image_path) }}" class="w-full h-full object-cover opacity-70 hover:opacity-100 transition">
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    @else
                        <!-- Image par défaut si aucune image -->
                        <div class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-3xl overflow-hidden shadow-xl">
                            <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&q=80&w=1200"
                                class="w-full h-[400px] md:h-[600px] object-cover hover:scale-105 transition-transform duration-700">
                        </div>
                    @endif
                </div>
                
                <script>
                    function changeMainImage(src) {
                        document.getElementById('mainImage').src = src;
                    }
                </script>
                
                <!-- Infos -->
                <div class="py-4">
                    <nav class="text-[10px] uppercase tracking-widest text-gray-400 mb-6 flex items-center gap-2">
                        <a href="{{ route('shop') }}" class="hover:text-rose-500 transition">Boutique</a>
                        <i data-lucide="chevron-right" class="w-3 h-3"></i>
                        <span>{{ $product->category->name ?? 'Collection' }}</span>
                    </nav>
                    <h1 class="font-serif text-4xl md:text-5xl mb-4 text-gray-900 leading-tight">{{ $product->name }}</h1>
                    
                    <!-- Badges d'information -->
                    <div class="flex flex-wrap items-center gap-2 mb-6">
                        @if($product->promo_price && $product->promo_price < $product->price)
                        <span class="inline-flex items-center gap-1.5 bg-gradient-to-r from-orange-500 to-red-500 text-white px-3 py-1.5 rounded-full text-xs font-bold">
                            <i data-lucide="tag" class="w-3.5 h-3.5"></i>
                            Promotion -{{ round((($product->price - $product->promo_price) / $product->price) * 100) }}%
                        </span>
                        @endif
                        
                        @if($product->stock !== null)
                            @if($product->stock > 10)
                            <span class="inline-flex items-center gap-1.5 bg-green-500 text-white px-3 py-1.5 rounded-full text-xs font-semibold">
                                <i data-lucide="package" class="w-3.5 h-3.5"></i>
                                En stock ({{ $product->stock }} disponibles)
                            </span>
                            @elseif($product->stock > 0)
                            <span class="inline-flex items-center gap-1.5 bg-orange-500 text-white px-3 py-1.5 rounded-full text-xs font-semibold animate-pulse">
                                <i data-lucide="alert-circle" class="w-3.5 h-3.5"></i>
                                Plus que {{ $product->stock }} en stock!
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1.5 bg-red-500 text-white px-3 py-1.5 rounded-full text-xs font-semibold">
                                <i data-lucide="x-circle" class="w-3.5 h-3.5"></i>
                                Épuisé
                            </span>
                            @endif
                        @endif
                        
                        @auth
                        <span class="inline-flex items-center gap-1.5 bg-purple-100 text-purple-700 px-3 py-1.5 rounded-full text-xs font-semibold">
                            <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
                            Gagnez {{ floor($product->promo_price ?? $product->price) }} points fidélité
                        </span>
                        @endauth
                        
                        <span class="inline-flex items-center gap-1.5 bg-rose-100 text-rose-700 px-3 py-1.5 rounded-full text-xs font-semibold">
                            <i data-lucide="layers" class="w-3.5 h-3.5"></i>
                            {{ $product->category->name ?? 'Produit' }}
                        </span>
                    </div>
                    
                    @php
                        $reviewCount = $product->approvedReviews->count();
                        $avgRating = $reviewCount > 0 ? $product->approvedReviews->avg('rating') : 0;
                    @endphp
                    <div class="flex items-center gap-3 mb-8">
                        @if($reviewCount > 0)
                            <div class="flex text-rose-400">
                                @for($i = 1; $i <= 5; $i++)
                                    <i data-lucide="star" class="w-4 h-4 {{ $i <= round($avgRating) ? 'fill-current' : '' }}"></i>
                                @endfor
                            </div>
                            <span class="text-xs text-gray-600">{{ number_format($avgRating, 1) }}/5 ({{ $reviewCount }} {{ $reviewCount > 1 ? 'avis' : 'avis' }})</span>
                        @else
                            <div class="flex text-gray-300">
                                @for($i = 1; $i <= 5; $i++)
                                    <i data-lucide="star" class="w-4 h-4"></i>
                                @endfor
                            </div>
                            <span class="text-xs text-gray-400">Aucun avis</span>
                        @endif
                    </div>
                    <div class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-2xl p-6 mb-8 border-2 border-rose-200">
                        <div class="flex items-baseline gap-3 mb-2">
                            <p class="text-4xl text-rose-600 font-bold">
                                {{ number_format($product->promo_price ?? $product->price, 2) }} DT
                            </p>
                            @if($product->promo_price)
                                <span class="line-through text-gray-400 text-xl">{{ number_format($product->price, 2) }} DT</span>
                            @endif
                        </div>
                        @if($product->promo_price)
                        <div class="flex items-center gap-2 text-sm">
                            <i data-lucide="piggy-bank" class="w-4 h-4 text-green-600"></i>
                            <span class="text-green-700 font-semibold">Vous économisez {{ number_format($product->price - $product->promo_price, 2) }} DT</span>
                        </div>
                        @endif
                    </div>

                    <div class="bg-rose-50/50 border border-rose-100 rounded-2xl p-6 mb-8">
                        <p class="text-sm text-gray-700 leading-relaxed">{{ $product->description }}</p>
                    </div>

                @if($product->attributeValues->count() > 0)
                    <div class="border-t border-b border-rose-100 py-8 mb-10">
                        <p class="text-[10px] uppercase tracking-[0.3em] font-bold text-rose-600 mb-6">Caractéristiques</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 text-sm gap-4">
                            @foreach($product->attributeValues as $val)
                                <div class="flex items-start gap-3">
                                    <i data-lucide="check-circle" class="w-4 h-4 text-rose-500 mt-0.5"></i>
                                    <div>
                                        <span class="font-semibold text-gray-900">{{ $val->attribute->name }}:</span>
                                        <span class="text-gray-600 ml-1">{{ $val->value }}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <div class="flex gap-4">
                    <form action="{{ route('cart.add') }}" method="POST" class="flex-1">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <button type="submit" {{ ($product->stock !== null && $product->stock == 0) ? 'disabled' : '' }}
                            class="w-full {{ ($product->stock !== null && $product->stock == 0) ? 'bg-gray-400 cursor-not-allowed' : 'bg-gradient-to-r from-rose-500 to-pink-600 hover:shadow-xl hover:scale-105' }} text-white py-5 px-8 text-[11px] uppercase tracking-widest transition-all duration-300 rounded-full flex items-center justify-center gap-2">
                            <i data-lucide="{{ ($product->stock !== null && $product->stock == 0) ? 'x-circle' : 'shopping-bag' }}" class="w-4 h-4"></i>
                            {{ ($product->stock !== null && $product->stock == 0) ? 'Produit épuisé' : 'Ajouter au panier' }}
                        </button>
                    </form>
                    <button class="border-2 border-rose-200 px-6 rounded-full hover:bg-rose-50 hover:border-rose-300 transition-all duration-300">
                        <i data-lucide="heart" class="w-5 h-5 text-rose-400"></i>
                    </button>
                </div>

                <!-- Trust Badges -->
                <div class="grid grid-cols-3 gap-4 mt-10 pt-10 border-t border-rose-100">
                    <div class="text-center">
                        <i data-lucide="truck" class="w-6 h-6 text-rose-500 mx-auto mb-2"></i>
                        <p class="text-[9px] uppercase tracking-wider text-gray-600">Livraison Gratuite<br><span class="text-rose-500">dès 60DT</span></p>
                    </div>
                    <div class="text-center">
                        <i data-lucide="rotate-ccw" class="w-6 h-6 text-rose-500 mx-auto mb-2"></i>
                        <p class="text-[9px] uppercase tracking-wider text-gray-600">Retours<br><span class="text-rose-500">30 jours</span></p>
                    </div>
                    <div class="text-center">
                        <i data-lucide="shield-check" class="w-6 h-6 text-rose-500 mx-auto mb-2"></i>
                        <p class="text-[9px] uppercase tracking-wider text-gray-600">Paiement<br><span class="text-rose-500">sécurisé</span></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reviews Section -->
        <div class="mt-24 border-t border-rose-100 pt-24">
            <div class="max-w-4xl mx-auto">
                <div class="text-center mb-12">
                    <span class="text-rose-600 uppercase tracking-[0.4em] text-[10px] mb-3 block">Avis Clients</span>
                    <h2 class="font-serif text-3xl md:text-4xl italic text-gray-900 mb-2">Ce que nos clients disent</h2>
                    @php
                        $avgRating = $product->approvedReviews->avg('rating');
                        $totalReviews = $product->approvedReviews->count();
                    @endphp
                    @if($totalReviews > 0)
                        <div class="flex items-center justify-center gap-3 mt-4">
                            <div class="flex text-rose-400">
                                @for($i = 1; $i <= 5; $i++)
                                    <i data-lucide="star" class="w-5 h-5 {{ $i <= round($avgRating) ? 'fill-current' : '' }}"></i>
                                @endfor
                            </div>
                            <span class="text-gray-600 text-sm">{{ number_format($avgRating, 1) }} sur 5 ({{ $totalReviews }} avis)</span>
                        </div>
                    @endif
                </div>

                <!-- Review Form -->
                <div class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-3xl p-8 border border-rose-100 mb-12">
                    <h3 class="text-lg font-semibold text-gray-900 mb-6">Donnez votre avis</h3>
                    
                    @if(session('success'))
                        <div class="bg-green-50 border border-green-200 text-green-800 px-6 py-4 rounded-2xl mb-6 flex items-center gap-3">
                            <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
                            <span class="text-sm">{{ session('success') }}</span>
                        </div>
                    @endif

                    <form action="{{ route('review.store', $product->slug) }}" method="POST" class="space-y-6">
                        @csrf
                        
                        <div>
                            <label class="text-[10px] uppercase tracking-wider text-gray-700 mb-3 block">Votre note *</label>
                            <div class="flex gap-2">
                                @for($i = 1; $i <= 5; $i++)
                                    <label class="cursor-pointer group">
                                        <input type="radio" name="rating" value="{{ $i }}" class="hidden peer" required>
                                        <i data-lucide="star" class="w-8 h-8 text-gray-300 peer-checked:text-rose-500 peer-checked:fill-current group-hover:text-rose-400 transition"></i>
                                    </label>
                                @endfor
                            </div>
                            @error('rating')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                        </div>

                        <div>
                            <label class="text-[10px] uppercase tracking-wider text-gray-700 mb-2 block">Votre avis *</label>
                            <textarea name="comment" rows="4" required
                                class="w-full bg-white/80 border border-rose-200 rounded-2xl py-4 px-4 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition-all resize-none"
                                placeholder="Partagez votre expérience avec ce produit..."></textarea>
                            @error('comment')<span class="text-xs text-red-500 mt-1">{{ $message }}</span>@enderror
                        </div>

                        <button type="submit"
                            class="bg-gradient-to-r from-rose-500 to-pink-600 text-white py-4 px-8 text-[11px] uppercase tracking-widest hover:shadow-xl hover:scale-105 transition-all duration-300 rounded-full flex items-center justify-center gap-2">
                            <i data-lucide="send" class="w-4 h-4"></i>
                            Publier mon avis
                        </button>
                    </form>
                </div>

                <!-- Reviews List -->
                @if($product->approvedReviews->count() > 0)
                    <div class="space-y-6">
                        @foreach($product->approvedReviews as $review)
                            <div class="bg-white rounded-2xl p-6 border border-rose-100 hover:shadow-md transition-all">
                                <div class="flex items-start justify-between mb-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-12 h-12 bg-gradient-to-br from-rose-100 to-pink-100 rounded-full flex items-center justify-center">
                                            <span class="text-rose-600 font-semibold">{{ substr($review->name, 0, 1) }}</span>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold text-gray-900">{{ $review->name }}</h4>
                                            <div class="flex items-center gap-2">
                                                <div class="flex text-rose-400">
                                                    @for($i = 1; $i <= 5; $i++)
                                                        <i data-lucide="star" class="w-3 h-3 {{ $i <= $review->rating ? 'fill-current' : '' }}"></i>
                                                    @endfor
                                                </div>
                                                <span class="text-xs text-gray-400">{{ $review->created_at->diffForHumans() }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="bg-green-100 text-green-800 text-[10px] px-3 py-1 rounded-full">Achat vérifié</span>
                                </div>
                                <p class="text-gray-700 leading-relaxed text-sm">{{ $review->comment }}</p>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-12 bg-white rounded-2xl border border-rose-100">
                        <i data-lucide="message-square" class="w-16 h-16 text-rose-200 mx-auto mb-4"></i>
                        <p class="text-gray-500 italic">Soyez le premier à donner votre avis sur ce produit</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Related Products -->
        @if($relatedProducts->count() > 0)
            <div class="mt-32 pb-24">
                <div class="text-center mb-12">
                    <span class="text-rose-600 uppercase tracking-[0.4em] text-[10px] mb-3 block">Recommandations</span>
                    <h2 class="font-serif text-3xl md:text-4xl italic text-gray-900">Vous Aimerez Aussi</h2>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-x-3 sm:gap-x-6 gap-y-8 sm:gap-y-10">
                    @foreach($relatedProducts as $rel)
                        <div class="product-card group">
                            <div class="bg-white rounded-xl shadow-sm hover:shadow-xl transition-all duration-500 overflow-hidden border border-gray-100">
                                <a href="{{ route('product', $rel->slug) }}" class="block">
                                    <div class="bg-gradient-to-br from-rose-50 to-pink-50 aspect-[3/4] overflow-hidden relative">
                                        @if($rel->promo_price && $rel->promo_price < $rel->price)
                                        <div class="absolute top-2 sm:top-3 left-2 sm:left-3 z-10">
                                            <div class="bg-gradient-to-r from-orange-500 to-red-500 text-white px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-bold shadow-lg flex items-center gap-0.5 sm:gap-1">
                                                <i data-lucide="percent" class="w-2.5 h-2.5 sm:w-3 sm:h-3"></i>
                                                -{{ round((($rel->price - $rel->promo_price) / $rel->price) * 100) }}%
                                            </div>
                                        </div>
                                        @endif
                                        
                                        <!-- Badge Stock -->
                                        @if($rel->stock !== null)
                                        <div class="absolute top-2 sm:top-3 right-2 sm:right-3 z-10">
                                            @if($rel->stock == 0)
                                                <div class="bg-red-500 text-white px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-bold shadow-lg">
                                                    Épuisé
                                                </div>
                                            @elseif($rel->stock <= 5)
                                                <div class="bg-orange-500 text-white px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-bold shadow-lg animate-pulse">
                                                    <span class="hidden sm:inline">Stock limité</span>
                                                    <span class="sm:hidden">Limité</span>
                                                </div>
                                            @endif
                                        </div>
                                        @endif
                                        
                                        <img src="{{ $rel->primaryImage ? asset('uploads/' . $rel->primaryImage->image_path) : ($rel->image_path ? asset('uploads/' . $rel->image_path) : 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&q=80&w=600') }}"
                                            class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
                                    </div>
                                </a>
                                <div class="p-2 sm:p-3">
                                    <a href="{{ route('product', $rel->slug) }}">
                                        <h3 class="text-[10px] sm:text-xs font-semibold text-gray-900 hover:text-rose-600 transition line-clamp-2 min-h-[32px] sm:min-h-[36px]">{{ $rel->name }}</h3>
                                    </a>
                                    <p class="text-gray-400 text-[9px] sm:text-[10px] mb-2">{{ $rel->category->name ?? 'Collection' }}</p>
                                    
                                    <div class="hidden sm:flex items-center gap-1.5 mb-2.5 text-xs flex-wrap">
                                        @auth
                                        <span class="flex items-center gap-1 text-purple-600 bg-purple-50 px-2 py-1 rounded-full">
                                            <i data-lucide="sparkles" class="w-3 h-3"></i>
                                            {{ floor($rel->promo_price ?? $rel->price) }} pts
                                        </span>
                                        @endauth
                                        @if($rel->approvedReviews()->count() > 0)
                                        <span class="flex items-center gap-1 text-amber-600 bg-amber-50 px-2 py-1 rounded-full">
                                            <i data-lucide="star" class="w-3 h-3 fill-amber-500"></i>
                                            {{ $rel->approvedReviews()->count() }}
                                        </span>
                                        @endif
                                        @if($rel->stock !== null && $rel->stock > 0 && $rel->stock <= 10)
                                        <span class="flex items-center gap-1 text-orange-600 bg-orange-50 px-2 py-1 rounded-full">
                                            <i data-lucide="package" class="w-3 h-3"></i>
                                            {{ $rel->stock }}
                                        </span>
                                        @endif
                                    </div>
                                    
                                    <div class="flex items-baseline gap-1 sm:gap-1.5 mb-2 sm:mb-3">
                                        <p class="text-sm sm:text-base font-bold text-rose-600">
                                            {{ number_format($rel->promo_price ?? $rel->price, 2) }} DT
                                        </p>
                                        @if($rel->promo_price)
                                        <p class="text-xs sm:text-sm text-gray-400 line-through">
                                            {{ number_format($rel->price, 2) }} DT
                                        </p>
                                        @endif
                                    </div>
                                    
                                    <form action="{{ route('cart.add') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $rel->id }}">
                                        <button type="submit" {{ $rel->stock == 0 ? 'disabled' : '' }}
                                            class="w-full {{ $rel->stock == 0 ? 'bg-gray-300 cursor-not-allowed' : 'bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 hover:shadow-lg' }} text-white py-2 sm:py-2.5 rounded-lg text-[9px] sm:text-[10px] uppercase tracking-wider font-semibold transition-all duration-300 flex items-center justify-center gap-1 sm:gap-1.5">
                                            <i data-lucide="shopping-cart" class="w-3 h-3 sm:w-4 sm:h-4"></i>
                                            <span class="hidden sm:inline">{{ $rel->stock == 0 ? 'Épuisé' : 'Ajouter au panier' }}</span>
                                            <span class="sm:hidden">{{ $rel->stock == 0 ? 'Épuisé' : 'Ajouter' }}</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection