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

{% block title %}
Quality 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">
    .qfollower-slider {margin: 0.5em auto; height: 250px; width: 30px;}
    .qfollowervh-slider {margin: 0.5em auto; height: 250px; width: 30px;}
    .qfollowerph-slider {margin: 0.5em auto; height: 250px; width: 30px;}
    .qfollowerpl-slider {margin: 0.5em auto; height: 250px; width: 30px;}

    .oqfollower {text-align: center;}
    .oqfollowervh {text-align: center;}
    .oqfollowerph {text-align: center;}
    .oqfollowerpl {text-align: center;}

    .bid   {text-align: center;}

    .qfollower-slider .ui-slider-range { background: #beccd7; }
    .qfollowervh-slider .ui-slider-range { background: #beccd7; }
    .qfollowerph-slider .ui-slider-range { background: #beccd7; }
    .qfollowerpl-slider .ui-slider-range { background: #beccd7; }
    .qfollower-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }
    .qfollowervh-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }
    .qfollowerph-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }
    .qfollowerpl-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 %}


    <p>Choose quality of your product, and submit the guess for price you and the other Seller will choose.</p>

    {{ form.vl.errors }}
    {{ form.vh_guess_2.errors }}
    {{ form.ph_guess_2.errors }}
    {{ form.pl_guess_2.errors }}

{#    <p>#}
{#    Move the handle or type the quality of your product inside the box to choose quality .#}
{#    </p>#}
{##}
{#    <p>#}
{#    Once you have chosen the quality of your product, you can calculate the prices#}
{#    and demand for your product in the calculator located at the bottom of the page.#}
{#    </p>#}



    <!-- <div class="line"><b>Please, design Package 1: </b></div> -->
<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="qfollower-slider"></div>
                <div class="bid"><input type="text"  name="vl" id="id_vl" value=" " style="color:#28587B"></div>
                <label class="control-label" for="id_vl"></label>
                <div class="bid"><p style="color:#28587B"><strong>Choose your quality</strong></p></div>
                    <div class="bid"><p style="color:#28587B"><strong>({{ Constants.min_quality_low }} to {{ Constants.max_quality_low }})</strong></p></div>
                </div>
            </div>

            <div class="form-group required">
                <div class="controls">
                <div class="qfollowervh-slider"></div>
                <div class="bid"><input type="text"  name="vh_guess_2" id="id_vh" value=" " style="color:#28587B"></div>
                <label class="control-label" for="id_vh"></label>
                <div class="bid"><p style="color:#28587B"><strong>Guess quality other Seller will choose</strong></p></div>
                    <div class="bid"><p style="color:#28587B"><strong>({{ Constants.min_quality_high }} to {{ Constants.max_quality_high }})</strong></p></div>
                </div>
            </div>


            <div class="form-group required">
                <div class="controls">
                <div class="qfollowerph-slider"></div>
                <div class="bid"><input type="text"  name="ph_guess_2" id="id_ph_guess_2" value=" " style="color:#28587B"></div>
                <label class="control-label" for="id_ph_guess_2"></label>
                <div class="bid"><p style="color:#28587B"><strong> Guess price 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 class="form-group required">
                <div class="controls">
                <div class="qfollowerpl-slider"></div>
                <div class="bid"><input type="text"  name="pl_guess_2" id="id_pl_guess_2" value=" " style="color:#28587B"></div>
                <label class="control-label" for="id_pl_guess_2"></label>
                <div class="bid"><p style="color:#28587B"><strong> Guess price you will choose </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>
    </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" id = "id_revenue" value =" " style="width: 150px;"></p>
        <p >Your cost: </p>
        <p> <input type = "text" name = "cost" id = "id_cost" value =" " style="width: 150px;"></p>
        <p >Your payoff: </p>
        <p> <input type = "text" name = "payoff_low" id = "id_payoff_low" value =" " style="width: 150px;" ></p>
        <p >Other Seller's payoff: </p>
        <p> <input type = "text" name = "payoff_high" id = "id_payoff_high" value =" " style="width: 150px;"></p>


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

    </div>

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

</div>


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


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

    jQuery(document).ready(function ($) {
        var QF = $("#id_vl");
        var QL = $("#id_vh");
        var QFPH = $("#id_ph_guess_2");
        var QFPL = $("#id_pl_guess_2");



        $('.qfollower-slider').slider({
            orientation: "vertical",
            range: "min",
            min: {{ Constants.min_quality_low|json }},
            max: {{ Constants.max_quality_low|json }},
            step : 0.01,
            slide: function (event, ui) {
                QF.val(ui.value);
                updateQF();
            },
        });

        $('.qfollowervh-slider').slider({
            orientation: "vertical",
            range: "min",
            min: {{ Constants.min_quality_high|json }},
            max: {{ Constants.max_quality_high|json }},
            step : 0.01,
            slide: function (event, ui) {
                QL.val(ui.value);
                updateQL();
            },
        });

        $('.qfollowerph-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) {
                QFPH.val(ui.value);
                updateQFPH();
            },
        });

        $('.qfollowerpl-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) {
                QFPL.val(ui.value);
                updateQFPL();
            },
        });

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

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

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

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



        $("#id_vl").keyup( function(){
            $( '.qfollower-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_vh").keyup( function(){
            $( '.qfollower-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_2").keyup( function(){
            $( '.qfollowerph-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_2").keyup( function(){
            $( '.qfollowerpl-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

        updateQF();
        updateQL();
        updateQFPH();
        updateQFPL();

    });

</script>


<script>


        var num1, num2, num3, num4;

        function setvalues(){
            num1=Number(document.getElementById("id_vh").value)
            num2=Number(document.getElementById("id_vl").value)
            num3=Number(document.getElementById("id_ph_guess_2").value)
            num4=Number(document.getElementById("id_pl_guess_2").value)
        };

        function calculate(){
            setvalues()
            if((100 - (num3-num4)/({{Constants.kh}} * num1 - {{Constants.kl}} * 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").value = Rl.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").value = Cl.toFixed(2)


            //alert("getme "+ p2)
        }


</script>

{% endblock %}