<?php 
if ($_GET['isxhr']){
    $method = $_SERVER["REQUEST_METHOD"];
    if ($method === 'POST') {
        echo '{"response_data":"post response"}';
    } else if ($method === 'GET') {
        echo '{"response_data":"get response"}';
    }
} else { ?>
<!DOCTYPE html>
<html>
<head>
<style>
button, textarea {
    display: block;
}
body {
    background-color: darkslategray;
    color: white;
}
.xhrdata {
    border: 2px solid black;
    margin: 0.5em;
    padding: 0.5em;
}
.editme {
    border: 2px solid green;
    margin: 0.5em;
    padding: 0.5em;
}
</style>
<script type="text/javascript">

function clear() {
    document.querySelector('#respdata').innerText = null;
    document.querySelector('#respheaders').innerText = null;
    document.querySelector('#senddata').innerText = null;
    document.querySelector('#image').setAttribute('src','');
}

function xhrBasic(method) {
    clear();
    xhr = new XMLHttpRequest();
    xhr.open(method, window.location.href + '?isxhr=true');
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.onreadystatechange = () => {
        if(xhr.readyState == 4 && xhr.status == 200) {
            document.querySelector('#respdata').innerText = xhr.responseText;
            const headers = xhr.getAllResponseHeaders();
            document.querySelector('#respheaders').innerText = headers;
        }
    }
    if (method === 'POST') {
        const senddata = JSON.stringify({'request_data': 'blah blah '+method});
        document.querySelector('#senddata').innerText = senddata;
        xhr.send(senddata);
    } else if (method === 'GET') {
        xhr.send();
    }
}

function xhrDownload(){
    clear();
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.querySelector('#respdata').innerText = this.response;
            const headers = xhr.getAllResponseHeaders();
            document.querySelector('#respheaders').innerText = headers;
            var imageUrl = window.URL.createObjectURL(this.response);
            document.querySelector('#image').src = imageUrl;
        }
    };
    xhr.open("GET", "../51-canvas/safe-icon.png", true);
    xhr.responseType = "blob";
    xhr.send();
}

function xhrUplaod(){
    clear();
    const fileContent = new Blob(["Your dynamic file content"], { type: 'text/plain' });
    const file = new File([fileContent], "test.txt", { type: 'text/plain' });
    const formData = new FormData();
    formData.append('upfiletest', file);
    const xhr = new XMLHttpRequest();
        xhr.responseType = 'json';
        xhr.onload = () => {
            document.querySelector('#respdata').innerText = xhr.response;
            const headers = xhr.getAllResponseHeaders();
            document.querySelector('#respheaders').innerText = headers;
    }
    xhr.open('POST', window.location.href + '?isxhr=true');
    xhr.send(formData);
}

</script>
</head>
<body>
    <hr>
    Click each of the request buttons. Then close the tab. Input and state can also
    be tested by typing or pasting into the textarea and contenteditable div. After
    leaving the page, a zip file will be created with the session info.
    <hr>
    <button id="send_get" onclick="xhrBasic('GET')">Make a basic GET request</button>
    <button id="send_post" onclick="xhrBasic('POST')">Make a basic POST request</button>
    <button id="send_download" onclick="xhrDownload()">Make image download request</button>
    <button id="send_upload" onclick="xhrUplaod()">Make file upload request</button>
    <textarea id='input'></textarea>
    <hr>
    <div class='editme' contenteditable='true'>Edit me</div>
    <hr>
    request data (headers not available for requests):
    <div class='xhrdata' id='senddata'></div>
    response data:
    <div class='xhrdata' id='respdata'></div>
    response headers:
    <div class='xhrdata' id='respheaders'></div>
    <img id='image'>
</body>
</html>
<?php  } ?>
