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

{% block title %}
    You are Participant 1. Choose the quality of your product (values between 0 and 1)
{% endblock %}

{% block styles%}

<link href="{% static "packageDesign/jquery-ui/jquery-ui.min.css" %}" rel="stylesheet">
<style type="text/css">
    .qonea-slider {margin: 0.05em auto; height: 100px; width: 30px;}
    .qoneb-slider {margin: 0.05em auto; height: 100px; width: 30px; }

    .oneqa {text-align: center;}
    .oneqb {text-align: center;}


    .bid   {text-align: center;}

    .qonea-slider .ui-slider-range { background: #28587B; }
    .qoneb-slider .ui-slider-range { background: #28587B; }
    .qonea-slider .ui-slider-handle  { border-color: #729fcf; width: 50px; }
    .qoneb-slider .ui-slider-handle  { border-color: #729fcf; width: 50px; }

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


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

{%endblock%}

{% block content %}



<div id="flex-container">

    <strong>Package 1:</strong>

    <div class="form-group required">
        <div class="controls">
        <div class="qonea-slider"></div>
        <div class="bid"><input type="number" name="packageOneQA" id="id_packageOneQA" value="0" style="color:#28587B"></div>
        <label class="control-label" for="id_packageOneQA"></label>
        <div class="bid"><p style="color:#28587B"><strong>Product A</strong></p></div>
            <div class="bid"><p style="color:#28587B"><strong>(0 to {{ Constants.max_quality }})</strong></p></div>
        </div>
    </div>


    <div class="form-group required">
        <div class="controls">
        <div class="qoneb-slider"></div>
        <div class="bid"><input type="number" name="packageOneQB" id="id_packageOneQB" value="0" style="color:#28587B"></div>
        <label class="control-label" for="id_packageOneQB"></label>
        <div class="bid"><p style="color:#28587B"><strong>Product B</strong></p></div>
            <div class="bid"><p style="color:#28587B"><strong>(0 to {{ Constants.max_quality }})</strong></p></div>
        </div>
    </div>


</div>

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

{% endblock %}

{% block scripts %}

    <script type = "text/javascript">

        var num1,num2, res;
        function setValues()
        {
            num1=Number(document.getElementById("textnum1").value);
            num2=Number(document.getElementById("textnum2").value);
        }

        function sumValues()
        {
            setValues();
            result = num1+num2;
            document.getElementById("restext").value = result
            alert("The demand is"+res)
        }
    </script>


<script src="{% static "packageDesign/jquery-ui/jquery-ui.min.js" %}"></script>
<script>

jQuery(document).ready(function ($) {
    var QA = $('#id_packageOneQA');
    var QB = $('#id_packageOneQB');

    $('.qonea-slider').slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: {{ Constants.max_quality|json }},
        slide: function (event, ui) {
            QA.val(ui.value);
            updateQA();
        },
    });


    $('.qoneb-slider').slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: {{ Constants.max_quality|json }},
        slide: function (event, ui) {
            QB.val(ui.value);
            updateQB();
        },
    });


    function updateQA() {
        $('#oneqa').text(QA.val());
    }

    function updateQB() {
        $('.oneqb').text(QB.val());
    }


    $('#id_packageOneQA').keyup( function(){
        $( '.qonea-slider' ).slider( "option", "value", parseInt($(this).val()) );
  });

    $('#id_packageOneQB').keyup( function(){
        $( '.qoneb-slider' ).slider( "option", "value", parseInt($(this).val()) );
  });


    updateQA();
    updateQB();
});

</script>

{% endblock %}