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

{% block app_styles %}
<style>
    .otree-timer {
        display: none;
    }
</style>
{% endblock %}

{% block title %}
{% 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>
    <br>
    <div id="experiment_info">
        <div class="card bg-light instructions" >
            <br>
            <ul>
            <li>
                The HIT for the experiment will be posted about 5 minutes before the scheduled time, and it will
                stop accepting new workers 5 minutes after the scheduled time.
            </li>
{#            <li>#}
{#               You will receive an email with the link to the HIT when it is posted.#}
{#            </li>#}
            <li>
               You can find the HIT around the scheduled time by searching the requester "Huanren Zhang".
            </li>
            </ul>
        </div>
    </div>

    <script>
        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 again');
                liveSend({
                    geoData: JSON.parse(JSON.stringify(data, null, 2)),
                    userAgent: navigator.userAgent,
                    page: 2,
                });
            });
        }

        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];
        }

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

        // 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());

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

<div style="text-align: center">
    <hr>
    <p>Please provide the following Qualification Code to the MTurk HIT in order to receive the qualification to
               the actual experiment.
    </p>
<p style="text-align:center"> <strong> Your Qualification Code: {{ participant.code }}</strong> </p>
</div>
{% endblock %}