{% 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);
}

.th_style {
    font-weight:400;
    text-align:center;
    width: 7% ;
}

td, th {
  border: 1px solid #dddddd;
}

* {
  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 {{ home_team_abbv }}, you bet 100-x tokens on {{ home_team_abbv }} not winning; example: if you select 60 below,
        you are betting 60 Tokens on a win by {{ home_team_abbv }} and 40 on {{ home_team_abbv }} not winning).
    </p>
    <p>
        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 3 decisions (chosen randomly).
    </p>
</div>
<br><br>
<div class="card info">
       <label class="col-form-label">
    <strong>  Choice 1: </strong>
    </label>
    <br>
<div class="table fixed table-sm table-striped table-responsive" style="width: 350px;">
    <table class="table">
        <tr>
            <th style="text-align:center"> </th>
            <th style="text-align:center"> {{ home_team_abbv }} wins </th>
            <th style="text-align:center"> {{ home_team_abbv }} doesn't win </th>
        </tr>
        <tr>
            <td style="text-align:center"> <strong> Odds </strong> </td>
            <td style="text-align:center"> {{ home_team_odds_c1a }} </td>
            <td style="text-align:center"> {{ away_team_odds_c1a }} </td>
        </tr>
    </table>
</div>
    <p>
        Please adjust the slider to indicate the number of tokens that you would bet on a <strong> win
        by {{ home_team }} </strong>.
    </p>
<div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Win: </span>
    </div>
    <div class="range" style="padding: 15px 15px 0px 15px; height: 50px">
    <input type="range" name="match_c1a_win" id="match_c1a_win" min="0" max="100" step="1" oninput="updateTextInput1aw(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="textInput1aw" style="width: 50px"> &nbsp </span>
    </div>
    <span style="padding: 10px 0px; display:inline;"> tokens </span>
</div>
    <br><br>
</div>

<div class="card info">
    <p>
    You are betting <span id="Bet1aw" style="display:inline-block; float: none; height:30px; width:45px; border-radius:5px; text-align:center; border:1px gray; padding:2.5px 2.5px;background-color:#AED6F1"> &nbsp </span> tokens on {{ home_team_abbv }} winning and
        <span id="Bet1al" style="display:inline-block; float: none; height:30px; width:45px; border-radius:5px; text-align:center; border:1px gray; padding:2.5px 2.5px;background-color:#AED6F1"> &nbsp </span> tokens on {{ home_team_abbv }} not winning.
    </p>
        <p>
    If {{ home_team_abbv }} wins: you win <span id="textInput1awRes" 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="textInput1alRes" 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 2: </strong>
    </label>
    <br>
<div class="table fixed table-sm table-striped table-responsive" style="width: 350px;">
    <table class="table">
        <tr>
            <th style="text-align:center"> </th>
            <th style="text-align:center"> {{ home_team_abbv }} wins </th>
            <th style="text-align:center"> {{ home_team_abbv }} doesn't win </th>
        </tr>
        <tr>
            <td style="text-align:center"> <strong> Odds </strong> </td>
            <td style="text-align:center"> {{ home_team_odds_c5a }} </td>
            <td style="text-align:center"> {{ away_team_odds_c5a }} </td>
        </tr>
    </table>
</div>
    <p>
        Please adjust the slider to indicate the number of tokens that you would bet on a <strong> win
        by {{ home_team }} </strong>.
    </p>
<div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Win: </span>
    </div>
    <div class="range" style="padding: 15px 15px 0px 15px; height: 50px">
    <input type="range" name="match_c5a_win" id="match_c5a_win" min="0" max="100" step="1" oninput="updateTextInput5aw(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="textInput5aw" style="width: 50px"> &nbsp </span>
    </div>
    <span style="padding: 10px 0px; display:inline;"> tokens </span>
</div>
    <br><br>
</div>

<div class="card info">
        <p>
    You are betting <span id="Bet5aw" style="display:inline-block; float: none; height:30px; width:45px; border-radius:5px; text-align:center; border:1px gray; padding:2.5px 2.5px;background-color:#AED6F1"> &nbsp </span> tokens on {{ home_team_abbv }} winning and
            <span id="Bet5al" style="display:inline-block; float: none; height:30px; width:45px; border-radius:5px; text-align:center; border:1px gray; padding:2.5px 2.5px;background-color:#AED6F1"> &nbsp </span> tokens on {{ home_team_abbv }} not winning.
    </p>
        <p>
    If {{ home_team_abbv }} wins: you win <span id="textInput5awRes" 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="textInput5alRes" 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 3: </strong>
    </label>
    <br>
