<?php
session_start();

header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html>
<head>
    <title>Language/Currency Complete Test</title>
    <style>
        body { font-family: Arial; margin: 20px; }
        .box { border: 1px solid #ccc; padding: 15px; margin: 10px 0; border-radius: 5px; }
        .success { background: #d4edda; border-color: #c3e6cb; }
        .error { background: #f8d7da; border-color: #f5c6cb; }
        .info { background: #d1ecf1; border-color: #bee5eb; }
        button { padding: 10px 20px; margin: 5px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 3px; }
        button:hover { background: #0056b3; }
        pre { background: #f5f5f5; padding: 10px; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>Language & Currency Change Test</h1>
    
    <div class="box info">
        <h3>Current Session State</h3>
        <p><strong>Language:</strong> <?php echo $_SESSION['selected_language'] ?? 'NOT SET'; ?></p>
        <p><strong>Currency:</strong> <?php echo $_SESSION['selected_currency'] ?? 'NOT SET'; ?></p>
        <p><strong>Session ID:</strong> <?php echo session_id(); ?></p>
    </div>
    
    <div class="box">
        <h3>Test 1: Change Language to Italian (it)</h3>
        <button onclick="testLanguage('it')">Set Language to IT</button>
        <p>Expected after change: selected_language = 'it'</p>
    </div>
    
    <div class="box">
        <h3>Test 2: Change Currency to EUR</h3>
        <button onclick="testCurrency('eur')">Set Currency to EUR</button>
        <p>Expected after change: selected_currency = 'eur'</p>
    </div>
    
    <div class="box">
        <h3>Test 3: Change Language to English (en)</h3>
        <button onclick="testLanguage('en')">Set Language to EN</button>
    </div>
    
    <div class="box">
        <h3>Test 4: Change Currency to USD</h3>
        <button onclick="testCurrency('usd')">Set Currency to USD</button>
    </div>
    
    <div id="output" class="box info" style="display:none;">
        <h3>API Response:</h3>
        <pre id="responseText"></pre>
    </div>
    
    <script>
    function testLanguage(lang) {
        console.log('Testing language:', lang);
        document.getElementById('output').style.display = 'block';
        document.getElementById('responseText').textContent = 'Loading...';
        
        fetch('/emporio-sport/api_set_preference.php', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ 
                type: 'language', 
                value: lang 
            })
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            document.getElementById('responseText').textContent = JSON.stringify(data, null, 2);
            
            if (data.success) {
                alert('✓ Language changed to ' + data.language_name);
                console.log('Reloading page...');
                setTimeout(() => location.reload(), 1000);
            } else {
                alert('✗ Failed: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(err => {
            console.error('Error:', err);
            document.getElementById('responseText').textContent = 'Error: ' + err.message;
            alert('Error: ' + err.message);
        });
    }
    
    function testCurrency(curr) {
        console.log('Testing currency:', curr);
        document.getElementById('output').style.display = 'block';
        document.getElementById('responseText').textContent = 'Loading...';
        
        fetch('/emporio-sport/api_set_preference.php', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ 
                type: 'currency', 
                value: curr 
            })
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            document.getElementById('responseText').textContent = JSON.stringify(data, null, 2);
            
            if (data.success) {
                alert('✓ Currency changed to ' + data.currency.toUpperCase());
                console.log('Reloading page...');
                setTimeout(() => location.reload(), 1000);
            } else {
                alert('✗ Failed: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(err => {
            console.error('Error:', err);
            document.getElementById('responseText').textContent = 'Error: ' + err.message;
            alert('Error: ' + err.message);
        });
    }
    
    console.log('Test page loaded. Session ID:', '<?php echo session_id(); ?>');
    </script>
</body>
</html>
