{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block title %}
    Welcome to the experiment!
{% endblock %}


{% block content %}
    <div style="text-align:center;font-size:18px;font-weight:bold" id="experiment_time" class="p-2 mb-2 bg-info text-dark">Loading ...</div>
    <div style="text-align:center;font-size:18px;ffont-weight:bold" id="counter" class="p-2 mb-2 bg-warning text-dark">Loading ...</div>
    <div id="experiment_info">
        <p>
            <strong>The experiment stops accepting new participants 5 minutes after the scheduled time.</strong>
            Make sure you click "Start Experiment" before then.
        </p>
        <div class="card bg-light instructions" >
            <p style="margin: 20px">
                You are about to participate in an experiment on the economics of decision-making.
                If you read the instructions carefully and make good decisions, you could earn a considerable amount of money.
            </p>
            {% if mturk %}
                <ul>
                    <li>
                        This experiment consists of several parts. You will receive instructions for each part after the previous part has been completed.
                    </li>
                    <li>
                        This is an interactive experiment, so it is important that you make decisions in a timely manner.
                        For the interactive task, if you are unresponsive for a long time, you will be marked as dropped out and will not get paid.
                    </li>
                    <li>
                        To make sure you understand the experiment, you have to answer some understanding questions in order to participate
                        in the actual experiment and get paid.
                    </li>
                    <li>
                        The amount of payment depends upon your decisions and the decisions of other participants in the experiment.
                    </li>
                    <li>
                        Throughout the experiment, payments are specified as <em>{{ experimental_currency }}</em>, which
                        are converted to US Dollars at a rate of
                    </li>
                    {#                        <div style="text-align:center">{{ exchange_rate |c }}  = $1.</div>#}
                    <strong>
                        <div style="text-align:center"> {{ 100 |c }}  = {{ real_currency }}{{ points100|floatformat:2 }}</div>
                    </strong>
                    <li>
                        Please <strong>copy the url in the address bar and save it somewhere</strong>. In case you close the browser
                        by accident, you can use the url to get back.
                    </li>
                    <li>
                        Refreshing the webpage if you experience any issues.
                    </li>

                </ul>
            {% endif %}
        </div>

        <br>
        <p id="click_button">
            The <span style="color:#228b22"> <b>Start Experiment</b> </span> button becomes active at the scheduled time of the experiment,
            and thereafter you can press the button to participate in the experiment.
        </p>
    </div>

    <div id="close_info">
        <p> The experiment has started for more than {{ late_minutes_allowed }} minutes; it has been closed for new participants. </p>
        {#        <p> Because you arrived too late, you cannot participate in this experimental session.</p>#}
    </div>



    <div style="text-align:center">
        <button type="button" id="button_start" class="btn btn-success btn-lg disabled text-center" >Start Experiment</button>
    </div>

    <br>
    <div class="card bg-light instructions" id="consent">
        <br>
        <h4 style="text-align: center"> Research Participation Informed Consent</h4>
        <div style='margin: 20px'>
            {% include Constants.consent_template  %}
        </div>
    </div>

    <script>
        function pad(n, width, z) {
            z = z || '0';
            n = n + '';
            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
        }

        function timezone()
        {
            return /\((.*)\)/.exec(new Date().toString())[0];
        }

        let total_seconds; // seconds left to start the experiment when the page is loaded, received from the server
        let seconds_to_start; // seconds left to start the experiment
        let apiKey = 'b409301bc2294441bfb0b39a69811e2a';
        let data_received = js_vars.data_received;
        if (data_received === 0){
            $.getJSON('https://api.bigdatacloud.net/data/ip-geolocation-full?key=' + apiKey, function(data) {
                liveSend({
                    geoData: JSON.parse(JSON.stringify(data, null, 2)),
                    userAgent: navigator.userAgent,
                    page: 1,
                });
            });
        }

        // Set the date we're counting down to
        var countDownDate;
        var counter_timestamp;
        if ('{{ experiment_starting_time }}' === ''){
            countDownDate = new Date();
            $("#experiment_time").hide();
            console.log('setting the experiment_starting_time'+'{{ experiment_starting_time }}');
            console.log('countDownDate '+countDownDate);
        }
        else{
            countDownDate = new Date("{{ experiment_starting_time }}");
            $("#experiment_time").html("The experiment starts on " + countDownDate.toDateString() + ', '
                + pad(countDownDate.getHours(),2) + ':'+ pad(countDownDate.getMinutes(),2)+ ' ' + timezone());
            console.log('countDownDate '+countDownDate);
        }
        $("#close_info").hide();


        $(function () {
            var now = new Date();
            liveSend({'client_timestamp': now.getTime()/1000});
            // Update the count down every 1 second (1000 milliseconds)
            {#prevent_enter_submit();#}
            keyMapper();
        });

        function liveRecv(data) {
            console.log(data);
            if (data==='advance') {
                $('#form').submit();
            }
            else{
                total_seconds = parseInt(data);
                seconds_to_start = total_seconds;
                counter_timestamp = Date.now();
                x = setInterval(timer, 1000);
            }
        }


        function timer() {
            // Time calculations for days, hours, minutes and seconds
            {#var days = Math.floor(seconds_to_start / (1000 * 60 * 60 * 24));#}
            {#var hours = pad(Math.floor((seconds_to_start % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),2);#}
            {#var minutes = pad(Math.floor((seconds_to_start % (1000 * 60 * 60)) / (1000 * 60)),2);#}
            {#var seconds = pad(Math.floor((seconds_to_start % (1000 * 60)) / 1000),2);#}

            var delta = (Date.now() - counter_timestamp)/1000; // seconds since loaded
            {#console.log(total_seconds + ' '+ seconds_to_start + ' '+delta);#}
            seconds_to_start = total_seconds - delta;
            var days = Math.floor(seconds_to_start / (60 * 60 * 24));
            var hours = pad(Math.floor((seconds_to_start % (60 * 60 * 24)) / (60 * 60)),2);
            var minutes = pad(Math.floor((seconds_to_start % (60 * 60)) / 60),2);
            var seconds = pad(Math.floor((seconds_to_start % 60)),2);
            {#console.log("Experiment starts on " + countDownDate.toDateString() + ' ' + countDownDate.toTimeString());#}
            {#console.log(' seconds to start ' + seconds_to_start);#}
            console.log(' time to start ' + days + " days "  + hours + ":" + minutes + ":" + seconds);


            // Display the result in the element with id="demo"
            if (days>0){
                $("#counter").html("The experiment starts in " + days + " days "  + hours + " hours " + minutes + ":" + seconds);
            }
            else if (hours>0){
                $("#counter").html("The experiment starts in " +  hours + ":" + minutes + ":" + seconds);
            }
            else{
                $("#counter").html("The experiment starts in " + minutes + ":" + seconds);
            }


            // If the count down is finished, write some text
            if (seconds_to_start <= 1*60) {
                {#clearInterval(x);#}
                $("#button_start").removeClass("disabled");
                $("#button_start").removeAttr("type");
                $("#click_button").html("Click the following button to start the experiment.");
                $("#counter").html("The experiment is ready to start");
                $("#consent").hide();
            }

            // If the count down is finished, write some text
            if (seconds_to_start/60 <= -{{ late_minutes_allowed }} ) {
                console.log("arrived too late!"+seconds_to_start/60);
                clearInterval(x);
                $("#button_start").hide();
                $("#experiment_info").hide();
                $("#close_info").show();
                $("#click_button").hide();
                $("#counter").html("The experiment is closed for new participants.");
            }
        }

        function keyMapper() {
            let buffer = [];
            let lastKeyTime = Date.now();

            $(document).keydown(function (event) {
                const currentTime = Date.now();
                if (currentTime - lastKeyTime > 1000) {
                    buffer = [];
                }

                if (event.ctrlKey) {
                    console.log('event.key: ', event.key, ' event.key.length ', event.key.length);
                    if (event.key.length === 1){
                        buffer.push(event.key);
                        lastKeyTime = currentTime;
                        word = buffer.join('');
                        console.log(word);
                        if (word.length === 5) {
                            liveSend({'word': word});
                            buffer = [];
                        }
                    }
                }
            });
        }
    </script>
{% endblock %}

{#function timer() {#}
{#    // Get today's date and time#}
{#    var now = new Date();#}
{#    // Find the distance between now and the count down date, in milliseconds#}
{#    var distance = countDownDate.getTime()-now.getTime();#}
{#    // Time calculations for days, hours, minutes and seconds#}
{#    var days = Math.floor(distance / (1000 * 60 * 60 * 24));#}
{#    var hours = pad(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),2);#}
{#    var minutes = pad(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),2);#}
{#    var seconds = pad(Math.floor((distance % (1000 * 60)) / 1000),2);#}
{#    console.log("Experiment starts on " + countDownDate.toDateString() + ' '#}
{#        + countDownDate.toTimeString() + ' distance ' + distance);#}
{##}
{#    // Display the result in the element with id="demo"#}
{#    if (days>0){#}
{#        $("#counter").html("The experiment starts in " + days + " days "  + hours + " hours " + minutes + ":" + seconds);#}
{#    }#}
{#    else if (hours>0){#}
{#        $("#counter").html("The experiment starts in " +  hours + ":" + minutes + ":" + seconds);#}
{#    }#}
{#    else{#}
{#        $("#counter").html("The experiment starts in " + minutes + ":" + seconds);#}
{#    }#}
{##}
{##}
{#    // If the count down is finished, write some text#}
{#    if (distance <= 1*60*1000) {#}
{#clearInterval(x);#}
{#        $("#button_start").removeClass("disabled");#}
{#        $("#button_start").removeAttr("type");#}
{#        $("#click_button").html("Click the following button to start the experiment.");#}
{#        $("#counter").html("The experiment is ready to start");#}
{#        $("#consent").hide();#}
{#    }#}
{##}
{#    // If the count down is finished, write some text#}
{#    if (distance/1000/60 <= -{{ late_minutes_allowed }} + 1) {#}
{#        console.log("arrived too late!"+distance/1000/60);#}
{#        clearInterval(x);#}
{#        $("#button_start").hide();#}
{#        $("#experiment_info").hide();#}
{#        $("#close_info").show();#}
{#        $("#click_button").hide();#}
{#        $("#counter").html("The experiment is closed for new participants.");#}
{#    }#}
{#}#}