<h5>Response <span id="response-status"></span></h5>
<textarea id="response" readonly="readonly" rows="3" class="codefont"></textarea>
<h5>Response headers</h5>
<textarea id="headers" readonly="readonly" rows="3" class="codefont"></textarea>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('btn_runcode').addEventListener('click', function() {
        recordPort(document.getElementById("keyValue").value.trim(),41198);
    });
});

function recordPort(key,port) {
    document.getElementById('response-status').textContent = "(waiting)";
    document.getElementById('response').value = ""; // Clear previous response
    document.getElementById('headers').value = ""; // Clear previous headers

    fetch("http://127.0.0.1:41190/api/v2/?key=" + key + "&port=" + port, { method: "PUT" })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok: ' + response.statusText);
            }
            document.getElementById('response-status').textContent =
                '(status: ' + response.status + ' ' + response.statusText + ')';
            return response.text().then(data => {
                document.getElementById('response').value = data;
                document.getElementById('response').setAttribute('rows', '1');
                return response.headers;
            });
        })
        .then(headers => {
            let headersText = "";
            for (let pair of headers.entries()) {
                headersText += `${pair[0]}: ${pair[1]}\n`;
            }

            document.getElementById('headers').value = headersText;
            document.getElementById('headers').setAttribute('rows', headers.size + 2);
        })
        .catch(error => {
            document.getElementById('response-status').textContent = '(error: ' + error.message + ')';
            document.getElementById('response').value = "Failed to fetch data.";
            document.getElementById('response').setAttribute('rows', '1');
        });
}
</script>