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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
<link href="{% static 'MAIF_PREV_YCPC/maif_prev_style.css' %}" rel="stylesheet">
{% endblock %}

{% block title %}

{% endblock %}

{% block content %}



<div class="consigne">

    {% if player.boule_rouge == 100 %}

        <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option A:</b>
        L'association garde toujours <b>{{player.x_norm|floatformat:2}}€</b>. L'urne liée à cette option possède 100 boules : 
        <b style="color:green;">{{player.boule_verte}} sont vertes</b> et 
        <b style="color:#9A1A26;">{{player.boule_rouge}} sont rouges</b>. 
        Si une boule rouge est tirée dans cette urne, <b style="color:#9A1A26;">l'association reçoit 0€ supplémentaire</b>.

    {% else %}

    <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option A:</b>
        L'association garde toujours <b>{{player.x_norm|floatformat:2}}€</b>. L'urne liée à cette option possède 100 boules : 
        <b style="color:green;">{{player.boule_verte}} sont vertes</b> et 
        <b style="color:#9A1A26;">{{player.boule_rouge}} sont rouges</b>. 
        Si une boule verte est tirée, l'association reçoit <b style="color:green;">{{player.y_norm_computed|floatformat:2}}€ supplémentaire </b>; 
        si elle est rouge, l'association reçoit <b style="color:#9A1A26;">0€ supplémentaire</b>.
    {% endif %}

    <br>

    {% if player.boule_rouge == 0 %}

    <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option B:</b>
    <b>Le montant que l'association garde CHANGE à chaque ligne du tableau</b>. L'urne liée à cette option possède 100 boules : 
    <b style="color:green;"> {{player.boule_verte_option_prev}} sont vertes</b> et 
    <b style="color:#9A1A26;">{{player.boule_rouge_option_prev}} sont rouges.</b>
    Si une boule verte est tirée, l'association reçoit <b style="color:green;">{{player.y_norm_computed|floatformat:2}}€ supplémentaire</b>.

    {% else %}

    <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option B:</b>
    <b>Le montant que l'association garde CHANGE à chaque ligne du tableau</b>. L'urne liée à cette option possède 100 boules : 
    <b style="color:green;"> {{player.boule_verte_option_prev}} sont vertes</b> et 
    <b style="color:#9A1A26;">{{player.boule_rouge_option_prev}} sont rouges.</b>
    Si une boule verte est tirée, l'association reçoit <b style="color:green;">{{player.y_norm_computed|floatformat:2}}€ supplémentaire</b>; 
    si elle est rouge, l'association reçoit <b style="color:#9A1A26;">0€ supplémentaire</b>. 
    
    {% endif %}
    
    
    <br>
    <br>
    En partant du haut vers le bas, la plupart des gens commencent par préférer l'option B puis changent pour l'option A à partir d'une certaine ligne. 

</div>

