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

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


{% block scripts %}
<script>
var inc_init = 1000 ;
var inc_noacc = 0 ;
var inc_acc = 0 ;
var pi = 0 ;
var forf = 0 ;
var indforf = 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 + indforf ;
    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 ;
    indforf = 0 ;
    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 = 15 ;
    indforf = 100 ;
    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 = 30 ;
    indforf = 200 ;
    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 class="text-justify">
        Vous disposez d'un revenu mensuel de 1000€ (une fois votre loyer payé). Votre probabilité d’avoir un accident est de 15%.
        En cas d’accident, votre état de santé sera le suivant durant un mois :
        <ul>
  <li> Je suis incapable de me déplacer à pied</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>
    </p>
    <p class="text-justify">

        Vous retrouverez un état de santé parfait au bout d'un mois.

        Pendant le mois qui suit votre accident, vous serez en arrêt maladie et votre employeur paiera votre salaire.
        Vous n’aurez donc pas de pertes de revenu en cas d'accident : vous disposerez toujours de 1000€. </p>


<p class="text-justify" style="border: 2px double black;">
         <u> Traitement médical </u> <br>
En cas d'accident, vous pourrez choisir de recevoir ou non un traitement médical.
 Il existe différents types de traitements qui varient selon leur niveau d'efficacité pour améliorer l'état de santé durant l'arrêt maladie.
Le coût des traitements varie en fonction de leur efficacité. <br>
Que vous choisissiez d'être traité ou non et quel que soit le traitement choisi, vous retrouverez toujours un état de santé parfait au bout d'un mois.
         </p>

    <p class="text-justify" style="border: 2px double black;">
        <u> Contrat d'assurance </u> <br>
        Vous pouvez également choisir de souscrire ou non un contrat d'assurance santé. Un contrat d’assurance santé est défini par deux éléments :
        une indemnité (c'est-à-dire le montant reçu en cas d'accident) et une prime (c’est-à-dire le prix que vous devez payer chaque mois pour bénéficier de l’assurance).
        Vous ne recevrez l’indemnité qu'en cas d’accident et que si vous avez payé la prime avant la réalisation de l’accident. <br>
Vous avez le choix entre plusieurs contrats d’assurance santé : plus l'indemnité reçue en cas d’accident est élevée,
        plus la prime qui y est associée est élevée.
    </p>

<p class="text-justify"> <strong> Vous avez deux choix à faire : un choix concernant le traitement éventuel que
    vous souhaitez avoir en cas d'accident, et un choix concernant l'éventuel contrat d'assurance santé que vous souhaitez souscrire.</strong> </p>

<p class="text-justify"> <strong> Votre choix de traitement a des conséquences sur votre état de santé et votre situation financière en cas d'accident.
   Votre choix d'assurance santé a des conséquences sur votre situation financière que vous ayez ou non un accident. </strong> <br>

    Les conséquences des différents choix possibles vont apparaître en bas de la page.

    Le choix de traitement est présenté en premier et le choix d'assurance santé n'apparaît qu'une fois le traitement choisi.  <br>
Vous pouvez tester les différentes combinaisons de traitement et d'assurance santé avant de choisir celle que vous préférez. <br>
Vous devez tester au moins deux combinaisons de traitement et d'assurance santé avant d'arrêter votre choix sur une combinaison particulière. <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"> Pas de traitement </th>
            <td> 0€ </td>
            <td> <ul>
  <li> Je suis <strong>incapable</strong>de me déplacer à pied</li>
  <li> J'ai <strong>des problèmes légers</strong> 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 <strong>modérée(s)</strong> </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"> Traitement 1 </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 <strong>aucun problème</strong> pour me laver ou m'habiller tout(e) seul(e)</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 <strong>modérée(s)</strong></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"> Traitement 2 </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 <strong>aucun problème</strong> pour me laver ou m'habiller tout(e) seul(e)</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 <strong>modérée(s)</strong> </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> Prime d'assurance </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>
      </tbody>
    </table>
</div>


<div id="assu2" style="display:none">
    <table class="table">
        <thead>
        <tr>
            <th> Assurance </th>
            <th> Indemnité </th>
            <th> Prime d'assurance </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> Prime d'assurance </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> Pas de traitement, pour votre choix de traitement </strong>  </div>
<div id="choix_tr2" style="display:none"> <strong> Traitement 1, pour votre traitement </strong>  </div>
<div id="choix_tr3" style="display:none"> <strong> Traitement 2, 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 (probabilité 15%) </center> </th>
            <th> <center> Conséquences si vous n'avez pas d'accident (probabilité 85%) </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 incapable de me déplacer à pied</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>
  <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 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>
    <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 me laver ou m'habiller tout(e) seul(e)</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 me laver ou m'habiller tout(e) seul(e)</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 class="text-justify"> Une fois que vous avez fait votre choix de traitement et d'assurance santé, cliquez sur le bouton "Suivant". <br>
Pour rappel, vous ne pourrez passer à la question suivante qu'après avoir essayé deux combinaisons.</p>
{{ form.treatment.errors }}
{{ form.assu.errors }}

    {% next_button %}

{% endblock %}