{% extends 'base.html' %}

{% block content %}

    <h2>Start exam: {{exam.name}}</h2>

    {% if request.user.is_authenticated %}
    <a href="{% url 'physics:exam_take_user' pk=exam.pk sk=0 %}">Start Exam</a>
    {% else %}
    Enter your CID and passcode in the below boxes.<br />
    <p><input id="cid-box" type="text" value="Candidate ID"></p>
    <p><input id="passcode-box" type="text" value="Passcode"></p>

    <button>Start exam</button>

    <script type="text/javascript">
        $(document).ready(function () {
            window.location.search.substr(1).split("&").forEach((item) =>
                {
                    s = item.split("=");
                    if (s[0] == "cid") {
                        $("#cid-box").val(s[1]);

                    }
                    if (s[0] == "passcode") {
                        $("#passcode-box").val(s[1]);
                    }
                });


            $("#cid-box, #passcode-box").keypress(function(e) {
                // Enter pressed?
                console.log(e)
                if(e.which == 10 || e.which == 13) {
                    $("button").click();
                }
            });

            $("button").click(() => {
                let cid = $("#cid-box").val();
                let passcode = $("#passcode-box").val();

                if (Number.isInteger(parseInt(cid))) {
                    window.location.replace("{% url 'physics:exam_take' pk=exam.pk sk=0 cid='0000000' passcode='ZZZZZZ' %}".replace("0000000", cid).replace("ZZZZZZ", passcode));
                } else {
                    alert("Please enter a valid Candidate ID (CID).")
                }
            });
        });
    </script>
    {% endif %}
{% endblock %}