{% 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 cout = 100 ;
var prob = 0.15 ;


var m1 = -1 ;
var m2 = 0 ;

function change(val) {
    document.getElementById('indemn').innerHTML = val;
    m2 = new Number (val) ;
    i = - m2 ;
    m1 = prob*val ;

    inc_acc = inc_init - m1 - cout - i ;
    inc_acc2 = document.getElementById('acc');
    inc_acc2.innerHTML=inc_acc;

    inc_noacc = inc_init - m1 ;
    inc_noacc2 = document.getElementById('noacc');
    inc_noacc2.innerHTML=inc_noacc;

    m2_id = document.getElementById('indemn');
    m2_id.innerHTML=m2;

    m1_id = document.getElementById('prime');
    m1_id.innerHTML=m1;

}
    $(function () {
        $("#form").submit(function (event) {
            if (m1===-1) {
                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 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">

        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">
En cas d'accident, vous recevrez un traitement médical. Celui-ci coûte 100€. Votre état de santé suite à ce traitement sera le suivant :
    <ul>
  <li> Je ne peux pas me déplacer à pied <strong>plus de 2h30 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>légers</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">
        Vous pouvez choisir de souscrire ou non un <strong>contrat d'assurance santé</strong>. <br>
        Un contrat d’assurance santé est défini par deux éléments :
        <ul>
    <li>  <font color="blue"><strong>une indemnité </strong></font> : c'est-à-dire le montant reçu en cas d'accident</li>
    <li> <font color="orange"><strong>une prime </strong></font>: c'est-à-dire le prix que vous devez payer chaque mois pour bénéficier de l'assurance</li>
</ul>
        Vous ne recevez l’indemnité qu'en cas d’accident et que si vous avez payé la prime avant que l’accident ne se produise. <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> Choisissez votre contrat d'assurance santé en faisant bouger le curseur.</strong> </p>

<p class="text-justify">
    Les conséquences suite à votre choix d'assurance apparaissent en bas de la page une fois un choix effectué.
</p>

<p>
<center>
    <input id="slider" name ="assu_i_hlth" type="range" min="0" max="800" step="10" oninput="change(this.value)">
    {{ form.assu_i_hlth.errors }}
</center>
</p>

        <center>
<table class="table">
   <td align="center">  <font color="blue"><strong> Montant de l'indemnité (en €)</strong></font><font color="blue"><strong><div id="indemn"> </div> </strong></font></td>
    <td align="center"> <font color="orange"><strong> Montant de la prime (en €)</strong> </font><font color="orange"><strong><div id="prime"> </div></strong></font></td>
</table>
</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>
  <li> Je ne peux pas me déplacer à pied plus de 2h30 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 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>
  <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 douleur 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 d'assurance santé, cliquez sur le bouton "Suivant". </p>

    {% next_button %}

{% endblock %}