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

{% block title %}
    Stage 2 - Round {{ player.round_number }}
{% endblock %}

{% block content %}
{% if one %}

<table class="table">
    <tr>
        <th style="text-align:center">Your offer</th>
        <th style="text-align:center">Player 2</th>
        <th style="text-align:center">Player 3</th>
    </tr>
    <tr>
        <td>
            <table class="table" id="tableone" style="background-color:#F8F8FF;">
    <tr>
        <th>Your share</th>
        <th>Player 2</th>
        <th>Player 3</th>
    </tr>
    <tr>
        <td>€<span id="offer1_1"></span></td>
        <td>€<span id="offer1_2"></span></td>
        <td>€<span id="offer1_3"></span></td>
    </tr>
</table>
        </td>
        <td>
            <table class="table" id="tabletwo" style="background-color:#F8F8FF;">
    <tr>
        <th>Your share </th>
        <th>Player 2</th>
        <th>Player 3</th>
    </tr>
    <tr>
        <td>€<span id="offer2_1"></span></td>
        <td>€<span id="offer2_2"></span></td>
        <td>€<span id="offer2_3"></span></td>
    </tr>
</table>
        </td>
        <td>
            <table class="table" id="tablethree" style="background-color:#F8F8FF;">
    <tr>
        <th>Your share</th>
        <th>Player 2</th>
        <th>Player 3</th>
    </tr>
     <tr>
        <td>€<span id="offer3_1"></span></td>
        <td>€<span id="offer3_2"></span></td>
        <td>€<span id="offer3_3"></span></td>
    </tr>

</table>
        </td>
    </tr> <tr>
        <td colspan="3" style="text-align:center">
            <p><b>Current agreements:</b></p>
            <p>You and Player 2:<span id="agreement12" style="color:red;font-weight:bold"></span></p>
            <p>You and Player 3:<span id="agreement13" style="color:red;font-weight:bold"></span></p>
            <p>Player 2 and Player 3:<span id="agreement23" style="color:red;font-weight:bold"></span></p>
        </td>
    </tr>
</table>
<p>Please enter a new offer below.</p>
<p>Your share: €<input type="number" step="1" id="entry1">
Player 2: €<input type="number" step="1" id="entry2">
Player 3: €<input type="number" step="1" id="entry3"></p>

{% endif %}

{% if two %}

<table class="table">
    <tr>
        <th style="text-align:center">Your offer</th>
        <th style="text-align:center">Player 1</th>
        <th style="text-align:center">Player 3</th>
    </tr>
    <tr>
        <td>
            <table class="table" id="tabletwo" style="background-color:#F8F8FF;">
    <tr>
        <th>Your share</th>
        <th>Player 1</th>
        <th>Player 3</th>
    </tr>
    <tr>
        <td>€<span id="offer2_2"></span></td>
        <td>€<span id="offer2_1"></span></td>
        <td>€<span id="offer2_3"></span></td>
    </tr>
</table>
        </td>
        <td>
            <table class="table" id="tableone" style="background-color:#F8F8FF;">
    <tr>
        <th>Your share</th>
        <th>Player 1</th>
        <th>Player 3</th>
    </tr>
    <tr>
        <td>€<span id="offer1_2"></span></td>
        <td>€<span id="offer1_1"></span></td>
        <td>€<span id="offer1_3"></span></td>
    </tr>
</table>
        </td>
        <td>
            <table class="table" id="tablethree" style="background-color:#F8F8FF;">
    <tr>
        <th>Your share</th>
        <th>Player 1</th>
        <th>Player 3</th>
    </tr>
     <tr>
        <td>€<span id="offer3_2"></span></td>
        <td>€<span id="offer3_1"></span></td>
        <td>€<span id="offer3_3"></span></td>
    </tr>
