{{ extends "global/Page.html" }}


{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>

    var sec = 0;

    var timer = setInterval(function () {
    document.getElementById("p4_decision_time").value = ((sec+=100)/1000);}, 100);


    function checkwork(autosubmit){

        var checkflag = 0;
        var help_time = Number(document.getElementById("form").elements["p4_help_time"].value);
        var self_time = Number(document.getElementById("form").elements["p4_self_time"].value);
        var total_time = help_time + self_time;
        var employee_helped = $("input[name='employee_helped']:radio:checked").val();
        document.getElementById("form").elements["p4_employee_helped"].value = employee_helped;

        if (help_time < 0 || self_time < 0) {
            checkflag = 1;
            alert("Please use positive numbers only.");
        }
        if (total_time != 120) {
            if (help_time == 0) {
                document.getElementById("form").elements["p4_employee_helped"].value = 'Z';
                checkflag = 1;
                error1();
            } else {
                if ($("input[name='employee_helped']:radio:checked").length == 0){
                    checkflag = 1;
                    error2();
                } else {
                    checkflag = 1;
                    error3();
                }
            }
        } else {
            if (help_time == 0) {
                document.getElementById("form").elements["p4_employee_helped"].value = 'Z';
            } else {
                if ($("input[name='employee_helped']:radio:checked").length == 0) {
                    checkflag = 1;
                    error3();
                }
            }
        }

        /*if (help_time == 0) {
            document.getElementById("form").elements["p4_employee_helped"].value = 'Z';
        } else {
            if ($("input[name='employee_helped']:radio:checked").length == 0){
                checkflag = 1;
                alert("Please choose an Employee whose total output you wish to increase with work completed " +
                    "during the time you have allocated for this purpose")
            }
        }*/

        if (checkflag == 0) {
            document.getElementById("form").submit();
        }

    }

$(document).ready(function() {
    document.getElementById("form").elements["p4_self_time"].focus();
});

function error1() {
    $( "#dialog-message-1" ).dialog({
        modal: true,
        position: { my: "center", at: "top", of: window },
        height: 200,
        width: 500,
        autoOpen: true,
        open: function(event, ui){
            setTimeout("myClose1()",20000);
        }
    });
}

function error2() {
    $( "#dialog-message-2" ).dialog({
        modal: true,
        position: { my: "center", at: "top", of: window },
        height: 250,
        width: 500,
        autoOpen: true,
        open: function(event, ui){
            setTimeout("myClose2()",20000);
        }
    });
}

function error3() {
    $( "#dialog-message-3" ).dialog({
        modal: true,
        position: { my: "center", at: "top", of: window },
        height: 250,
        width: 500,
        autoOpen: true,
        open: function(event, ui){
            setTimeout("myClose3()",20000);
        }
    });
}
function myClose1() {
    $("#dialog-message-1").dialog('destroy');
    document.getElementById("form").elements["p4_self_time"].focus();
}
function myClose2() {
    $("#dialog-message-2").dialog('destroy');
    document.getElementById("form").elements["p4_self_time"].focus();
}
function myClose3() {
    $("#dialog-message-3").dialog('destroy');
    document.getElementById("form").elements["p4_self_time"].focus();
}
</script>

{% endblock %}

{% block styles %}

    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; font-weight: normal !important;}
        .tabmarg {margin-left: 80px}
        .res{
            font-size: large;}
        .resultlabel{
            color: #1B232F;
            font-size: large;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .resultlabelsm{
            color: #1B232F;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .norm{
            font-size: medium;
        }
        .ui-dialog-titlebar-close {display: none;}
        .ui-dialog-content {
            background-color: #f6f6f6;
            padding: 15px;
            border: #ebebeb;
            border-style: groove;
            border-width: 2px;
            line-height: normal;
        }
        .ui-dialog-buttonpane {
            text-align: right;
        }
        #dialog-exp {
            display: none
        }
        #dialog-message-1 {
            display: none
        }
        #dialog-message-2 {
            display: none
        }
        #dialog-message-3 {
            display: none
        }
    </STYLE>

{% endblock %}

{{ block title }}
    Work Period Decision
{{ endblock }}

