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

{% block title %}
{% endblock %}

{% block content %}

    {#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>#}
    <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>

    <script>
        {#function capitalizeFirstLetter(string) {#}
        {#    return string.charAt(0).toUpperCase() + string.slice(1);#}
        {#}#}

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

        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").hide();
        }
    </script>


    {% formfield player.workerid label="Your MTurk Worker ID:" %}
    {#        <p>#}
    {#            Your worker ID: {{ participant.label }}#}
    {#        </p>#}
    <p>
        I will show up at the scheduled time and participate in the experiment.
    <td class="formfield">
        <input type="checkbox"  value=True required>
    </td>
    </p>

    <p>
        I live in the United States. Not living in the US may cause my HIT to be rejected and my account to be blocked.
    <td class="formfield">
        <input type="checkbox"  value=True required>
    </td>
    </p>

    <div style="text-align:center">
        <button class="otree-btn-next btn btn-primary">Submit</button>
    </div>

{% endblock %}