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

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


{% block content %}
    {%if player.id_in_group == 1%}

        {{ form.pl.errors }}


        <p>You chose quality {{player.vl}} and the other Seller chose quality {{player.vh}}</p>


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

        {#    <div style="width:200px; float:left;">#}
        {#    <p>#}
        {#    Move the handle or type the quality of your product (left slider).#}
        {#    </p>#}
        {##}
        {#    <p>#}
        {#    You must also guess the value of quality of your competitor (right slider).#}
        {#    </p>#}
        {##}
        {#    <p>#}
        {#    Once you have chosen the quality of your product and guess your competitor's quality, you can calculate the prices#}
        {#    and demand for your product in the calculator located at the bottom of the page.#}
        {#    </p>#}
        {#    </div>#}

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

            <div style="width:450px; float:left; background:#E2E4F6">
             <form method="post" action="/Tests/Post">


                <fieldset>
                <legend>Choose your price</legend>
                <input type="radio" name="pl" id="id_pl_1" value="54"/>
                <label for="54">54</label>

                <input type="radio" name="pl" id="id_pl_2" value="80"/>
                <label for="80">80</label>

                <input type="radio" name="pl" id="id_pl_3" value="101"/>
                <label for="101">101</label>

                <input type="radio" name="pl" id="id_pl_4" value="128"/>
                <label for="128">128</label>

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


                <fieldset>
                <legend>Guess the price other seller will choose</legend>
                <input type="radio" name="ph_guess_3" id="id_ph_guess_31" value="598"/>
                <label for="598">598</label>

                <input type="radio" name="ph_guess_3" id="id_ph_guess_32" value="913"/>
                <label for="913">913</label>

                <input type="radio" name="ph_guess_3" id="id_ph_guess_33" value="1037"/>
                <label for="1037">1037</label>

                <input type="radio" name="ph_guess_3" id="id_ph_guess_34" value="1155"/>
                <label for="1155">1155</label>

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

                 <br>


            </div>


        <!--
        <div class="line"></div>
        -->

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



            <strong> Use the calculator to simulate 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_low" id = "id_revenue_low" value =" " style="width: 150px;"></p>
                <p >Your cost: </p>
                <p> <input type = "text" name = "cost_low" id = "id_cost_low" value =" " style="width: 150px;"></p>
                <p >Your payoff: </p>
                <p> <input type = "text" name = "payoff_low" id = "id_payoff_low2" value =" " style="width: 150px;" ></p>
                <p >Other Seller's payoff: </p>
                <p> <input type = "text" name = "payoff_high" id = "id_payoff_high2" value =" " style="width: 150px;"></p>


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

            </div>

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

        </div>





    {% else %}

        {{ form.pl.errors }}


        <p>You chose quality {{player.vl}} and the other Seller chose quality {{player.vh}}</p>


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

        {#    <div style="width:200px; float:left;">#}
        {#    <p>#}
        {#    Move the handle or type the quality of your product (left slider).#}
        {#    </p>#}
        {##}
        {#    <p>#}
        {#    You must also guess the value of quality of your competitor (right slider).#}
        {#    </p>#}
        {##}
        {#    <p>#}
        {#    Once you have chosen the quality of your product and guess your competitor's quality, you can calculate the prices#}
        {#    and demand for your product in the calculator located at the bottom of the page.#}
        {#    </p>#}
        {#    </div>#}

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

            <div style="width:450px; float:left; background:#E2E4F6">
             <form method="post" action="/Tests/Post">


                <fieldset>
                <legend>Choose your price</legend>
                <input type="radio" name="pl" id="id_pl_1" value="54"/>
                <label for="54">54</label>

                <input type="radio" name="pl" id="id_pl_2" value="80"/>
                <label for="80">80</label>

                <input type="radio" name="pl" id="id_pl_3" value="101"/>
                <label for="101">101</label>

                <input type="radio" name="pl" id="id_pl_4" value="128"/>
                <label for="128">128</label>

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


                <fieldset>
                <legend>Guess the price other seller will choose</legend>
                <input type="radio" name="ph_guess_3" id="id_ph_guess_31" value="598"/>
                <label for="598">598</label>

                <input type="radio" name="ph_guess_3" id="id_ph_guess_32" value="913"/>
                <label for="913">913</label>

                <input type="radio" name="ph_guess_3" id="id_ph_guess_33" value="1037"/>
                <label for="1037">1037</label>

                <input type="radio" name="ph_guess_3" id="id_ph_guess_34" value="1155"/>
                <label for="1155">1155</label>

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

                 <br>


            </div>


        <!--
        <div class="line"></div>
        -->

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



            <strong> Use the calculator to simulate 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_low" id = "id_revenue_low" value =" " style="width: 150px;"></p>
                <p >Your cost: </p>
                <p> <input type = "text" name = "cost_low" id = "id_cost_low" value =" " style="width: 150px;"></p>
                <p >Your payoff: </p>
                <p> <input type = "text" name = "payoff_low" id = "id_payoff_low2" value =" " style="width: 150px;" ></p>
                <p >Other Seller's payoff: </p>
                <p> <input type = "text" name = "payoff_high" id = "id_payoff_high2" value =" " style="width: 150px;"></p>


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

            </div>

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

        </div>




    {% endif %}


    {% next_button %}

{% 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, num5, num6;

        function setvalues1(){
            num1={{player.vh}}
            num2={{player.vl}}
            num3=document.querySelector('input[name = "ph"]:checked').value
            num4=document.querySelector('input[name = "pl_guess_3"]:checked').value
            {#num5=Number(document.getElementById("id_ph_guess_3").value)#}
            {#num6=Number(document.getElementById("id_pl").value)#}
        };


        function setvalues2(){
            num1={{player.vh}}
            num2={{player.vl}}
            {#num3=Number(document.getElementById("id_ph").value)#}
            {#num4=Number(document.getElementById("id_pl_guess_3").value)#}
            num5=document.querySelector('input[name = "ph_guess_3"]:checked').value
            num6=document.querySelector('input[name = "pl"]:checked').value
        };

        function calculate1(){
            setvalues1()

            if((100 - (num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}} * num2))/(100-0)>1) {
                Dh1 = 1
                } else if((100 - (num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}} * num2))/(100-0)<0){
                Dh1 = 0
            }
            else{
                Dh1 =  (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) {
                Dl1 = 1
                }
            else if(((num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}}*num2) - (num4)/({{Constants.kl}} * num2))/(100-0)<0){
                Dl1 = 0
            }
            else{
                Dl1 =  ((num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}}*num2) - (num4)/({{Constants.kl}} * num2))/(100-0)
            }
            ;


            Rh1 = Dh1*num3;
            Rl1 = Dl1*num4;
            Ch1 = Math.pow(num1, {{Constants.alpha}})/({{Constants.alpha}});
            Cl1 = Math.pow(num2, {{Constants.alpha}})/({{Constants.alpha}});



            payoff_h1 = Rh1-Ch1;
            payoff_l1 = Rl1-Cl1;
            {#document.getElementById("id_price_leader").value = ph.toFixed(2)#}
            {#document.getElementById("id_price_follower").value = pl.toFixed(2)#}
            document.getElementById("id_revenue_high").value = Rh1.toFixed(2)
            document.getElementById("id_payoff_high1").value = payoff_h1.toFixed(2)
            document.getElementById("id_payoff_low1").value = payoff_l1.toFixed(2)
            document.getElementById("id_cost_high").value = Ch1.toFixed(2)


            //alert("getme "+ p2)
        }

        function calculate2(){
            setvalues2()

            if((100 - (num5-num6)/({{Constants.kh}} * num1 - {{Constants.kl}} * num2))/(100-0)>1) {
                Dh2 = 1
                } else if((100 - (num5-num6)/({{Constants.kh}} * num1 - {{Constants.kl}} * num2))/(100-0)<0){
                Dh2 = 0
            }
            else{
                Dh2 =  (100 - (num5-num6)/({{Constants.kh}} * num1 - {{Constants.kl}} * num2))/(100-0)
            }
            ;
            if(((num5-num6)/({{Constants.kh}} * num1 - {{Constants.kl}} * num2) - (num6)/({{Constants.kl}} * num2))/(100-0)>1) {
                Dl2 = 1
                }
            else if(((num5-num6)/({{Constants.kh}} * num1 - {{Constants.kl}} * num2) - (num6)/({{Constants.kl}} * num2))/(100-0)<0){
                Dl2 = 0
            }
            else{
                Dl2 =  ((num5-num6)/({{Constants.kh}} * num1 - {{Constants.kl}} * num2) - (num6)/({{Constants.kl}} * num2))/(100-0)
            }
            ;


            Rh2 = Dh2*num5;
            Rl2 = Dl2*num6;
            Ch2 = Math.pow(num1, {{Constants.alpha}})/({{Constants.alpha}});
            Cl2 = Math.pow(num2, {{Constants.alpha}})/({{Constants.alpha}});



            payoff_h2 = Rh2-Ch2;
            payoff_l2 = Rl2-Cl2;
            {#document.getElementById("id_price_leader").value = ph.toFixed(2)#}
            {#document.getElementById("id_price_follower").value = pl.toFixed(2)#}
            document.getElementById("id_revenue_low").value = Rl2.toFixed(2)
            document.getElementById("id_payoff_high2").value = payoff_h2.toFixed(2)
            document.getElementById("id_payoff_low2").value = payoff_l2.toFixed(2)
            document.getElementById("id_cost_low").value = Cl2.toFixed(2)


            //alert("getme "+ p2)
        }


</script>

{% endblock %}