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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}

{% block styles %}
<link href="{% static 'attention_boule_task/attention_boule_task_style.css' %}" rel="stylesheet">
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}

{% if subsession.round_number in Constants.c_change_template %}
<div style="padding:1%; border: 3px solid black; background-color:red; font-size:18px; font-weight:bold; margin-bottom:1%; text-align : center;">
    
    <b>Attention :</b> les montants de l'option B ont changé. 
    
</div>
{% endif %}

<center>
    <div id="urne-container" class="urne-container" style="cursor:pointer;">
        <div id="cache" class="cache-style"></div>
        <div id="urne">
            <!-- Les boules seront ajoutées ici par le script -->
        </div>
    </div>
    </center>
    <br>

<table style="width:100%; border:3px solid black; text-align:center;">

    <tr>
        <td class="option-cell col-a" style="width:50%; border:3px solid black; font-weight:bold; font-size : 20px; cursor:pointer;">
            Option A
        </td>
        <td class="option-cell col-b" style="width:50%; border:3px solid black; font-weight:bold; font-size : 20px; cursor:pointer;">
            Option B
        </td>
    </tr>

    <tr>
        <td class="option-cell col-a" style="width:50%; border:3px solid black; cursor:pointer;">
            Vous avez 100% de chance de gagner <b>{{player.CE}}€</b>
        </td>
        
        <td class="option-cell col-b" style="width:50%; border:3px solid black; cursor:pointer;">
            Dans cette urne cachée derriere ce carré noire, une boule verte vous donne <b style="color:green;">{{player.X1}}€</b> et une boule noire vous donne <b style="color:black;">{{player.X2}}€</b>.
            <br><br>
            Passez la souris sur le carré noire pour afficher l'urne. 
            <br>
            <br>
        </td>
    </tr>


    <td class="col-a" style="width:50%; border:3px solid black; cursor:pointer;">
        <input type="radio" name="choix" id="radio-a" value="A">
    </td>

    <td class="col-b" style="width:50%; border:3px solid black; cursor:pointer;">
        <input type="radio" name="choix" id="radio-b" value="B">
    </td>

</table>



<br>
<center>
    {% next_button %}
</center>

<input type="hidden" name="nombre_de_visites_urne" id="nombre-de-visites-urne">
<input type="hidden" name="temps_total_urne" id="temps-total-urne">


{% endblock %}



{% block scripts %}


<script>

    // CREATION DE L URNE ET DES BOUBOULES

    var nombreBoulesVertes = {{ nombre_boules_vertes }};
    var nombreBoulesNoires = {{ nombre_boules_noires }};
 

    function chevauchement(x1, y1, x2, y2, diametre) {
        var dx = x1 - x2;
        var dy = y1 - y2;
        var distance = Math.sqrt(dx * dx + dy * dy);
        return distance < diametre;
    }
    
    function positionnerBouleSansChevauchement(couleur) {
        var bouleTaille = 20; // La taille de votre boule
        var padding = 10; // La taille du padding désiré
        var rayonMax = (urne.offsetWidth - bouleTaille) / 2 - padding;
        var chevauche;
        var x, y, angle, rayon;
        do {
            chevauche = false;
            angle = Math.random() * 2 * Math.PI; // Angle aléatoire
            rayon = Math.sqrt(Math.random()) * rayonMax; // Rayon aléatoire
            x = rayon * Math.cos(angle) + (urne.offsetWidth / 2 - bouleTaille / 2);
            y = rayon * Math.sin(angle) + (urne.offsetWidth / 2 - bouleTaille / 2);
    
            // Vérifier le chevauchement avec les autres boules
            var boules = document.querySelectorAll('.boule');
            for (var i = 0; i < boules.length; i++) {
                var b = boules[i];
                var bx = parseInt(b.style.left);
                var by = parseInt(b.style.top);
                if (chevauchement(x, y, bx, by, bouleTaille)) {
                    chevauche = true;
                    break;
                }
            }
        } while (chevauche);
    
        // Si aucune chevauchement, placer la boule
        var boule = document.createElement('div');
        boule.classList.add('boule', couleur);
        boule.style.left = x + 'px';
        boule.style.top = y + 'px';
        urne.appendChild(boule);
    }
    
    // Créer 25 boules de chaque couleur.

        for (var i = 0; i < nombreBoulesVertes; i++) {
            positionnerBouleSansChevauchement('verte');
        }
        for (var i = 0; i < nombreBoulesNoires; i++) {
            positionnerBouleSansChevauchement('noire');
        }


    // MASQUE DE L URNE ET COMPORTEMENT DE LA SOURIS SUR LE MASQUE
    document.addEventListener('DOMContentLoaded', function() {
        var urneContainer = document.getElementById('urne-container');
        var cache = document.getElementById('cache');
    
        urneContainer.addEventListener('mouseenter', function() {
            cache.style.visibility = 'hidden'; // Cache le cache lorsque la souris quitte  l'urne
        });
    
        urneContainer.addEventListener('mouseleave', function() {
            cache.style.visibility = 'visible'; // Réaffiche le cache lorsque la souris est sur l'urne
        });
    });
    
    

    // VALIDATION DES RADIO BUTTON AU MOMENT DU CLIC + SURLIGNAGE EN JAUNE DE L OPTION CHOISIE
    document.addEventListener('DOMContentLoaded', function() {
        var colsA = document.querySelectorAll('.col-a');
        var colsB = document.querySelectorAll('.col-b');
        var radioA = document.getElementById('radio-a');
        var radioB = document.getElementById('radio-b');
    
        colsA.forEach(function(cell) {
            cell.addEventListener('click', function() {
                activateColumn(colsA, colsB);
                radioA.checked = true;
            });
        });
    
        colsB.forEach(function(cell) {
            cell.addEventListener('click', function() {
                activateColumn(colsB, colsA);
                radioB.checked = true;
            });
        });
    
        function activateColumn(activeCols, inactiveCols) {
            highlightColumn(activeCols);
            unhighlightColumn(inactiveCols);
        }
    
        function highlightColumn(cells) {
            cells.forEach(function(cell) {
                cell.classList.add('highlight');
            });
        }
    
        function unhighlightColumn(cells) {
            cells.forEach(function(cell) {
                cell.classList.remove('highlight');
            });
        }
    });
    
    

    // ENREGISTRE LE TEMPS TOTAL PASSE A REGARDER L URNE
    document.addEventListener('DOMContentLoaded', function() {
        var urneContainer = document.getElementById('urne-container');
        var startTime = 0;
        var totalTime = 0;
    
        urneContainer.addEventListener('mouseenter', function() {
            startTime = new Date();
        });
    
        urneContainer.addEventListener('mouseleave', function() {
            var endTime = new Date();
            totalTime += endTime - startTime;
            document.getElementById('temps-total-urne').value = totalTime / 1000;  // Convertit en secondes
        });
    });
    


 
    // ENREGISTRE LE NOMBRE DE FOIS QUE L INDIVIDU REGARDE L URNE
    document.addEventListener('DOMContentLoaded', function() {
        var urneContainer = document.getElementById('urne-container');
        var nombreDeVisites = 0;
    
        urneContainer.addEventListener('mouseenter', function() {
            nombreDeVisites++;
        });
    
        urneContainer.addEventListener('mouseleave', function() {
            document.getElementById('nombre-de-visites-urne').value = nombreDeVisites;
        });
    });
    
    
    
</script>

{% endblock %}