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

{% block title %}

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
    display: none;
    }
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.th_style {
    font-weight:400;
    text-align:center;
    width: 6% ;
}
span{
    border-radius: 5px;
    text-align: center;
    border: 1px gray;
    padding: 5px 5px;
    background-color: #AED6F1;
    float: left;
    width: 150px;
}
input{
    border-radius: 5px;
    text-align: center;
    border: 1px gray;
    padding: 5px 5px;
    background-color: #AED6F1;
    margin-left: 0px;
}
.col-form-label {
  font-weight:bold;
}
table {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
}

.table tr, .table th, .table td {
    border: none;
    border-top: none;
    border-bottom: none;
}

table .absorbing-column {
    width: 100%;
}
</style>
{% endblock %}

{% block content %}
{{ form.matchbet_1_changec_sum.errors }}

<div class="card info">
<p>
    For Match 1: {{ home_team }} vs. {{ away_team }} with the odds below, you decided to bet <strong>{{ win_bet }}</strong> Token(s) on a win
    by {{ home_team }}, <strong>{{ draw_bet }}</strong> Token(s) on a draw, and <strong>{{ lose_bet }}</strong> Token(s) on a win by {{ away_team }}.
</p>

<div class="table fixed table-sm table-striped table-responsive" style="width: 500px;">
    <table class="table">
        <tr>
            <th style="text-align:center; border:1px solid #dddddd;"> </th>
            <th style="text-align:center; border:1px solid #dddddd;"> Win {{ home_team_abbv }} </th>
            <th style="text-align:center; border:1px solid #dddddd;"> Draw </th>
            <th style="text-align:center; border:1px solid #dddddd;"> Win {{ away_team_abbv }} </th>
        </tr>
        <tr>
            <td style="text-align:center; border:1px solid #dddddd;"> <strong> Odds </strong> </td>
            <td style="text-align:center; border:1px solid #dddddd;"> {{ home_team_odds }} </td>
            <td style="text-align:center; border:1px solid #dddddd;"> {{ draw_odds }} </td>
            <td style="text-align:center; border:1px solid #dddddd;"> {{ away_team_odds }} </td>
        </tr>
    </table>
</div>
    <p>
        The bookmakers have assigned the following probabilities to the outcomes of this match: <br>
    </p>
    <ul>
    <li><strong>{{ win_prob }}%</strong> on a <strong>home win</strong> by <strong>{{ home_team }}</strong></li>
    <li><strong>{{ draw_prob }}%</strong> on a <strong>draw</strong></li>
    <li><strong>{{ lose_prob }}%</strong> on an <strong>away win</strong> by <strong>{{ away_team }}</strong></li>
    </ul>
    <p>
        Given these probabilities, <strong>for every token</strong> you bet on the different outcomes, you can expect to receive:
    </p>
    <ul>
    <li><strong>{{ win_payout }} token(s)</strong> when betting on a <strong>home win</strong> by <strong>{{ home_team }}</strong></li>
    <li><strong>{{ draw_payout }} token(s)</strong> when betting on a <strong>draw</strong></li>
    <li><strong>{{ lose_payout }} token(s)</strong> when betting on an <strong>away win</strong> by <strong>{{ away_team }}</strong></li>
    </ul>
    <p>
        Betting on a <strong> {{ max_option }} </strong> would thus be the <strong>most profitable option in expectation</strong>.
    </p>
<p>
    <strong> Would you like to change the number of tokens you bet on the different outcomes? </strong>
    Note that your choice will determine the bonus payment you receive:
</p>
    <ul>
    <li>If you choose "No", it will be based on your earlier selection</li>
    <li>If you choose a "Yes" and a different number of tokens, this will determine your eventual bonus payments</li>
    </ul>
    <p>
    <i>
        If you would like to change the number of tokens, please click "Yes" and select the new allocation below.
        If you do not want to change the number of tokens, please click "No".
    </i>
    </p>
{% formfield player.match_1_changechoice_c %}
</div>
<br><br>
<div id="BetAllocationChunk">
<div class="card info">
       <label class="col-form-label">
    <strong>  Match 1: {{ home_team }} vs. {{ away_team }} </strong>
    </label>
<p>
    You have 100 tokens (100 tokens = 2 GBP) to reallocate your bets as you wish across the 3 outcomes listed below. <br>
    The <strong> "Winnings" </strong> column indicates how much you would be paid given your current bet if the outcome is realized.
</p>
</div>

