{% 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: 160px;
}
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_3_change_sum.errors }}

<div class="card info">
    {% if player.treat != "Bookmaker Beliefs" %}
    <p>
        For Match 3: {{ home_team }} vs. {{ away_team }}, you predicted:
    </p>
    <ul>
    <li><strong>{{ win_prob }}%</strong> for a <strong>home win</strong> by <strong>{{ home_team }}</strong></li>
    <li><strong>{{ draw_prob }}%</strong> for a <strong>draw</strong></li>
    <li><strong>{{ lose_prob }}%</strong> for an <strong>away win</strong> by <strong>{{ away_team }}</strong></li>
    </ul>
    {% if player.treat == "Control" %}
    <p>
        The odds for the match were the following:
    </p>
    {% endif %}
    {% if player.treat == "Subj. Beliefs" %}
    <p>
        Given your predictions and the odds for the match
    </p>
    {% endif %}
    <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>

    {% if player.treat == "Subj. Beliefs" %}
    <p>
        You can expect to receive
    </p>
    <ul>
    <li><strong>{{ win_payout_subj }}</strong> token(s) for each token bet on a <strong>home win</strong> by <strong>{{ home_team }}</strong></li>
    <li><strong>{{ draw_payout_subj }}</strong> token(s) for each token bet on a <strong>draw</strong></li>
    <li><strong>{{ lose_payout_subj }}</strong> token(s) for each token bet on an <strong>away win</strong> by <strong>{{ away_team }}</strong></li>
    </ul>
    <p>
        Betting on <strong> {{ max_option_subj }} </strong> would be the <strong><u>most profitable</u> option on average</strong>.
    </p>
    {% endif %}
    {% endif %}

    {% if player.treat == "Bookmaker Beliefs" %}
    <p>
        For Match 3: {{ home_team }} vs. {{ away_team }}, you predicted:
    </p>
    <ul>
    <li><strong>{{ win_prob }}%</strong> for a <strong>home win</strong> by <strong>{{ home_team }}</strong></li>
    <li><strong>{{ draw_prob }}%</strong> for a <strong>draw</strong></li>
    <li><strong>{{ lose_prob }}%</strong> for an <strong>away win</strong> by <strong>{{ away_team }}</strong></li>
    </ul>
    <p>Bookmakers/experts predict:</p>
    <ul>
    <li><strong>{{ win_prob_bm }}%</strong> for a <strong>home win</strong> by <strong>{{ home_team }}</strong></li>
    <li><strong>{{ draw_prob_bm }}%</strong> for a <strong>draw</strong></li>
    <li><strong>{{ lose_prob_bm }}%</strong> for an <strong>away win</strong> by <strong>{{ away_team }}</strong></li>
    </ul>
    <p>
        Given the bookmakers'/experts’ predictions and the odds for the match
    </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>
        You can expect to receive
    </p>
    <ul>
    <li><strong>{{ win_payout_bm }}</strong> token(s) for each token bet on a <strong>home win</strong> by <strong>{{ home_team }}</strong></li>
    <li><strong>{{ draw_payout_bm }}</strong> token(s) for each token bet on a <strong>draw</strong></li>
    <li><strong>{{ lose_payout_bm }}</strong> token(s) for each token bet on an <strong>away win</strong> by <strong>{{ away_team }}</strong></li>
    </ul>
    {% if player.wedge3 != 0 %}
    <p>
        Betting on <strong> {{ max_option_bm }} </strong> would be the <strong><u>most profitable</u> option on average</strong>.
    </p>
    {% endif %}
    {% if player.wedge3 == 0 %}
    <p>
        Betting on <strong> any of the outcomes </strong> would be <strong><u>equally profitable</u> on average</strong>.
    </p>
    {% endif %}
    {% endif %}

    <p>
        Previously, you allocated your 100 tokens as follows:
    </p>
    <ul>
    <li><strong>{{ win_bet }}</strong> token(s) on a <strong>home win</strong> by <strong>{{ home_team }}</strong></li>
    <li><strong>{{ draw_bet }}</strong> token(s) on a <strong>draw</strong></li>
    <li><strong>{{ lose_bet }}</strong> token(s) an <strong>away win</strong> by <strong>{{ away_team }}</strong></li>
    </ul>

    <p>
        <strong> Would you like to change the number of tokens you bet on the different outcomes? </strong> <br>
        <strong> Note: </strong>If you choose "Yes," your bonus payment will depend on your new allocation.
    </p>
{% formfield player.match_3_changechoice %}
</div>
<br><br>
<div id="BetAllocationChunk">
<div class="card info">
       <label class="col-form-label">
    <strong>  Match 3: {{ 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_3_change_win" id="matchbet_3_change_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_3_change_draw" id="matchbet_3_change_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_3_change_lose" id="matchbet_3_change_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_3_change_sum" id="matchbet_3_change_sum" step="1">
<input type="hidden" name="MatchBet_c_change_time" id="MatchBet_c_change_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_3_changechoice_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_3_change_sum').value=sum;
    document.getElementById('MatchBet_c_change_time').value=page_time;
    if (document.getElementById('matchbet_3_change_win').value == ""){
        document.getElementById('matchbet_3_change_win').value = 0
    };
    if (document.getElementById('matchbet_3_change_draw').value == ""){
        document.getElementById('matchbet_3_change_draw').value = 0
    };
    if (document.getElementById('matchbet_3_change_lose').value == ""){
        document.getElementById('matchbet_3_change_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_3_changechoice_0').change(function () {
    var valueSelected = $(this).val();
    if (valueSelected == 'Yes') {
    document.getElementById("BetAllocationChunk").style.display = "block";
    document.getElementById('matchbet_3_change_win').value = "";
    document.getElementById('matchbet_3_change_draw').value = "";
    document.getElementById('matchbet_3_change_lose').value = "";
    }
});
$('#id_match_3_changechoice_1').change(function () {
    var valueSelected = $(this).val();
    if (valueSelected == 'No') {
    document.getElementById("BetAllocationChunk").style.display = "none";
    document.getElementById('matchbet_3_change_win').value = win_bet;
    document.getElementById('matchbet_3_change_draw').value = draw_bet;
    document.getElementById('matchbet_3_change_lose').value = lose_bet;
    }
});
</script>
{% endblock %}