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

{% block title %}

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
}
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
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);
}
* {
  box-sizing: border-box;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #D3D3D3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #FF0000;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #FF0000;
  cursor: pointer;
}

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
}

.sliderticks p {
  font: 11px sans-serif;
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 2px;
  background: #D3D3D3;
  height: 7.5px;
  line-height: 40px;
  margin: 0 0 10px 0;
}
</style>
{% endblock %}

{% block content %}
<div class="card info" style="background-color:#AED6F1;">
    <label class="col-form-label">
    <strong>  Match 1: {{ home_team }} ({{ home_team_abbv }}) vs. {{ away_team }} ({{ away_team_abbv }}) </strong>
    </label>
    <p>
        For the following bets/odds, you have 100 Tokens to bet on a win by Manchester United or on Manchester United not winning
        (if you bet x tokens on a win by MUFC, you bet 100-x tokens on MUFC not winning; example: if you select 60 below,
        you are betting 60 Tokens on a win by ManU and 40 on ManU not winning).
        How would you allocate your 100 Tokens given the odds stated above? If this question is drawn to determine your final payout, you will
        be paid according to one of your following 9 decisions. Which choice will determine your payout will be chosen
        at random in this case.
</div>
<br><br>

<div class="card info">
       <label class="col-form-label">
    <strong>  Choice 4: </strong>
    </label>
<p>
Betting Odds: <br>
- {{ home_team_abbv }} wins: {{ home_team_odds_c4 }} <br>
- {{ home_team_abbv }} doesn't win: {{ away_team_odds_c4 }} <br>
</p>

<div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Win {{ home_team_abbv }}: </span>
    </div>
    <div class="range" style="padding: 15px 15px 0px 15px;">
    <input type="range" name="match_c4_win" id="match_c4_win" min="0" max="100" step="1" oninput="updateTextInput4w(this.value)">
        <div class="sliderticks">
            <p>0</p>
            <p>25</p>
            <p>50</p>
            <p>75</p>
            <p>100</p>
        </div>
    </div>
    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput4w" style="width: 50px"> &nbsp </span>
    </div>
</div>
    <br><br>
</div>

<div class="card info">
        <p>
    If {{ home_team_abbv }} wins: you win <span id="textInput4wRes" style="display:inline-block; float: none; height:35px; width:75px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> &nbsp </span> tokens
</p>

            <p>
    If {{ home_team_abbv }} doesn't win: you win <span id="textInput4lRes" style="display:inline-block; float: none; height:35px; width:75px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> &nbsp </span> tokens
</p>
</div>
<br><br>
<div class="card info">
       <label class="col-form-label">
    <strong>  Choice 5: </strong>
    </label>
<p>
Betting Odds: <br>
- {{ home_team_abbv }} wins: {{ home_team_odds_c5 }} <br>
- {{ home_team_abbv }} doesn't win: {{ away_team_odds_c5 }} <br>
</p>

<div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Win {{ home_team_abbv }}: </span>
    </div>
    <div class="range" style="padding: 15px 15px 0px 15px;">
    <input type="range" name="match_c5_win" id="match_c5_win" min="0" max="100" step="1" oninput="updateTextInput5w(this.value)">
        <div class="sliderticks">
            <p>0</p>
            <p>25</p>
            <p>50</p>
            <p>75</p>
            <p>100</p>
        </div>
    </div>
    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput5w" style="width: 50px"> &nbsp </span>
    </div>
</div>
    <br><br>
</div>

<div class="card info">
        <p>
    If {{ home_team_abbv }} wins: you win <span id="textInput5wRes" style="display:inline-block; float: none; height:35px; width:75px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> &nbsp </span> tokens
</p>

            <p>
    If {{ home_team_abbv }} doesn't win: you win <span id="textInput5lRes" style="display:inline-block; float: none; height:35px; width:75px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> &nbsp </span> tokens
