{{ block title }}
    <div id="title"></div>
{{ endblock }}



{{ block content }}

<div id="stopwatch"></div>

<p></p>

<button onclick="doTimeStuff()" id="Next" style="visibility:hidden;">
        Enter the doctor's room
</button>

<p></p>

<button onclick="doTimeStuff()" id="Repeat" style="visibility:hidden;">
        Please click here to proceed.
</button>

<div id="dialog" title="Basic dialog">
    You missed your session again. Your experiment has ended and you won't get paid.
</div>


<button class="button" data-name="rock" type="button" id="movingbutton">Pay attention to the nurse</button>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


    <script>
        let startDate,
        interval = null,
        stopwatch = document.getElementById("stopwatch"),
        btn = document.getElementById("btn"),
        dateTimeFormat = new Intl.DateTimeFormat('default', {
           minute: 'numeric',
           second: 'numeric',});

        function startStopWatch(){
          if(interval === null){
            startDate = Date.now();
            displayStopWatch();
            stopwatch.innerHTML= "test";
            interval = setInterval(displayStopWatch, 10);
          } else {
            clearInterval(interval);
            interval = null;
          }
        }

        function stopStopWatch() {
            if (interval) {
              clearInterval(interval);
              interval = null;
            }
        }

        function displayStopWatch(){
          let diff = Date.now() - startDate;
          stopwatch.innerHTML= dateTimeFormat.format(new Date(diff));
        }

        $("#dialog").hide();
        function notPressed() {
            i = true;
            document.querySelector("#Next").style.visibility = "hidden";
            document.querySelector("#movingbutton").style.visibility = "hidden";

            let dialog;
            dialog = $("#dialog").dialog({
                autoOpen: false,
                height: "auto",
                width: "auto",
                modal: true,
                title: 'You failed to pay attention!',
                dialogClass: "no-close",
                buttons: {
                OK: function() {
                  $(this).dialog( "close" );
                }
              },
            });

            dialog.dialog( "open" );
            document.querySelector("#Repeat").style.visibility = "visible"
            stopStopWatch();

            liveSend(true);
        }

        let i = false;
        let btnTimer = window.setTimeout(function () {
            notPressed();
        }, 4000);

        let waiting_times = js_vars.waiting_time_1 * 1000;
        let wt_in_seconds = js_vars.waiting_time_1;
        console.log(waiting_times);

        let the_clinic = js_vars.the_clinic;
        let room_des = js_vars.room_description;


        const s1 = 'You are in Clinic '
        const s2 = the_clinic.toString()
        const s3 = '. '
        const s4 = room_des
        const title_text = s1.concat(s2, s3, s4)

        document.getElementById('title').innerHTML = title_text

        let doctorTimer =
            setTimeout(function() {
                if (document.querySelector("#Repeat").style.visibility === "hidden" && i === false) {
                    document.querySelector("#Next").style.visibility = "visible";
                }
                clearTimeout(btnTimer);
                stopStopWatch();
                document.querySelector('#movingbutton').style.visibility = "hidden";},
            waiting_times);

        const mb = document.querySelector("#movingbutton");


        mb.addEventListener("click",change);
            function change() {
                clearTimeout(btnTimer);

                mb.style.visibility = "hidden";
                mb.dataset.clicked = "true";


                const
                    { width: mbWidth, height: mbHeight } = mb.getBoundingClientRect(),
                    i = Math.floor(Math.random() * (window.innerWidth - mbWidth)) + 1,
                    j = Math.floor(Math.random() * (window.innerHeight - mbHeight)) + 1;

                  mb.style.left = i + "px";
                  mb.style.top = j + "px";

                setTimeout(function () {
                    if (document.querySelector("#Next").style.visibility === "hidden") {
                        mb.style.visibility = "visible";
                        mb.dataset.clicked = "false";
                        btnTimer = window.setTimeout( function () {notPressed();}, 3000);
                    }}, (Math.random() * 2 + 2) * 1000)
            }

        setTimeout(function () {
            mb.removeEventListener("click", change);
            mb.style.visibility="hidden";
        }, waiting_times)

        let startTime;
        window.onload = function() {
            startTime = Date.now();
        };
        function doTimeStuff(){
            document.getElementById('time_spent_w1').value = Date.now() - startTime;
        }

        $(document).ready(function(){
            let chosen = js_vars.the_clinic;
            if (chosen === 1) {
            document.body.style.backgroundColor = "#C7BFE4";
            }
            if (chosen === 2) {
            document.body.style.backgroundColor = "#A7D8E8";
            }

            startStopWatch();
        });

    </script>

    <style>
        #movingbutton{
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;
        left : 20px;
        top : 300px;
        }
        body{
        width : 100%;
        }
        .no-close .ui-dialog-titlebar-close {
          display: none;
        }
        #dialog {
         display: none;
        }
        #stopwatch {
            font-size: x-large;
        }

    </style>

<head>
    <style type ="text/css" ></style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Dialog - Default functionality</title>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>

<input type="hidden" name="time_spent_w1" id="time_spent_w1"/>
{{ endblock }}