{{ 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 repeat this session.
</button>





<div id="dialog" title="Basic dialog">
    You didn't pay attention to the nurse, and therefore missed your treatment session. After your waiting
    time ends, you must attend an additional session. If you also miss your additional session, the experiment
    will end, and you won't get paid. <p></p> <div id="last_sentence"></div>
</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" );
                }
              },
            });

            const timeNow = Date.now();
            let totalTime = startTime + waiting_times;
            const moreToGo = ((totalTime - timeNow) / 1000).toFixed(0);
            let lastSentence = "You can attend the additional session in ";
            lastSentence = lastSentence.concat(moreToGo);
            lastSentence = lastSentence.concat(" seconds.");
            document.getElementById('last_sentence').innerHTML=lastSentence;

            dialog.dialog( "open" );

            liveSend(true);
        }

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

        let waiting_times = js_vars.waiting_time * 1000;
        let wt_in_seconds = js_vars.waiting_time;
        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";
                }
                if (i === true) {
                    document.querySelector("#Repeat").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_w').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_w" id="time_spent_w"/>
{{ endblock }}