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

{% block styles %}
<link href="{% static 'MAIF_ASSO/maif_prev_style.css' %}" rel="stylesheet">

{% endblock %}


{% block title %}
{% endblock %}

{% block content %}
<div class="cadre" style="padding: 1%; border: 0px solid black;">
    <div class="question" style="font-weight:bold; font-size:14px; text-align:justify; background-color:lightgray; padding: 1.5%;">
        Pour chaque ligne, choisissez l'option que vous préférez. 
        En partant du haut vers le bas, la plupart des gens commencent par préférer l'option A puis changent pour l'option B à partir d'une certaine ligne. 
        <br>
        Le plus simple pour vous, consiste à repérer pour quelle ligne vous préferez l'option B plutôt que l'option A. 
        Ainsi, avant cette ligne vous cocherez systématiquement l'option A, puis après cette ligne vous cocherez systématiquement l'option B.
<br><br>
        <ul style="margin-left : 90px;">
            <li>
                Avec l’option A, votre gain est toujours de <b style="color:green;">5€</b> et celui de l'association caritative est toujours de <b style="color:green;">0€</b>.
            </li>
            <li>
                Avec l'option B, votre gain est toujours de <b style="color:green;">0€</b> et celui de l'association caritative est un montant qui va de <b style="color:green;">0€ à 50€</b>.
            </li>
        </ul>
    </div>
    <br>

    <table id="options-table" width="100%" style="border: 3px solid black;">
        <tr>
            <td class="option_A_title" style="border: 2px solid black;">Option A</th>
            <td class="choose_A_title" style="border: 2px solid black;">Choisir Option A</th>
            <td class="choose_B_title" style="border: 2px solid black;">Choisir Option B</th>
            <td class="option_B_title" style="border: 2px solid black;">Option B</th>
        </tr>
        {% for i, option_a, option_b in options %}
        <tr style="border: 3px solid black;">
            <td class="option_A" style="border: 2px solid black;"><b>{{ option_a }}</b> pour moi et <b>0€</b> pour {{player.association_choice}}</td>
            <td class="choose_A" style="border: 2px solid black;">
                <input type="radio" id="choice_a_{{ i }}" class="custom-radio" name="choice_x_{{ i }}" value="A" required>
                <label for="choice_a_{{ i }}"></label></td>
            <td class="choose_B" style="border: 2px solid black;">
                <input type="radio" id="choice_a_{{ i }}" class="custom-radio" name="choice_x_{{ i }}" value="B" required>
                <label for="choice_b_{{ i }}"></label></td>
            <td class="option_B" style="border: 2px solid black;"> <b>0€</b> pour moi et <b>{{ option_b }}</b> pour {{player.association_choice}}</td>
        </tr>
        {% endfor %}
    </table>
</div>

<br>


<center>
    {% next_button %}
</center>
{% 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 %}