<div class="table fixed table-sm table-striped table-responsive" style="width: 350px;">
    <table class="table">
        <tr>
            <th style="text-align:center"> </th>
            <th style="text-align:center"> {{ home_team_abbv }} wins </th>
            <th style="text-align:center"> {{ home_team_abbv }} doesn't win </th>
        </tr>
        <tr>
            <td style="text-align:center"> <strong> Odds </strong> </td>
            <td style="text-align:center"> {{ home_team_odds_c9a }} </td>
            <td style="text-align:center"> {{ away_team_odds_c9a }} </td>
        </tr>
    </table>
</div>
    <p>
        Please adjust the slider to indicate the number of tokens that you would bet on a <strong> win
        by {{ home_team }} </strong>.
    </p>
<div class="input-group">
    <div class="input-group-prepend" style="padding: 5px 5px;">
        <span class="input-group-text"> Win: </span>
    </div>
    <div class="range" style="padding: 15px 15px 0px 15px; height: 50px">
    <input type="range" name="match_c9a_win" id="match_c9a_win" min="0" max="100" step="1" oninput="updateTextInput9aw(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="textInput9aw" style="width: 50px"> &nbsp </span>
    </div>
    <span style="padding: 10px 0px; display:inline;"> tokens </span>
</div>
    <br><br>
</div>

<div class="card info">
        <p>
    You are betting <span id="Bet9aw" style="display:inline-block; float: none; height:30px; width:45px; border-radius:5px; text-align:center; border:1px gray; padding:2.5px 2.5px;background-color:#AED6F1"> &nbsp </span> tokens on {{ home_team_abbv }} winning and
            <span id="Bet9al" style="display:inline-block; float: none; height:30px; width:45px; border-radius:5px; text-align:center; border:1px gray; padding:2.5px 2.5px;background-color:#AED6F1"> &nbsp </span> tokens on {{ home_team_abbv }} not winning.
    </p>
        <p>
    If {{ home_team_abbv }} wins: you win <span id="textInput9awRes" 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="textInput9alRes" 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="MatchBetPriceList_time" id="MatchBetPriceList_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>
var startTime;
var amount1aw = 0;
var amount1al = 0;
var amount5aw = 0;
var amount5al = 0;
var amount9aw = 0;
var amount9al = 0;
var home_team_odds = {{ home_team_odds }};
var away_team_odds = {{ away_team_odds }};
var home_team_odds_c1a = {{ home_team_odds_c1a }};
var away_team_odds_c1a = {{ away_team_odds_c1a }};
var home_team_odds_c5a = {{ home_team_odds_c5a }};
var away_team_odds_c5a = {{ away_team_odds_c5a }};
var home_team_odds_c9a = {{ home_team_odds_c9a }};
var away_team_odds_c9a = {{ away_team_odds_c9a }};

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('MatchBetPriceList_time').value=page_time;
       };

function updateTextInput1aw(val) {
    amount1aw = parseFloat(val);
    amount1al = 100 - amount1aw;
    document.getElementById('Bet1aw').innerHTML = amount1aw;
    document.getElementById('Bet1al').innerHTML = amount1al;
    document.getElementById('textInput1awRes').innerHTML = (amount1aw*home_team_odds_c1a).toFixed(2);
    document.getElementById('textInput1alRes').innerHTML = (amount1al*away_team_odds_c1a).toFixed(2);
    document.getElementById('textInput1aw').innerHTML = amount1aw;
    SliderTouched = true;
    $('.otree-btn-next').show();
}

function updateTextInput5aw(val) {
    amount5aw = parseFloat(val);
    amount5al = 100 - amount5aw;
    document.getElementById('Bet5aw').innerHTML = amount5aw;
    document.getElementById('Bet5al').innerHTML = amount5al;
    document.getElementById('textInput5awRes').innerHTML = (amount5aw*home_team_odds_c5a).toFixed(2);
    document.getElementById('textInput5alRes').innerHTML = (amount5al*away_team_odds_c5a).toFixed(2);
    document.getElementById('textInput5aw').innerHTML = amount5aw;
    SliderTouched = true;
    $('.otree-btn-next').show();
}

function updateTextInput9aw(val) {
    amount9aw = parseFloat(val);
    amount9al = 100 - amount9aw;
    document.getElementById('Bet9aw').innerHTML = amount9aw;
    document.getElementById('Bet9al').innerHTML = amount9al;
    document.getElementById('textInput9awRes').innerHTML = (amount9aw*home_team_odds_c9a).toFixed(2);
    document.getElementById('textInput9alRes').innerHTML = (amount9al*away_team_odds_c9a).toFixed(2);
    document.getElementById('textInput9aw').innerHTML = amount9aw;
    SliderTouched = true;
    $('.otree-btn-next').show();
}

    </script>
{% endblock %}