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

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


{% block scripts %}
<script>
var inc_init = 1000 ;
var inc_noill = 0 ;
var inc_ill = 0 ;
var pi = 0 ;
var cout = 0 ;
var rbt = 0 ;
var prob = 0.15 ;

function ill() {
    inc_ill = inc_init - pi - cout + rbt ;
    inc_ill2 = document.getElementById('ill');
    inc_ill2.innerHTML=inc_ill;
}
function noill() {
    inc_noill = inc_init - pi ;
    inc_noill2 = document.getElementById('noill');
    inc_noill2.innerHTML=inc_noill;
}

function ftr1() {
    document.getElementById('assu1').style.display = "block";
    document.getElementById('assu2').style.display = "none";
    document.getElementById('assu3').style.display = "none";
    document.getElementById('choix_tr1').style.display = "block";
    document.getElementById('choix_tr2').style.display = "none";
    document.getElementById('choix_tr3').style.display = "none";
    document.getElementById('h_tr1').style.display = "block";
    document.getElementById('h_tr2').style.display = "none";
    document.getElementById('h_tr3').style.display = "none";
    cout = 0 ;
    rbt = 0;
    ill() ;
    noill() ;

}
function ftr2() {
    document.getElementById('assu2').style.display = "block";
    document.getElementById('assu1').style.display = "none";
    document.getElementById('assu3').style.display = "none";
    document.getElementById('choix_tr1').style.display = "none";
    document.getElementById('choix_tr2').style.display = "block";
    document.getElementById('choix_tr3').style.display = "none";
    document.getElementById('h_tr1').style.display = "none";
    document.getElementById('h_tr2').style.display = "block";
    document.getElementById('h_tr3').style.display = "none";
    cout = 200 ;
    rbt = 0;
    noill();
    ill();
}
function ftr3() {
    document.getElementById('assu3').style.display = "block";
    document.getElementById('assu1').style.display = "none";
    document.getElementById('assu2').style.display = "none";
    document.getElementById('choix_tr1').style.display = "none";
    document.getElementById('choix_tr2').style.display = "none";
    document.getElementById('choix_tr3').style.display = "block";
    document.getElementById('h_tr1').style.display = "none";
    document.getElementById('h_tr2').style.display = "none";
    document.getElementById('h_tr3').style.display = "block";
    cout = 400 ;
    rbt = 0;
    noill();
    ill();

}
function ch_assua(){
    document.getElementById('choix_assua').style.display = "block";
    document.getElementById('choix_assub').style.display = "none";
    document.getElementById('choix_assuc').style.display = "none";
    document.getElementById('choix_assud').style.display = "none";
    rbt = cout*0
    pi = prob*rbt
    noill();
    ill();
}
function ch_assub(){
    document.getElementById('choix_assua').style.display = "none";
    document.getElementById('choix_assub').style.display = "block";
    document.getElementById('choix_assuc').style.display = "none";
    document.getElementById('choix_assud').style.display = "none";
    rbt = cout*0.5
    pi = prob*rbt
    noill();
    ill();
}
function ch_assuc(){
    document.getElementById('choix_assua').style.display = "none";
    document.getElementById('choix_assub').style.display = "none";
    document.getElementById('choix_assuc').style.display = "block";
    document.getElementById('choix_assud').style.display = "none";
    rbt = cout*1
    pi = prob*rbt
    noill();
    ill();

}
function ch_assud(){
    document.getElementById('choix_assua').style.display = "none";
    document.getElementById('choix_assub').style.display = "none";
    document.getElementById('choix_assuc').style.display = "none";
    document.getElementById('choix_assud').style.display = "block";
    rbt = cout*1.5
    pi = prob*rbt
    noill();
    ill();
}




</script>
{% endblock %}