<table class="table_MPL"> 
    <thead class="sticky">
        <tr>
            <td colspan=4>
                
            </td>
        </tr>
        <tr>
            <th class="option_A_title">
                <center>
                    <div class="urne">
                        {% for i in boule %}
                            <div class="boules {{ i.couleur }}">{{ i.numero }}</div>
                        {% endfor %}
                    </div>
                    Option A
                </center>
            </th>

            <th class="choose_A_title">Choisir A </th>
            <th class="choose_B_title">Choisir B</th>

            <th class="option_B_title">
                <center>
                    <div class="urne">
                        {% for i in boule_prev %}
                            <div class="boules_prev {{ i.couleur }}">{{ i.numero }}</div>
                        {% endfor %}
                    </div>
                    Option B
                </center>
            </th>
        </tr>
    </thead>

    <tbody>
        {% for wtp in participant.vars.WTP_values %}
            <tr>
                <td class="option_A">
                    L'association garde <b>{{player.x_norm|floatformat:2}}€</b>. <br> 
                    {% if  player.boule_verte == 0 %}
                        Les boules de <b style="color:#9A1A26;">{{ player.boule_verte|add:"1" }}</b> à <b style="color:#9A1A26;">{{ participant.vars.num_boule }}</b> 
                        donnent à l'association
                        <b style="color:#9A1A26;">0€</b> supplémentaire.

                    {% else %}
                        Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ player.boule_verte }}</b> 
                        donnent à l'association <b style="color:green;">
                        {{ player.y_norm_computed|floatformat:2 }}€</b> supplémentaire.<br>
                        Les boules de <b style="color:#9A1A26;"> {{ player.boule_verte|add:"1" }}</b> à <b style="color:#9A1A26;">{{ participant.vars.num_boule }}</b> 
                        donnent à l'association 
                        <b style="color:#9A1A26;">0€</b> supplémentaire.
                    {% endif %}
                </td>

                <td class="choose_A">
                    <input type="radio" class="custom-radio" name="choix{{ forloop.counter }}" value="A" id="choix{{ forloop.counter }}_A" required>
                    <label for="choix{{ forloop.counter }}_A"></label>
                </td>

                <td class="choose_B">
                    <input type="radio" class="custom-radio" name="choix{{ forloop.counter }}" value="B" id="choix{{ forloop.counter }}_B" required>
                    <label for="choix{{ forloop.counter }}_B"></label>
                </td>

                <td class="option_B">
                    L'association garde <b>{{ wtp|floatformat:2 }}€</b>. <br>
                    {% if  player.boule_verte == 90 %}                  
                        Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ participant.vars.num_boule }}</b> 
                        donnent à l'association <b style="color:green;">{{ player.y_norm_computed|floatformat:2 }}€</b> supplémentaire. <br>

                    {% else %}

                        Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ player.boule_verte_option_prev }}</b> 
                        donnent à l'association <b style="color:green;">{{ player.y_norm_computed|floatformat:2 }}€</b> supplémentaire. <br>
                        
                        Les boules de <b style="color:#9A1A26;">{{ player.boule_verte_option_prev|add:"1" }}</b> à <b style="color:#9A1A26;">{{ participant.vars.num_boule }}</b> 
                        donnent à l'association <b style="color:#9A1A26;">0€</b> supplémentaire. <br>
                        
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
        <tr>
            <td colspan=4 style="border: 3px solid red;">
                <br>
                <center>
                    {% next_button %}
                    <br>
                    
                </center>
            </td>
        </tr>
    </tbody>
</table>
   


{% endblock %}


{% block scripts %}

<script>
    document.querySelectorAll(".option_A, .choose_A").forEach(function(elem) {
        elem.addEventListener("mouseover", function() {
            const row = this.closest("tr");
            row.querySelector(".option_A").classList.add("highlight");
            row.querySelector(".choose_A").classList.add("highlight");
        });
    
        elem.addEventListener("mouseout", function() {
            const row = this.closest("tr");
            row.querySelector(".option_A").classList.remove("highlight");
            row.querySelector(".choose_A").classList.remove("highlight");
        });
    
        elem.addEventListener("click", function() {
            const row = this.closest("tr");
            row.querySelector(".choose_A .custom-radio").checked = true;
    
            // Retirez la classe "selected" des deux options avant d'ajouter à la nouvelle option choisie
            row.querySelector(".option_A").classList.remove("selected");
            row.querySelector(".choose_A").classList.remove("selected");
            row.querySelector(".option_B").classList.remove("selected");
            row.querySelector(".choose_B").classList.remove("selected");
    
            row.querySelector(".option_A").classList.add("selected");
            row.querySelector(".choose_A").classList.add("selected");
        });
    });
    
    document.querySelectorAll(".option_B, .choose_B").forEach(function(elem) {
        elem.addEventListener("mouseover", function() {
            const row = this.closest("tr");
            row.querySelector(".option_B").classList.add("highlight");
            row.querySelector(".choose_B").classList.add("highlight");
        });
    
        elem.addEventListener("mouseout", function() {
            const row = this.closest("tr");
            row.querySelector(".option_B").classList.remove("highlight");
            row.querySelector(".choose_B").classList.remove("highlight");
        });
    
        elem.addEventListener("click", function() {
            const row = this.closest("tr");
            row.querySelector(".choose_B .custom-radio").checked = true;
    
            // Retirez la classe "selected" des deux options avant d'ajouter à la nouvelle option choisie
            row.querySelector(".option_A").classList.remove("selected");
            row.querySelector(".choose_A").classList.remove("selected");
            row.querySelector(".option_B").classList.remove("selected");
            row.querySelector(".choose_B").classList.remove("selected");
    
            row.querySelector(".option_B").classList.add("selected");
            row.querySelector(".choose_B").classList.add("selected");
        });
    });
    
    
    
</script>

{% endblock %}