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

{% block title %}
Quality Round {{player.round_number}}
{% endblock %}


{% block content %}
    {{ form.vh.errors }}
    {{ form.vl_guess_1.errors }}
    {{ form.ph_guess_1.errors }}
    {{ form.pl_guess_1.errors }}

    <p> You are Seller A. <Strong>Choose the quality of your product.</Strong></p>

    <p> Also, submit the price you would like to choose and submit the guess for price and quality the other Seller will choose.</p>

<div style="width:800px;">

    <div style="width:450px; float:left; background:#E2E4F6">
     <form method="post" action="/Tests/Post">
        <fieldset>
        <legend>Choose your quality</legend>
        <input type="radio" name="vh" id="id_vh1" value="19"/>
        <label for="19">19</label>

        <input type="radio" name="vh" id="id_vh2" value="23.5"/>
        <label for="23.5">23.5</label>

        <input type="radio" name="vh" id="id_vh3" value="24.5"/>
        <label for="24.5">24.5</label>

        <input type="radio" name="vh" id="id_vh4" value="25"/>
        <label for="25">25</label>

        <input type="radio" name="vh" id="id_vh5" value="37"/>
        <label for="37">37</label>
                <br>
        </fieldset>

         <br>

        <fieldset>
        <legend>Guess quality other seller will choose</legend>
        <input type="radio" name="vl_guess_1" id="id_vl_guess_11" value="3.5"/>
        <label for="3.5">3.5</label>

        <input type="radio" name="vl_guess_1" id="id_vl_guess_12" value="4"/>
        <label for="4">4</label>

        <input type="radio" name="vl_guess_1" id="id_vl_guess_13" value="4.5"/>
        <label for="4.5">4.5</label>

        <input type="radio" name="vl_guess_1" id="id_vl_guess_14" value="5"/>
        <label for="5">5</label>

        <input type="radio" name="vl_guess_1" id="id_vl_guess_15" value="5.5"/>
        <label for="5.5">5.5</label>
                <br>
        </fieldset>

         <br>

        <fieldset>
        <legend>Guess price you will choose</legend>
        <input type="radio" name="ph_guess_1" id="id_ph_guess_11" value="598"/>
        <label for="598">598</label>

        <input type="radio" name="ph_guess_1" id="id_ph_guess_12" value="913"/>
        <label for="913">913</label>

        <input type="radio" name="ph_guess_1" id="id_ph_guess_13" value="1037"/>
        <label for="1037">1037</label>

        <input type="radio" name="ph_guess_1" id="id_ph_guess_14" value="1155"/>
        <label for="1155">1155</label>

        <input type="radio" name="ph_guess_1" id="id_ph_guess_15" value=" 2589"/>
        <label for="2589">2589</label>
                <br>
        </fieldset>

         <br>

        <fieldset>
        <legend>Guess price other seller will choose</legend>
        <input type="radio" name="pl_guess_1" id="id_pl_guess_11" value="54"/>
        <label for="54">54</label>

        <input type="radio" name="pl_guess_1" id="id_ph_guess_12" value="80"/>
        <label for="80">80</label>

        <input type="radio" name="pl_guess_1" id="id_ph_guess_13" value="101"/>
        <label for="101">101</label>

        <input type="radio" name="pl_guess_1" id="id_ph_guess_14" value="128"/>
        <label for="128">128</label>

        <input type="radio" name="pl_guess_1" id="id_ph_guess_15" value="129"/>
        <label for="129">129</label>
                <br>
        </fieldset>



    </div>

    <div style="float: right; width: 300px; background: #e2f3f6;text-align: center;">

    <strong> Simulate your payoff based on the values chosen in the left:</strong>
{#        <p >Your price: </p>#}
{#        <p> <input type = "text" name = "price_leader" id = "id_price_leader" value =" " style="width: 150px;"></p>#}
{#        <p >Your competitor's price: </p>#}
{#        <p> <input type = "text" name = "price_follower" id = "id_price_follower" value =" " style="width: 150px;"></p>#}
        <p >Your revenue: </p>
        <p> <input type = "text" name = "revenue_leader" id = "id_revenue_leader" value =" " style="width: 150px;"></p>
        <p >Your cost: </p>
        <p> <input type = "text" name = "cost_leader" id = "id_cost_leader" value =" " style="width: 150px;"></p>
        <p >Your payoff: </p>
        <p> <input type = "text" name = "payoff_high" id = "id_payoff_high" value =" " style="width: 150px;" ></p>
        <p >Other Seller's payoff: </p>
        <p> <input type = "text" name = "payoff_low" id = "id_payoff_low" value =" " style="width: 150px;"></p>


        <p><input type="button" style="width: 100px;" value="Calculate" onClick="calculate()"> </p>

    </div>
</div>
    <br style="clear:both;"/>




    <p>
        {% next_button %}
    </p>
{% endblock %}



{% block scripts %}

<!--
Here is what we are doing below:
$ == jquery = lets you select elements from css
$( '#header' ); // select the element with an ID of 'header'
$( 'li' );      // select all list items on the page
$( 'ul li' );   // select list items that are in unordered lists
$( '.person' ); // select all elements with a class of 'person'
-->



<script>


        var num1, num2, num3, num4;

        function setvalues(){
            num1=document.querySelector('input[name = "vh"]:checked').value
            num2=document.querySelector('input[name = "vl_guess_1"]:checked').value
            num3=document.querySelector('input[name = "ph_guess_1"]:checked').value
            num4=document.querySelector('input[name = "pl_guess_1"]:checked').value
        }

        function calculate(){
            setvalues()

            if((100 - (num3-num4)/({{Constants.kh}} * num1 - num2))/(100-0)>1) {
                Dh = 1
                } else if((100 - (num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}}*num2))/(100-0)<0){
                Dh = 0
            }
            else{
                Dh =  (100 - (num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}}*num2))/(100-0)
            }
            ;
            if(((num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}}*num2) - (num4)/({{Constants.kl}}*num2))/(100-0)>1) {
                Dl = 1
                }
            else if(((num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}}*num2) - (num4)/({{Constants.kl}}*num2))/(100-0)<0){
                Dl = 0
            }
            else{
                Dl =  ((num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}}*num2) - (num4)/({{Constants.kl}}*num2))/(100-0)
            }
            ;



            Rh = Dh*num3;
            Rl = Dl*num4;
            Ch = Math.pow(num1, {{Constants.alpha}})/({{Constants.alpha}});
            Cl = Math.pow(num2, {{Constants.alpha}})/({{Constants.alpha}});
            payoff_h = Rh-Ch;
            payoff_l = Rl-Cl;
            {#document.getElementById("id_price_leader").value = ph.toFixed(2)#}
            {#document.getElementById("id_price_follower").value = pl.toFixed(2)#}
            document.getElementById("id_revenue_leader").value = Rh.toFixed(2)
            document.getElementById("id_payoff_high").value = payoff_h.toFixed(2)
            document.getElementById("id_payoff_low").value = payoff_l.toFixed(2)
            document.getElementById("id_cost_leader").value = Ch.toFixed(2)
            //alert("getme "+ p2)

        }

</script>

{% endblock %}