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

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

{% block styles %}

<link href="{% static "my_quality_game/jquery-ui/jquery-ui.min.css" %}" rel="stylesheet">
<style type="text/css">
    .qph-slider {margin: 0.5em auto; height: 250px; width: 30px;}
    .qpl_guess-slider {margin: 0.5em auto; height: 250px; width: 30px;}
    .qpl-slider {margin: 0.5em auto; height: 250px; width: 30px;}
    .qph_guess-slider {margin: 0.5em auto; height: 250px; width: 30px;}

    .oqph {text-align: center;}
    .oqpl_guess {text-align: center;}
    .oqpl {text-align: center;}
    .oqph_guess {text-align: center;}

    .bid   {text-align: center;}

    .qph-slider .ui-slider-range { background: #beccd7; }
    .qpl_guess-slider .ui-slider-range { background: #beccd7; }
    .qpl-slider .ui-slider-range { background: #beccd7; }
    .qph_guess-slider .ui-slider-range { background: #beccd7; }

    .qph-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }
    .qpl_guess-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }
    .qpl-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }
    .qph_guess-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }

    #flex-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 500px;
        background: #E2E4F6;
        border: 1px white solid;
        margin: 0 auto;
    }


    input {
    width: 65px;  text-align: center;
    }
</style>


{% endblock %}


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

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


        {{ form.pl.errors }}
        {{ form.ph_guess_3.errors }}

        <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:300px; float:left;">
                <div id="flex-container">



                    <div class="form-group required">
                        <div class="controls">
                        <div class="qpl-slider"></div>
                        <div class="bid"><input type="text"  name="pl" id="id_pl" value=" " style="color:#28587B"></div>
                        <label class="control-label" for="id_ph"></label>
                        <div class="bid"><p style="color:#28587B"><strong>Choose your quantity</strong></p></div>
                            <div class="bid"><p style="color:#28587B"><strong>({{ Constants.min_price_low }} to {{ Constants.max_price_low }})</strong></p></div>
                        </div>
                    </div>


                    <div class="form-group required">
                        <div class="controls">
                        <div class="qph_guess-slider"></div>
                        <div class="bid"><input type="text"  name="ph_guess_3" id="id_ph_guess_3" value=" " style="color:#28587B"></div>
                        <label class="control-label" for="id_pl_guess_3"></label>
                        <div class="bid"><p style="color:#28587B"><strong> Guess quantity other Seller will choose </strong></p></div>
                            <div class="bid"><p style="color:#28587B"><strong>({{ Constants.min_price_high }} to {{ Constants.max_price_high }})</strong></p></div>
                        </div>
                    </div>



                </div>
            </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_high" id = "id_revenue_high" value =" " style="width: 150px;"></p>
                <p >Your cost: </p>
                <p> <input type = "text" name = "cost_high" id = "id_cost_high" value =" " style="width: 150px;"></p>
                <p >Your payoff: </p>
                <p> <input type = "text" name = "payoff_low" id = "id_payoff_low1" value =" " style="width: 150px;"></p>
                <p >Other Seller's payoff: </p>
                <p> <input type = "text" name = "payoff_high" id = "id_payoff_high1" value =" " style="width: 150px;" ></p>



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

            </div>

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

        </div>


    {% else %}

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


        {{ form.pl.errors }}
        {{ form.ph_guess_3.errors }}

        <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:300px; float:left;">
                <div id="flex-container">



                    <div class="form-group required">
                        <div class="controls">
                        <div class="qpl-slider"></div>
                        <div class="bid"><input type="text"  name="pl" id="id_pl" value=" " style="color:#28587B"></div>
                        <label class="control-label" for="id_pl"></label>
                        <div class="bid"><p style="color:#28587B"><strong>Choose your quantity</strong></p></div>
                            <div class="bid"><p style="color:#28587B"><strong>({{Constants.min_price_low }} to {{ Constants.max_price_low }})</strong></p></div>
                        </div>
                    </div>


                    <div class="form-group required">
                        <div class="controls">
                        <div class="qph_guess-slider"></div>
                        <div class="bid"><input type="text"  name="ph_guess_3" id="id_ph_guess_3" value=" " style="color:#28587B"></div>
                        <label class="control-label" for="id_ph_guess_3"></label>
                        <div class="bid"><p style="color:#28587B"><strong> Guess quantity other Seller will choose </strong></p></div>
                            <div class="bid"><p style="color:#28587B"><strong>({{ Constants.min_price_high }} to {{ Constants.max_price_high }})</strong></p></div>
                        </div>
                    </div>



                </div>
            </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 src="{% static "my_quality_game/jquery-ui/jquery-ui.min.js" %}"></script>
