<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
    <link href="/css/style.css" rel="stylesheet">
    <title>Interactive presentation - Question</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row refresh-bar">
            <button class="btn btn-primary"><i class="bi bi-arrow-repeat mr-2"></i>Refresh</button>
        </div>
        <div class="row current-question">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <% if(!question) { %>
                <h1>Waiting for a question...</h1>
                <hr>
                <% } else { %>
                <h1><%= question.question %></h1>
                <hr>
                <form class="form-horizontal" method="POST" action="" id="answer-form">
                    <fieldset>
                        <input type="hidden" name="id" id="id" value="<%= question.id %>">
                        <input type="hidden" name="type" id="type" value="<%= question.type %>">
                        <% if(question.type == questionTypes.Q_TYPE_TEXT) { %>
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="answer"></label>
                                <div class="col-md-12">
                                    <div class="input-group">
                                        <input id="answer" name="answer" class="form-control" placeholder="answer..." type="text" required>
                                        <div class="input-group-btn ml-2">
                                            <button type="submit" class="btn btn-primary">Send</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <% } %>

                        <% if(question.type == questionTypes.Q_TYPE_NUMERIC) { %>
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="answer"></label>
                                <div class="col-md-12">
                                    <div class="input-group">
                                        <input id="answer" name="answer" class="form-control" placeholder="answer..." type="number" required>
                                        <div class="input-group-btn ml-2">
                                            <button type="submit" class="btn btn-primary">Send</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <% } %>

                        <% if(question.type == questionTypes.Q_TYPE_OPTION) { %>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <% question.options.forEach(function(option) { %>
                                        <div class="col-md-12">
                                            <div class="radio">
                                                <label for="options-<%= option %>">
                                                    <input type="radio" name="answer" id="options-<%= option %>" value="<%= option %>" required>
                                                    <%= option %>
                                                </label>
                                            </div>
                                        </div>
                                    <% }); %>
                                </div>
                                <hr>
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary">Send</button>
                                </div>
                            </div>
                        <% } %>



                    </fieldset>
                </form>
                <% } %>
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.2/socket.io.min.js" integrity="sha512-N5JbZMETkl+0SZh5l8OA2VxSfF120owfQyy54iAXTJIKuqAn3A9TrNz1ypB55o8aSU5MxaodEgv74wGUvgUynQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(function () {
            const questionTypes = <%-JSON.stringify(questionTypes)%>;
            const socket = io("http://localhost:3000");
       
            $(".refresh-bar").on('click', function() {
                window.location.reload();
            });
    
            $("#answer-form").on('submit', function(e) {
                e.preventDefault();
                let qid = $(this).find('input[name="id"]').val();
                let type = $(this).find('input[name="type"]').val();

                let answer = $(this).find('input[name="answer"]').val();
                if(type == questionTypes.Q_TYPE_OPTION) {
                    answer = $(this).find('input:radio[name="answer"]:checked').val();
                }
                answer = answer.trim().toLowerCase();

                let submitBtn = $(this).find('button[type="submit"]');

                let url = "/question/" + qid + "/answer"
                fetch(url, {
                    method: "POST",
                    headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        qid: qid, 
                        answer: answer
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if(data.success == true) {
                        submitBtn.prop('disabled', true);
                        socket.emit("answerSent", {event: "answerSent", qid: qid});
                    } else {
                        alert(data.error);
                    }
                })
                .catch(error => console.error(error));
            });

            socket.on("reload", (payload) => {
                if(payload.reload == true) {
                    window.location.reload();
                }
            });
        });
    </script>
</body>

</html>