<?php
/**
 * Pricing Comparison Demo
 * Shows how different stores have different prices
 */

require_once 'config.php';
require_once 'app/classes/StoreManager.php';
require_once 'app/classes/StorePricingManager.php';

$storeManager = new StoreManager($conn);
$pricingManager = new StorePricingManager($conn);

// Get some stores (max 3 for demo)
$stores = $storeManager->getAllStores(3, 0);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Store Pricing Comparison - D-Bundles Stores</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Poppins', sans-serif; background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); min-height: 100vh; }
    </style>
</head>

<body class="text-white">
    <div class="container mx-auto px-4 py-12">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold mb-4">
                <i class="fas fa-store-alt mr-2 text-blue-400"></i>
                How Store Pricing Works
            </h1>
            <p class="text-xl text-gray-300 mb-2">
                Each store owner sets their OWN prices independently
            </p>
            <p class="text-gray-400">
                Compare how different stores price the same data packages
            </p>
        </div>

        <?php if (count($stores) < 2): ?>
        <div class="bg-yellow-900 border border-yellow-700 text-yellow-100 rounded-lg p-6 max-w-2xl mx-auto">
            <h3 class="font-bold mb-2">
                <i class="fas fa-info-circle mr-2"></i>
                Demo Not Available Yet
            </h3>
            <p class="mb-4">You need at least 2 stores to see the pricing comparison.</p>
            <p>Register more users to create multiple stores, then come back to see how each store can have different prices!</p>
        </div>
        <?php else: ?>
        
        <!-- Package Size Selection -->
        <div class="max-w-md mx-auto mb-8">
            <label class="block text-gray-400 mb-2">Select Package Size:</label>
            <select id="packageSize" class="w-full bg-gray-800 text-white px-4 py-3 rounded-lg border border-gray-700">
                <option value="1">1GB</option>
                <option value="2">2GB</option>
                <option value="3">3GB</option>
                <option value="5">5GB</option>
                <option value="10">10GB</option>
                <option value="20">20GB</option>
            </select>
        </div>

        <!-- Store Comparison -->
        <div class="grid md:grid-cols-<?php echo min(count($stores), 3); ?> gap-6 max-w-6xl mx-auto">
            <?php foreach ($stores as $index => $store): ?>
            <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
                <div class="text-center mb-6">
                    <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-3">
                        <span class="text-2xl font-bold"><?php echo strtoupper(substr($store['store_name'], 0, 1)); ?></span>
                    </div>
                    <h3 class="font-bold text-xl"><?php echo htmlspecialchars($store['store_name']); ?></h3>
                    <p class="text-sm text-gray-400">Store #<?php echo $store['id']; ?></p>
                </div>

                <div class="space-y-3">
                    <div class="bg-gray-900 p-4 rounded-lg">
                        <div class="text-sm text-gray-400 mb-2">For 1GB MTN:</div>
                        <div class="text-2xl font-bold text-green-400" data-store="<?php echo $store['id']; ?>" data-size="1">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                    </div>
                    
                    <div class="bg-gray-900 p-4 rounded-lg">
                        <div class="text-sm text-gray-400 mb-2">For 5GB MTN:</div>
                        <div class="text-2xl font-bold text-green-400" data-store="<?php echo $store['id']; ?>" data-size="5">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                    </div>
                    
                    <div class="bg-gray-900 p-4 rounded-lg">
                        <div class="text-sm text-gray-400 mb-2">For 10GB MTN:</div>
                        <div class="text-2xl font-bold text-green-400" data-store="<?php echo $store['id']; ?>" data-size="10">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                    </div>
                </div>

                <a href="store.php?slug=<?php echo urlencode($store['store_slug']); ?>" 
                   target="_blank"
                   class="block mt-6 bg-blue-600 text-white text-center py-3 rounded-lg hover:bg-blue-700">
                    <i class="fas fa-external-link-alt mr-2"></i>
                    Visit Store
                </a>
            </div>
            <?php endforeach; ?>
        </div>

        <!-- Conclusion -->
        <div class="max-w-3xl mx-auto mt-12 bg-gradient-to-r from-blue-900 to-purple-900 border border-blue-700 rounded-lg p-8 text-center">
            <h2 class="text-2xl font-bold mb-4">
                <i class="fas fa-lightbulb mr-2 text-yellow-400"></i>
                See the Difference?
            </h2>
            <p class="text-lg text-blue-100 mb-6">
                Each store sets their own prices independently. This means:
            </p>
            <div class="grid md:grid-cols-2 gap-4 text-left">
                <div class="bg-white/10 p-4 rounded-lg">
                    <i class="fas fa-check-circle text-green-400 mr-2"></i>
                    You control YOUR pricing
                </div>
                <div class="bg-white/10 p-4 rounded-lg">
                    <i class="fas fa-check-circle text-green-400 mr-2"></i>
                    Compete with other stores
                </div>
                <div class="bg-white/10 p-4 rounded-lg">
                    <i class="fas fa-check-circle text-green-400 mr-2"></i>
                    Set higher or lower prices
                </div>
                <div class="bg-white/10 p-4 rounded-lg">
                    <i class="fas fa-check-circle text-green-400 mr-2"></i>
                    Change prices anytime
                </div>
            </div>
            <a href="register.php" 
               class="inline-block mt-6 px-8 py-4 bg-white text-blue-600 rounded-lg hover:bg-gray-100 font-bold">
                <i class="fas fa-rocket mr-2"></i>
                Create Your Store Now
            </a>
        </div>
        <?php endif; ?>
    </div>

    <script>
        const stores = <?php echo json_encode($stores); ?>;
        
        // Calculate prices for all stores
        function loadAllPrices() {
            const packageSize = document.getElementById('packageSize').value;
            
            stores.forEach(store => {
                [1, 5, 10].forEach(size => {
                    const element = document.querySelector(`[data-store="${store.id}"][data-size="${size}"]`);
                    if (element) {
                        element.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                        
                        fetch('calculate_store_price.php', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            body: `store_id=${store.id}&package_size=${size}GB&network=mtn`
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success && data.price) {
                                element.textContent = 'GH₵ ' + parseFloat(data.price).toFixed(2);
                            } else {
                                element.textContent = 'Not set';
                                element.classList.remove('text-green-400');
                                element.classList.add('text-gray-500');
                            }
                        })
                        .catch(error => {
                            element.textContent = 'Error';
                            element.classList.remove('text-green-400');
                            element.classList.add('text-red-400');
                        });
                    }
                });
            });
        }
        
        // Load prices on page load
        if (stores.length >= 2) {
            loadAllPrices();
        }
        
        // Reload when package size changes
        document.getElementById('packageSize')?.addEventListener('change', loadAllPrices);
    </script>
</body>
</html>





