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

{% block title %}

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
    display: none;
    }
.form-check-input {
    position: relative;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto
}
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;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background-color: #AED6F1;
    float: left;
    width: 180px;
}
input{
    border-radius: 5px;
    text-align: center;
    border: 1px gray;
    padding: 5px 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    background-color: #AED6F1;
    float: left;
    width: 50px;
    height: 45px;
    margin-left: 20px;
}

</style>
{% endblock %}

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

<div class="card info">
    <label class="col-form-label">
    <strong> Match {{ match_num }}: {{ home_team4 }} vs. {{ away_team4 }}: </strong>
    </label>
    <br>
    Bookmakers/experts predict these probabilities for the following events.<br><br>
    <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_team4_abbv }} </th>
                <th style="text-align:center; border:1px solid #dddddd;"> Draw </th>
                <th style="text-align:center; border:1px solid #dddddd;"> Win {{ away_team4_abbv }} </th>
            </tr>
            <tr>
                <td style="text-align:center; border:1px solid #dddddd;"> <strong> Probability </strong> </td>
                <td style="text-align:center; border:1px solid #dddddd;"> {{ win_prob_bm4 }}%</td>
                <td style="text-align:center; border:1px solid #dddddd;"> {{ draw_prob_bm4 }}%</td>
                <td style="text-align:center; border:1px solid #dddddd;"> {{ lose_prob_bm4 }}%</td>
            </tr>
        </table>
    </div>

    <p>
        How likely (in percent) do you think the following 3 outcomes (win {{ home_team4 }}, draw, win {{ away_team4 }}) are for this match?
        <i> For each outcome, state a value between 0% and 100%, so that all 3 values add up to 100%. </i>
    </p>
    <div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Win {{ home_team4_abbv }}: </span>
    </div>
    <input type="number" name="match_4_win" id="match_4_win" min="0" max="100" step="1" oninput="updateTextInput4w(this.value)" placeholder="Value">

    <div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Draw </span>
    </div>
    <input type="number" name="match_4_draw" id="match_4_draw" min="0" max="100" step="1" oninput="updateTextInput4d(this.value)" placeholder="Value">

        <div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Win {{ away_team4_abbv }}: </span>
    </div>
    <input type="number" name="match_4_lose" id="match_4_lose" min="0" max="100" step="1" oninput="updateTextInput4l(this.value)" placeholder="Value">

</div>
</div>
    <br>
</div>
    <br>
    <p>
    Total: <span id="textInput4" 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> %
</p>
    <br>
</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="MatchBeliefs_d_time" id="MatchBeliefs_d_time" step="0.000001">
<input type="hidden" name="match_4_sum" id="match_4_sum" step="1">

{% endblock %}

{% block scripts %}
<script>
var startTime;
var amount4w = 0;
var amount4d = 0;
var amount4l = 0;
var sum4 = amount4w + amount4d + amount4l;
// init_val = (Math.random()*100).toFixed();
init_val = 0;
  var SliderTouched = true;

    $(document).ready(function() {
        startpage_time = Date.now();
        $('.otree-btn-next').show();
    });

          function endPage() {
       var endpage_time = Date.now();
       page_time = (endpage_time - startpage_time)/1000;
       document.getElementById('MatchBeliefs_d_time').value=page_time;
       document.getElementById('match_4_sum').value=sum4;
       if (document.getElementById('match_4_win').value == ""){
            document.getElementById('match_4_win').value = 0
            };
             if (document.getElementById('match_4_draw').value == ""){
            document.getElementById('match_4_draw').value = 0
            };
             if (document.getElementById('match_4_lose').value == ""){
            document.getElementById('match_4_lose').value = 0
            };
           };

function updateTextInput4w(val) {
          amount4w = parseFloat(val);
          sum4 = amount4w + amount4d + amount4l;
          document.getElementById('textInput4').innerHTML=sum4;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }

function updateTextInput4d(val) {
          amount4d = parseFloat(val);
          sum4 = amount4w + amount4d + amount4l;
          document.getElementById('textInput4').innerHTML=sum4;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }

function updateTextInput4l(val) {
          amount4l = parseFloat(val);
          sum4 = amount4w + amount4d + amount4l;
          document.getElementById('textInput4').innerHTML=sum4;
                        SliderTouched = true;
                        $('.otree-btn-next').show();
        }

</script>
{% endblock %}