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

{% block title %}
    <b style="color:gray"> Round {{ player.round_number }}: Investment Decision</b>
{% endblock %}

{% block app_styles %}
<style type="text/css">
.slidecontainer {
  width: 100%;


}

div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
}

.important {
        font-size: 14pt;
        font-weight: bold;
    }

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  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;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;

}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer2 {
  width: 80%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  visibility:hidden;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.center {
border: 5px solid #FFFF00;
text-align: center;
}

.display {
    border: 10px solid red;
}

.important {
        font-size: 14pt;
        font-weight: bold;
    }

th {
    border: 1px solid black;
    font-size: 12pt;
    width: 650px;
    text-align: right;
    font-weight:normal;
    }

td {
    font-size: 12pt;
    border: 1px solid black;
    text-align: center;
    }

table {
    table-layout: fixed;
    width: 800px;
    }

.history td {
    font-size: 12pt;
    }

.history th {
    font-size: 12pt;
    width: 100px;
    text-align: center;
    }

.hide {
  display: none;
}

.myDIV:hover + .hide {
  display: block;
  color: black;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}

</style>
{% endblock %}

{% block content %}



                 <!--   (<span class="myDIV"><i style="color:blue"><u>see Ethical Statement</u></i></span>) -->
        <div style="border:1px solid" class="hide">
            <h3>Ethical Statement</h3>
    As a seller, I am expected to adhere to the following:
    <br><br>
    <ul>
    <li>
        I will act in good faith and adhere to ethical conduct.
    </li> <br>
    <li>
        I will act responsibly with fairness, honesty, and integrity.
    </li><br>
    <li>
        I will act ethically in the handling of actual or apparent conflicts of interest.
    </li>
</ul></div>


        </li><p></p>


    <li> You are endowed with <em>L&dollar;{{endowment}}</em> to use completely or partially to invest in increasing your probability of winning the contest.
    </li><p></p>

    <li>
        You can  make a prediction about the average investment other participants will do, <!-- <em>&theta;<sub>p</sub></em>,--> which will help inform your decision.
    </li>


</ul>

<p></p>

    <div style="border: thin solid lightgray; padding:10px; border-radius: 5px; box-shadow: 0 1px 2px #000;">
        Enter your prediction for the other participants' average investment: <em><b>L&dollar; <span id="prediction"></span></b></em>
               <center>
    <div class="slidecontainer2">
        <div class="c">  <small>L${{slider_max|to0}}</small></div>
        <input type="range"  min="0" max="{{slider_max}}"  step="0.1"   value="{{slider_default}}" class="slider" id="sliderGuess">
        <div class="b"><small>L${{slider_min|to0}}</small>  </div>
        </div></center>

<p></p>
    How much would you like  to invest, to increase your probability of winning: <em><b>L&dollar;<span id="investment"></span></b></em>

        <div class="c">  <small>L${{slider_max|to0}}</small></div>
    <div class="slidecontainer">
  <input type="range"  min="0" max="{{slider_max}}"  step="0.1"    value="{{slider_default}}"  class="slider" id="sliderBid">
           <div class="b"><small>L${{slider_min|to0}}</small>  </div>
        </div>
  </div>
<br>
<b style="color:gray">REMEMBER:</b>
        <center>

            If you turn out to be the winner,  you'll keep your <span style="color:blue"> endowment minus your investment</span>
          and receive <span style="color:orange"> the value of the prize, L${{V}}</span>.
            <br>
            If you are NOT the winner,  you'll just keep your <span style="color:blue"> endowment minus your investment</span>.

</center>
<p></p>
Based on your prediction and investment, <b>your probability of wining is <span id='my_probability'></span>%</b>, so your possible outcomes are:

   <!-- -<span style="color:maroon">L&dollar;</span><span style="color:maroon" id="payoff_prediction_r"></span> -->
         <!-- <span style="color:maroon">L&dollar;</span><span style="color:maroon" id="payoff_prediction_hat"></span> -->

  <ul>

      <li>  With a <span id="my_probability_2"></span>%, you are the winner amd thus your payoff is  <em><span style="color:blue"> L&dollar;</span>
          <span style="color:blue" id="payoff_endowment_win"></span>+
          <span style="color:orange">L&dollar;</span><span style="color:orange" id="payoff_contest_win"></span>
          = <span class="important">L&dollar;</span>
          <span class="important" id="payoff_win"></span> </em>
    </li>


      <li> With a <span id="my_probability_3"></span>%, you are NOT the winner amd thus your payoff is  <em><span style="color:blue">L&dollar;</span>
          <span style="color:blue" id="payoff_endowment_lose"></span>+
          <span style="color:orange">L&dollar;</span><span style="color:orange" id="payoff_contest_lose"></span>
          =<span class="important">L&dollar;</span>
          <span class="important" id="payoff_lose"></span> </em>
    </li>

     <li>
         Thus, your expected payoff is <span class="important">L&dollar;</span> <span class="important" id="payoff_expected"></span> </em>
     </li>
  </ul>



<p></p>
    <input id="investment_field" type="hidden" name="investment" value="0">
    <input id="prediction_field" type="hidden" name="prediction" value="0"/>

<button class="btn btn-primary btn-large">
    Submit
</button>
<p></p>
<small style="color:red">Note:</small><small> If you do not make a choice, your investment and prediction will default to zero.
</small><br>
<small style="color:red">Note:</small><small> Your winning probability is calculated assuming each of the  other participants invest the predicted average.

</small>

</div>



    <script>
var sliderGuess1 = document.getElementById("sliderGuess");
var sliderBid1 = document.getElementById("sliderBid");



function getProbabilityNotNormalized(x,y) {
    return (x ** {{r}} / ( {{num_others}} * y ** {{r}} ))*100 ;
}

function getProbabilityN(x,y) {
    return (x ** {{r}} / ( {{num_others}} * y ** {{r}} )) / ((x ** {{r}} / ( {{num_others}} * y ** {{r}} )) + ({{num_others}})*(y ** {{r}} / (  ({{num_others}}-1)*y**{{r}} +x**{{r}} ) ))*100  ;
}

function getProbability(x,y) {
    if (x == 0 && y == 0 ){
        return 1/( {{num_others}} + 1);
    } else if (x > 0 && y == 0){
       return  1
    } else{
        return (x ** {{r}} / ( {{num_others}} * y ** {{r}} )) / ((x ** {{r}} / ( {{num_others}} * y ** {{r}} )) + ({{num_others}})*(y ** {{r}} / (  ({{num_others}}-1)*y**{{r}} +x**{{r}} ) )) ;
    }}

sliderGuess1.oninput = function () {
    var investment = sliderBid1.value;
    var prediction  = this.value;

    document.getElementById("sliderGuess").className = "slider";
    document.getElementById('prediction').innerHTML = this.value;
    document.getElementById('prediction_field').value = this.value;

    document.getElementById('payoff_endowment_win').innerHTML = ({{endowment}} - investment).toFixed(2);
    document.getElementById('payoff_contest_win').innerHTML = {{V}};

    document.getElementById('payoff_win').innerHTML = ({{endowment}} - investment + {{V}}).toFixed(2)

    document.getElementById('payoff_endowment_lose').innerHTML = ({{endowment}} - investment).toFixed(2);
    document.getElementById('payoff_contest_lose').innerHTML =  0;

    document.getElementById('payoff_lose').innerHTML = ({{endowment}} - investment).toFixed(2)  ;


    document.getElementById('my_probability').innerHTML = (getProbability(investment, prediction)*100).toFixed(0);
    document.getElementById('my_probability_2').innerHTML = (getProbability(investment, prediction)*100).toFixed(0);
    document.getElementById('my_probability_3').innerHTML = ((1- getProbability(investment, prediction))*100).toFixed(0);

    document.getElementById('payoff_expected').innerHTML = ({{endowment}}+getProbability(investment, prediction)/100*{{V}}-investment).toFixed(2);
}

sliderBid1.oninput = function () {
    var prediction= sliderGuess1.value;
    var investment = this.value;

    document.getElementById("sliderBid").className = "slider";
    document.getElementById('investment').innerHTML = this.value;
    document.getElementById('investment_field').value = this.value;

    document.getElementById('payoff_endowment_win').innerHTML = ({{endowment}} - investment).toFixed(2);
    document.getElementById('payoff_contest_win').innerHTML = {{V}};

    document.getElementById('payoff_win').innerHTML = ({{endowment}} - investment + {{V}}).toFixed(2)

    document.getElementById('payoff_endowment_lose').innerHTML = ({{endowment}} - investment).toFixed(2);
    document.getElementById('payoff_contest_lose').innerHTML =  0;

    document.getElementById('payoff_lose').innerHTML = ({{endowment}} - investment).toFixed(2)  ;


    document.getElementById('my_probability').innerHTML = (getProbability(investment, prediction)*100).toFixed(0);
    document.getElementById('my_probability_2').innerHTML = (getProbability(investment, prediction)*100).toFixed(0);
    document.getElementById('my_probability_3').innerHTML = ((1- getProbability(investment, prediction))*100).toFixed(0);

    document.getElementById('payoff_expected').innerHTML = ({{endowment}}+getProbability(investment, prediction)/100*{{V}}-investment).toFixed(2);
}

</script>
{% endblock %}