<div class="card info">
    <div class="table fixed table-sm table-responsive" >
        <table class="table">
            <tr>
                <th style="text-align:center"> Outcome </th>
                <th style="text-align:center"> Tokens </th>
                <th style="text-align:center"> Winnings </th>
                <th class="absorbing-column"> </th>
            </tr>
            <tr>
                <td style="width:0.1%; text-align:left">
                        <div class="input-group-prepend" style="padding: 5px 5px;">
                            <span class="input-group-text"> Win {{ home_team_abbv }}: </span>
                        </div>
                </td>
                <td style="width:0.1%; text-align:center">
                    <input type="number" name="matchbet_1_changec_win" id="matchbet_1_changec_win" min="0" max="100" step="1" oninput="updateTextInputw(this.value)" placeholder="Value" style="width:50px;height:45px;">
                </td>
                <td  style="width:0.1%; text-align:center"> <span id="textInput2" style="display:inline-block; line-height:35px; float: none; height:45px; width:75px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> </td>
                <td> </td>
            </tr>
            <tr>
                <td>
                    <div class="input-group-prepend" style="padding: 5px 5px;">
                        <span class="input-group-text"> Draw: </span>
                    </div>
                </td>
                <td>
                    <input type="number" name="matchbet_1_changec_draw" id="matchbet_1_changec_draw" min="0" max="100" step="1" oninput="updateTextInputd(this.value)" placeholder="Value" style="width:50px;height:45px;">
                </td>
                    <td> <span id="textInput3" style="display:inline-block; line-height:35px; float: none; height:45px; width:75px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> </td>
                <td> </td>
            </tr>
                <tr>
                    <td>
                        <div class="input-group-prepend" style="padding: 5px 5px;">
                            <span class="input-group-text"> Win {{ away_team_abbv }}: </span>
                        </div>
                    </td>
                    <td>
                        <input type="number" name="matchbet_1_changec_lose" id="matchbet_1_changec_lose" min="0" max="100" step="1" oninput="updateTextInputl(this.value)" placeholder="Value" style="width:50px;height:45px;">
                    </td>
                    <td> <span id="textInput4" style="display:inline-block; line-height:35px; float: none; height:45px; width:75px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> </td>
                    <td> </td>
                </tr>
        </table>
    </div>
</div>

<div class="card info">
    <p>
    Total: <span id="textInput1" style="display:inline-block; float: none; height:35px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> &nbsp </span> tokens
</p>
</div>
</div>
<br><br>
<div style="display:inline-block; margin:0; float: left;">  </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="matchbet_1_changec_sum" id="matchbet_1_changec_sum" step="1">
<input type="hidden" name="MatchBet_a_changec_time" id="MatchBet_a_changec_time" step="0.000001">
{% endblock %}

{% block scripts %}
<script>
var startTime;
var amountw = 0;
var amountd = 0;
var amountl = 0;
var sum = amountw + amountd + amountl;
var home_team_odds = {{ home_team_odds }};
var away_team_odds = {{ away_team_odds }};
var draw_odds = {{ draw_odds }};
var win_bet = {{ win_bet }};
var draw_bet = {{ draw_bet }};
var lose_bet = {{ lose_bet }};

$(document).ready(function() {
    startpage_time = Date.now();
    $('.otree-btn-next').show();
    if (!document.getElementById('id_match_1_changechoice_c_0').checked){
        document.getElementById("BetAllocationChunk").style.display = "none";
    };
});

function endPage() {
    var endpage_time = Date.now();
    page_time = (endpage_time - startpage_time)/1000;
    document.getElementById('matchbet_1_changec_sum').value=sum;
    document.getElementById('MatchBet_a_changec_time').value=page_time;
    if (document.getElementById('matchbet_1_changec_win').value == ""){
        document.getElementById('matchbet_1_changec_win').value = 0
    };
    if (document.getElementById('matchbet_1_changec_draw').value == ""){
        document.getElementById('matchbet_1_changec_draw').value = 0
    };
    if (document.getElementById('matchbet_1_changec_lose').value == ""){
        document.getElementById('matchbet_1_changec_lose').value = 0
    };
};

function updateTextInputw(val) {
    amountw = parseFloat(val);
    sum = amountw + amountd + amountl;
    document.getElementById('textInput1').innerHTML = sum;
    document.getElementById('textInput2').innerHTML = (amountw*home_team_odds).toFixed(2);
}

function updateTextInputd(val) {
    amountd = parseFloat(val);
    sum = amountw + amountd + amountl;
    document.getElementById('textInput3').innerHTML = (amountd*draw_odds).toFixed(2);
    document.getElementById('textInput1').innerHTML=sum;
}

function updateTextInputl(val) {
    amountl = parseFloat(val);
    sum = amountw + amountd + amountl;
    document.getElementById('textInput4').innerHTML = (amountl*away_team_odds).toFixed(2);
    document.getElementById('textInput1').innerHTML=sum;
}

$('#id_match_1_changechoice_c_0').change(function () {
    var valueSelected = $(this).val();
    if (valueSelected == 'Yes') {
    document.getElementById("BetAllocationChunk").style.display = "block";
    document.getElementById('matchbet_1_changec_win').value = "";
    document.getElementById('matchbet_1_changec_draw').value = "";
    document.getElementById('matchbet_1_changec_lose').value = "";
    }
});
$('#id_match_1_changechoice_c_1').change(function () {
    var valueSelected = $(this).val();
    if (valueSelected == 'No') {
    document.getElementById("BetAllocationChunk").style.display = "none";
    document.getElementById('matchbet_1_changec_win').value = win_bet;
    document.getElementById('matchbet_1_changec_draw').value = draw_bet;
    document.getElementById('matchbet_1_changec_lose').value = lose_bet;
    }
});
</script>
{% endblock %}