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

{% block title %}
    Partie 2
{% endblock %}

{% block scripts %}
<script>

var m0 = -1 ;
var m1 = new Number(-1) ;
var m2 = new Number(0) ;
var inc_init = new Number(1000) ;
var inc_mois1 = new Number(0) ;
var inc_mois2 = new Number(0) ;
var val = new Number(0) ;


function change(val) {
    document.getElementById('mois2').innerHTML = val;
    m2 = new Number (val) ;
    m2_id = document.getElementById('mois2');
    m2_id.innerHTML=m2;
    m1 = 200 - val ;
    m1_id = document.getElementById('mois1');
    m1_id.innerHTML=m1;

    inc_mois1 = inc_init + m1 ;
    inc_mois1_2 = document.getElementById('mois1bis');
    inc_mois1_2.innerHTML=inc_mois1;

    inc_mois2 = inc_init + m2 ;
    inc_mois2_2 = document.getElementById('mois2bis');
    inc_mois2_2.innerHTML=inc_mois2;

    if (m1===100) {
    document.getElementById('indif').style.display = "block";
    }
    else {
    document.getElementById('indif').style.display = "none";
    }

    m0 = 0;
}


    $(function () {
        $("#form").submit(function (event) {
            if (m0===-1) {
                event.preventDefault();
            }
        });
    });
</script>
{% endblock %}

{% block content %}
<p class="text-justify">
<p class="text-justify">
Imaginez que votre revenu mensuel est de 1000€ (une fois votre loyer payé). Vous avez une maladie qui
    nécessite un traitement spécifique. Le traitement ne pourra
    vous être administré qu’au bout d’un mois et vous devrez attendre encore un mois pour que celui-ci agisse totalement.
    Cela entraîne un arrêt maladie de deux mois, c'est-à-dire que vous ne travaillez pas pendant 2 mois.
</p>
<p class="text-justify">
    Durant le premier mois d’attente du traitement, votre état de santé est le suivant :
    <ul>
<li>Je ne peux pas me déplacer à pied <strong>plus de 30 min par jour</strong></li>
<li>J'ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
<li>Je suis <strong>incapable</strong> 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 class="text-justify">
Vous recevez donc le traitement au début du deuxième mois. Votre état de santé durant ce second mois d’arrêt maladie est :
    <ul>
<li>Je ne peux pas me déplacer à pied <strong>plus de 1h30 par jour</strong></li>
<li>J’ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
<li>J’ai des problèmes <strong>modérés</strong> pour 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 class="text-justify">
 Avant la maladie vous n'aviez aucun problème de santé. Le traitement n’a pas de conséquences sur votre santé à long terme.
    Après les deux mois d’arrêt maladie vous serez à nouveau en bonne santé et pourrez retourner travailler.
    Vous n’avez pas de dépenses liées au traitement et votre revenu est entièrement préservé.
    Vous n'avez pas d'assurance santé.
</p>
<p class="text-justify">
Votre employeur a souscrit à un contrat de prévoyance qui vous octroie des bons d'achat d'un montant de 200€ pour votre arrêt maladie.
Ces bons d'achat ne peuvent être utilisés que pour certaines activités : repas d’un restaurant soit pris sur place ou livré à domicile,
abonnement à une plateforme de films et/ou séries pendant 1 mois, places pour un événement sportif, spectacle ou concert,
abonnement aux chaînes de télévision de votre choix pendant 1 mois, places de cinéma. <br>
Les bons d'achat ne sont valables qu’un seul mois et sont fournis au début du mois. Vous ne pouvez donc utiliser chaque mois que le montant des
    bons obtenus au début du mois. En particulier, les bons d'achat obtenus au début du premier mois et non utilisés ne peuvent être utilisés
    le mois suivant. <br>
    </p>
<p class="text-justify">
   <strong> Vous devez choisir la répartition des bons d'achats entre les deux mois.</strong> <br>
 <strong> Indiquez quel montant vous voulez pour chaque mois en déplaçant le curseur. </strong>
   </p>
<p> <center>

    <input id="slider" name ="su12" type="range" min="0" max="200" step="10" oninput="change(this.value)">

    {{ form.su12.errors }}
    </center>
</p>
<table class="table"  rules=null>
        <tbody>
    <tr bgcolor="#F78158">
        <td align="left"><strong> Montant pour le premier mois (en €) &#x27a1;</strong></td>
        <td align="left"> <strong><div id="mois1"> </div> </strong></td>
        <td align="right"> <strong><div id="mois2"> </div></strong> </td>
        <td align="right"> <strong> &#11013; Montant pour le deuxième mois (en €)</strong> </td>
    </tr>
     </tbody>
 </table>


<p>
Les conséquences en terme de revenu et d’état de santé pour chaque mois apparaissent ci-dessous une fois un choix effectué.
</p>
    <table class="table">
        <thead>
        <tr>
            <th> </th>
            <th> <center> Premier mois </center> </th>
            <th> <center> Deuxième mois </center> </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row"> Revenu final (en €) </th>
           <td> <center><div id="mois1bis"> </div></center> </td>
           <td><center> <div id="mois2bis"> </div></center> </td>
        </tr>
     <tr>
        <th scope="row"> Etat de santé </th>
         <td> <ul>
<li>Je ne peux pas me déplacer à pied plus de 30 min par jour</li>
<li>J'ai des problèmes légers pour me laver ou 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></td>
         <td> <ul>
<li>Je ne peux pas me déplacer à pied plus de 1h30 par jour</li>
<li>J’ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
<li>J’ai des problèmes modérés pour 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> </td>
     </tr>
      </tbody>
    </table>


    <div id="indif" style="display:none">
    <p>
        <strong>Vous souhaitez avoir autant d'argent le premier mois que le deuxième mois.</strong> Cela signifie que vous êtes indifférent entre avoir de l'argent
        le premier mois et avoir de l'argent le second mois.
        Vous avez fait ce choix car : <br>
    <input type="radio" name="indif_u12" value="1" id="1">  Vous n'avez pas compris : vous pouvez demander au responsable de session de venir vous
    expliquer <br>
<input type="radio" name="indif_u12" value="2" id="2">  Vous êtes vraiment indifférent <br>
<input type="radio" name="indif_u12" value="3"  id="3">  Vous n'arrivez pas à faire un choix <br>
    </p>
</div>



<p class="text-justify"> Une fois que vous avez fait votre choix, cliquez sur le bouton "Suivant". </p>

    {% next_button %}

{% endblock %}