{% extends 'atlas/base.html' %}

{% block content %}
    <h2>{{collection.name}}
            <h2>Start: {{exam.name}}</h2>

            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</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 'atlas:collection_case_view_take' pk=collection.pk case_number=0 cid='0000000' passcode='ZZZZZZ' %}".replace("0000000", cid).replace("ZZZZZZ", passcode));
                        } else {
                            alert("Please enter a valid Candidate ID (CID).")
                        }
                    });
                });
            </script>

{% endblock %}