{{ block content }}


    <hr>

    <p>
        You have completed the first part of the work period. You may use the 2 remaining minutes (120 seconds) in any proportion you
        choose to complete work that either:
    </p>
        <table class="indented" width="80%">
            <tr>
                <td width=5%>(1)</td>
                <td width="95%">increases your own total output for the period, or </td>
            </tr>
            <tr>
                <td width=5%>(2)</td>
                <td width="95%">increases the total output of another employee in your group (of your choosing) for the period.</td>
            </tr>
        </table>
    <hr>
    <p>
        Please indicate how many seconds (out of 120) you wish to allocate to completing work for each option. If you choose to
        allocate time to the second option, please also select the employee in your group whose total output you wish to increase
        with any work completed during this time.
    </p>
        <table class="indented" width="80%">
            <tr>
                <td width=20%>{% formfield player.p4_self_time %}</td>
                <td width="80%">&nbsp;&nbsp;seconds to complete work that increases your total output</td>
            </tr>
            <tr>
                <td width=20%>{% formfield player.p4_help_time %}</td>
                <td width="80%">&nbsp;&nbsp;seconds to complete work that increases the total output of another employee</td>
            </tr>
        </table>

        <table class="indented" width="80%">
            <tr>
                <td width="20%">&nbsp;</td>
                <td width="80%">If allocating time to the second option, which employee’s total output would you like to
                    increase with any work completed during this time?</td>
            </tr>
            <tr>
                <td width=20%>&nbsp;</td>
                <td width="80%">{{if player.employee_label == 'A'}}
                                <input type="radio" name="employee_helped" value="B" id="id_employee_helped_0"  />
                                    <label for="id_employee_helped_0">Employee B</label><br>
                                <input type="radio" name="employee_helped" value="C" id="id_employee_helped_1"  />
                                    <label for="id_employee_helped_1">Employee C</label><br>
                                <input type="radio" name="employee_helped" value="D" id="id_employee_helped_2"/>
                                    <label for="id_employee_helped_2">Employee D</label><br>
                    {{elif player.employee_label == 'B'}}
                        <input type="radio" name="employee_helped" value="A" id="id_employee_helped_0"  />
                            <label for="id_employee_helped_0">Employee A</label><br>
                        <input type="radio" name="employee_helped" value="C" id="id_employee_helped_1"  />
                            <label for="id_employee_helped_1">Employee C</label><br>
                        <input type="radio" name="employee_helped" value="D" id="id_employee_helped_2"/>
                            <label for="id_employee_helped_2">Employee D</label><br>
                    {{elif player.employee_label == 'C'}}
                        <input type="radio" name="employee_helped" value="A" id="id_employee_helped_0"  />
                            <label for="id_employee_helped_0">Employee A</label><br>
                        <input type="radio" name="employee_helped" value="B" id="id_employee_helped_1"  />
                            <label for="id_employee_helped_1">Employee B</label><br>
                        <input type="radio" name="employee_helped" value="D" id="id_employee_helped_2"/>
                            <label for="id_employee_helped_2">Employee D</label><br>
                    {{elif player.employee_label == 'D'}}
                        <input type="radio" name="employee_helped" value="A" id="id_employee_helped_0"  />
                            <label for="id_employee_helped_0">Employee A</label><br>
                        <input type="radio" name="employee_helped" value="B" id="id_employee_helped_1"  />
                            <label for="id_employee_helped_1">Employee B</label><br>
                        <input type="radio" name="employee_helped" value="C" id="id_employee_helped_2" />
                            <label for="id_employee_helped_2">Employee C</label><br>
                    {{endif}}
                </td>
            </tr>
        </table>
    <br>

    <hr>
    <button type="button" class="btn btn-primary" onclick="checkwork(0)">Next</button>
    <input type="hidden" id="p4_decision_time" name="p4_decision_time">
    <input type="hidden" id="p4_employee_helped" name="p4_employee_helped">

  <div id="dialog-message-1">
  <br>
      <table border="0" width="425">
          <tr>
              <td>
                    Your total time for part 2 must add up to 120 seconds.
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myClose1()">Ok</button>
              </td>
          </tr>
      </table>
  </div>
  <div id="dialog-message-2">
  <br>
      <table border="0" width="425">
          <tr>
              <td>
                    Your total time for part 2 must add up to 120 seconds. Please also choose an Employee whose total output you wish
                  to increase with work completed during the time you have allocated for this purpose.
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myClose2()">Ok</button>
              </td>
          </tr>
      </table>
  </div>
  <div id="dialog-message-3">
  <br>
      <table border="0" width="425">
          <tr>
              <td>
                    Please choose an Employee whose total output you wish
                  to increase with work completed during the time you have allocated for this purpose.
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myClose3()">Ok</button>
              </td>
          </tr>
      </table>
  </div>
{{ endblock }}