<script>

    jQuery(document).ready(function ($) {
        var QPL = $("#id_pl");
        var QPH = $("#id_ph");
        var QGPH = $("#id_ph_guess_3");
        var QGPL = $("#id_pl_guess_3");



        $('.qpl-slider').slider({
            orientation: "vertical",
            range: "min",
            min: {{ Constants.min_price_low|json }},
            max: {{ Constants.max_price_low|json }},
            step : 0.01,
            slide: function (event, ui) {
                QPL.val(ui.value);
                updateQPL();
            },
        });

        $('.qph-slider').slider({
            orientation: "vertical",
            range: "min",
            min: {{ Constants.min_price_high|json }},
            max: {{ Constants.max_price_high|json }},
            step : 0.01,
            slide: function (event, ui) {
                QPH.val(ui.value);
                updateQPH();
            },
        });

        $('.qpl_guess-slider').slider({
            orientation: "vertical",
            range: "min",
            min: {{ Constants.min_price_low|json }},
            max: {{ Constants.max_price_low|json }},
            step : 0.01,
            slide: function (event, ui) {
                QGPL.val(ui.value);
                updateQGPL();
            },
        });

        $('.qph_guess-slider').slider({
            orientation: "vertical",
            range: "min",
            min: {{ Constants.min_price_high|json }},
            max: {{ Constants.max_price_high|json }},
            step : 0.01,
            slide: function (event, ui) {
                QGPH.val(ui.value);
                updateQGPH();
            },
        });

        function updateQPL() {
            $('.oqph').text(QPH.val());
        } //This function moves the handle of the slider, without it the number update but handle does not move

        function updateQPH() {
            $('.oqpl').text(QPL.val());
        } //This function moves the handle of the slider, without it the number update but handle does not move

        function updateQGPL() {
            $('.oqpl_guess').text(QGPL.val());
        } //This function moves the handle of the slider, without it the number update but handle does not move

        function updateQGPH() {
            $('.oqph_guess').text(QGPH.val());
        } //This function moves the handle of the slider, without it the number update but handle does not move


        $("#id_pl").keyup( function(){
            $( '.qpl-slider' ).slider( "option", "value", parseFloat($(this).val()) );
      }); // this piece of code retro-feed the value you put in the box to the slider: from parse float to the slider
            // in class qonea-slider

        $("#id_ph").keyup( function(){
            $( '.qph-slider' ).slider( "option", "value", parseFloat($(this).val()) );
      }); // this piece of code retro-feed the value you put in the box to the slider: from parse float to the slider
            // in class qonea-slider

        $("#id_ph_guess_3").keyup( function(){
            $( '.qph_guess-slider' ).slider( "option", "value", parseFloat($(this).val()) );
      }); // this piece of code retro-feed the value you put in the box to the slider: from parse float to the slider
            // in class qonea-slider

        $("#id_pl_guess_3").keyup( function(){
            $( '.qpl_guess-slider' ).slider( "option", "value", parseFloat($(this).val()) );
      }); // this piece of code retro-feed the value you put in the box to the slider: from parse float to the slider
            // in class qonea-slider

        updateQPL();
        updateQPH();
        updateQGPH();
        updateQGPL();
    });

</script>


<script>


        var num1, num2, num3, num4, num5, num6;

        function setvalues1(){
            num1={{player.vh}}
            num2={{player.vl}}
            num3=Number(document.getElementById("id_ph_guess_3").value)
            num4=Number(document.getElementById("id_pl").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=Number(document.getElementById("id_ph_guess_3").value)
            num6=Number(document.getElementById("id_pl").value)
        };

        function calculate1(){
            setvalues1()

            if(num1*({{Constants.theta_upper}} - num3) - num4*num2 >1) {
                Dh1 = (num1*({{Constants.theta_upper }} - num3) - num4*num2)
                } else if((num1*({{Constants.theta_upper}} - num3) - num4*num2)<0){
                Dh1 = 0
            }
            else{
                Dh1 =  (num1*({{Constants.theta_upper}} - num3) - num4*num2)
            }
            ;
            if(num2*({{ Constants.theta_upper}} - num3 - num4)>1) {
                Dl1 = (num2*({{ Constants.theta_upper}} - num3 - num4))
                }
            else if(num2*({{ Constants.theta_upper}} - num3 - num4)<0){
                Dl1 = 0
            }
            else{
                Dl1 =  (num2*({{ Constants.theta_upper}} - num3 - num4))
            }
            ;


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

            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 = Rl1.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 = Cl1.toFixed(2)


            //alert("getme "+ p2)
        }

        function calculate2(){
            setvalues2()

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



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


            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 %}