{% extends "giftExchangeFinal/Page.html" %}
{% load otree static %}

{% block title %}


{% endblock %}


{% block content %}
    {% comment %}<h3>Antwort auf das Gehaltsangebot</h3> {% endcomment %}
    <div class="fixed-top" style="background-color: lightgrey" >
        <timerAndPeriod>
         <p style="text-align:left">
            Periode

            <span style="float:right" ><span id="timerCount">Zeit [min]<br><span id="time"></span></span></span>
             <br> <span style="float:left" id="period"></span>

         </p>
        </timerAndPeriod>
    </div>


    <p>Sie sind der <strong>Arbeitnehmer</strong>. <br />
        Der Arbeitgeber macht Ihnen folgendes Gehaltsangebot:</p>

    <table class='table text-center' style='width: auto; margin: auto'>
        <tr><th>Gehaltsangebot</th></tr>
        <tr><td>{{ group.offer_amount| floatformat:-2 }} Taler</td></tr>
    </table>

    {% formfield group.offer_accepted label='Bitte entscheiden Sie, ob Sie das Angebot annehmen oder ablehnen möchten' %}

    <div id="effort">
    {% formfield group.worker_workload label='Bitte wählen Sie ihre Arbeitsleistung' %}
    </div>
    <p id="payoffMsg"></p>

    <p>
    {% next_button %}
    </p>


{% endblock %}



{% block app_scripts %}
<script>

    function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        //seconds.style.color = "blue";

        if (timer > 0) {
             display.text(minutes + ":" + seconds);
             --timer;
        } else if (timer < 0) {
            //minutes.style.color = "blue";
            //display.style.color = "blue";
            //timer.style.color = "blue";
            timer = 0;
            // display.text("00:00");
            var timerCount = document.getElementById("timerCount");
            timerCount.style.color = "red";
            // time.style.backgroundColor = "red";
            setInterval(function () {
                timerCount.style.display = (timerCount.style.display == 'none' ? '' : 'none');
            }, 1000);
        } else {
            display.text(minutes + ":" + seconds);
            --timer;
        }
    }, 1000);
}

jQuery(function ($) {
    var minutes = 60 * 1,
        display = $('#time');
    startTimer(minutes, display);
});

jQuery(function ($) {
    display = $('#period');
    period = '{{ periodSub }}';

    display.text(period + " von " + "{{ Constants.num_rounds }}");
})





$(document).ready(function() {


    var $effortDiv = $('#effort');
    $effortDiv.hide();
    $('input').change(function () {
        var payoffMsg;

        var contractAccepted = $('input[name=offer_accepted]:checked').val();

        if (contractAccepted === 'True') {
            $effortDiv.show();
        } else {
            $effortDiv.hide();
        }

        var effort = $('input[name=worker_workload]:checked').val(); //was ist effort hier? Zahl (val) oder boolean?

        //print('@@@@', effort); //gibt pdf aus
    });
});
</script>


{% endblock %}