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

{% block title %}

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

    .oqfollower {text-align: center;}

    .bid   {text-align: center;}

    .qfollower-slider .ui-slider-range { background: #beccd7; }
    .qfollower-slider .ui-slider-handle  { border-color: #beccd7; width: 45px; }


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


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


{% endblock %}





{% block content %}

    <p>
    Participant A chose quality <strong>{{group.vh}}</strong>.
    </p>

    <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 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="0" 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>(0 to {{ Constants.max_quality }})</strong></p></div>
        </div>
    </div>






</div>

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

<div >



<strong> Use the calculator to simulate prices based on the quality values above :</strong>
    <p >Your price: </p>
    <p> <input type = "text" name = "price_follower" id = "id_price_follower" value ="0" style="width: 300px;"></p>
    <p >Your competitor's price: </p>
    <p> <input type = "text" name = "price_leader" id = "id_price_leader" value ="0" style="width: 300px;"></p>
    <p >Your demand: </p>
    <p> <input type = "text" name = "demand_follower" id = "id_demand_follower" value ="0" style="width: 300px;"></p>
    <p >Your competitor's demand: </p>
    <p> <input type = "text" name = "demand_leader" id = "id_demand_leader" value ="0" style="width: 300px;"></p>
    <p >Your cost: </p>
    <p> <input type = "text" name = "cost_follower" id = "id_cost_follower" value ="0" style="width: 300px;"></p>

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

</div>


    {% 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 QF = $("#id_vl");



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



        function updateQF() {
            $('.oqfollower').text(QF.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



        updateQF();


    });

</script>


<script>


        var num1, num2;

        function setvalues(){
            num1={{group.vh}}
            num2=Number(document.getElementById("id_vl").value)
        };

        function calculate(){
            setvalues()
            if (num1 > 0){
                ph = (2000 * {{Constants.kh}} * num1 * ({{Constants.kh}}* num1 - num2))/(4 * {{Constants.kh}} * num1 - num2);
                pl = ( 1000 * num2 * ({{Constants.kh}} * num1 - num2))/(4 * {{Constants.kh}} * num1 - num2);
                if((1000 - (ph-pl)/({{Constants.kh}} * num1 - num2))/(1000-0)>1) {
                    Dh = 1
                    } else if((1000 - (ph-pl)/({{Constants.kh}} * num1 - num2))/(1000-0)<0){
                    Dh = 0
                } else{
                    Dh =  (1000 - (ph-pl)/({{Constants.kh}} * num1 - num2))/(1000-0)
                };
                if(((ph-pl)/({{Constants.kh}} * num1 - num2) - (pl)/(num2))/(1000-0)>1) {
                    Dl = 1
                    } else if(((ph-pl)/({{Constants.kh}} * num1 - num2) - (pl)/(num2))/(1000-0)<0){
                    Dl = 0
                } else{
                    Dl =  ((ph-pl)/({{Constants.kh}} * num1 - num2) - (pl)/(num2))/(1000-0)
                };
            } else{
                ph =0;
                pl = 500*num2*{{Constants.kh}};
                Dh = 0;
                Dl = (1000 - pl/(num2*{{Constants.kh}}))/(1000-0);
            };

            Cl = Math.pow(num2, {{Constants.alpha}})/({{Constants.alpha}})
            document.getElementById("id_price_leader").value = ph.toFixed(2)
            document.getElementById("id_price_follower").value = pl.toFixed(2)
            document.getElementById("id_demand_leader").value = Dh.toFixed(2)
            document.getElementById("id_demand_follower").value = Dl.toFixed(2)
            document.getElementById("id_cost_follower").value = Cl.toFixed(2)

            //alert("getme "+ p2)
        }


</script>

{% endblock %}