<?php
require_once 'includes/config.php';
require_once 'includes/functions.php';

// Simulate a session where popup hasn't been shown yet
session_start();
unset($_SESSION['popup_shown']);

// Get a random product for testing
$product = getRandomProduct($pdo);
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup Test</title>
    <link rel="stylesheet" href="<?php echo SITE_URL; ?>/assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body dir="<?php echo LANG_DIRECTION; ?>">
    <div class="container">
        <h1>Popup Test Page</h1>
        <p>This page is for testing the product popup notification system.</p>
        <p>The popup should appear automatically after 1 second.</p>
        
        <a href="<?php echo SITE_URL; ?>/index.php" class="btn btn-primary">Go to Homepage</a>
    </div>
    
    <script>
        window.siteUrl = '<?php echo SITE_URL; ?>';
        window.showWelcomePopup = true;
        
        // Simulate the popup functionality
        document.addEventListener('DOMContentLoaded', function() {
            if (window.showWelcomePopup) {
                // Show welcome popup after a short delay
                setTimeout(function() {
                    // Fetch a random product
                    fetch(window.siteUrl + '/get_random_product.php')
                        .then(response => response.json())
                        .then(data => {
                            if (data.success && data.product) {
                                createProductPopup(data.product, true);
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching random product:', error);
                        });
                }, 1000);
            }
        });
        
        function createProductPopup(product, isWelcome = false) {
            // Check if popup already exists
            if (document.querySelector('.product-popup')) {
                return;
            }
            
            // Create popup element
            const popup = document.createElement('div');
            popup.className = 'product-popup';
            
            // Set content based on whether it's a welcome popup or not
            if (isWelcome) {
                popup.innerHTML = `
                    <div class="product-popup-header">
                        <h3>Special Promotion!</h3>
                        <button class="product-popup-close">&times;</button>
                    </div>
                    <div class="product-popup-content">
                        <div class="product-popup-image">
                            ${product.image ? 
                                `<img src="${product.image}" alt="${product.name}">` : 
                                `<i class="fas fa-image"></i>`}
                        </div>
                        <div class="product-popup-details">
                            <h4>${product.name}</h4>
                            <div class="product-popup-category">${product.category}</div>
                            <div class="product-popup-price">$${parseFloat(product.price).toFixed(2)}</div>
                            <div class="product-popup-description">Check out this amazing product just for you!</div>
                            <div class="product-popup-actions">
                                <a href="${window.siteUrl}/products/view.php?id=${product.id}" class="product-popup-btn product-popup-view">View Details</a>
                                <button class="product-popup-btn product-popup-add-cart" data-product-id="${product.id}" data-product-name="${product.name}" data-product-price="${product.price}" data-product-image="${product.image || ''}">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                popup.innerHTML = `
                    <div class="product-popup-header">
                        <h3>Special Offer!</h3>
                        <button class="product-popup-close">&times;</button>
                    </div>
                    <div class="product-popup-content">
                        <div class="product-popup-image">
                            ${product.image ? 
                                `<img src="${product.image}" alt="${product.name}">` : 
                                `<i class="fas fa-image"></i>`}
                        </div>
                        <div class="product-popup-details">
                            <h4>${product.name}</h4>
                            <div class="product-popup-category">${product.category}</div>
                            <div class="product-popup-price">$${parseFloat(product.price).toFixed(2)}</div>
                            <div class="product-popup-description">Don't miss out on this special deal!</div>
                            <div class="product-popup-actions">
                                <a href="${window.siteUrl}/products/view.php?id=${product.id}" class="product-popup-btn product-popup-view">View</a>
                                <button class="product-popup-btn product-popup-add-cart" data-product-id="${product.id}" data-product-name="${product.name}" data-product-price="${product.price}" data-product-image="${product.image || ''}">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                `;
            }
            
            // Add to body
            document.body.appendChild(popup);
            
            // Show popup with animation
            setTimeout(() => {
                popup.classList.add('show');
            }, 100);
            
            // Add event listeners
            const closeBtn = popup.querySelector('.product-popup-close');
            closeBtn.addEventListener('click', () => {
                popup.classList.remove('show');
                setTimeout(() => {
                    popup.remove();
                }, 600); // Match the CSS transition duration
            });
            
            // Add to cart button
            const addToCartBtn = popup.querySelector('.product-popup-add-cart');
            addToCartBtn.addEventListener('click', function() {
                const productId = this.dataset.productId;
                const productName = this.dataset.productName;
                const productPrice = this.dataset.productPrice;
                const productImage = this.dataset.productImage;
                
                // Simple alert for testing
                alert(`${productName} would be added to cart!`);
                
                // Show confirmation and close popup
                popup.classList.remove('show');
                setTimeout(() => {
                    popup.remove();
                }, 600); // Match the CSS transition duration
            });
            
            // Auto close after 5 seconds (as per requirements)
            setTimeout(() => {
                if (popup.parentNode) {
                    popup.classList.remove('show');
                    setTimeout(() => {
                        if (popup.parentNode) { // Check if still in DOM
                            popup.remove();
                        }
                    }, 600); // Match the CSS transition duration
                }
            }, 5000);
        }
    </script>
</body>
</html>