</table>
        </td>
    </tr>
    <tr>
        <td colspan="3" style="text-align:center">
            <p><b>Current agreements:</b></p>
            <p>You and Player 1:<span id="agreement12" style="color:red;font-weight:bold"></span></p>
            <p>You and Player 3:<span id="agreement23" style="color:red;font-weight:bold"></span></p>
            <p>Player 1 and Player 3:<span id="agreement13" style="color:red;font-weight:bold"></span></p>
        </td>
    </tr>
</table>
<p>Please enter a new offer below.</p>
<p>Your share: €<input type="number" step="1" id="entry2">
Player 1: €<input type="number" step="1" id="entry1">
Player 3: €<input type="number" step="1" id="entry3"></p>

{% endif %}

{% if three %}

<table class="table">
    <tr>
        <th style="text-align:center">Your offer</th>
        <th style="text-align:center">Player 1</th>
        <th style="text-align:center">Player 2</th>
    </tr>
    <tr>
        <td>
            <table class="table" id="tablethree" style="background-color:#F8F8FF;">
    <tr>
        <th>Your share</th>
        <th>Player 1</th>
        <th>Player 2</th>
    </tr>
    <tr>
        <td>€<span id="offer3_3"></span></td>
        <td>€<span id="offer3_1"></span></td>
        <td>€<span id="offer3_2"></span></td>
    </tr>
</table>
        </td>
        <td>
            <table class="table" id="tableone" style="background-color:#F8F8FF;">
    <tr>
        <th>Your share</th>
        <th>Player 1</th>
        <th>Player 2</th>
    </tr>
    <tr>
        <td>€<span id="offer1_3"></span></td>
        <td>€<span id="offer1_1"></span></td>
        <td>€<span id="offer1_2"></span></td>
    </tr>
</table>
        </td>
        <td>
            <table class="table" id="tabletwo" style="background-color:#F8F8FF;">
    <tr>
        <th>Your share</th>
        <th>Player 1</th>
        <th>Player 2</th>
    </tr>
     <tr>
        <td>€<span id="offer2_3"></span></td>
        <td>€<span id="offer2_1"></span></td>
        <td>€<span id="offer2_2"></span></td>
    </tr>
</table>
        </td>
    </tr>
    <tr>
        <td colspan="3" style="text-align:center">
            <p><b>Current agreements:</b></p>
            <p>You and Player 1:<span id="agreement13" style="color:red;font-weight:bold"></span></p>
            <p>You and Player 2:<span id="agreement23" style="color:red;font-weight:bold"></span></p>
            <p>Player 1 and Player 2:<span id="agreement12" style="color:red;font-weight:bold"></span></p>
        </td>
    </tr>
</table>
<p>Please enter a new offer below.</p>
<p>Your share: €<input type="number" step="1" id="entry3">
    Player 1: €<input type="number" step="1" id="entry1">
    Player 2: €<input type="number" step="1" id="entry2"></p>


{% endif %}

<button type="button" id="send" class="btn btn-info">Submit offer</button>
<p><span id="error" style="color:coral;font-weight:bold"></span></p>
<p>Recall that only integer numbers are allowed in your proposal.</p>


{% endblock %}


