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

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

{% block title %}

{% endblock %}

{% block content %}



<div class="consigne">
    <b>Dans cette expérience, vous allez faire des choix qui vont potentiellement rapporter de l'argent à vous et/ou à l'association {{ player.association_choice }}.</b><br><br>
    Vous avez devant vous un tableau avec deux options, <strong>A</strong> et <strong>B</strong>. Pour chaque ligne, choisissez l'option préférée.<br>

    {% if player.boule_rouge == 100 %}

        <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option A:</b>
        Vous gardez toujours vos <b>10€</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;">{{ player.association_choice }} ne reçoit rien</b>.

    {% else %}

    <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option A:</b>
        Vous gardez toujours vos <b>10€</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, {{ player.association_choice }} reçoit <b style="color:green;">{{player.asso_price}}€</b>; si elle est rouge, <b style="color:#9A1A26;">elle ne reçoit rien</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 vous gardez change selon la 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, {{ player.association_choice }}reçoit <b style="color:green;">{{player.asso_price}}€</b>.

    {% else %}

    <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option B:</b>
    <b>Le montant que vous gardez change selon la 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, {{ player.association_choice }} reçoit <b style="color:green;">{{player.asso_price}}€</b>; si elle est rouge, <b style="color:#9A1A26;">elle ne reçoit rien</b>. 
    
    {% endif %}
    
    <br>
    <b style="font-size:16px; font-weight:bold;margin-left:20px;">Détermination des gains pour vous et pour {{ player.association_choice }}:</b>
    Une fois tous vos choix faits, si ce tableau est sélectionné à la fin de l'experience, une ligne de ce tableau sera choisie au hasard. Votre gain et la donation à {{ player.association_choice }} dépendront de cette ligne, 
    de l’option que vous avez choisi pour cette ligne et du tirage de l’urne associée à votre choix.
    
    

</div>

<table class="table_MPL"> 
    <thead class="sticky">
        <tr>
            <td colspan=4>
                <div class="consigne_dotation">
                    <center>
                    <b>VOTRE DOTATION : VOUS AVEZ {{Constants.ENDOWMENT}}€.</b>
                    </center>
                </div>
            </td>
        </tr>
        <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">
                    Vous gardez <b>{{Constants.ENDOWMENT}}€</b>. <br> 
                    {% if  player.boule_verte == 0 %}
                        Les boules de <b style="color:#9A1A26;">{{ player.boule_verte|add:"1" }}</b> à <b style="color:#9A1A26;">{{ Constants.num_boule }}</b> donnent 
                        <b style="color:#9A1A26;">{{ Constants.low_price_asso }}€</b> 
                        à la <b>{{ player.association_choice }}</b>

                    {% else %}
                        Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ player.boule_verte }}</b> donnent <b style="color:green;">
                            {{ player.asso_price }}€</b> à la <b>{{ player.association_choice }}</b>. <br>
                        Les boules de <b style="color:#9A1A26;"> {{ player.boule_verte|add:"1" }}</b> à <b style="color:#9A1A26;">{{ Constants.num_boule }}</b> donnent 
                        <b style="color:#9A1A26;">{{ Constants.low_price_asso }}€</b> à la <b>{{ player.association_choice }}</b>
                    {% 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">
                    <label for="choix{{ forloop.counter }}_B"></label>
                </td>

                <td class="option_B">
                    Vous gardez <b>{{ wtp }}€</b>. <br>
                    {% if  player.boule_verte == 90 %}                  
                        Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ Constants.num_boule }}</b> 
                        donnent <b style="color:green;">{{ player.asso_price }}€</b> à la <b>{{ player.association_choice }}</b>. <br>

                    {% else %}

                        Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ player.boule_verte_option_prev }}</b> 
                        donnent <b style="color:green;">{{ player.asso_price }}€</b> à la <b>{{ player.association_choice }}</b>. <br>
                        
                        Les boules de <b style="color:#9A1A26;">{{ player.boule_verte_option_prev|add:"1" }}</b> à <b style="color:#9A1A26;">{{ Constants.num_boule }}</b> 
                        donnent <b style="color:#9A1A26;">{{ Constants.low_price_asso }}€</b> à la <b>{{ player.association_choice }}</b>. <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 %}