document.addEventListener("DOMContentLoaded", function () {
    const output = document.getElementById("info");
    const mainContent = document.getElementById("content");
    document.getElementById("startForm").addEventListener("submit", async function (formE) {
        formE.preventDefault();
        formData = new FormData(formE.target);
        const response = await fetch("test.php", {
            method: "POST",
            body: formData,
            credentials: "include",
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        const result = await response.json();
        output.innerHTML = result.msg;
        output.style.display = "block";
        if (result.questions) setTimeout(function () {
            contentHTML = "<form id='test'>";
            console.log(result.questions); // DEBUG
            i = 0;
            testLenght = result.questions.length;
            result.questions.forEach(question => {
                contentHTML += 
                `<div class="question">
                    <h4>Pytanie ${++i}/${testLenght} <sub>w bazie nr ${question.QID}</sub></h4>
                    <h3>${question.content}</h3>
                    <div class="answer">
                        <input type="radio" name="${question.QID}" value="A"/>${question.answerA}<br/>
                        <input type="radio" name="${question.QID}" value="B"/>${question.answerB}<br/>
                        <input type="radio" name="${question.QID}" value="C"/>${question.answerC}<br/>
                        <input type="radio" name="${question.QID}" value="D"/>${question.answerD}<br/>
                    </div>
                </div>`;
            });
            contentHTML += `
            <p>Zapisać wynik? <input type="checkbox" name="save"/><br/><input type="submit" value="Zakończ Test"/></p>
            </form>`;
            mainContent.innerHTML = contentHTML
        }, 300);
    });
});