@extends('layouts.app')

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

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-sm text-gray-500 mb-8">
        <a href="{{ route('home') }}" class="hover:text-indigo-600 transition">Home</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <a href="{{ route('products.index') }}" class="hover:text-indigo-600 transition">Products</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-gray-900 font-medium truncate">{{ $product->name }}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-14">
        {{-- Product Images --}}
        <div>
            <div class="card overflow-hidden mb-4">
                @if($product->images->count() > 0)
                    <div id="main-image" class="aspect-square bg-gray-50">
                        <img src="{{ asset('storage/' . ($product->images->firstWhere('is_primary')?->path ?? $product->images->first()->path)) }}" alt="{{ $product->name }}" class="w-full h-[500px] object-cover">
                    </div>
                    @if($product->images->count() > 1)
                        <div class="flex gap-3 p-4 overflow-x-auto scrollbar-hide">
                            @foreach($product->images as $image)
                                <button onclick="document.getElementById('main-image').innerHTML = '<img src=\'{{ asset('storage/' . $image->path) }}\' alt=\'{{ $product->name }}\' class=\'w-full h-[500px] object-cover\'>'" class="w-20 h-20 flex-shrink-0 border-2 {{ $image->is_primary ? 'border-indigo-500' : 'border-transparent' }} rounded-xl overflow-hidden hover:border-indigo-300 transition">
                                    <img src="{{ asset('storage/' . $image->path) }}" alt="" class="w-full h-full object-cover">
                                </button>
                            @endforeach
                        </div>
                    @endif
                @else
                    <div class="aspect-square bg-gray-50 flex items-center justify-center">
                        <span class="text-7xl font-bold text-gray-200">{{ substr($product->name, 0, 1) }}</span>
                    </div>
                @endif
            </div>
        </div>

        {{-- Product Info --}}
        <div class="lg:sticky lg:top-24 lg:self-start">
            {{-- Vendor & Category --}}
            <div class="flex items-center gap-3 mb-4">
                <a href="{{ route('vendors.show', $product->vendor->slug) }}" class="flex items-center gap-2 px-3 py-1.5 bg-indigo-50 hover:bg-indigo-100 rounded-lg transition">
                    <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    <span class="text-sm font-medium text-indigo-600">{{ $product->vendor->name }}</span>
                </a>
                <span class="text-gray-300">|</span>
                <span class="text-sm text-gray-500">{{ $product->category->name }}</span>
            </div>

            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">{{ $product->name }}</h1>

            {{-- Rating & Views --}}
            <div class="flex items-center gap-4 mb-6">
                <div class="flex items-center gap-2">
                    <div class="flex text-amber-400">
                        @for($i = 1; $i <= 5; $i++)
                            <svg class="w-5 h-5 {{ $i <= round($product->rating) ? 'fill-current' : 'text-gray-200' }}" fill="currentColor" 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>
                    <span class="text-sm text-gray-500">({{ $product->reviews_count }} reviews)</span>
                </div>
                <div class="flex items-center gap-1 text-sm text-gray-400">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    {{ $product->views_count }} views
                </div>
            </div>

            {{-- Price --}}
            <div class="flex items-baseline gap-3 mb-6 p-4 bg-gray-50 rounded-xl">
                <span class="text-3xl font-bold text-indigo-600">{{ price($product->price) }}</span>
                @if($product->compare_price)
                    <span class="text-lg text-gray-400 line-through">{{ price($product->compare_price) }}</span>
                    <span class="ml-auto bg-rose-100 text-rose-600 px-3 py-1 rounded-lg text-sm font-semibold">-{{ $product->getDiscountPercentage() }}% OFF</span>
                @endif
            </div>

            {{-- Stock Status --}}
            <div class="mb-6">
                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium
                    @if($product->stock_status === 'in_stock') bg-emerald-50 text-emerald-700 border border-emerald-200
                    @elseif($product->stock_status === 'on_backorder') bg-amber-50 text-amber-700 border border-amber-200
                    @else bg-rose-50 text-rose-700 border border-rose-200 @endif">
                    <span class="w-2 h-2 rounded-full {{ $product->stock_status === 'in_stock' ? 'bg-emerald-500' : ($product->stock_status === 'on_backorder' ? 'bg-amber-500' : 'bg-rose-500') }}"></span>
                    {{ str_replace('_', ' ', ucfirst($product->stock_status)) }}
                </span>
                @if($product->track_inventory && $product->stock_quantity > 0)
                    <span class="ml-3 text-sm text-gray-500">{{ $product->stock_quantity }} available</span>
                @endif
            </div>

            @if($product->short_description)
                <p class="text-gray-600 mb-6 leading-relaxed">{{ $product->short_description }}</p>
            @endif

            {{-- Variants --}}
            @if($product->variants->count() > 0)
                <div class="mb-6">
                    <h3 class="font-semibold text-gray-900 mb-3">Options</h3>
                    <div class="flex flex-wrap gap-3" id="variant-options">
                        @foreach($product->variants->groupBy('name') as $name => $variants)
                            <div class="w-full mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">{{ $name }}</label>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($variants as $variant)
                                        <button type="button" data-variant-id="{{ $variant->id }}" data-price="{{ $variant->price ?? $product->price }}" class="variant-btn px-4 py-2 border border-gray-200 rounded-lg text-sm hover:border-indigo-500 hover:bg-indigo-50 transition {{ $loop->first ? 'border-indigo-500 bg-indigo-50 text-indigo-600' : 'text-gray-700' }}">
                                            {{ $variant->value }}
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Add to Cart --}}
            <form action="{{ route('cart.add') }}" method="POST" class="mb-6">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}" id="product-id">
                <input type="hidden" name="variant_id" value="{{ $product->variants->first()?->id }}" id="variant-id">

                <div class="flex gap-3">
                    <div class="flex items-center border border-gray-200 rounded-xl overflow-hidden">
                        <button type="button" onclick="updateQty(-1)" class="px-4 py-3 hover:bg-gray-50 text-gray-500 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
                        </button>
                        <input type="number" name="quantity" id="quantity" value="1" min="1" max="{{ $product->stock_quantity }}" class="w-14 text-center border-x border-gray-200 py-3 text-sm font-medium outline-none">
                        <button type="button" onclick="updateQty(1)" class="px-4 py-3 hover:bg-gray-50 text-gray-500 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                        </button>
                    </div>
                    <button type="submit" class="flex-1 btn-primary py-3 {{ !$product->isInStock() ? 'opacity-50 cursor-not-allowed' : '' }}" {{ !$product->isInStock() ? 'disabled' : '' }}>
                        {{ $product->isInStock() ? 'Add to Cart' : 'Out of Stock' }}
                    </button>
                </div>
            </form>

            {{-- Wishlist & Chat --}}
            <div class="flex items-center gap-4 mb-6">
                @auth
                    <form action="{{ route('wishlist.add', $product->id) }}" method="POST">
                        @csrf
                        <button type="submit" class="flex items-center gap-2 text-gray-400 hover:text-rose-500 transition">
                            <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"></path></svg>
                            <span class="text-sm">Wishlist</span>
                        </button>
                    </form>
                    @if($product->chats()->where('promoter_id', '!=', null)->exists() || $product->promoters->count() > 0)
                        <form action="{{ route('chat.start') }}" method="POST">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <button type="submit" class="flex items-center gap-2 text-gray-400 hover:text-indigo-600 transition">
                                <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                                <span class="text-sm">Chat with Seller</span>
                            </button>
                        </form>
                    @endif
                @else
                    <a href="{{ route('login') }}" class="flex items-center gap-2 text-gray-400 hover:text-indigo-600 transition">
                        <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                        <span class="text-sm">Login to Chat</span>
                    </a>
                @endauth
            </div>

            {{-- Specifications --}}
            @if($product->attributes)
                <div class="mb-6">
                    <h3 class="font-semibold text-gray-900 mb-3">Specifications</h3>
                    <div class="border border-gray-100 rounded-xl overflow-hidden">
                        @foreach($product->attributes as $key => $value)
                            <div class="flex {{ !$loop->last ? 'border-b border-gray-100' : '' }}">
                                <span class="w-1/3 px-4 py-3 bg-gray-50 text-sm text-gray-500 font-medium">{{ $key }}</span>
                                <span class="w-2/3 px-4 py-3 text-sm text-gray-700">{{ $value }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- Description & Reviews Tabs --}}
    <div class="mt-16">
        <div class="border-b border-gray-200 mb-8">
            <nav class="flex gap-8">
                <button onclick="switchTab('description')" id="tab-description" class="tab-btn pb-4 border-b-2 border-indigo-600 text-indigo-600 font-semibold text-sm transition">Description</button>
                <button onclick="switchTab('reviews')" id="tab-reviews" class="tab-btn pb-4 border-b-2 border-transparent text-gray-500 hover:text-gray-700 font-medium text-sm transition">Reviews ({{ $product->reviews_count }})</button>
            </nav>
        </div>

        <div id="content-description" class="tab-content">
            <div class="prose max-w-none text-gray-600 leading-relaxed">
                {!! nl2br(e($product->description)) !!}
            </div>
        </div>

        <div id="content-reviews" class="tab-content hidden">
            @if($product->reviews->count() > 0)
                <div class="space-y-4">
                    @foreach($product->reviews->where('is_approved', true) as $review)
                        <div class="card p-6">
                            <div class="flex items-start gap-4 mb-4">
                                <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white text-sm font-semibold shadow-md flex-shrink-0">
                                    {{ substr($review->customer->name, 0, 1) }}
                                </div>
                                <div class="flex-1">
                                    <div class="flex items-center justify-between">
                                        <p class="font-semibold text-gray-900">{{ $review->customer->name }}</p>
                                        @if($review->is_verified_purchase)
                                            <span class="flex items-center gap-1 text-emerald-600 text-xs font-medium">
                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                                                Verified
                                            </span>
                                        @endif
                                    </div>
                                    <div class="flex text-amber-400 mt-1">
                                        @for($i = 1; $i <= 5; $i++)
                                            <svg class="w-4 h-4 {{ $i <= $review->rating ? 'fill-current' : 'text-gray-200' }}" fill="currentColor" 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>
                            </div>
                            @if($review->comment)
                                <p class="text-gray-600 text-sm leading-relaxed">{{ $review->comment }}</p>
                            @endif
                            <p class="text-xs text-gray-400 mt-3">{{ $review->created_at->diffForHumans() }}</p>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-16">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.531 4.692a1 1 0 00.95.69h4.944c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.735c.3.922-.755 1.688-1.538 1.118l-3.997-2.902a1 1 0 00-1.176 0l-3.997 2.902c-.783.57-1.838-.197-1.538-1.118l1.518-4.735a1 1 0 00-.363-1.118l-3.976-2.888c-.783-.57-.38-1.81.588-1.81h4.944a1 1 0 00.95-.69l1.531-4.692c.3-.921 1.603-.921 1.902 0z"/></svg>
                    </div>
                    <p class="text-gray-500 font-medium">No reviews yet</p>
                    <p class="text-sm text-gray-400 mt-1">Be the first to review this product!</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Related Products --}}
    @if($relatedProducts->count() > 0)
        <div class="mt-16">
            <h2 class="text-2xl font-bold text-gray-900 mb-8">You Might Also Like</h2>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
                @foreach($relatedProducts as $related)
                    <div class="product-card group">
                        <a href="{{ route('products.show', $related->slug) }}" class="block relative">
                            <div class="product-image-wrapper">
                                @if($related->primaryImage)
                                    <img src="{{ asset('storage/' . $related->primaryImage->path) }}" alt="{{ $related->name }}">
                                @else
                                    <div class="w-full h-full flex items-center justify-center bg-gray-100">
                                        <span class="text-5xl font-bold text-gray-300">{{ substr($related->name, 0, 1) }}</span>
                                    </div>
                                @endif
                                <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 pt-12">
                                    <h3 class="font-medium text-white mb-2 line-clamp-2">{{ $related->name }}</h3>
                                    <div class="flex items-baseline gap-2 mb-3">
                                        <span class="text-lg font-bold text-white">${{ number_format($related->price, 2) }}</span>
                                    </div>
                                    <div class="flex gap-2">
                                        <a href="{{ route('products.show', $related->slug) }}" class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white text-xs font-medium rounded-lg transition-colors">View</a>
                                        <form action="{{ route('cart.add') }}" method="POST" class="flex-1">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $related->id }}">
                                            <input type="hidden" name="quantity" value="1">
                                            <button type="submit" class="w-full inline-flex items-center justify-center px-3 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-medium rounded-lg transition-colors">Add to Cart</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

<script>
function switchTab(tab) {
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('.tab-btn').forEach(el => {
        el.classList.remove('border-indigo-600', 'text-indigo-600', 'font-semibold');
        el.classList.add('border-transparent', 'text-gray-500');
    });
    document.getElementById('content-' + tab).classList.remove('hidden');
    document.getElementById('tab-' + tab).classList.add('border-indigo-600', 'text-indigo-600', 'font-semibold');
    document.getElementById('tab-' + tab).classList.remove('border-transparent', 'text-gray-500');
}

function updateQty(delta) {
    const input = document.getElementById('quantity');
    let val = parseInt(input.value) + delta;
    if (val < 1) val = 1;
    if (val > {{ $product->stock_quantity }}) val = {{ $product->stock_quantity }};
    input.value = val;
}

document.querySelectorAll('.variant-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.variant-btn').forEach(b => b.classList.remove('border-indigo-500', 'bg-indigo-50', 'text-indigo-600'));
        this.classList.add('border-indigo-500', 'bg-indigo-50', 'text-indigo-600');
        document.getElementById('variant-id').value = this.dataset.variantId;
    });
});
</script>
@endsection