<!-- Product Quick View Modal -->
<div id="product-quick-view-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
    <div class="relative top-10 mx-auto p-5 border max-w-4xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <!-- Modal Header -->
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-medium text-gray-900">Quick View</h3>
                <button type="button" id="quick-view-close" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            <!-- Loading State -->
            <div id="quick-view-loading" class="text-center py-8">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                <p class="mt-2 text-gray-600">Loading product details...</p>
            </div>
            
            <!-- Product Content -->
            <div id="quick-view-content" class="hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Product Images -->
                    <div class="space-y-4">
                        <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
                            <img id="quick-view-main-image" src="" alt="" class="w-full h-full object-cover">
                        </div>
                        <div id="quick-view-thumbnails" class="grid grid-cols-4 gap-2">
                            <!-- Thumbnail images will be loaded here -->
                        </div>
                    </div>
                    
                    <!-- Product Details -->
                    <div class="space-y-4">
                        <div>
                            <h2 id="quick-view-name" class="text-2xl font-bold text-gray-900"></h2>
                            <p id="quick-view-category" class="text-blue-600 font-medium"></p>
                        </div>
                        
                        <div class="flex items-center space-x-4">
                            <span id="quick-view-price" class="text-3xl font-bold text-blue-600"></span>
                        </div>

                        <p id="quick-view-base-rate" class="text-xs text-gray-500"></p>

                        <div id="quick-view-variant-selector" class="hidden space-y-2">
                            <h4 class="font-semibold text-gray-900 text-sm">Variant</h4>
                            <div id="quick-view-variant-pills" class="flex flex-wrap gap-2"></div>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-2">Short Description</h4>
                            <div id="quick-view-description" class="text-gray-600 text-sm leading-relaxed"></div>
                        </div>
                        
                        <div id="quick-view-features" class="space-y-2">
                            <h4 class="font-semibold text-gray-900">Features</h4>
                            <ul id="quick-view-features-list" class="text-sm text-gray-600 space-y-1">
                                <!-- Features will be loaded here -->
                            </ul>
                        </div>
                        
                        <!-- Add to Cart Section -->
                        <div class="border-t pt-4">
                            <div class="flex items-center space-x-4 mb-4">
                                <label for="quick-view-quantity" class="text-sm font-medium text-gray-700">Quantity:</label>
                                <div class="flex items-center border border-gray-300 rounded-md">
                                    <button type="button" id="quick-view-decrease" class="px-3 py-1 text-gray-600 hover:text-gray-800">−</button>
                                    <input type="number" id="quick-view-quantity" value="1" min="1" class="w-16 px-2 py-1 text-center border-0 focus:ring-0">
                                    <button type="button" id="quick-view-increase" class="px-3 py-1 text-gray-600 hover:text-gray-800">+</button>
                                </div>
                            </div>
                            
                            <div class="flex space-x-3">
                                <button id="quick-view-add-to-cart" class="flex-1 bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                                    <svg class="w-5 h-5 inline 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.4m0 0L7 13m0 0l-2.5 5M7 13v5a2 2 0 002 2h6a2 2 0 002-2v-5"></path>
                                    </svg>
                                    Add to Cart
                                </button>
                                <a id="quick-view-full-details" href="#" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors text-center">
                                    View Full Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Event Listeners Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Setting up quick view event listeners...');
    
    // Close button
    const closeBtn = document.getElementById('quick-view-close');
    if (closeBtn) {
        closeBtn.addEventListener('click', function() {
            if (typeof window.closeQuickView === 'function') {
                window.closeQuickView();
            }
        });
    }
    
    // Modal backdrop click
    const modal = document.getElementById('product-quick-view-modal');
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal && typeof window.closeQuickView === 'function') {
                window.closeQuickView();
            }
        });
    }
    
    // Quantity controls
    const decreaseBtn = document.getElementById('quick-view-decrease');
    const increaseBtn = document.getElementById('quick-view-increase');
    
    if (decreaseBtn) {
        decreaseBtn.addEventListener('click', function() {
            const input = document.getElementById('quick-view-quantity');
            if (input && input.value > 1) {
                input.value = parseInt(input.value) - 1;
            }
        });
    }
    
    if (increaseBtn) {
        increaseBtn.addEventListener('click', function() {
            const input = document.getElementById('quick-view-quantity');
            if (input) {
                input.value = parseInt(input.value) + 1;
            }
        });
    }
    
    // Add to cart functionality
    const addToCartBtn = document.getElementById('quick-view-add-to-cart');
    if (addToCartBtn) {
        addToCartBtn.addEventListener('click', function() {
            const quantity = document.getElementById('quick-view-quantity').value;
            const productId = window.currentQuickViewProductId;
            
            if (!productId) {
                console.error('No product ID available for add to cart');
                return;
            }
            
            // Use existing addToCart function if available
            if (typeof addToCart === 'function') {
                addToCart(productId, quantity);
                if (typeof window.closeQuickView === 'function') {
                    window.closeQuickView();
                }
            } else {
                console.error('addToCart function not available');
            }
        });
    }
    
    console.log('Quick view event listeners setup complete');
});
</script>
</script>