<?php
if (session_status() !== PHP_SESSION_ACTIVE) {
    ini_set('session.use_strict_mode', 1);
    ini_set('session.use_only_cookies', 1);
    session_start();
}

header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html>
<head>
    <title>Debug - Dropdown Issue</title>
    <style>
        body { font-family: Arial; margin: 20px; }
        .debug-box { border: 2px solid red; padding: 20px; margin: 20px 0; background: #fff3cd; }
        .test-dropdown { padding: 15px; margin: 10px 0; border: 1px solid #ccc; }
        button { padding: 10px 20px; margin: 5px; background: #007bff; color: white; border: none; cursor: pointer; }
        pre { background: #f5f5f5; padding: 10px; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>🔴 Dropdown Debugging</h1>
    
    <div class="debug-box">
        <h2>Test 1: Direct JavaScript Call</h2>
        <p>Click the button below to directly call the changeLanguage function:</p>
        <button onclick="testChangeLanguage()">Test changeLanguage()</button>
        <button onclick="testChangeCurrency()">Test changeCurrency()</button>
        <div id="test1Output"></div>
    </div>
    
    <div class="debug-box">
        <h2>Test 2: Check if Functions Exist</h2>
        <button onclick="checkFunctions()">Check Functions</button>
        <div id="test2Output"></div>
    </div>
    
    <div class="debug-box">
        <h2>Test 3: API Direct Call</h2>
        <button onclick="testAPIDirectly()">Call API Directly</button>
        <div id="test3Output"></div>
    </div>
    
    <div class="debug-box">
        <h2>Test 4: Replica Dropdowns</h2>
        <p>Try changing these dropdowns:</p>
        <label>Language:</label>
        <select id="testLangSelect" onchange="console.log('onchange triggered'); testChangeLanguage();">
            <option value="it">Italian</option>
            <option value="en">English</option>
        </select>
        <label style="margin-left: 20px;">Currency:</label>
        <select id="testCurrSelect" onchange="testChangeCurrency();">
            <option value="eur">EUR</option>
            <option value="usd">USD</option>
        </select>
        <div id="test4Output"></div>
    </div>
    
    <script>
    function log(msg) {
        console.log(msg);
        document.getElementById('test1Output').innerHTML += '<p>' + msg + '</p>';
    }
    
    function testChangeLanguage() {
        const output = document.getElementById('test1Output');
        output.innerHTML = '<p style="color: blue;">Testing changeLanguage()...</p>';
        
        console.log('testChangeLanguage called');
        console.log('typeof changeLanguage:', typeof changeLanguage);
        
        if (typeof changeLanguage !== 'function') {
            output.innerHTML += '<p style="color: red;">ERROR: changeLanguage is not defined!</p>';
            return;
        }
        
        try {
            const select = document.getElementById('languageSelect');
            if (!select) {
                output.innerHTML += '<p style="color: red;">ERROR: languageSelect dropdown not found!</p>';
                return;
            }
            
            output.innerHTML += '<p style="color: blue;">Calling changeLanguage with element...</p>';
            changeLanguage(select);
            output.innerHTML += '<p style="color: green;">✓ Function called successfully</p>';
        } catch (e) {
            output.innerHTML += '<p style="color: red;">ERROR: ' + e.message + '</p>';
            console.error(e);
        }
    }
    
    function testChangeCurrency() {
        const output = document.getElementById('test1Output');
        output.innerHTML = '<p style="color: blue;">Testing changeCurrency()...</p>';
        
        console.log('testChangeCurrency called');
        console.log('typeof changeCurrency:', typeof changeCurrency);
        
        if (typeof changeCurrency !== 'function') {
            output.innerHTML += '<p style="color: red;">ERROR: changeCurrency is not defined!</p>';
            return;
        }
        
        try {
            const select = document.getElementById('currencySelect');
            if (!select) {
                output.innerHTML += '<p style="color: red;">ERROR: currencySelect dropdown not found!</p>';
                return;
            }
            
            output.innerHTML += '<p style="color: blue;">Calling changeCurrency with element...</p>';
            changeCurrency(select);
            output.innerHTML += '<p style="color: green;">✓ Function called successfully</p>';
        } catch (e) {
            output.innerHTML += '<p style="color: red;">ERROR: ' + e.message + '</p>';
            console.error(e);
        }
    }
    
    function checkFunctions() {
        const output = document.getElementById('test2Output');
        output.innerHTML = '';
        
        output.innerHTML += '<p>changeLanguage exists: ' + (typeof changeLanguage === 'function' ? '✓ YES' : '✗ NO') + '</p>';
        output.innerHTML += '<p>changeCurrency exists: ' + (typeof changeCurrency === 'function' ? '✓ YES' : '✗ NO') + '</p>';
        output.innerHTML += '<p>languageSelect exists: ' + (document.getElementById('languageSelect') ? '✓ YES' : '✗ NO') + '</p>';
        output.innerHTML += '<p>currencySelect exists: ' + (document.getElementById('currencySelect') ? '✓ YES' : '✗ NO') + '</p>';
        output.innerHTML += '<p>WEB_BASE_PATH: <code>/emporio-sport</code></p>';
    }
    
    function testAPIDirectly() {
        const output = document.getElementById('test3Output');
        output.innerHTML = '<p>Calling API directly...</p>';
        
        fetch('/emporio-sport/api_set_preference.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ type: 'language', value: 'en' })
        })
        .then(r => {
            output.innerHTML += '<p>HTTP Status: ' + r.status + '</p>';
            return r.json();
        })
        .then(data => {
            output.innerHTML += '<p style="color: green;">✓ API Response:</p><pre>' + JSON.stringify(data, null, 2) + '</pre>';
            console.log('API Response:', data);
        })
        .catch(e => {
            output.innerHTML += '<p style="color: red;">✗ Error: ' + e.message + '</p>';
            console.error(e);
        });
    }
    
    // Run checks on page load
    window.addEventListener('load', function() {
        console.log('Debug page loaded');
        checkFunctions();
    });
    </script>
</body>
</html>
