templates/products.html

{% extends "base.html" %}

{% block title %}Products - Too Many Cables{% endblock %}

{% block content %}
<!-- Page Header -->
<section class="page-header">
    <div class="header-container">
        <div class="header-card">
            <h1>Our Products</h1>
            <p>Premium cables and accessories for all your connectivity needs</p>
        </div>
    </div>
</section>

<!-- Products Grid -->
<section class="products-section">
    <div class="container">
        <div class="products-grid" id="products-grid">
            <!-- USB-C Cables -->
            <div class="product-card" data-category="usb-c" data-price="24.99">
                <div class="product-image">🔌</div>
                <h3>USB-C Premium Cable (100W)</h3>
                <p class="product-description">100W fast charging, 10Gbps data transfer, 6ft length with braided nylon protection</p>
                <div class="product-specs">
                    <span class="spec">100W Power</span>
                    <span class="spec">10Gbps Speed</span>
                    <span class="spec">6ft Length</span>
                </div>
                <div class="product-price">$24.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (1,247 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('usb-c-cable')">More Details</button>
            </div>

            <div class="product-card" data-category="usb-c" data-price="19.99">
                <div class="product-image">🔌</div>
                <h3>USB-C Standard Cable (60W)</h3>
                <p class="product-description">60W fast charging, 5Gbps data transfer, 3ft compact design with PVC jacket</p>
                <div class="product-specs">
                    <span class="spec">60W Power</span>
                    <span class="spec">5Gbps Speed</span>
                    <span class="spec">3ft Length</span>
                </div>
                <div class="product-price">$19.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (892 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('usb-c-standard')">More Details</button>
            </div>

            <div class="product-card" data-category="usb-c" data-price="16.99">
                <div class="product-image">🔌</div>
                <h3>USB-A to USB-C Cable</h3>
                <p class="product-description">Universal compatibility, 18W fast charging, 6ft braided design</p>
                <div class="product-specs">
                    <span class="spec">18W Charging</span>
                    <span class="spec">5Gbps Speed</span>
                    <span class="spec">6ft Length</span>
                </div>
                <div class="product-price">$16.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (734 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('usb-c-to-usb-a')">More Details</button>
            </div>

            <!-- HDMI Cables -->
            <div class="product-card" data-category="hdmi" data-price="34.99">
                <div class="product-image">📺</div>
                <h3>8K HDMI Cable (Ultra High Speed)</h3>
                <p class="product-description">8K@60Hz, 4K@120Hz, HDR10+, Dolby Vision, premium 10ft cable with gold-plated connectors</p>
                <div class="product-specs">
                    <span class="spec">8K@60Hz</span>
                    <span class="spec">48 Gbps</span>
                    <span class="spec">10ft Length</span>
                </div>
                <div class="product-price">$34.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (856 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('4k-hdmi-cable')">More Details</button>
            </div>

            <div class="product-card" data-category="hdmi" data-price="24.99">
                <div class="product-image">📺</div>
                <h3>4K HDMI Cable (High Speed)</h3>
                <p class="product-description">4K@60Hz, 1440p@144Hz, HDR10+, ARC audio, 6ft cable with durable PVC jacket</p>
                <div class="product-specs">
                    <span class="spec">4K@60Hz</span>
                    <span class="spec">18 Gbps</span>
                    <span class="spec">6ft Length</span>
                </div>
                <div class="product-price">$24.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (634 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('hdmi-standard')">More Details</button>
            </div>

            <div class="product-card" data-category="hdmi" data-price="18.99">
                <div class="product-image">📺</div>
                <h3>HDMI to USB-C Cable</h3>
                <p class="product-description">Direct connection from laptop to monitor, 4K@60Hz, 6ft cable</p>
                <div class="product-specs">
                    <span class="spec">4K@60Hz</span>
                    <span class="spec">Plug & Play</span>
                    <span class="spec">6ft Length</span>
                </div>
                <div class="product-price">$18.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (445 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('hdmi-usb-c-cable')">More Details</button>
            </div>

            <div class="product-card" data-category="hdmi" data-price="14.99">
                <div class="product-image">📺</div>
                <h3>Mini HDMI to HDMI Cable</h3>
                <p class="product-description">Connect tablets and cameras to displays, 4K@30Hz, 3ft flexible design</p>
                <div class="product-specs">
                    <span class="spec">4K@30Hz</span>
                    <span class="spec">Mini HDMI</span>
                    <span class="spec">3ft Length</span>
                </div>
                <div class="product-price">$14.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (312 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('mini-hdmi-cable')">More Details</button>
            </div>

            <div class="product-card" data-category="hdmi" data-price="14.99">
                <div class="product-image">📺</div>
                <h3>Micro HDMI to HDMI Cable</h3>
                <p class="product-description">Connect action cameras and devices to displays, 4K@30Hz, 3ft ultra-flexible</p>
                <div class="product-specs">
                    <span class="spec">4K@30Hz</span>
                    <span class="spec">Micro HDMI</span>
                    <span class="spec">3ft Length</span>
                </div>
                <div class="product-price">$14.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (284 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('micro-hdmi-cable')">More Details</button>
            </div>

            <!-- Lightning Cables -->
            <div class="product-card" data-category="lightning" data-price="19.99">
                <div class="product-image">⚡</div>
                <h3>Lightning to USB-A Cable (MFi)</h3>
                <p class="product-description">Apple MFi certified, 2.4A fast charging, 6ft durable cable for iPhone and iPad</p>
                <div class="product-specs">
                    <span class="spec">MFi Certified</span>
                    <span class="spec">2.4A Charging</span>
                    <span class="spec">6ft Length</span>
                </div>
                <div class="product-price">$19.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (1,542 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('lightning-cable')">More Details</button>
            </div>

            <!-- Charging Cables -->
            <div class="product-card" data-category="charging" data-price="49.99">
                <div class="product-image">🔋</div>
                <h3>Multi-Port Charging Hub</h3>
                <p class="product-description">6 ports, 100W total power, USB-C PD, smart charging technology</p>
                <div class="product-specs">
                    <span class="spec">100W Total</span>
                    <span class="spec">6 Ports</span>
                    <span class="spec">Smart Charging</span>
                </div>
                <div class="product-price">$49.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (692 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('charging-hub')">More Details</button>
            </div>

            <div class="product-card" data-category="charging" data-price="29.99">
                <div class="product-image">⚡</div>
                <h3>Wireless Charging Pad</h3>
                <p class="product-description">15W fast wireless charging, Qi-certified, LED indicator, non-slip design</p>
                <div class="product-specs">
                    <span class="spec">15W Fast</span>
                    <span class="spec">Qi Certified</span>
                    <span class="spec">LED Status</span>
                </div>
                <div class="product-price">$29.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (445 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('wireless-charging')">More Details</button>
            </div>

            <!-- Adapters & Hubs -->
            <div class="product-card" data-category="adapters" data-price="34.99">
                <div class="product-image">🔗</div>
                <h3>USB-C Hub Adapter</h3>
                <p class="product-description">7-in-1 hub with HDMI, USB-A, SD card, Ethernet, compact aluminum design</p>
                <div class="product-specs">
                    <span class="spec">7-in-1 Hub</span>
                    <span class="spec">4K HDMI</span>
                    <span class="spec">Gigabit Ethernet</span>
                </div>
                <div class="product-price">$34.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (1,104 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('usb-c-hub')">More Details</button>
            </div>

            <div class="product-card" data-category="adapters" data-price="12.99">
                <div class="product-image">🔄</div>
                <h3>USB-C to HDMI Adapter</h3>
                <p class="product-description">4K@30Hz video output, plug and play, ultra-compact design</p>
                <div class="product-specs">
                    <span class="spec">4K@30Hz</span>
                    <span class="spec">Plug & Play</span>
                    <span class="spec">Compact</span>
                </div>
                <div class="product-price">$12.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (789 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('usb-c-hdmi-adapter')">More Details</button>
            </div>

            <!-- Audio Cables -->
            <div class="product-card" data-category="audio" data-price="16.99">
                <div class="product-image">🎧</div>
                <h3>3.5mm Audio Cable</h3>
                <p class="product-description">Premium gold-plated connectors, tangle-free design, 6ft length</p>
                <div class="product-specs">
                    <span class="spec">Gold Plated</span>
                    <span class="spec">Tangle Free</span>
                    <span class="spec">6ft Length</span>
                </div>
                <div class="product-price">$16.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (567 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('audio-cable')">More Details</button>
            </div>

            <div class="product-card" data-category="audio" data-price="22.99">
                <div class="product-image">🎵</div>
                <h3>USB-C to 3.5mm Adapter</h3>
                <p class="product-description">High-resolution audio, 32-bit DAC, compact aluminum housing</p>
                <div class="product-specs">
                    <span class="spec">Hi-Res Audio</span>
                    <span class="spec">32-bit DAC</span>
                    <span class="spec">Aluminum</span>
                </div>
                <div class="product-price">$22.99</div>
                <div class="product-rating">⭐⭐⭐⭐⭐ (423 reviews)</div>
                <button class="btn btn-primary" onclick="showProductDetails('usb-c-audio-adapter')">More Details</button>
            </div>
        </div>
    </div>
</section>

<!-- Product Support CTA -->
<section class="product-support-cta">
    <div class="container">
                <div class="cta-content">
            <h2>Need Help Choosing?</h2>
            <p>Our AI assistant can help you find the perfect cable for your specific needs.</p>
            <a href="#" class="btn btn-primary btn-large chat-trigger-btn">Get Product Recommendations 💬</a>
        </div>
    </div>
</section>

<!-- Product Details Modal -->
<div id="product-details-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="product-modal-title">Product Details</h2>
            <span class="close-modal" onclick="closeProductModal()">&times;</span>
        </div>
        <div class="modal-body">
            <div id="product-modal-content" class="product-details-content">
                <div class="loading">Loading product specifications...</div>
            </div>
        </div>
    </div>
</div>

<style>
.product-details-content {
    max-height: 70vh;
    overflow-y: auto;
    line-height: 1.6;
}

.product-details-content h3 {
    color: #2c3e50;
    margin-top: 20px;
    margin-bottom: 10px;
}

.product-details-content h4 {
    color: #34495e;
    margin-top: 15px;
    margin-bottom: 8px;
}

.product-details-content h5 {
    color: #5d6d7e;
    margin-top: 12px;
    margin-bottom: 6px;
}

.product-details-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.product-details-content li {
    margin: 5px 0;
}

.product-details-content strong {
    color: #2980b9;
}

.loading {
    text-align: center;
    padding: 40px;
    color: #7f8c8d;
}

.error {
    text-align: center;
    padding: 40px;
    color: #e74c3c;
}

.specs-content {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
{% endblock %}

{% block extra_scripts %}
<script>
    // Product filtering functionality
    document.addEventListener('DOMContentLoaded', function() {
        const categoryFilter = document.getElementById('category-filter');
        const priceFilter = document.getElementById('price-filter');
        const productsGrid = document.getElementById('products-grid');
        const products = Array.from(productsGrid.querySelectorAll('.product-card'));

        function filterProducts() {
            const selectedCategory = categoryFilter.value;
            const selectedPriceRange = priceFilter.value;
            
            products.forEach(product => {
                const category = product.dataset.category;
                const price = parseFloat(product.dataset.price);
                
                let showProduct = true;
                
                // Category filter
                if (selectedCategory && category !== selectedCategory) {
                    showProduct = false;
                }
                
                // Price filter
                if (selectedPriceRange) {
                    const [min, max] = selectedPriceRange.split('-').map(p => p === '+' ? Infinity : parseFloat(p));
                    if (selectedPriceRange.includes('+')) {
                        if (price < min) showProduct = false;
                    } else {
                        if (price < min || price > max) showProduct = false;
                    }
                }
                
                product.style.display = showProduct ? 'block' : 'none';
            });
        }

        // Event listeners
        categoryFilter.addEventListener('change', filterProducts);
        priceFilter.addEventListener('change', filterProducts);
    });

    // Product details functionality
    async function showProductDetails(productName) {
        const modal = document.getElementById('product-details-modal');
        const title = document.getElementById('product-modal-title');
        const content = document.getElementById('product-modal-content');
        
        // Show modal with loading state
        modal.style.display = 'flex';
        title.textContent = 'Loading Product Details...';
        content.innerHTML = '<div class="loading">Loading product specifications...</div>';
        
        try {
            const response = await fetch(`/api/product/${productName}`);
            const data = await response.json();
            
            if (data.success) {
                // Set product title
                const productTitles = {
                    'usb-c-cable': 'USB-C to USB-C Cable',
                    'usb-c-to-usb-a': 'USB-C to USB-A Cable',
                    '4k-hdmi-cable': '4K HDMI Cable',
                    'hdmi-usb-c-cable': 'HDMI to USB-C Cable',
                    'charging-hub': 'Multi-Port Charging Hub',
                    'wireless-charging': 'Wireless Charging Pad',
                    'usb-c-hub': 'USB-C Hub Adapter',
                    'usb-c-hdmi-adapter': 'USB-C to HDMI Adapter',
                    'audio-cable': '3.5mm Audio Cable',
                    'usb-c-audio-adapter': 'USB-C to 3.5mm Adapter'
                };
                
                title.textContent = productTitles[productName] || 'Product Details';
                
                // Format and display specifications
                const specs = data.specifications;
                const formattedSpecs = formatProductSpecs(specs);
                content.innerHTML = formattedSpecs;
            } else {
                content.innerHTML = '<div class="error">Failed to load product specifications. Please try again.</div>';
            }
        } catch (error) {
            console.error('Error fetching product details:', error);
            content.innerHTML = '<div class="error">Failed to load product specifications. Please try again.</div>';
        }
    }

    function formatProductSpecs(specs) {
        // Convert the raw specifications text into formatted HTML
        let formatted = specs
            .replace(/\n\n/g, '</p><p>')
            .replace(/\n/g, '<br>')
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/^# (.*?)$/gm, '<h3>$1</h3>')
            .replace(/^## (.*?)$/gm, '<h4>$1</h4>')
            .replace(/^### (.*?)$/gm, '<h5>$1</h5>');
        
        return `<div class="specs-content"><p>${formatted}</p></div>`;
    }

    function closeProductModal() {
        const modal = document.getElementById('product-details-modal');
        modal.style.display = 'none';
    }

    // Close modal when clicking outside
    document.addEventListener('click', function(e) {
        const modal = document.getElementById('product-details-modal');
        if (e.target === modal) {
            closeProductModal();
        }
    });
</script>
{% endblock %}