</p>
</div>
<br><br>
<div class="card info">
       <label class="col-form-label">
    <strong>  Choice 6: </strong>
    </label>
<p>
Betting Odds: <br>
- {{ home_team_abbv }} wins: {{ home_team_odds_c6 }} <br>
- {{ home_team_abbv }} doesn't win: {{ away_team_odds_c6 }} <br>
</p>

<div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Win {{ home_team_abbv }}: </span>
    </div>
    <div class="range" style="padding: 15px 15px 0px 15px;">
    <input type="range" name="match_c6_win" id="match_c6_win" min="0" max="100" step="1" oninput="updateTextInput6w(this.value)">
        <div class="sliderticks">
            <p>0</p>
            <p>25</p>
            <p>50</p>
            <p>75</p>
            <p>100</p>
        </div>
    </div>
    <div class="input-group-append" style="padding: 5px 5px; display:inline;">
        <span class="input-group-text" id="textInput6w" style="width: 50px"> &nbsp </span>
    </div>
</div>
    <br><br>
</div>

<div class="card info">
        <p>
    If {{ home_team_abbv }} wins: you win <span id="textInput6wRes" style="display:inline-block; float: none; height:35px; width:75px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> &nbsp </span> tokens
</p>

            <p>
    If {{ home_team_abbv }} doesn't win: you win <span id="textInput6lRes" style="display:inline-block; float: none; height:35px; width:75px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#AED6F1"> &nbsp </span> tokens
</p>

</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="page13a_time" id="page13a_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>
var startTime;
var amount4w = 0;
var amount4l = 0;
var amount5w = 0;
var amount5l = 0;
var amount6w = 0;
var amount6l = 0;
var home_team_odds = {{ home_team_odds }};
var away_team_odds = {{ away_team_odds }};
var home_team_odds_c4 = {{ home_team_odds_c4 }};
var away_team_odds_c4 = {{ away_team_odds_c4 }};
var home_team_odds_c5 = {{ home_team_odds_c5 }};
var away_team_odds_c5 = {{ away_team_odds_c5 }};
var home_team_odds_c6 = {{ home_team_odds_c6 }};
var away_team_odds_c6 = {{ away_team_odds_c6 }};

init_val = 0;
var SliderTouched = false;

    $(document).ready(function() {
    startpage_time = Date.now();
      });

      function endPage() {
       var endpage_time = Date.now();
       page_time = (endpage_time - startpage_time)/1000;
       document.getElementById('page13a_time').value=page_time;
       };

function updateTextInput4w(val) {
    amount4w = parseFloat(val);
    amount4l = 100 - amount4w;
    document.getElementById('textInput4wRes').innerHTML = (amount4w*home_team_odds_c4).toFixed(2);
    document.getElementById('textInput4lRes').innerHTML = (amount4l*away_team_odds_c4).toFixed(2);
    document.getElementById('textInput4l').innerHTML = amount4l;
    SliderTouched = true;
    $('.otree-btn-next').show();
}

function updateTextInput5w(val) {
    amount5w = parseFloat(val);
    amount5l = 100 - amount5w;
    document.getElementById('textInput5wRes').innerHTML = (amount5w*home_team_odds_c5).toFixed(2);
    document.getElementById('textInput5lRes').innerHTML = (amount5l*away_team_odds_c5).toFixed(2);
    document.getElementById('textInput5w').innerHTML = amount5w;
    SliderTouched = true;
    $('.otree-btn-next').show();
}

function updateTextInput6w(val) {
    amount6w = parseFloat(val);
    amount6l = 100 - amount6w;
    document.getElementById('textInput6wRes').innerHTML = (amount6w*home_team_odds_c6).toFixed(2);
    document.getElementById('textInput6lRes').innerHTML = (amount6l*away_team_odds_c6).toFixed(2);
    document.getElementById('textInput6w').innerHTML = amount6w;
    SliderTouched = true;
    $('.otree-btn-next').show();
}

    </script>
{% endblock %}