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

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


{% block scripts %}
<script>
var inc_init = 1000 ;
var inc_noacc = 0 ;
var inc_acc = 0 ;
var pi = 0 ;
var forf = 0 ;
var cout = 0 ;
var rbt = 0 ;
var prob = 0.15 ;
var ind = 0 ;


function acc() {
    if (ind===1) {
    inc_acc = inc_init - forf ;
    inc_acc2 = document.getElementById('acc');
    inc_acc2.innerHTML=inc_acc;
    } else {
    inc_acc = inc_init - pi - cout + rbt ;
    inc_acc2 = document.getElementById('acc');
    inc_acc2.innerHTML=inc_acc;
    }
}
function noacc() {
    if (ind===1) {
    inc_noacc = inc_init - forf ;
    inc_noacc2 = document.getElementById('noacc');
    inc_noacc2.innerHTML=inc_noacc;
    } else {
    inc_noacc = inc_init - pi ;
    inc_noacc2 = document.getElementById('noacc');
    inc_noacc2.innerHTML=inc_noacc;
    }
}
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;
    ind = 1 ;
    noacc();
    acc();

}
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;
    ind = 0 ;
    noacc();
    acc();

}
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;
    ind = 0 ;
    noacc();
    acc();

}
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 ;
    forf = 0 ;
    noacc();
    acc();
}
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 ;
    forf = 20 ;
    noacc();
    acc();
}
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 ;
    forf = 40 ;
    noacc();
    acc();
}
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 ;
    noacc();
    acc();
}




</script>
{% endblock %}

{% block content %}
<p> Dans cette question nous vous demandons de t</p>
    <p>
        Vous disposez d'un revenu mensuel de 1000€ (hors charges et loyer). Vous avez une probabilité de 15% d'avoir
        un accident qui vous obligera à être opéré. Suite à cet accident, votre état de santé sera le suivant :
        <ul>
  <li> Je suis obligé(e) de rester alité(e)</li>
  <li> Je n'ai aucun problème pour prendre soin de moi (me laver, m'habiller)</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. Pendant cette arrêt vous pourrez vous faire traiter. Il existe différentes
        techniques de traitement 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. <br>
        Vous retrouverez un état de santé normal au bout d'un mois. La seule différence en termes de santé entre les
        traitements est votre état de santé durant le mois d'arrêt. <br>
        Vous n'avez pas de pertes de revenu en cas d'accident.
    </p>
    <p>
        Vous pouvez également souscrire à un contrat d'assurance dont le prix dépend de l'indemnité en cas d'accident.
        Si vous choisissez un contrat d'assurance non nul, vous devrez payer le prix du contrat que vous ayez un
        accident ou non.<br>
        En cas d'accident, vous devrez payer le traitement et si vous avez pris une assurance, il vous sera versé
        une indemnité. <br>
        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, vos situations en cas d'accident ou non apparaissent
        dans le tableau en bas de page. <br>
        Votre revenu dépend de votre décision de traitement et de votre décision
        d'assurance. Votre état de santé dépend du traitement choisi.
    </p>

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


 <table class="table">
     <thead>
        <tr>
            <th> Traitement </th>
            <th> Coût </th>
            <th> <center> Etat de santé </center> </th>
            <th> Choix </th>
        </tr>
     </thead>
     <tbody>
        <tr>
            <th scope="row"> Option 1 </th>
            <td> 0€ </td>
            <td> <ul>
  <li> J'ai des problèmes sévères pour me déplacer à pied </li>
  <li> Je n'ai aucun problème pour prendre soin de moi</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>
            <th scope="row"> Option 2 </th>
            <td> 200€ </td>
            <td> <ul>
  <li> J'ai des problèmes modérés pour me déplacer à pied</li>
  <li> Je n'ai aucun problème pour prendre soin de moi</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>
            <th scope="row"> Option 3 </th>
            <td> 400€ </td>
            <td> <ul>
  <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> 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>
            <th> Assurance </th>
            <th> Indemnité </th>
            <th> Prix du contrat </th>
            <th> Choix </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row"> Contrat A : pas d'assurance </th>
           <td> 0€ </td>
           <td> 0€ </td>
           <td>  <input type="radio" name="assu" value="assu_a"  onclick="ch_assua();" id="assu_a">  </td>
        </tr>
        <tr>
           <th scope="row"> Contrat B </th>
           <td> 0€ </td>
           <td> 20€ </td>
            <td>  <input type="radio" name="assu" value="assu_b" onclick="ch_assub();" id="assu_b">  </td>
        </tr>
        <tr>
           <th scope="row"> Contrat C </th>
           <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>
            <th> Assurance </th>
            <th> Indemnité </th>
            <th> Prix du contrat </th>
            <th> Choix </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row"> Contrat A : pas d'assurance </th>
           <td> 0€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_a" onclick="ch_assua();" id="assu_a">  </td>
        </tr>
        <tr>
           <th scope="row"> Contrat B </th>
           <td> 100€ </td>
           <td> 15€ </td>
            <td>  <input type="radio" name="assu" value="assu_b" onclick="ch_assub();" id="assu_b">  </td>
        </tr>
        <tr>
           <th scope="row"> Contrat C </th>
           <td> 200€ </td>
           <td> 30€ </td>
            <td>  <input type="radio" name="assu" value="assu_c" onclick="ch_assuc();" id="assu_c">  </td>
        </tr>
        <tr>
           <th scope="row"> Contrat D </th>
           <td> 400€ </td>
           <td> 45€ </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>
            <th> Assurance </th>
            <th> Indemnité </th>
            <th> Prix du contrat </th>
            <th> Choix </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row"> Contrat A : pas d'assurance </th>
           <td> 0€ </td>
           <td> 0€ </td>
            <td>  <input type="radio" name="assu" value="assu_a" onclick="ch_assua();" id="assu_a">  </td>
        </tr>
        <tr>
           <th scope="row"> Contrat B </th>
           <td> 200€ </td>
           <td> 30€ </td>
            <td>  <input type="radio" name="assu" value="assu_b" onclick="ch_assub();" id="assu_b">  </td>
        </tr>
        <tr>
           <th scope="row"> Contrat C </th>
           <td> 400€ </td>
           <td> 60€ </td>
            <td>  <input type="radio" name="assu" value="assu_c" onclick="ch_assuc();" id="assu_c">  </td>
        </tr>
        <tr>
           <th scope="row"> Contrat D </th>
           <td> 600€ </td>
           <td> 90€ </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>
            <th> </th>
            <th> <center> Conséquences si vous avez un accident </center> </th>
            <th> <center> Conséquences si vous n'avez pas d'accident </center> </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row"> Revenu final (en €) </th>
           <td> <center><div id="acc"> </div></center> </td>
           <td><center> <div id="noacc"></center> </td>
        </tr>
        <tr>
           <th scope="row"> Etat de santé </th>
           <td> <ul id="h_tr1" style="display:none">
  <li> Je suis obligé(e) de rester alité(e)</li>
  <li> Je n'ai aucun problème pour prendre soin de moi</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>
  <ul id="h_tr2" style="display:none">
  <li> J'ai des problèmes modérés pour me déplacer à pied</li>
  <li> Je n'ai aucun problème pour prendre soin de moi</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> 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> 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 %}