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);
        formData.append("testStart", "true")
        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 () {
            window.addEventListener('beforeunload', function (e) { e.preventDefault(); });
            contentHTML = "<form id='test'>";
            i = 0;
            testLength = result.questions.length;
            result.questions.forEach(question => {
                contentHTML +=
                    `<div class="question">
                    <h4>Pytanie ${++i}/${testLength} <sub>w bazie nr ${question.QID}</sub></h4>
                    <h3>${question.content}</h3>
                    <div class="answer">
                        <input type="hidden" name="${"q"+question.QID}" value="${i}"/>
                        <input type="hidden" name="${question.QID}" value="-"/>
                        <input type="radio" name="${question.QID}" value="A"/><b>A.</b> ${question.answerA}<br/>
                        <input type="radio" name="${question.QID}" value="B"/><b>B.</b> ${question.answerB}<br/>
                        <input type="radio" name="${question.QID}" value="C"/><b>C.</b> ${question.answerC}<br/>
                        <input type="radio" name="${question.QID}" value="D"/><b>D.</b> ${question.answerD}<br/>
                    </div>
                </div>`;
            });
            contentHTML += `<p>`;
            if (logged) contentHTML += `Zapisać wynik? <input type="checkbox" name="save"/><br/>`;
            if (logged && !own) contentHTML += `Zapisać w rankingu? <input type="checkbox" name="rank"/>`;
            contentHTML += `</p>
            <input type="submit" value="Zakończ Test"/>
            </form>`;
            mainContent.innerHTML = contentHTML;
            document.getElementById("test").addEventListener("submit", async function (formE) {
                formE.preventDefault();
                formData = new FormData(formE.target);
                formData.append("testEnd", "true");
                const response = await fetch("test.php", {
                    method: "POST",
                    body: formData,
                    credentials: "include",
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                const result = await response.json();
                console.log(result);
            });
        }, 300);
    });
});