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

{% block title %}
    Deuxième partie
{% endblock %}

{% block scripts %}
<script>
document.getElementById('show').style.display = "none";
function yes() {
    document.getElementById('show').style.display = "block";
    $(function () {
        $("#form").submit(function (event) {
            if (m2===-1) {
                event.preventDefault();
            }
        });
    });
}
function no() {
     document.getElementById('show').style.display = "none";
}

var m2 = -1 ;

function change(val) {
    document.getElementById('slide').innerHTML = val;
    m2 = val ;
    m2_id = document.getElementById('slide');
    m2_id.innerHTML=m2;
}


</script>
{% endblock %}

{% block content %}
<p>
        Imaginez que vous disposez d'un revenu mensuel de 1000€ (hors charges et loyer). Vous tombez malade pendant un mois.
        Votre état de santé est alors le suivant :
        <ul>
  <li> Je suis obligé(e) de rester alité(e)</li>
  <li> Je suis incapable de me laver ou de m'habiller tout(e) seul(e)</li>
  <li> Je suis incapable d'accomplir mes activités courantes</li>
  <li> J'ai des douleurs ou une gêne modérée(s)</li>
  <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>
    </ul>

    </p>

<p> <strong>Seriez-vous prêt(e) à payer pour ne plus avoir ce état de santé et donc avoir un état de santé parfait ? </strong> <br>
<input type="radio" name="wtp1" value="Non" onclick="no();" id="non"> Non  <br>
<input type="radio" name="wtp1" value="Oui" onclick="yes();" id="oui"> Oui  <br>
    </p>

    <div id="show" >
<p> <strong>Combien seriez-vous prêt(e) à payer (de vos 1000€) pour ne plus avoir cet état de santé
et donc avoir un état de santé parfait ? </strong> <br>
    Déplacez le curseur pour indiquer votre choix. </p>

<strong><div id="slide"> </div></strong> <input id="slider" name ="slide1" type="range" min="0" max="1000" step="10" oninput="change(this.value)"> <br>
    </div>


{{ form.wtp1.errors }}


    {% next_button %}

{% endblock %}