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

{% block styles %}
<link href="{% static 'EXLEY_ASSO/EXLEY_ASSO_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:normal; font-size:14px; text-align:justify; background-color:lightgray; padding: 1.5%;">
            <p> For each row, please select the corresponding button of the option you prefer the most.</p>
            <p>Most people start by choosing Option A, then switch to Option B at some point. One way to complete the table is to determine the 
                <span class="bold">line from which you start to prefer Option B more than Option A</span>. Please fill in the table accordingly.</p>
            <ul>
              <li><b>In Option A</b>, <b>you</b> always receive <span class="bold">£5,00</span> and <b>your chosen charity</b> receives 
                <span class="bold">nothing</span>.</li>
              <li><b>In Option B</b>, <span class="bold">you</span> receive <b>nothing</b> and <b>your chosen charity</b> receives a certain 
                <span class="bold">amount of money</span> which increases gradually <b>from £0,00 to £30,00</b> along the rows.</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; font-weight:bold;">Option A</th>
            <td class="choose_A_title" style="border: 2px solid black; font-weight:bold;">Choose A</th>
            <td class="choose_B_title" style="border: 2px solid black; font-weight:bold;">Choose B</th>
            <td class="option_B_title" style="border: 2px solid black; font-weight:bold;">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 }},00</b> for me and <b>£0,00</b> for 
                {% if player.association_choice == 'World Wide Fund for Nature - UK (WWF)' %}
                WWF
                {% elif player.association_choice == 'GreenPeace - UK (GP)' %}
                    GP
                {% elif player.association_choice == 'Sea Shepherd (SP)' %}
                    SP
                {% elif player.association_choice == 'The Nature Conservancy (NC)' %}
                    NC
                {% elif player.association_choice == 'Surfers Against Sewage (SAS)' %}
                    SAS
                {% endif %}   

            </td>
            <td class="choose_A" style="border: 2px solid black;">
                <input type="radio" id="choice_a_{{ i }}" class="custom-radio" name="choice_y_{{ 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_y_{{ i }}" value="B" required>
                <label for="choice_b_{{ i }}"></label></td>
            <td class="option_B" style="border: 2px solid black;"> <b>£0,00</b> for me and <b>{{ option_b }},00</b> for 
            {% if player.association_choice == 'World Wide Fund for Nature - UK (WWF)' %}
                WWF
            {% elif player.association_choice == 'GreenPeace - UK (GP)' %}
                GP
            {% elif player.association_choice == 'Sea Shepherd (SP)' %}
                SP
            {% elif player.association_choice == 'The Nature Conservancy (NC)' %}
                NC
            {% elif player.association_choice == 'Surfers Against Sewage (SAS)' %}
                SAS
            {% endif %}   
            </td>
        </tr>
        {% endfor %}
    </table>
</div>

<br>


<center>
                    
    <button class="blue-button">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 %}