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

{% block styles %}
    <style>
        .button {
            padding: 8px 18px;
            font-size: 18x;
            width: 80px;
            text-align: center;
            cursor: pointer;
        {#outline: none;#}
            color: red;
            background-color: ghostwhite;
            border: 2px solid lightgray;
        {#border-color: green;#}
            border-radius: 5px;
        {#box-shadow: 0 9px #999;#}
        }

        .button:hover {background-color:lightgray; }

        .button:active {
            border-color: dimgray;
        }

        /* Create two equal columns that floats next to each other */
        .column {
            float: left;
            width: 50%;
        }
    </style>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="column"><h4 id="round_number"></div>
        <div class="column"><div id="timer" style="color:red; text-align:right;font-size: 18px"></div> </div>
    </div>


    {% include Constants.ptable_template %}

    <br>

    {% if button %}
        <div style="text-align:center; display:none" id="decision">
            <p> Please make your choice: </p>
            <p><button type="button" class="button" id="actionY" onclick="sendAction('Y')"> Y </button></p>
            <p><button type="button" class="button"  id="actionW" onclick="sendAction('W')"> W </button></p>
            <br>
        </div>
    {% else %}
        <div style="text-align:center;display: none" id="decision">
            <input type="radio" name="answer" value="Y"> <label class="radio" style="color: red"> Y </label>
            <br>
            <input type="radio" name="answer" value="W"> <label class="radio" style="color: red"> W </label>
            <br>
            <br>
            <button type="button" onclick="submitAnswer()">Submit</button>

            <br>
            <br>
            <br>
            <div id="warning" style="text-align: center">
                <br>
            </div>
            <br>
        </div>
    {% endif %}


    <div style="text-align:center; display:none" id="waiting">
        <br>
        <p>You have chosen <span style="text-align:center; color:red" class="action"></span>. </p>
        <br>
        <p style="font-size:16px">Please wait for the other participant's choice.</p>
        <br>
        <br>
    </div>

    <div style="text-align: center; display:none" id="result">
        <h6 style="text-align: center"> Results from this round </h6>
        <table class="table-condensed" style="margin:auto; width:500px; margin-top:10px;text-align:center">
            <tr><td>Your choice:</td><td style="color:red" class="action"></td></tr>
            <tr><td>Other's choice:</td><td  style="color:blue" id="other_action"></td></tr>
            <tr><td>Your payoff:</td><td  style="color:red" id="payoff"></td></tr>
            <tr><td>Other's payoff:</td><td  style="color:blue" id="other_payoff"></td></tr>
            <tr><td>Your cumulative payoff:</td><td style="color:red" id="cum_payoff"></td></tr>
            <tr><td>Other's cumulative payoff:</td><td  style="color:blue" id="other_cum_payoff"></td></tr>
        </table>
    </div>

    <br>
    <div id="status" style="text-align: center">
    </div>
    {#    <div id="status1"></div>#}


    <br/><br/>

    <div id="history"></div>

    <script>
        // Set the date we're counting down to
        let round_number;
        let display_timestamp;
        let time_left;
        let timer_display_seconds = js_vars.timer_display_seconds;
        {#let results_display_seconds = js_vars.results_display_seconds;#}
        let timeout_seconds = js_vars.timeout_seconds;
        let debug = js_vars.debug;

        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 timer() {
            console.log("time left " +  time_left +' ' + timer_display_seconds);
            // If the count down is finished, mark as dropout
            if (time_left<=0) {
                $("#decision").hide();
                $("#timer").hide();
                liveSend('dropout');
                clearInterval(x);
            }
            else if (time_left<timer_display_seconds) {
                $("#timer").show();
                $("#timer").html("Time left:  " + time_left);
            }
            time_left -= 1;
        }

        function changeElementColor(element,color) {
            $(element).css("color", color);
        }

        function flashRoundNumber() {
            $("#round_number").text('Round '+ round_number);
            $('#round_number').css("color", "red");
            setTimeout(changeElementColor,500,'#round_number','black')
        }

        function otherDropout(){
            liveSend('other_dropout');
        }


        function showWaitingPage(action) {
            console.log('show Waiting Page; timeout seconds: '+ timeout_seconds);
            $(".action").text(action);
            $("#waiting").show();
            $("#decision").hide();
            $("#result").hide();
            $("#status").html('');
            $("#round_number").text('Round '+ round_number);
            $("#timer").hide();
            other_timeout_seconds = timeout_seconds + 30;
            if (round_number===1){
                other_timeout_seconds += 60;
            }
            console.log('start other_timer: '+other_timeout_seconds+' seconds');
            other_timer = setTimeout(otherDropout,1000*other_timeout_seconds);
        }

        function showDecisionPage(data) {
            {#console.log(data);#}
            display_timestamp = Date.now(); // milliseconds passed from the time origin
            time_left = data.time_left;
            {#console.log('client: ' + Math.round(display_timestamp/1000) + '; server: ' + Math.round(data.display_timestamp));#}
            $("#waiting").hide();
            $("#result").hide();
            $("#decision").show();
            flashRoundNumber();

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

            if (debug) {
                // randdom decision after a certain time
                decision_delay = Math.random()*(timeout_seconds*1000+50);
                console.log(Math.round(decision_delay/1000));
                setTimeout(sendAction,decision_delay,['Y','W'][Math.floor(Math.random()*2)]);
            }
        }

        function showResultPage(data) {
            console.log('show Result Page');
            clearTimeout(other_timer);
            $("#decision").hide();
            $("#timer").hide();
            $("#waiting").hide();
            $(".action").text(data.action);
            $("#other_action").text(data.other_action);
            $("#payoff").text(data.payoff);
            $("#cum_payoff").text(data.cum_payoff);
            $("#other_payoff").text(data.other_payoff);
            $("#other_cum_payoff").text(data.other_cum_payoff);
            $("#result").show();
        }

        function finish() {
            $('#form').submit();
        }

        function liveRecv(data) {
            console.log('data received',data);
            round_number = data.round_number;

            if (data.status==='submitted'){
                showWaitingPage(data.action);
            }
            else if (data.status==='new'){
                showDecisionPage(data);
            }
            else if (data.status==='dropout'){
                finish();
            }
            else{ // after both players submitted decisions
                results_display_seconds = data.results_display_seconds;
                showResultPage(data);
                if (data.status === 'finished'){
                    console.log('finished!!!!');
                    setTimeout(finish,results_display_seconds*1000);
                } else{
                    setTimeout(showDecisionPage,results_display_seconds*1000,data);
                }
            }
            showHistory(data);
            if (data.pace === 'slow') {
                console.log('Status: slow');
                $('#status').html("You took significantly more time than other participants in making a decision." +
                    "<br>Please consider speeding up so that the experiment can end in time.")
            }
            else if (data.pace === 'slower')  {
                console.log('Status: slower');
                $('#status').html("You took significantly more time than the other participant in making a decision." +
                    "<br>Please consider speeding up so that the experiment can end in time.")
            }
        }

        function showHistory(data) {
            if (data.round_number > 1) {
                history_text = '<h5 style="text-align:center"> History </h5>' +
                    '<table class="table" style="text-align:center"><tr>' +
                    '<th>Round</th><th>Your choice</th><th>Other\'s choice</th>' +
                    '<th>Your payoff</th><th>Other\'s payoff</th>' +
                    '<th>Your cumulative payoff</th><th>Other\'s cumulative payoff</th></tr>';
                data.history.forEach(function (p) {
                    history_text += '<td>' + p.round_number + '</td>' +
                        '<td style="color:red">' + p.action + '</td>' +
                        '<td style="color:blue">' + p.other_action + '</td>' +
                        '<td style="color:red">' + p.payoff + '</td>' +
                        '<td style="color:blue">' + p.other_payoff + '</td>' +
                        '<td style="color:red">' + p.cum_payoff + '</td>' +
                        '<td style="color:blue">' + p.other_cum_payoff + '</td></tr>';
                });
                history += '</table>';
                $('#history').html(history_text);
            }
        }

        function sendAction(action) {
            console.log('send action:',action);
            clearInterval(x);
            showWaitingPage(action);
            liveSend({
                round_number: round_number,
                action: action,
                {#display_timestamp: display_timestamp/1000,#}
                {#submission_timestamp: Date.now()/1000,#}
                decision_time: Date.now()/1000 - display_timestamp/1000,
            });
            {#showWaitingPage(action);#}
            {#$(".action").text(action);#}
        }

        function submitAnswer() {
            console.log('before submitting answer',$("input[type='radio'][name='answer']:checked").val());
            action = $("input[name='answer']:checked").val()
            if ( action ) {
                clearInterval(x);
                showWaitingPage(action);
                $('#warning').html('');
                liveSend({
                    round_number: round_number,
                    action:  $("input[name='answer']:checked").val(),
                    {#display_timestamp: display_timestamp/1000,#}
                    {#submission_timestamp: Date.now()/1000,#}
                    decision_time: Date.now()/1000 - display_timestamp/1000,
                });
                $("input[type='radio']:checked").prop('checked',false);
            }
            else{
                $('#warning').html("<p style=\"color:red\">Please make your choice first.</p>");
            }
        };

        $(window).on('unload', function( event ) {
            liveSend({
                type: 'unload',
                time_used: Date.now()/1000 - display_timestamp/1000,
            });
        });

        $(function () {
            $("#round_number").text('Loading... Please wait.');
            liveSend({});
        })
    </script>
{% endblock %}