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

{% block title %}
<center>
    {{player.role}}'s Deduction Stage (Period {{ subsession.round_number }} of
    {{ Constants.num_rounds }})

    </center>
{% endblock %}


  {% block styles %}
<style type="text/css">
table.blueTable {
</style>

{% endblock %}



{% block content %}



    <div class="card">
        <div class="card-header">
            <b> Instructions for stage 2</b>
        </div>
        <div class="card-body">

            In this stage you can see the contributions and other participants in the your group,
            You can transfer up to <strong> {{Constants.punish}} points </strong> from your earnings to
            decrease the earnings of the other participants.
            By using 1 point from your endowment, you decrease the earnings of another
            participant by   <strong> {{Constants.punmulti}} points </strong> .
            </div>
        <div class="card">
            <center>    <td>Your are the <strong>{{ player.role }}</strong> of this project.</td></center>
        </div>
    </div> <br>

<table class="table table-hover table-striped table-responsive mx-auto ">
        <tr>
            <th style="width: 200px">Group's Total Contribution: </th>
            <th style="width: 200px">Group's earnings: </th>
            <th style="width: 200px">Project's Individual earning: </th>
            <th style="width: 200px"> Individual Endowment + Project earnings: </th>

        </tr>
        <tr>
            <td>{{ group.total_contribution }}</td>
            <td>{{ total_earnings }}</td>
            <td>{{ group.individual_share }}</td>
            <td> {{ player.payoff }} </td>
        </tr>
    </table>
<center>
<table class="table table-hover table-striped table-responsive mx-auto ">
        <tr>
            <th style="width: 200px">Your role: </th>
            <th >Your effort contribution:</th>
        </tr>
        <tr>
            <td>{{ player.role }}</td>
            <td>{{ player.contribution }}</td>
        </tr>
    </table>

 <table class="table table-hover table-striped table-responsive mx-auto ">

        <tr>
            <th style="width: 200px">Participant:</th>
            <th style="width: 200px">Effort:</th>
            <th style="width: 200px">Punishment:</th>
            <th>Effect on their payoff:</th>
        </tr>
   {{ for i,j in data }}

       <tr>
            <td valign="middle ">{{i.role}}</td>
            <td valign="middle ">{{i.contribution }}</td>
            <td valign="middle" style="width: 100px"> <input type="number" name="{{j}}" id="{{j}}" class="{{j}}" oninput="{{j}}change()" min="0" max="10" maxlength = "2"  ></td>
               <td valign="middle"><span class="1{{j}}"></span></td>

       </tr>
      {{ endfor }}
</tbody>

</table>



    </center>
{{ formfield_errors 'pun1' }}
{{ formfield_errors 'pun2' }}
{{ formfield_errors 'pun3' }}


   <center> <button class="otree-btn-next btn btn-primary" onclick="javascript:check(value)"> Next </button> </center>

<br>



    {{ include Constants.instructions_template }}



{{ endblock }}

{% block scripts %}




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script type="text/javascript">


var1= document.getElementById('pun1')
var2= document.getElementById('pun2')
var3= document.getElementById('pun3')

function check (value) {
    if (document.getElementById('pun1') == null) {} else {if (document.getElementById('pun1').value == ""){document.getElementById('pun1').value=0}};
    if (document.getElementById('pun2') == null) {} else {if (document.getElementById('pun2').value == ""){document.getElementById('pun2').value=0}};
    if (document.getElementById('pun3') == null) {} else {if (document.getElementById('pun3').value == ""){document.getElementById('pun3').value=0}};;
    }


function pun1change() {
    $('.1pun1').text(document.getElementById('pun1').value*{{Constants.punmulti}});
}
function pun2change() {
    $('.1pun2').text(document.getElementById('pun2').value*{{Constants.punmulti}});
}
function pun3change() {
    $('.1pun3').text(document.getElementById('pun3').value*{{Constants.punmulti}});
}

</script>


{{ endblock }}