@php
    $productVariants = $product->normalizedVariants();
    $defaultVariant = $productVariants[0] ?? null;
@endphp
<x-shop-layout :title="$product->name" :description="$product->description ?? ''" :canonical="route('shop.product', $product)">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <!-- Breadcrumb -->
        <nav class="mb-4 text-xs">
            <ol class="flex items-center space-x-2 text-gray-500">
                <li><a href="{{ route('shop.index') }}" class="hover:text-blue-600 transition-colors">হোম</a></li>
                <li>/</li>
                <li><a href="{{ route('shop.products') }}" class="hover:text-blue-600 transition-colors">শপ</a></li>
                <li>/</li>
                <li><a href="{{ route('shop.products', ['category' => $product->category->slug]) }}" class="hover:text-blue-600 transition-colors">{{ $product->category->name }}</a></li>
                <li>/</li>
                <li class="text-gray-900 font-medium">{{ $product->name }}</li>
            </ol>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 mb-10">
            <!-- Product Images -->
            <div class="space-y-3 sm:space-y-4">
                <!-- Main Image -->
                <div class="relative rounded-xl sm:rounded-2xl overflow-hidden bg-white border border-gray-100 shadow-lg">
                    @if($product->images && count($product->images) > 0)
                        <img id="main-image" src="{{ storage_url($product->images[0]) }}" alt="{{ $product->name }}" 
                             class="w-full aspect-square object-cover transition-transform duration-300 hover:scale-105">
                    @else
                        <div class="w-full aspect-square bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
                            <span class="text-7xl sm:text-9xl opacity-20">🐟</span>
                        </div>
                    @endif
                    
                    <!-- Discount Badge -->
                    @if($product->original_price && $product->original_price > $product->price)
                        <div class="absolute top-3 sm:top-4 right-3 sm:right-4">
                            <span class="bg-gradient-to-r from-red-500 to-pink-500 text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-full font-bold text-xs sm:text-sm shadow-lg">
                                -{{ round((($product->original_price - $product->price) / $product->original_price) * 100) }}%
                            </span>
                        </div>
                    @endif
                </div>

                <!-- Thumbnail Images -->
                @if($product->images && count($product->images) > 1)
                    <div class="flex space-x-2 sm:space-x-3 overflow-x-auto pb-2">
                        @foreach($product->images as $index => $image)
                            <img src="{{ storage_url($image) }}" alt="{{ $product->name }}" 
                                 class="w-16 h-16 sm:w-20 sm:h-20 object-cover rounded-lg sm:rounded-xl cursor-pointer border-2 {{ $index === 0 ? 'border-blue-500 shadow-md' : 'border-gray-200' }} hover:border-blue-500 hover:shadow-md transition-all duration-300 flex-shrink-0"
                                 onclick="changeMainImage('{{ storage_url($image) }}', this)">
                        @endforeach
                    </div>
                @endif
            </div>

            <!-- Product Details -->
            <div class="space-y-4 sm:space-y-5">
                <!-- Title and Category -->
                <div>
                    <a href="{{ route('shop.products', ['category' => $product->category->slug]) }}" class="inline-block mb-2">
                        <span class="bg-blue-50 text-blue-600 px-2.5 sm:px-3 py-1 rounded-full text-xs font-semibold hover:bg-blue-100 transition-colors">
                            {{ $product->category->name }}
                        </span>
                    </a>
                    <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mb-2">{{ $product->name }}</h1>
                    
                    <!-- Rating -->
                    <!-- <div class="flex items-center space-x-2">
                        <div class="flex text-yellow-400">
                            @for($i = 0; $i < 5; $i++)
                                <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 fill-current" viewBox="0 0 20 20">
                                    <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                                </svg>
                            @endfor
                        </div>
                        <span class="text-gray-500 text-xs">(৫০)</span>
                    </div> -->
                </div>

                <!-- Price & Stock -->
                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-3 sm:p-4 rounded-xl border border-blue-100">
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-baseline space-x-1.5 sm:space-x-2">
                            <span class="text-2xl sm:text-3xl font-bold text-blue-600" id="variant-price">
                                ৳{{ number_format($defaultVariant['final_price'] ?? $product->price, 0) }}
                            </span>
                            <!-- <span class="text-xs sm:text-sm text-gray-600" id="variant-unit">/{{ $defaultVariant['unit'] ?? $product->unit }}</span> -->
                            @if($product->original_price && $product->original_price > $product->price)
                                <span class="text-base sm:text-lg text-gray-400 line-through">
                                    ৳{{ number_format($product->original_price, 0) }}
                                </span>
                            @endif
                        </div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1" id="variant-base-rate">
                        ৳{{ number_format($defaultVariant['base_unit_price'] ?? $product->price, 2) }} / {{ $defaultVariant['unit'] ?? $product->unit }}
                    </p>
                </div>

                <!-- Variant Selector -->
                @if($product->variants && count($product->variants) > 1)
                <div class="bg-white p-3 sm:p-4 rounded-xl border border-gray-200">
                    <h4 class="text-sm font-semibold text-gray-900 mb-3">Select Variant</h4>
                    <div class="flex flex-wrap gap-2" id="variant-pills">
                        @foreach($product->variants as $index => $variant)
                            <button type="button"
                                    onclick="selectVariant({{ $index }})"
                                    class="variant-pill px-3 py-1.5 rounded-full text-xs font-medium border transition-all duration-200
                                        {{ $index === 0 ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:text-blue-600' }}"
                                    data-index="{{ $index }}">
                                {{ $variant['label'] }}
                            </button>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Add to Cart -->
                <div class="bg-white p-3 sm:p-4 rounded-xl border-2 border-blue-100 space-y-3">
                    <!-- Quantity Selector -->
                    <div class="flex items-center justify-between sm:justify-start sm:space-x-2">
                        <label class="text-sm font-semibold text-gray-700">পরিমাণ</label>
                        <div class="flex items-center border-2 border-gray-200 rounded-lg overflow-hidden">
                            <button type="button" onclick="updateQuantity(-1)" 
                                    class="px-3 py-2 text-gray-700 hover:bg-blue-600 hover:text-white transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M20 12H4"></path>
                                </svg>
                            </button>
                            <input type="number" id="quantity" value="1" min="1" max="10" 
                                   class="w-16 px-2 py-2 text-center font-bold border-0 focus:ring-0 focus:outline-none">
                            <button type="button" onclick="updateQuantity(1)" 
                                    class="px-3 py-2 text-gray-700 hover:bg-blue-600 hover:text-white transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    @if($availableServices && $availableServices->count() > 0)
                        <div class="border-t border-gray-100 pt-3 space-y-2">
                            <label class="text-sm font-semibold text-gray-700 block">অতিরিক্ত পরিসেবা</label>
                            @foreach($availableServices as $item)
                                <label class="flex items-center justify-between p-2 rounded-lg border border-gray-100 hover:bg-gray-50 cursor-pointer">
                                    <div class="flex items-center space-x-2">
                                        <input type="checkbox" class="service-checkbox w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" 
                                               value="{{ $item['service']->name }}"
                                               data-service-id="{{ $item['service']->id }}" 
                                               data-resolved-price="{{ $item['resolved_price'] }}"
                                               data-billing-type="{{ $item['service']->billing_type }}">
                                        <span class="text-sm text-gray-700">{{ $item['service']->name }}</span>
                                    </div>
                                    <span class="text-sm font-bold text-blue-600">৳{{ number_format($item['resolved_price'], 0) }}</span>
                                </label>
                            @endforeach
                        </div>
                    @endif

                    <!-- Buttons -->
                    <div class="flex space-x-2">
                        <button onclick="addToCart({{ $product->id }}, this); return false;" 
                                class="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white py-2.5 sm:py-2 px-4 sm:px-6 rounded-lg font-bold hover:from-blue-700 hover:to-blue-800 transition-all duration-300 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed flex items-center justify-center shadow-md hover:shadow-lg text-sm sm:text-base">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                            </svg>
                            <span class="hidden xs:inline">কার্টে যোগ করুন</span>
                            <span class="xs:hidden">যোগ করুন</span>
                        </button>
                        
                        <button class="bg-white border-2 border-gray-200 text-gray-700 p-2.5 sm:p-2 rounded-lg hover:border-red-500 hover:text-red-500 transition-all">
                            <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>
                        </button>
                    </div>
                </div>

                <!-- Description -->
                @if($product->description)
                    <div class="bg-white p-3 sm:p-4 rounded-xl border border-gray-100">
                        <h3 class="text-xs sm:text-sm font-bold text-gray-900 mb-2 flex items-center">
                            <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            বিবরণ
                        </h3>
                        <div class="text-gray-600 text-xs sm:text-sm leading-relaxed">{!! $product->description !!}</div>
                    </div>
                @endif

                <!-- Product Details -->
                <div class="bg-gray-50 p-3 sm:p-4 rounded-xl border border-gray-200">
                    <h3 class="text-xs sm:text-sm font-bold text-gray-900 mb-2 sm:mb-3 flex items-center">
                        <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-1.5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        পণ্যের বিবরণ
                    </h3>
                    <div class="grid grid-cols-2 gap-2 sm:gap-3 text-xs">
                        <div class="bg-white p-2 rounded-lg">
                            <span class="text-gray-500 block mb-0.5">ক্যাটাগরি</span>
                            <span class="font-semibold text-gray-900">{{ $product->category->name }}</span>
                        </div>
                        <div class="bg-white p-2 rounded-lg">
                            <span class="text-gray-500 block mb-0.5">একক</span>
                            <span class="font-semibold text-gray-900">{{ $product->unit }}</span>
                        </div>
                    </div>
                </div>

                <!-- Delivery Info -->
                @if($deliveryInfos && $deliveryInfos->count() > 0)
                    @foreach($deliveryInfos as $deliveryInfo)
                        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-3 sm:p-4 rounded-xl border border-blue-100">
                            <h3 class="font-bold text-blue-900 mb-2 sm:mb-3 flex items-center text-xs sm:text-sm">
                                <span class="bg-blue-600 text-white w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center mr-2 text-base sm:text-lg">
                                    {{ $deliveryInfo->icon }}
                                </span>
                                {{ $deliveryInfo->title }}
                            </h3>
                            <ul class="text-xs text-blue-900 space-y-1.5 sm:space-y-2">
                                @foreach($deliveryInfo->items as $item)
                                    <li class="flex items-start">
                                        <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-blue-600 mr-2 mt-0.5 flex-shrink-0" 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"></path>
                                        </svg>
                                        <span>{{ $item }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>

        <!-- Related Products -->
        @if($relatedProducts->count() > 0)
            <div class="mt-8 sm:mt-12">
                <div class="flex items-center justify-between mb-4 sm:mb-6">
                    <h2 class="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900">সম্পর্কিত পণ্য</h2>
                    <a href="{{ route('shop.products', ['category' => $product->category->slug]) }}" class="text-blue-600 hover:text-blue-700 font-semibold text-xs sm:text-sm flex items-center group">
                        সব দেখুন
                        <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 ml-1 group-hover:translate-x-1 transition-transform" 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"></path>
                        </svg>
                    </a>
                </div>
                
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 lg:gap-4">
                    @foreach($relatedProducts as $relatedProduct)
                        <div class="bg-white rounded-xl border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group">
                            <!-- Product Image -->
                            <div class="relative aspect-square overflow-hidden bg-gray-50">
                                <a href="{{ route('shop.product', $relatedProduct) }}">
                                    @if($relatedProduct->images && count($relatedProduct->images) > 0)
                                        <img src="{{ storage_url($relatedProduct->images[0]) }}" 
                                             alt="{{ $relatedProduct->name }}" 
                                             class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                                             onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 400%22%3E%3Crect fill=%22%23f3f4f6%22 width=%22400%22 height=%22400%22/%3E%3Ctext fill=%22%239ca3af%22 font-family=%22sans-serif%22 font-size=%22100%22 text-anchor=%22middle%22 x=%22200%22 y=%22240%22%3E🐟%3C/text%3E%3C/svg%3E';">
                                    @else
                                        <div class="w-full h-full bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
                                            <span class="text-6xl opacity-20">🐟</span>
                                        </div>
                                    @endif
                                </a>
                                
                                <!-- Discount Badge -->
                                @if($relatedProduct->original_price && $relatedProduct->original_price > $relatedProduct->price)
                                    <div class="absolute top-2 right-2">
                                        <span class="bg-gradient-to-r from-red-500 to-pink-500 text-white px-2 py-0.5 rounded-full text-xs font-bold shadow-lg">
                                            -{{ round((($relatedProduct->original_price - $relatedProduct->price) / $relatedProduct->original_price) * 100) }}%
                                        </span>
                                    </div>
                                @endif
                            </div>
                            
                            <!-- Product Info -->
                            <div class="p-3">
                                <!-- Category Badge -->
                                <div class="mb-1.5">
                                    <span class="inline-block bg-blue-50 text-blue-600 px-2 py-0.5 rounded text-xs font-semibold">
                                        {{ $relatedProduct->category->name }}
                                    </span>
                                </div>

                                <!-- Product Name -->
                                <h3 class="font-bold text-gray-900 text-sm mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors min-h-[2.5rem]">
                                    <a href="{{ route('shop.product', $relatedProduct) }}">
                                        {{ $relatedProduct->name }}
                                    </a>
                                </h3>
                                
                                <!-- Price -->
                                <div class="mb-2">
                                    <div class="flex items-baseline space-x-1">
                                        <span class="text-lg font-bold text-blue-600">
                                            ৳{{ number_format($relatedProduct->price, 0) }}
                                        </span>
                                        <span class="text-xs text-gray-500">/{{ $relatedProduct->unit }}</span>
                                    </div>
                                    @if($relatedProduct->original_price && $relatedProduct->original_price > $relatedProduct->price)
                                        <div class="text-xs text-gray-400 line-through">
                                            ৳{{ number_format($relatedProduct->original_price, 0) }}
                                        </div>
                                    @endif
                                </div>

                                <!-- Add to Cart Button -->
                                <button onclick="openQuickView({{ $relatedProduct->id }}); return false;" 
                                        class="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-2 px-3 rounded-lg font-semibold hover:from-blue-700 hover:to-blue-800 transition-all duration-300 disabled:from-gray-300 disabled:to-gray-400 text-xs shadow-sm hover:shadow-md flex items-center justify-center">
                                    <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                                    </svg>
                                    কার্টে যোগ করুন
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>

    <!-- Scripts -->
    <script>
        window.productVariants = @json($productVariants);
        window.selectedVariant = window.productVariants[0] || null;

        function changeMainImage(imageSrc, thumbnail) {
            const mainImage = document.getElementById('main-image');
            
            // Fade out effect
            mainImage.style.opacity = '0.5';
            
            setTimeout(() => {
                mainImage.src = imageSrc;
                mainImage.style.opacity = '1';
            }, 150);
            
            // Update thumbnail borders
            document.querySelectorAll('.w-16, .w-20').forEach(img => {
                img.classList.remove('border-blue-500', 'shadow-md');
                img.classList.add('border-gray-200');
            });
            thumbnail.classList.add('border-blue-500', 'shadow-md');
            thumbnail.classList.remove('border-gray-200');
        }

        function updateQuantity(change) {
            const quantityInput = document.getElementById('quantity');
            const currentValue = parseInt(quantityInput.value);
            const newValue = currentValue + change;
            
            if (newValue >= 1 && newValue <= 10) {
                quantityInput.value = newValue;
            }
        }

        function selectVariant(index) {
            const variant = (window.productVariants || [])[index];
            if (!variant) {
                return;
            }

            window.selectedVariant = variant;

            document.querySelectorAll('.variant-pill').forEach(button => {
                const isActive = parseInt(button.dataset.index) === index;
                button.classList.toggle('bg-blue-600', isActive);
                button.classList.toggle('text-white', isActive);
                button.classList.toggle('border-blue-600', isActive);
                button.classList.toggle('bg-white', !isActive);
                button.classList.toggle('text-gray-700', !isActive);
                button.classList.toggle('border-gray-300', !isActive);
            });

            const priceEl = document.getElementById('variant-price');
            const unitEl = document.getElementById('variant-unit');
            const baseRateEl = document.getElementById('variant-base-rate');
            const unit = variant.unit || '{{ $product->unit }}';

            if (priceEl) {
                priceEl.textContent = '৳' + Number(variant.final_price || 0).toLocaleString();
            }

            if (unitEl) {
                unitEl.textContent = '/' + unit;
            }

            if (baseRateEl) {
                baseRateEl.textContent = '৳' + Number(variant.base_unit_price || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' / ' + unit;
            }
        }

        function addToCart(productId, triggerButton) {
            const quantity = parseInt(document.getElementById('quantity').value);
            const button = triggerButton || (typeof event !== 'undefined' ? event.target.closest('button') : null);
            if (!button) {
                return;
            }
            const originalText = button.innerHTML;

            const selectedVariant = window.selectedVariant || null;

            const selectedServices = [];
            document.querySelectorAll('.service-checkbox:checked').forEach(cb => {
                selectedServices.push({
                    id: parseInt(cb.dataset.serviceId),
                    name: cb.value,
                    resolved_price: parseFloat(cb.dataset.resolvedPrice),
                    billing_type: cb.dataset.billingType,
                });
            });
            
            // Disable button and show loading
            button.disabled = true;
            button.innerHTML = `
                <svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></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>
                যোগ করা হচ্ছে...
            `;
            
            fetch('{{ route("cart.add") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    product_id: productId,
                    quantity: quantity,
                    variant_index: selectedVariant && selectedVariant.index !== undefined ? selectedVariant.index : null,
                    services: selectedServices,
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const cartCount = document.getElementById('cart-count');
                    if (cartCount) {
                        cartCount.textContent = data.cartCount;
                        cartCount.parentElement.classList.add('animate-bounce');
                        setTimeout(() => {
                            cartCount.parentElement.classList.remove('animate-bounce');
                        }, 1000);
                    }
                    
                    showToast('পণ্য কার্টে যোগ করা হয়েছে!', 'success');
                    
                    if (typeof showStickyCartBar === 'function') showStickyCartBar();
                    
                    button.disabled = false;
                    button.innerHTML = originalText;
                } else {
                    showToast(data.message || 'পণ্য কার্টে যোগ করা যায়নি', 'error');
                    button.disabled = false;
                    button.innerHTML = originalText;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('কার্টে যোগ করার সময় একটি সমস্যা হয়েছে', 'error');
                button.disabled = false;
                button.innerHTML = originalText;
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            selectVariant(window.selectedVariant && window.selectedVariant.index !== undefined ? window.selectedVariant.index : 0);
        });
    </script>
</x-shop-layout>