{% block content %}
    <p>
        Vous disposez d'un revenu mensuel de 1000€ (hors charges et loyer). Vous avez une probabilité de 15% de tomber
        malade chaque mois. Si vous tombez malade, votre état de santé sera 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>
        Vous serez obligatoirement arrêté un mois. La maladie disparaîtra au bout d'un mois et vous retrouverez un état
        de santé normal.
    </p>
    <p>
        Cette maladie pourra nécessiter que vous vous fassiez opérer pour récupérer dans les meilleures conditions. Si vous
        choisissez de vous faire opérer, il existe différentes techniques plus ou moins invasives qui permettront que
        votre état de santé pendant votre arrêt maladie soit meilleur. Le coût du traitement varie en fonction de
        l'efficacité de la technique utilisée. Dans le tableau ci-dessous, vous devez choisir une option de traitement.
    </p>
    <p>
        Vous pouvez aussi choisir un contrat d'assurance. Cette assurance vous remboursera d'une partie du coût de votre
        traitement. Le prix de l'assurance dépend du niveau de traitement choisi. Les choix d'assurance apparaissent une
        fois votre choix de traitement fait.
    </p>
    <p>
        Vous avez donc deux choix à faire : celui concernant le traitement et celui concernant l'assurance.
        Une fois que vous avez sélectionné deux choix, votre situation quand vous tombez malade et
        quand vous ne tombez pas malade apparaît dans le tableau en bas de page.
        Votre revenu dépend de votre décision de traitement et de votre décision
        concernant l'assurance. Votre état de santé dépend du traitement choisi.
    </p>

<p> <strong>Choix de traitement </strong> </p>


 <table class="table">
     <thead>
        <tr>
            <td> Traitement </td>
            <td> Coût </td>
            <td> <center> Etat de santé </center> </td>
            <td> Choix </td>
        </tr>
     </thead>
     <tbody>
        <tr>
            <td> Option 1 </td>
            <td> 0€ </td>
            <td> <ul>
  <li> J'ai des problèmes sévères pour me déplacer à pied </li>
  <li> J'ai des problèmes sévères pour me laver ou de m'habiller tout(e) seul(e)</li>
  <li> J'ai des problèmes sévères 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>
            <td>  <input type="radio" name="treatment" value="opt1" onclick="ftr1();" id="tr1">  </td>
        </tr>
        <tr>
            <td> Option 2 </td>
            <td> 200€ </td>
            <td> <ul>
  <li> J'ai des problèmes modérés pour me déplacer à pied</li>
  <li> J'ai des problèmes modérés pour me laver ou de 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>
            <td>  <input type="radio" name="treatment" value="opt2" onclick="ftr2();" id="tr2">  </td>
        </tr>
        <tr>
            <td> Option 3 </td>
            <td> 400€ </td>
            <td> <ul>
  <li> J'ai des problèmes légers pour me déplacer à pied</li>
  <li> J'ai des problèmes légers pour me laver ou de m'habiller tout(e) seul(e)</li>
  <li> J'ai des problèmes légers 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>
            <td>  <input type="radio" name="treatment" value="opt3" onclick="ftr3();" id="tr3">  </td>
        </tr>
     </tbody>
 </table>

<p> <strong>Choix d'assurance </strong> </p>

  <div id="assu1" style="display:none">
    <table class="table">
        <thead>
        <tr>
            <td> Assurance </td>
            <td> Montant remboursé </td>
            <td> Prix du contrat </td>
            <td> Choix </td>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td> Contrat A : pas d'assurance </td>
           <td> 0€ </td>
           <td> 0€ </td>
           <td>  <input type="radio" name="assu" value="assu_a"  onclick="ch_assua();" id="assu_a">  </td>
        </tr>
        <tr>
           <td> Contrat B </td>
           <td> 0€ </td>
           <td> 20€ </td>
            <td>  <input type="radio" name="assu" value="assu_b" onclick="ch_assub();" id="assu_b">  </td>
        </tr>
        <tr>
           <td> Contrat C </td>
           <td> 0€ </td>
           <td> 40€ </td>
            <td>  <input type="radio" name="assu" value="assu_c" onclick="ch_assuc();" id="assu_c">  </td>
        </tr>
      </tbody>
    </table>
</div>


