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

{% block title %}
    Stage II
{% endblock %}

{% block content %}

<br>
Below is an example of the interface you will use for the rest of Stage II. Keep in mind that no values used here on this page will be used
for payment and is only here for your convenience.
<br>
<br>
You are free to enter any value available to you to spend on Activity A. Additionally, you may enter in a value that represents the
minimum time spent on Activity A by any other employee in your firm as well. Finally, you can click the "Test" button, and the payoff you would
receive for both the time you spent on Activity as well the minimum time spent by others on Activity A entered will be displayed.
<br>
<br>
The bonus rate is: 6
<br>
<br>
Please select your amount of time devoted to Activity A:
<br>
<br>
{% formfield player.effort label="" %}
<br>

As a reminder, your payoff is determined by your choice of time on Activity A and your group's time spent on Activity A as shown below:
<br>
<br>

<table class="table" width = "1000">
    <tr>
        <th>Your time spent on Activity A</th>
        <th> </th>
        <th colspan="5">Minimum time spent on Activity A by all other group members</th>
    </tr>
    <tr>
        <th> </th> <td> </td> <th>0</th><th>10</th><th>20</th><th>30</th><th>40</th>
    </tr>
    <tr>
        <th>0</th> <td> </td> <td>200</td> <td>200</td> <td>200</td> <td>200</td> <td>200</td>
    </tr>
    <tr>
        <th>10</th> <td> </td> </td> <td>150</td> <td>210</td> <td>210</td> <td>210</td> <td>210</td>
    </tr>
    <tr>
        <th>20</th> <td> </td> </td> <td>100</td> <td>160</td> <td>220</td> <td>220</td> <td>220</td>
    </tr>
    <tr>
        <th>30</th> <td> </td> </td> <td>50</td> <td>110</td> <td>170</td> <td>230</td> <td>230</td>
    </tr>
    <tr>
        <th>40</th> <td> </td> </td> <td>0</td> <td>60</td> <td>120</td> <td>180</td> <td>240</td>
    </tr>
</table>

<br>
<br>
Enter the minimum amount of time spent on Activity A by all other employees in your group:
<br>
<br>
{% formfield player.other_effort label="" %}
<br>
<br>
Payoff: <span class="scoreOutput"></span>
<br>
<br>
<button type="button" onclick="calculateScore(); return false;" name="test_button" class="btn btn-primary btn-large">Test</button>
<br>
<br>
Press the "next" button below when you are finish practicing with the above tools.
<br>
<br>
<br>

    {% next_button %}

{% endblock %}

{% block scripts %}

    <script>


    function calculateScore() {

      var effort = document.getElementById('id_effort');
      var otherEffort = document.getElementById('id_other_effort');
      var scoreOutput = document.querySelector('.scoreOutput');

      var effortValue = effort.value;
      var otherEffortValue = otherEffort.value;


      console.log(effortValue, otherEffortValue);

      if (!effortValue || !otherEffortValue) {
       return false;
      }

      effortValue = parseFloat(effortValue).toFixed(1);
      otherEffortValue = parseFloat(otherEffortValue).toFixed(1);
      console.log(effortValue, otherEffortValue);


      //calc payoffs

      scoreOutput.textContent = 200 - 5*effortValue + 6*Math.min(effortValue, otherEffortValue)


    }
    </script>

{% endblock %}