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


{% block title %} The Game {% endblock %}

{% block content %}
{% tracking_time %}
{% tracking_focus %}


    <p>
You have been allocated a 10 points bonus. You can transfer any amount of the 10 points bonus to Individual B.
    Individual B will not be informed about your decision.

</p>

     <p>
<b>You have to decide how to allocate the bonus between you
    and Individual B. </b>


</p>



<div class="form-group required">


            <label class="col-form-label" for="id_kept">I keep:</label>
            <div class="controls  field-offer">
                <div class="input-group slider" data-slider>
    <input type="range" name="kept" value="-1"
 step="1" min="0" max="10" id="id_kept" class="slider2" oninput="adjust_pressure();"/>

    <div class="input-group-append" id = "zahl1">
        <span class="input-group-text"  title="current value" id="front_stagger_output_s"
        ></span>
    </div>

</div>



            </div>


</div>



<div class="form-group required">


            <label class="col-form-label" for="id_offer">and thereby give</label>
            <div class="controls  field-offer">
                <div class="input-group slider" data-slider>
    <input type="range" name="offer" value="-1"
 step="1" min="0" max="10" required id="id_offer" class="slider2"  />

    <div class="input-group-append" id = "zahl2">
        <span class="input-group-text" data-slider-value  title="current value" id="lf_output_s"></span>
    </div>
</div>
    to Individual B.

            </div>

</div>

<input type="hidden" name="kept_history" maxlength="10000" id="id_kept_history" class="form-control">



<button onclick="write_kept_history()" class="otree-btn-next btn btn-primary next-button otree-next-button" id="nextbutton">Next</button>




{% endblock %}

{% block scripts %}
<script>
    $(function () {
        var SliderTouched = false;
        var selector = $('input[name=kept]');
        selector.input(function () {
            SliderTouched = true;
        });

        $("#form").submit(function (event) {
            if (!SliderTouched) {
                event.preventDefault();
            }
        });

    });


//disable second slider
document.getElementById("id_offer").disabled = true;


// second test showing numbers
var range_slider = document.getElementById("id_kept");

range_slider.addEventListener('input', function() {
        //alert("Range Slider has value of " + this.value);
        document.getElementById("zahl1").style.display = 'block';
        document.getElementById("zahl2").style.display = 'block';
        document.getElementById("nextbutton").style.display = 'block';

        document.getElementById("front_stagger_output_s").innerText = document.getElementById("id_kept").value.toString().concat(" Points")
        //console.log(document.getElementById("front_stagger_output_s").innerText)
        //console.log(document.getElementById("id_kept").value)



});




    var kept_values = [];

// Left front pressure //
function adjust_pressure() {
    lf_output_s.innerHTML = (10 - (document.getElementById("id_kept").value)).toFixed(0).toString().concat(" Points");
    id_offer.value = (10 - (document.getElementById("id_kept").value)).toFixed(0);
    document.getElementById("id_kept").className = "form-control";
    document.getElementById("id_offer").className = "form-control";
//record any value the slider ever takes
    kept_values.push((document.getElementById("id_kept").value)).toFixed(0);
    console.log(kept_values)
};

function write_kept_history() {
    document.getElementById("id_kept_history").value = kept_values.toString()
}




function round(value, exp) {
  if (typeof exp === 'undefined' || +exp === 0)
    return Math.round(value);

  value = +value;
  exp = +exp;

  if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0))
    return NaN;

  // Shift
  value = value.toString().split('e');
  value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)));

  // Shift back
  value = value.toString().split('e');
  return +(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp));
}


// make slider appear only when clicked

var kept = $('input[name=kept]');
var numbers = $('.input-group-append');



function show_numbers() {
    var numbers = $('.input-group-append');


}









</script>
{% endblock %}


{% block styles %}


    <style type="text/css">

        input::-webkit-slider-thumb {  }
        input::-moz-range-track { /* common styles */ }
        input::-ms-track { /* common styles */ }




#nextbutton{
    display: none;
}



#zahl1 {

    display: none
}




#zahl2 {

    display: none
}


    /* The slider itself */
.slider {

    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}


/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {

}

.slider::-moz-range-thumb {

}


/*An other class to make the thumb of the slider invisible*/
.slider2 {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 10px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider2:hover {
    opacity: 1; /* Fully shown on mouse-over */
}




/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider2::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
    visibility: hidden;
}

.slider2::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
    visibility: hidden;

}





    </style>


{% endblock %}