<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enstrayed Helpdesk: New Ticket</title>
    <link rel="stylesheet" href="/helpdesk/static/helpdesk.css">
    <script src="/helpdesk/static/login.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('formSelection').value = 'none'
            

            fetch(`/api/helpdesk/forms/manifest`).then(fetchRes => {
                fetchRes.json().then(jsonRes => {
                    for (let x in jsonRes) {
                        let newElement = document.createElement('option')
                        newElement.value = x
                        newElement.textContent = jsonRes[x]
                        document.getElementById('formSelection').appendChild(newElement)
                    }
                })
            })

            document.getElementById('formSelection').addEventListener('change', function() {
                document.getElementById("formarea").innerHTML = ""
                fetch(`/api/helpdesk/forms/${this.value}`).then(fetchRes => {
                    fetchRes.json().then(jsonRes => {
                        for (x in jsonRes.form) {
                            let newElem
                            switch (jsonRes.form[x].type) {
                                case "text":
                                    newElem = document.createElement('div')
                                    newElem.innerHTML = `<label for="${"formarea_"+x}">${jsonRes.form[x].content}</label><br><input type="text" id="${"formarea_"+x}">`

                                    document.getElementById("formarea").appendChild(newElem)
                                    break;
                                
                                case "bigtext":
                                    newElem = document.createElement('div')
                                    newElem.innerHTML = `<label for="${"formarea_"+x}">${jsonRes.form[x].content}</label><br><textarea id="${"formarea_"+x}" ></textarea>`

                                    document.getElementById("formarea").appendChild(newElem)
                                    break;
                                    
                            }
                        }
                    })
                })
            })
        })
    </script>
</head>
<body>
    
    <div class="headerbar">
        <a href="/helpdesk" class="headerbarTitle">Enstrayed Helpdesk</a>
        <a>New Request</a>
        <a href="/helpdesk/articles">Knowledgebase</a>
        
        <div class="headerbarright">
            <button id="loginButton" onclick="loginFunction()">Login</button>
        </div>
    </div>
    
    <div class="maincontent">
        <div class="newticketmaincontent">
            <h1>This page is still a WORK IN PROGRESS and does not function.</h1>
            <h2>New Request</h2>
            <div>
                <label for="formSelection">Please select a form: </label>
                <select name="Form Selection" id="formSelection">
                    <option value="none" disabled selected>-- Choose From List --</option>
                </select>
            </div>
            <hr>

            <div id="formarea">

            </div>
        </div>
    </div>

    <dialog id="globalDialog">
        <h2 id="globalDialogHeader">Warning</h2>
        <p id="globalDialogText">This is a warning</p>
        <button onclick="document.getElementById('globalDialog').close()">Dismiss</button>
    </dialog>
</body>
</html>