@extends('layouts.frontend')

@section('title', $product->meta_title ?? $product->name . ' - ' . \App\Models\Setting::get('site_name', config('app.name')))
@section('meta_description', $product->meta_description ?? Str::limit(strip_tags($product->description), 160))

@section('content')
<div class="bg-white min-h-screen">
    <div class="container mx-auto px-4 py-6">
        <!-- Breadcrumb -->
        <nav class="mb-4 text-sm">
            <ol class="flex items-center space-x-2 text-gray-500">
                <li><a href="{{ route('home') }}" class="hover:text-pink-600">Home</a></li>
                <li>/</li>
                @if($product->category)
                <li><a href="{{ route('products.index', ['category' => $product->category->slug]) }}" class="hover:text-pink-600">{{ $product->category->name }}</a></li>
                @endif
            </ol>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
            <!-- Product Images with Zoom -->
            <div x-data="{ 
                activeImage: '{{ asset('storage/' . ($product->image ?? 'products/placeholder.jpg')) }}',
                zoomed: false,
                zoomX: 0,
                zoomY: 0
            }">
                <!-- Main Image with Zoom -->
                <div class="relative bg-white rounded-xl border overflow-hidden mb-4"
                     @mouseenter="zoomed = true"
                     @mouseleave="zoomed = false"
                     @mousemove="
                        const rect = $el.getBoundingClientRect();
                        zoomX = ((event.clientX - rect.left) / rect.width) * 100;
                        zoomY = ((event.clientY - rect.top) / rect.height) * 100;
                     ">
                    @if($product->discount_percentage)
                    <div class="absolute top-4 right-4 z-10">
                        <span class="bg-pink-500 text-white text-sm font-bold px-3 py-1 rounded-full">
                            {{ $product->discount_percentage }}% OFF
                        </span>
                    </div>
                    @endif
                    <img :src="activeImage" 
                         alt="{{ $product->name }}" 
                         class="w-full h-[400px] lg:h-[450px] object-contain p-4 transition-transform duration-200"
                         :style="zoomed ? `transform: scale(2); transform-origin: ${zoomX}% ${zoomY}%` : ''">
                </div>
                
                <!-- Thumbnail Gallery -->
                <div class="flex gap-2 overflow-x-auto pb-2">
                    <button @click="activeImage = '{{ asset('storage/' . $product->image) }}'" 
                            :class="activeImage === '{{ asset('storage/' . $product->image) }}' ? 'border-pink-500' : 'border-gray-200'"
                            class="flex-shrink-0 w-20 h-20 border-2 rounded-lg overflow-hidden hover:border-pink-300 transition">
                        <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
                    </button>
                    @if($product->gallery && $product->gallery->count() > 0)
                    @foreach($product->gallery as $image)
                    <button @click="activeImage = '{{ asset('storage/' . $image->image) }}'"
                            :class="activeImage === '{{ asset('storage/' . $image->image) }}' ? 'border-pink-500' : 'border-gray-200'"
                            class="flex-shrink-0 w-20 h-20 border-2 rounded-lg overflow-hidden hover:border-pink-300 transition">
                        <img src="{{ asset('storage/' . $image->image) }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
                    </button>
                    @endforeach
                    @endif
                </div>
            </div>

            <!-- Product Info -->
            <div>
                <h1 class="text-xl lg:text-2xl font-bold text-gray-900 mb-2">{{ $product->name }}</h1>
                
                <!-- Price -->
                <div class="flex items-baseline gap-2 mb-3">
                    @if($product->old_price && $product->old_price > $product->new_price)
                    <span class="text-gray-400 line-through text-lg">৳{{ number_format($product->old_price, 0) }}</span>
                    @endif
                    <span class="text-2xl font-bold" style="color: var(--primary-color);">৳{{ number_format($product->new_price, 0) }}</span>
                </div>

                <!-- Rating -->
                <div class="flex items-center gap-2 mb-4">
                    @php
                        $avgRating = $product->average_rating ?? 0;
                        $reviewCount = $product->approvedReviews->count();
                    @endphp
                    <div class="flex">
                        @for($i = 1; $i <= 5; $i++)
                        <svg class="w-4 h-4 {{ $i <= $avgRating ? 'text-yellow-400' : 'text-gray-300' }}" 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"></path></svg>
                        @endfor
                    </div>
                    @if($reviewCount > 0)
                    <span class="text-gray-500 text-sm">{{ number_format($avgRating, 2) }}/5</span>
                    @else
                    <span class="text-gray-500 text-sm">No ratings yet</span>
                    @endif
                    <a href="#reviews" class="text-pink-600 text-sm hover:underline">See Reviews</a>
                </div>

                <!-- Product Code -->
                @if($product->sku)
                <div class="mb-3">
                    <span class="inline-block px-3 py-1 text-sm text-white rounded" style="background: var(--primary-color);">Product code : {{ $product->sku }}</span>
                </div>
                @endif

                <!-- Brand & Stock -->
                <div class="space-y-1 mb-4 text-sm text-gray-600">
                    @if($product->brand)
                    <p>Brand : <span class="text-gray-900">{{ $product->brand->name }}</span></p>
                    @endif
                    <p>Remaining Stock: <span class="text-gray-900">{{ $product->stock }}</span></p>
                </div>

                <!-- Stock Progress Bar -->
                @if($product->stock > 0)
                <div class="w-full h-2 bg-gray-200 rounded-full mb-4 overflow-hidden">
                    <div class="h-full rounded-full" style="width: {{ min(100, $product->stock) }}%; background: linear-gradient(90deg, #10b981, #ef4444);"></div>
                </div>
                @endif

                <!-- Quantity -->
                <div class="flex items-center gap-4 mb-4" x-data="{ quantity: 1 }">
                    <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
                        <button type="button" @click="quantity > 1 ? quantity-- : null" class="px-4 py-2 hover:bg-gray-100 transition text-lg">−</button>
                        <input type="number" x-model="quantity" min="1" max="{{ $product->stock }}" class="w-12 text-center border-0 focus:ring-0" id="product-qty">
                        <button type="button" @click="quantity < {{ $product->stock }} ? quantity++ : null" class="px-4 py-2 hover:bg-gray-100 transition text-lg">+</button>
                    </div>
                </div>

                <!-- Action Buttons -->
                @if($product->stock > 0)
                <div class="flex gap-3 mb-4">
                    <form action="{{ route('cart.add') }}" method="POST" class="flex-1" id="cart-form">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="quantity" value="1" id="cart-qty">
                        <input type="hidden" name="action" value="cart">
                        <button type="submit" class="w-full py-3 bg-pink-100 text-pink-600 rounded-lg font-bold hover:bg-pink-200 transition">
                            কার্টে যুক্ত করুন
                        </button>
                    </form>
                    <form action="{{ route('cart.add') }}" method="POST" class="flex-1" id="order-form">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="quantity" value="1" id="order-qty">
                        <input type="hidden" name="action" value="buy_now">
                        <button type="submit" class="w-full py-3 text-white rounded-lg font-bold transition" style="background: var(--primary-color);">
                            অর্ডার করুন
                        </button>
                    </form>
                </div>
                @else
                <div class="mb-4 p-4 bg-red-50 rounded-lg text-center">
                    <p class="text-red-600 font-medium">এই পণ্যটি বর্তমানে স্টকে নেই</p>
                </div>
                @endif

                <!-- Call & WhatsApp Buttons -->
                <div class="flex gap-3 mb-4">
                    @if($phone = \App\Models\Setting::get('phone'))
                    <a href="tel:{{ $phone }}" class="flex-1 py-3 bg-purple-600 text-white rounded-lg font-medium text-center flex items-center justify-center gap-2">
                        <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                        {{ $phone }}
                    </a>
                    @endif
                    @if($whatsapp = \App\Models\Setting::get('whatsapp'))
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $whatsapp) }}" target="_blank" class="flex-1 py-3 bg-gray-800 text-white rounded-lg font-medium text-center">
                        WhatsApp
                    </a>
                    @endif
                </div>

                <!-- Ask About Product -->
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::get('whatsapp', '')) }}?text={{ urlencode('I want to know about: ' . $product->name) }}" 
                   target="_blank"
                   class="block w-full py-3 bg-green-500 text-white rounded-lg font-medium text-center mb-4">
                    <svg class="w-5 h-5 inline mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M17.47,14.38l-2.37-.7a.89.89,0,0,0-.88.22l-.67.67a.87.87,0,0,1-1,.18,10.13,10.13,0,0,1-3.31-3.31.87.87,0,0,1,.18-1l.67-.67a.89.89,0,0,0,.22-.88l-.7-2.37a.89.89,0,0,0-.85-.63H7.05a.89.89,0,0,0-.89.95,14.24,14.24,0,0,0,12.89,12.89.89.89,0,0,0,.95-.89V15.23A.89.89,0,0,0,17.47,14.38Z"/></svg>
                    Ask about this product
                </a>

                <!-- Delivery Info -->
                @php
                    $shippingCharges = \App\Models\ShippingCharge::where('status', true)->orderBy('amount')->get();
                @endphp
                <div class="bg-blue-50 rounded-lg p-4 flex items-start gap-3">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path></svg>
                    </div>
                    <div class="text-sm">
                        @if($shippingCharges->count() > 0)
                            @foreach($shippingCharges as $charge)
                            <p class="text-pink-600 font-medium">{{ $charge->name }} - ৳{{ number_format($charge->amount, 0) }}</p>
                            @endforeach
                        @else
                        <p class="text-pink-600 font-medium">ঢাকা সিটির ভিতরে ১২০ টাকা</p>
                        <p class="text-pink-600 font-medium">ঢাকা সিটির বাইরে ৮০ টাকা</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Description & Reviews Tabs -->
        <div x-data="{ tab: 'description' }" class="bg-white rounded-xl border mb-12" id="reviews">
            <div class="border-b">
                <nav class="flex">
                    <button @click="tab = 'description'" :class="tab === 'description' ? 'border-pink-500 text-pink-600' : 'border-transparent text-gray-500'" class="px-6 py-4 border-b-2 font-medium transition">Description</button>
                    <button @click="tab = 'reviews'" :class="tab === 'reviews' ? 'border-pink-500 text-pink-600' : 'border-transparent text-gray-500'" class="px-6 py-4 border-b-2 font-medium transition">Reviews ({{ $product->approvedReviews->count() }})</button>
                </nav>
            </div>
            
            <div class="p-6">
                <div x-show="tab === 'description'">
                    <h3 class="text-lg font-bold text-pink-600 mb-4">Details</h3>
                    <div class="prose max-w-none text-gray-600">
                        {!! $product->description !!}
                    </div>
                </div>
                
                <div x-show="tab === 'reviews'" x-cloak>
                    <h3 class="text-lg font-bold text-pink-600 mb-4">Reviews ({{ $product->approvedReviews->count() }})</h3>
                    @if($product->approvedReviews->count() > 0)
                    <div class="space-y-4">
                        @foreach($product->approvedReviews as $review)
                        <div class="border-b pb-4">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="w-8 h-8 bg-pink-100 rounded-full flex items-center justify-center text-pink-600 font-bold text-sm">
                                    {{ substr($review->customer->name ?? 'C', 0, 1) }}
                                </div>
                                <span class="font-medium">{{ $review->customer->name ?? 'Customer' }}</span>
                                <div class="flex">
                                    @for($i = 1; $i <= 5; $i++)
                                    <svg class="w-4 h-4 {{ $i <= $review->rating ? 'text-yellow-400' : 'text-gray-300' }}" 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"></path></svg>
                                    @endfor
                                </div>
                            </div>
                            <p class="text-gray-600 text-sm">{{ $review->comment }}</p>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-8">
                        <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-400" 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>
                        </div>
                        <p class="text-gray-500 mb-4">This product has no reviews yet. Be the first to write a review.</p>
                        <button class="px-6 py-2 text-white rounded-lg" style="background: var(--primary-color);">Write a review</button>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Related Products -->
        @if($relatedProducts->count() > 0)
        <section>
            <h2 class="text-xl font-bold text-pink-600 mb-6">Related Product</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                @foreach($relatedProducts as $related)
                @include('frontend.partials.product-card', ['product' => $related])
                @endforeach
            </div>
        </section>
        @endif
    </div>
</div>

@push('scripts')
<script>
document.getElementById('product-qty').addEventListener('change', function() {
    document.getElementById('cart-qty').value = this.value;
    document.getElementById('order-qty').value = this.value;
});
</script>
@endpush
@endsection