{% block scripts %}
<script>
    document.getElementById('offer1_1').innerText = {{ group.current1_1|json }};
    document.getElementById('offer1_2').innerText = {{ group.current1_2|json }};
    document.getElementById('offer1_3').innerText = {{ group.current1_3|json }};

    document.getElementById('offer2_1').innerText = {{ group.current2_1|json }};
    document.getElementById('offer2_2').innerText = {{ group.current2_2|json }};
    document.getElementById('offer2_3').innerText = {{ group.current2_3|json }};

    document.getElementById('offer3_1').innerText = {{ group.current3_1|json }};
    document.getElementById('offer3_2').innerText = {{ group.current3_2|json }};
    document.getElementById('offer3_3').innerText = {{ group.current3_3|json }};

    if ({{ group.match12|json }} == "Yes"){
    document.getElementById("agreement12").innerHTML = "Yes";
    document.getElementById("agreement12").style = "color:green;font-weight:bold";
    } else{
    document.getElementById("agreement12").innerHTML = "No";
    document.getElementById("agreement12").style = "color:red;font-weight:bold";
    };
    if ({{ group.match13|json }} == "Yes"){
    document.getElementById("agreement13").innerHTML = "Yes";
    document.getElementById("agreement13").style = "color:green;font-weight:bold";
    } else{
    document.getElementById("agreement13").innerHTML = "No";
    document.getElementById("agreement13").style = "color:red;font-weight:bold";
    };
    if ({{ group.match23|json }} == "Yes"){
    document.getElementById("agreement23").innerHTML = "Yes";
    document.getElementById("agreement23").style = "color:green;font-weight:bold";
    } else{
    document.getElementById("agreement23").innerHTML = "No";
    document.getElementById("agreement23").style = "color:red;font-weight:bold";
    };

let send = document.getElementById('send');
 send.onclick = function () {
 var current1 = parseInt(document.getElementById("entry1").value);
 var current2 = parseInt(document.getElementById("entry2").value);
 var current3 = parseInt(document.getElementById("entry3").value);
 if (current1 + current2 + current3 == js_vars.pie){
    liveSend({
    'current1': current1,
    'current2': current2,
    'current3': current3,
    'player_id': js_vars.player_id,
    });
 }
 else {
    document.getElementById("error").innerHTML = "Your entry must add up to " + String(js_vars.pie) + ".";
 }
};

function liveRecv(data) {
  console.log('received', data);
   if (data.number == 1) {
    document.getElementById("offer1_1").innerHTML = data.response1;
    document.getElementById("offer1_2").innerHTML = data.response2;
    document.getElementById("offer1_3").innerHTML = data.response3;
    document.getElementById("tableone").style = "background-color:#c1f0c1;";
    setTimeout(one, 1000);
    };
    if (data.number == 2) {
    document.getElementById("offer2_1").innerHTML = data.response1;
    document.getElementById("offer2_2").innerHTML = data.response2;
    document.getElementById("offer2_3").innerHTML = data.response3;
    document.getElementById("tabletwo").style = "background-color:#c1f0c1;";
    setTimeout(two, 1000);
    };
    if (data.number == 3) {
    document.getElementById("offer3_1").innerHTML = data.response1;
    document.getElementById("offer3_2").innerHTML = data.response2;
    document.getElementById("offer3_3").innerHTML = data.response3;
    document.getElementById("tablethree").style = "background-color:#c1f0c1;";
    setTimeout(three, 1000);
    };
    if (data.match12 == 1){
    document.getElementById("agreement12").innerHTML = "Yes";
    document.getElementById("agreement12").style = "color:green;font-weight:bold";
    } else{
    document.getElementById("agreement12").innerHTML = "No";
    document.getElementById("agreement12").style = "color:red;font-weight:bold";
    };
    if (data.match13 == 1){
    document.getElementById("agreement13").innerHTML = "Yes";
    document.getElementById("agreement13").style = "color:green;font-weight:bold";
    } else{
    document.getElementById("agreement13").innerHTML = "No";
    document.getElementById("agreement13").style = "color:red;font-weight:bold";
    };
    if (data.match23 == 1){
    document.getElementById("agreement23").innerHTML = "Yes";
    document.getElementById("agreement23").style = "color:green;font-weight:bold";
    } else{
    document.getElementById("agreement23").innerHTML = "No";
    document.getElementById("agreement23").style = "color:red;font-weight:bold";
    };
}


function one() {
            document.getElementById("tableone").style = "background-color:#F8F8FF;";
        };
function two() {
            document.getElementById("tabletwo").style = "background-color:#F8F8FF;";
        };
function three() {
            document.getElementById("tablethree").style = "background-color:#F8F8FF;";
        };
</script>

{% endblock %}