{% 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>
                        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>
                        This is an interactive experiment, so it is important that you make decisions in a timely manner.
                        If you are unresponsive for a long time, you will be marked as dropped out and will not get paid.
                    </li>
                    <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 with the webpage.
                    </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 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) {
                console.log('sending');
                liveSend({
                    geoData: JSON.parse(JSON.stringify(data, null, 2)),
                    userAgent: navigator.userAgent,
                    page: 1,
                });
            });
        }

        // Set the date we're counting down to
        var countDownDate;
        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();

        // Update the count down every 1 second (1000 milliseconds)
        x = setInterval(timer, 1000);
        {#prevent_enter_submit();#}

        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.");
            }
        }
    </script>
{% endblock %}