<?php
// Database connection
$servername = "localhost";
$dbname = "antenicenefather_anf";
$username = "antenicenefather_anf";
$password = "363213119.363213119";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Fetch data with the order by clause
$sql = "SELECT * FROM longform WHERE is_send = 2 AND gpt_response_8 IS NOT NULL AND gpt_response_8 != '' ORDER BY id DESC";
$result = $conn->query($sql);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Column Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <style>
        .version-buttons {
            display: flex;
            margin-bottom: 20px;
        }

        .version-buttons button {
            padding: 5px 10px;
            margin-right: 5px;
            cursor: pointer;
        }

        .version-buttons button[disabled] {
            background-color: #df4241;
            cursor: not-allowed;
        }
    </style>
   <script>
var currentVersion = 1;  // Default to Version 1
var lastFetchedId = null; // Store the last fetched id

function fetchData(id) {
    if (id) {
        lastFetchedId = id;  // Update the last fetched id when a new id is passed
        document.getElementById('rowId').value = id; // Update the Row ID field in the 4th column
    } else if (!id && !lastFetchedId) {
        return;  // If no id is provided and none was previously fetched, return early
    } else {
        id = lastFetchedId;  // Use the last fetched id if none is provided
    }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'fetchData.php?id=' + id, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            try {
                var data = JSON.parse(xhr.responseText);
                var content = "";

                if (currentVersion === 1) {
                    content = `<h1>${data.content_2}</h1>
                    <br>
                    ${data.gpt_response_1}
                    <br>
                    ${data.gpt_response_2}
                    <br>
                    ${data.gpt_response_3}
                    <br>
                    ${data.gpt_response_5}`;
                } else if (currentVersion === 2) {
                    content = `<h1>${data.content_2}</h1>
                    <br>
                    ${data.gpt_response_1}
                    <br>
                    ${data.gpt_response_6}
                    <br>
                    ${data.gpt_response_7}
                    <br>
                    ${data.gpt_response_8}`;
                }

                document.querySelector(".second-column").innerHTML = content;
            } catch(e) {
                console.error("Error parsing the JSON:", e);
            }
        }
    };
    xhr.send();
}

function versionClicked(version) {
    currentVersion = version;  // Update the current version

    if (version === 1) {
        document.getElementById('version1').disabled = true;
        document.getElementById('version2').disabled = false;
    } else if (version === 2) {
        document.getElementById('version1').disabled = false;
        document.getElementById('version2').disabled = true;

    }

    fetchData();  // Fetch data again whenever version changes
}
</script>

</head>
<body>

<div class="single-column">
    <div class="version-buttons">
        <button id="version1" onclick="versionClicked(1)">Version 1</button>
        <button id="version2" onclick="versionClicked(2)">Version 2</button>
    </div>
    
    <?php
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo "<button data-id='" . $row["id"] . "' type='button' onclick='fetchData(" . $row["id"] . ")'>" . htmlspecialchars($row["content_2"]) . "</button>";
            }
        } else {
            echo "0 results";
        }

        $conn->close();
    ?>
</div>

</body>
</html>