<div id="assu2" style="display:none">
    <table class="table">
        <thead>
        <tr>
            <td> Assurance </td>
            <td> Montant remboursé </td>
            <td> Prix du contrat </td>
            <td> Choix </td>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td> Contrat A : pas d'assurance </td>
           <td> 0€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_a" onclick="ch_assua();" id="assu_a">  </td>
        </tr>
        <tr>
           <td> Contrat B </td>
           <td> 100€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_b" onclick="ch_assub();" id="assu_b">  </td>
        </tr>
        <tr>
           <td> Contrat C </td>
           <td> 200€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_c" onclick="ch_assuc();" id="assu_c">  </td>
        </tr>
        <tr>
           <td> Contrat D </td>
           <td> 400€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_d" onclick="ch_assud();" id="assu_d">  </td>
        </tr>
     </tbody>
    </table>
</div>


<div id="assu3" style="display:none">
    <table class="table">
        <thead>
        <tr>
            <td> Assurance </td>
            <td> Montant remboursé </td>
            <td> Prix du contrat </td>
            <td> Choix </td>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td> Contrat A : pas d'assurance </td>
           <td> 0€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_a" onclick="ch_assua();" id="assu_a">  </td>
        </tr>
        <tr>
           <td> Contrat B </td>
           <td> 200€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_b" onclick="ch_assub();" id="assu_b">  </td>
        </tr>
        <tr>
           <td> Contrat C </td>
           <td> 400€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_c" onclick="ch_assuc();" id="assu_c">  </td>
        </tr>
        <tr>
           <td> Contrat D </td>
           <td> 600€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_d" onclick="ch_assud();" id="assu_d">  </td>
        </tr>
     </tbody>
    </table>
</div>


<center>
<p>
    Vous avez choisi: <div id="choix_tr1" style="display:none"> <strong> Option 1 pour votre traitement </strong>  </div>
<div id="choix_tr2" style="display:none"> <strong> Option 2 pour votre traitement </strong>  </div>
<div id="choix_tr3" style="display:none"> <strong> Option 1 pour votre traitement </strong>  </div>
et <div id="choix_assua" style="display:none"> <strong> le Contrat A (pas d'assurance), pour votre assurance.</strong></div>
<div id="choix_assub" style="display:none"> <strong> le Contrat B, pour votre assurance.</strong></div>
<div id="choix_assuc" style="display:none"> <strong> le Contrat C, pour votre assurance.</strong></div>
<div id="choix_assud" style="display:none"> <strong> le Contrat C, pour votre assurance.</strong></div>
 <br>
</p>
</center>

    <table class="table">
        <thead>
        <tr>
            <td> </td>
            <td> <center> Conséquences si vous êtes malade </center> </td>
            <td> <center> Conséquences si vous n'êtes pas malade </center> </td>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td> Revenu final (en €) </td>
           <td> <center><div id="ill"> </div></center> </td>
           <td><center> <div id="noill"></center> </td>
        </tr>
        <tr>
           <td> Etat de santé </td>
           <td> <ul id="h_tr1" style="display:none">
  <li> J'ai des problèmes sévères pour me déplacer à pied </li>
  <li> J'ai des problèmes sévères pour me laver ou de m'habiller tout(e) seul(e)</li>
  <li> J'ai des problèmes sévères 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>
  <ul id="h_tr2" style="display:none">
  <li> J'ai des problèmes modérés pour me déplacer à pied</li>
  <li> J'ai des problèmes modérés pour me laver ou de 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>
    <ul id="h_tr3" style="display:none">
  <li> J'ai des problèmes légers pour me déplacer à pied</li>
  <li> J'ai des problèmes légers pour me laver ou de m'habiller tout(e) seul(e)</li>
  <li> J'ai des problèmes légers 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>
           <td> <ul style="display:block">
  <li> Je n'ai aucun problème pour me déplacer à pied</li>
  <li> Je n'ai aucun problème pour prendre soin de moi</li>
  <li> Je n'ai aucun problème pour accomplir mes activités courantes</li>
  <li> Je n'ai ni douleurs ni gêne </li>
  <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>
    </ul> </td>
        </tr>
      </tbody>
    </table>

<p> Une fois que vous avez fait votre choix, cliquez sur le bouton "Suivant". </p>
{{ form.treatment.errors }}
{{ form.assu.errors }}

    {% next_button %}

{% endblock %}