{% 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 ;
var countt = 0;
var counta = 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();
    countt += 1;

}
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();
    countt += 1;

}
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();
    countt += 1;

}
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();
    counta += 1;
}
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();
    counta += 1;
}
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();
    counta += 1;
}
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();
    counta += 1;
}

$(function () {
        $("#form").submit(function (event) {
            if (counta<2 || countt<2) {
                event.preventDefault();
            }
        });
    });

</script>
{% endblock %}

{% block content %}
    <p>
        Vous disposez d'un revenu disponible mensuel de 1000€ (après charges et loyer). Vous avez une probabilité de 15% d'avoir
        un accident qui vous oblige à ê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 aurez un arrêt maladie pendant un mois et votre employeur paie votre salaire pendant cette période. Vous avez donc
        toujours 1000€ disponible.
        Pendant cet arrêt, vous pourrez choisir de recevoir ou non un traitement
        médical. Il existe différentes
        types de traitements qui ont des conséquences différentes sur votre état de santé durant votre arrêt maladie d'un mois.
        Le coût du traitement varie en fonction son efficacité. Un traitement plus efficace améliorera d'autant plus votre état
        de santé.<br>
        Vous retrouverez un état de santé parfait au bout d'un mois, quelque soit le traitement choisi. <br>
        Vous n'aurez 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, vous devrez payer une prime d'assurance chaque mois, que vous ayez ou non un accident.<br>
        En cas d'accident, vous devrez payer le traitement, si vous choisissez d'en recevoir un, et si vous avez pris une assurance, il vous sera versé
        une indemnité. L'indemnité ne peut être reçue que si vous choississez d'être traité et son montant dépend uniquement
        de la prime payée et non du côut du traitement choisi. <br>
    </p>

<p> <strong> Vous aurez donc deux choix à faire : un choix de traitement et un choix d'assurance.</strong> <br>
    Les choix d'assurance apparaissent une fois votre choix de traitement fait. <br>
Votre situation financière et votre état de santé sont évalués en fonction de vos choix de traitement et d'assurance santé.
Ces situations sont indiquées dans le cas où vous avez un accident, et en l'absence d'accident en bas de page. <br>
    Vous pouvez explorer les différentes combinaisons de traitement et d'assurance. Vous devez en explorer au moins deux
    avant de pouvoir passer à la question suivante. <br>
</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> Je suis <strong>obligé(e) de rester alité(e)</strong></li>
  <li> Je n'ai aucun problème pour prendre soin de moi</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></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 <strong>problèmes modérés</strong> pour me déplacer à pied</li>
  <li> Je n'ai aucun problème pour prendre soin de moi</li>
  <li> J'ai des <strong>problèmes 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> </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 <strong>aucun problème</strong> pour me déplacer à pied</li>
  <li> Je n'ai aucun problème pour prendre soin de moi</li>
  <li> Je n'ai <strong>aucun problème</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> </td>
            <td>  <input type="radio" name="treatment" value="opt3" onclick="ftr3();" id="tr3">  </td>
        </tr>
     </tbody>
 </table>

<p> <strong>Choix d'assurance santé</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"> Pas d'assurance santé </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 A </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 B </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"> Pas d'assurance santé </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 A </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 B </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 C </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"> Pas d'assurance santé </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 A </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 B </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 C </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 choix de 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 3 pour votre traitement </strong>  </div>
et <div id="choix_assua" style="display:none"> <strong> Pas d'assurance santé, pour votre choix d'assurance.</strong></div>
<div id="choix_assub" style="display:none"> <strong> le Contrat A, pour votre assurance.</strong></div>
<div id="choix_assuc" style="display:none"> <strong> le Contrat B, 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 <strong>obligé(e) de rester alité(e)</strong></li>
  <li> Je n'ai aucun problème pour prendre soin de moi</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>
  <ul id="h_tr2" style="display:none">
  <li> J'ai des <strong>problèmes modérés</strong> pour me déplacer à pied</li>
  <li> Je n'ai aucun problème pour prendre soin de moi</li>
  <li> J'ai des <strong>problèmes 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>
    <ul id="h_tr3" style="display:none">
  <li> Je n'ai <strong>aucun problème</strong> pour me déplacer à pied</li>
  <li> Je n'ai aucun problème pour prendre soin de moi</li>
  <li> Je n'ai <strong>aucun problème</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>

           </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 de traitement et d'assurance santé, cliquez sur le bouton "Suivant". </p>
{{ form.treatment.errors }}
{{ form.assu.errors }}

    {% next_button %}

{% endblock %}