@extends('layouts.master')

@section('title', $product->title . ' - ' . config('app.name'))

@push('styles')
<style>
    .product-badge-premium {
        background: #4f46e5;
        color: white;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    }
    .btn-indigo { background-color: #4f46e5; transition: all 0.3s ease; }
    .btn-indigo:hover { background-color: #4338ca; transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.4); }
    .btn-outline-indigo { border: 2px solid #e2e8f0; color: #4f46e5; transition: all 0.3s ease; }
    .btn-outline-indigo:hover { border-color: #4f46e5; background: #f5f7ff; transform: translateY(-2px); }
    .tab-active { border-bottom: 3px solid #4f46e5; color: #4f46e5; }
    .related-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); }
    
    .glass-card-premium {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
    }
</style>
@endpush

@section('content')
@php
    $mainImage = $product->thumbnail_url;
    $galleryImages = $product->images->map(fn($img) => str_starts_with($img->path, 'http') ? $img->path : asset('storage/' . $img->path));
    if ($galleryImages->isEmpty()) $galleryImages->push($mainImage);

    $highlights = $product->highlights ?? [
        '120+ Premium UI Screens',
        'Fully Customizable',
        'Organized Layers & Components',
        'Free Fonts Used',
        'Compatible with Figma'
    ];
@endphp

<div class="bg-slate-50/30 min-h-screen pb-24 lg:pb-0" x-data="{ 
    adding: false,
    async addToCart() {
        if (this.adding) return;
        this.adding = true;
        try {
            const res = await fetch('{{ route('cart.items.add') }}', {
                method: 'POST',
                body: JSON.stringify({ product_id: {{ $product->id }}, _token: '{{ csrf_token() }}' }),
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }
            });
            
            if (res.status === 401) {
                alert('Please login to add items to your cart.');
                window.location.href = '{{ route('login') }}';
                return;
            }

            const data = await res.json();
            if (res.ok) {
                window.dispatchEvent(new CustomEvent('cart-updated', { detail: { count: data.data.item_count, message: 'Added to cart!' } }));
            } else {
                alert(data.message || 'Failed to add item to cart.');
            }
        } catch (err) {
            console.error(err);
            alert('An error occurred. Please try again.');
        } finally { this.adding = false; }
    }
}">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4 lg:pt-6 pb-10">
        
        {{-- Breadcrumbs --}}
        <nav class="flex items-center gap-2 text-[10px] font-bold text-slate-400 mb-4">
            <a href="{{ route('home') }}" class="hover:text-brand-500 transition-colors">Home</a>
            <svg class="w-3 h-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
            @if($product->category)
            <a href="{{ route('storefront.category', $product->category->slug) }}" class="hover:text-brand-500 transition-colors">{{ $product->category->name }}</a>
            @else
            <a href="{{ route('storefront.products') }}" class="hover:text-brand-500 transition-colors">Marketplace</a>
            @endif
            <svg class="w-3 h-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
            <span class="text-slate-500 line-clamp-1">{{ $product->title }}</span>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-10 items-start">
            
            {{-- Left Side: Gallery & Description --}}
            <div class="lg:col-span-7 space-y-12">
                {{-- Left: Image Gallery --}}
                <div x-data="{ activeImage: 0, images: {{ $galleryImages->toJson() }} }" class="space-y-6">
                    <div class="relative bg-white rounded-[2.5rem] overflow-hidden group border border-slate-100 shadow-sm">
                        {{-- Badge --}}
                        @if($product->is_top_sale || $product->is_featured)
                        <div class="absolute top-6 left-6 z-10 px-4 py-1.5 product-badge-premium rounded-full text-[10px] font-900 uppercase tracking-widest">
                            {{ $product->is_top_sale ? 'Best Seller' : 'Featured' }}
                        </div>
                        @endif
                        
                        {{-- Wishlist --}}
                        <button class="absolute top-6 right-6 z-10 w-11 h-11 bg-white/80 backdrop-blur rounded-full flex items-center justify-center text-slate-400 hover:text-rose-500 transition-all shadow-sm border border-white/50">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                        </button>

                        <img :src="images[activeImage]" class="w-full aspect-[4/3] object-cover transition-transform duration-700 group-hover:scale-105" :alt="'{{ $product->title }}'">
                    </div>

                    {{-- Thumbnails --}}
                    <div class="flex gap-4 overflow-x-auto pb-2 scrollbar-hide">
                        @foreach($galleryImages as $index => $img)
                        <button @click="activeImage = {{ $index }}" 
                            class="w-20 lg:w-24 aspect-[4/3] rounded-2xl overflow-hidden border-2 transition-all shrink-0"
                            :class="activeImage === {{ $index }} ? 'border-brand-500 scale-95' : 'border-transparent hover:border-slate-200'">
                            <img src="{{ $img }}" class="w-full h-full object-cover">
                        </button>
                        @endforeach
                    </div>
                </div>

                {{-- Trust Badges --}}
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 py-8 border-y border-slate-100">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-brand-500/5 rounded-xl flex items-center justify-center text-brand-500">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/></svg>
                        </div>
                        <div class="text-[13px] font-800 text-slate-900 leading-tight">Instant Download</div>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-brand-500/5 rounded-xl flex items-center justify-center text-brand-500">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04c-.453 0-.895.06-1.316.173a11.958 11.958 0 005.117 14.317 11.956 11.956 0 0011.636 0 11.958 11.958 0 005.117-14.317c-.421-.113-.863-.173-1.316-.173z"/></svg>
                        </div>
                        <div class="text-[13px] font-800 text-slate-900 leading-tight">Secure Payment</div>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-brand-500/5 rounded-xl flex items-center justify-center text-brand-500">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div class="text-[13px] font-800 text-slate-900 leading-tight">Lifetime Access</div>
                    </div>
                </div>

                {{-- Tabs Content (Description, etc.) --}}
                <div x-data="{ activeTab: 'description' }" class="space-y-8">
                    <div class="flex items-center gap-8 border-b border-slate-100 overflow-x-auto scrollbar-hide">
                        <button @click="activeTab = 'description'" class="pb-4 text-[14px] font-800 transition-all whitespace-nowrap" :class="activeTab === 'description' ? 'tab-active' : 'text-slate-400 hover:text-slate-900'">Description</button>
                        <button @click="activeTab = 'details'" class="pb-4 text-[14px] font-800 transition-all whitespace-nowrap" :class="activeTab === 'details' ? 'tab-active' : 'text-slate-400 hover:text-slate-900'">Details</button>
                        <button @click="activeTab = 'reviews'" class="pb-4 text-[14px] font-800 transition-all whitespace-nowrap" :class="activeTab === 'reviews' ? 'tab-active' : 'text-slate-400 hover:text-slate-900'">Reviews</button>
                    </div>

                    <div class="prose prose-slate max-w-none text-slate-600 leading-relaxed text-[15px]">
                        <div x-show="activeTab === 'description'">
                            {!! $product->description !!}
                        </div>
                        <div x-show="activeTab === 'details'" class="space-y-4">
                            <div class="flex justify-between py-2 border-b border-slate-50">
                                <span class="text-slate-400">Version</span>
                                <span class="font-bold text-slate-900">{{ $product->version ?? '1.0.0' }}</span>
                            </div>
                            <div class="flex justify-between py-2 border-b border-slate-50">
                                <span class="text-slate-400">Last Update</span>
                                <span class="font-bold text-slate-900">{{ $product->updated_at->format('M d, Y') }}</span>
                            </div>
                            <div class="flex justify-between py-2 border-b border-slate-50">
                                <span class="text-slate-400">Format</span>
                                <span class="font-bold text-slate-900 uppercase">{{ $product->extension ?? 'Figma' }}</span>
                            </div>
                        </div>
                        <div x-show="activeTab === 'reviews'" class="space-y-6">
                            @forelse($product->display_reviews as $review)
                            <div class="flex gap-4 p-5 bg-white rounded-2xl border border-slate-100 shadow-sm">
                                <div class="w-10 h-10 rounded-full bg-slate-100 flex-shrink-0 flex items-center justify-center font-bold text-slate-400">
                                    {{ substr($review->customer_name ?? 'U', 0, 1) }}
                                </div>
                                <div>
                                    <div class="flex items-center gap-2 mb-1">
                                        <div class="font-900 text-slate-900">{{ $review->customer_name }}</div>
                                        <div class="flex text-amber-400 scale-75 origin-left">
                                            @for($i=0;$i<5;$i++)<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><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>
                                    </div>
                                    <p class="text-[14px] text-slate-500 italic">"{{ $review->comment }}"</p>
                                </div>
                            </div>
                            @empty
                            <p class="text-slate-400 italic">No reviews yet.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            {{-- Right Column: Product Info & Actions (Sticky) --}}
            <div class="lg:col-span-5 space-y-6 lg:pt-4 lg:sticky lg:top-24">
                <div class="glass-card-premium rounded-[2rem] p-6 lg:p-8 space-y-6 relative overflow-hidden">
                    
                    <div class="flex flex-wrap items-center justify-between gap-4">
                        {{-- Marketing: Viewers --}}
                        @if($viewers = $product->display_viewers)
                        <div class="flex items-center gap-2 px-2.5 py-1 bg-emerald-50 rounded-lg w-fit border border-emerald-100">
                            <span class="relative flex h-1.5 w-1.5">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500"></span>
                            </span>
                            <span class="text-[9px] font-900 text-emerald-600 uppercase tracking-wider">{{ $viewers }} viewing</span>
                        </div>
                        @endif

                        <div class="flex items-center gap-2">
                            <div class="flex items-center text-amber-400">
                                <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20"><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>
                            </div>
                            <span class="text-[11px] font-bold text-slate-400">({{ ($product->display_reviews->count() ?: 5) + 120 }})</span>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <h1 class="text-lg lg:text-xl font-900 text-slate-900 leading-tight tracking-tight">{{ $product->title }}</h1>
                        <div class="flex items-baseline gap-3">
                            <div class="text-3xl lg:text-4xl font-900 text-brand-500 tracking-tighter">${{ number_format($product->effective_price, 2) }}</div>
                            @if($product->price > $product->effective_price)
                            <div class="text-lg font-700 text-slate-300 line-through">${{ number_format($product->price, 2) }}</div>
                            @endif
                        </div>
                    </div>

                    {{-- Scarcity --}}
                    @if($product->scarcity_enabled && $product->fake_stock_left > 0)
                    <div class="p-4 bg-rose-50 rounded-2xl border border-rose-100 space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-[9px] font-900 text-rose-600 uppercase tracking-widest">Limited Stock</span>
                            <span class="text-[10px] font-900 text-rose-600">{{ $product->fake_stock_left }} left</span>
                        </div>
                        <div class="w-full h-1.5 bg-rose-200 rounded-full overflow-hidden">
                            <div class="h-full bg-rose-500 rounded-full transition-all duration-1000" style="width: {{ max(15, ($product->fake_stock_left / 20) * 100) }}%"></div>
                        </div>
                    </div>
                    @endif

                    {{-- Actions --}}
                    <div class="flex flex-col gap-2.5">
                        <button @click="addToCart" :disabled="adding" class="w-full h-14 bg-brand-500 text-white rounded-2xl font-900 text-[14px] flex items-center justify-center gap-3 shadow-xl shadow-brand-500/20 disabled:opacity-70 active:scale-95 transition-all">
                            <svg x-show="!adding" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            <svg x-show="adding" x-cloak class="animate-spin h-5 w-5" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                            <span x-text="adding ? 'Adding...' : 'Add to Cart'"></span>
                        </button>
                        <a href="{{ route('checkout.buy-now', $product->id) }}" class="w-full h-14 border-2 border-brand-500 text-brand-500 rounded-2xl font-900 text-[14px] flex items-center justify-center transition-all hover:bg-brand-50 active:scale-95">
                            Buy it Now
                        </a>
                    </div>

                    {{-- Features List --}}
                    <div class="space-y-3 pt-2">
                        <div class="grid grid-cols-1 gap-2.5">
                            @foreach($highlights as $h)
                            <div class="flex items-center gap-3">
                                <div class="w-4 h-4 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-500">
                                    <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="4"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                </div>
                                <span class="text-[13px] font-700 text-slate-600">{{ is_array($h) ? ($h['text'] ?? '') : $h }}</span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Related Products --}}
        <div class="mt-24 space-y-10">
            <div class="flex items-center justify-between">
                <h2 class="text-2xl font-800 text-slate-900">You May Also Like</h2>
                <a href="{{ route('storefront.products') }}" class="text-sm font-800 text-brand-500 hover:underline">View All</a>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach($related as $rel)
                <a href="{{ route('storefront.product', $rel->slug) }}" class="related-card bg-white rounded-[2rem] overflow-hidden border border-slate-100 transition-all flex flex-col group">
                    <div class="relative aspect-[4/3] overflow-hidden">
                        <img src="{{ $rel->thumbnail_url }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute top-4 left-4 w-10 h-10 bg-white/90 backdrop-blur rounded-xl flex items-center justify-center text-xl shadow-sm border border-white/50">
                            {{ $rel->category->icon ?? '📦' }}
                        </div>
                    </div>
                    <div class="p-6 space-y-3 flex-grow">
                        <div class="flex items-center gap-1 text-amber-400">
                            @for($i=0;$i<5;$i++)<svg class="w-3 h-3 fill-current" viewBox="0 0 20 20"><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
                            <span class="text-[11px] font-bold text-slate-400 ml-1">({{ $rel->rating_count ?? rand(20, 100) }})</span>
                        </div>
                        <h3 class="text-[16px] font-800 text-slate-900 line-clamp-1 group-hover:text-brand-500 transition-colors">{{ $rel->title }}</h3>
                        <p class="text-[13px] text-slate-400 font-500">{{ $rel->category->name ?? 'Marketplace' }}</p>
                        <div class="text-lg font-900 text-brand-500 pt-2">${{ number_format($rel->effective_price, 2) }}</div>
                    </div>
                </a>
                @endforeach
            </div>
        </div>

    </div>

    {{-- Mobile Sticky Bar --}}
    <div class="lg:hidden fixed bottom-0 left-0 right-0 z-[60] p-4 bg-white/90 backdrop-blur-xl border-t border-slate-100 shadow-[0_-10px_30px_rgba(0,0,0,0.05)]">
        <div class="flex items-center gap-4">
            <div class="flex-shrink-0">
                <div class="text-[11px] font-800 text-slate-400 uppercase tracking-wider">Price</div>
                <div class="text-xl font-900 text-brand-500">${{ number_format($product->effective_price, 2) }}</div>
            </div>
            <div class="flex-grow flex gap-2">
                <button @click="addToCart" :disabled="adding" class="flex-1 h-12 bg-brand-500 text-white rounded-xl font-800 text-sm flex items-center justify-center gap-2 shadow-lg shadow-brand-500/25 disabled:opacity-70">
                    <svg x-show="!adding" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    <svg x-show="adding" x-cloak class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                    <span x-text="adding ? '...' : 'Add to Cart'"></span>
                </button>
                <a href="{{ route('checkout.buy-now', $product->id) }}" class="flex-1 h-12 border-2 border-brand-500 text-brand-500 rounded-xl font-800 text-sm flex items-center justify-center">
                    Buy Now
                </a>
            </div>
        </div>
    </div>
</div>
@endsection