@extends('layouts.app')
@section('title', $product->title)

@section('content')
<div class="max-w-5xl mx-auto px-4 py-8 grid md:grid-cols-2 gap-8"
     x-data="{ mainImage: '{{ $product->main_image ? asset('storage/'.$product->main_image) : '' }}', qty: 1, selectedVariants: {} }">
    <div>
        <div class="aspect-square bg-gray-100 rounded-2xl overflow-hidden mb-3">
            <img :src="mainImage" class="w-full h-full object-cover">
        </div>
        <div class="flex gap-2">
            @if($product->main_image)
            <button @click="mainImage = '{{ asset('storage/'.$product->main_image) }}'" class="w-16 h-16 rounded-lg overflow-hidden border">
                <img src="{{ asset('storage/'.$product->main_image) }}" class="w-full h-full object-cover">
            </button>
            @endif
            @foreach(($product->images ?? []) as $img)
            <button @click="mainImage = '{{ asset('storage/') }}/{{ $img }}'" class="w-16 h-16 rounded-lg overflow-hidden border">
                <img src="{{ asset('storage/'.$img) }}" class="w-full h-full object-cover">
            </button>
            @endforeach
        </div>
        @if($product->youtube_link)
        <div class="mt-4 aspect-video rounded-xl overflow-hidden">
            <iframe class="w-full h-full" src="{{ str_replace('watch?v=', 'embed/', $product->youtube_link) }}" allowfullscreen></iframe>
        </div>
        @endif
    </div>

    <div>
        <h1 class="text-2xl font-bold">{{ $product->title }}</h1>
        <div class="flex items-center gap-3 mt-2">
            <span class="text-brand text-2xl font-bold">৳{{ number_format($product->displayPrice(), 0) }}</span>
            @if($product->discount_price)
            <span class="text-gray-400 line-through">৳{{ number_format($product->price, 0) }}</span>
            @endif
        </div>

        <div class="prose prose-sm mt-4 max-w-none">{!! $product->description !!}</div>

        @php $groupedVariants = $product->variants->groupBy('type'); @endphp
        @foreach($groupedVariants as $type => $options)
        <div class="mt-4">
            <div class="text-sm font-semibold mb-1 capitalize">{{ $type }}</div>
            <div class="flex flex-wrap gap-2">
                @foreach($options as $opt)
                <button type="button" @click="selectedVariants['{{ $type }}'] = '{{ $opt->name }}: {{ $opt->value }}'"
                        :class="selectedVariants['{{ $type }}'] === '{{ $opt->name }}: {{ $opt->value }}' ? 'border-brand text-brand' : 'border-gray-300'"
                        class="border rounded-full px-3 py-1 text-sm">
                    {{ $opt->value }}
                </button>
                @endforeach
            </div>
        </div>
        @endforeach

        <div class="flex items-center gap-3 mt-6">
            <div class="flex items-center border rounded-full">
                <button @click="qty = Math.max(1, qty - 1)" class="w-9 h-9">-</button>
                <span class="w-8 text-center" x-text="qty"></span>
                <button @click="qty++" class="w-9 h-9">+</button>
            </div>
            <button @click="blenkoAddToCart({
                        product_id: {{ $product->id }},
                        title: '{{ addslashes($product->title) }}',
                        price: {{ $product->displayPrice() }},
                        image: mainImage,
                        quantity: qty,
                        variant: selectedVariants,
                        variant_label: Object.values(selectedVariants).join(', ')
                    })"
                    class="flex-1 bg-brand text-white py-3 rounded-full font-semibold {{ $product->inStock() ? '' : 'opacity-50 pointer-events-none' }}">
                {{ $product->inStock() ? 'Order Now' : 'Out of stock' }}
            </button>
        </div>
    </div>
</div>

@if($product->reviews->count())
<div class="max-w-5xl mx-auto px-4 pb-10">
    <h3 class="font-bold text-lg mb-3">Customer Reviews</h3>
    <div class="space-y-3">
        @foreach($product->reviews as $review)
        <div class="border rounded-xl p-3">
            <div class="font-medium text-sm">{{ $review->customer_name ?: 'Verified Buyer' }} — {{ str_repeat('★', $review->rating) }}</div>
            <p class="text-sm text-gray-600">{{ $review->comment }}</p>
        </div>
        @endforeach
    </div>
</div>
@endif

@if($related->count())
<div class="max-w-5xl mx-auto px-4 pb-10">
    <h3 class="font-bold text-lg mb-3">You may also like</h3>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        @foreach($related as $r)
            @include('front.partials.product-card', ['product' => $r])
        @endforeach
    </div>
</div>
@endif
@endsection