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

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

{% block title %}
<center>
CASE 1 - TRAINING
</center>
{% endblock %}

{% block content %}





<table class="table_MPL"> 
    <thead class="sticky">
        <tr>
            <td colspan=4>

                <center>
       
                    <div id="urne-container" class="urne-container" style="cursor:pointer;">
                        <div id="cache" class="cache-style">
                            Place the mouse cursor here to display the urn</div>
                        <div id="urne">
                            <!-- Les boules seront ajoutées ici par le script -->
                        </div>
                    </div>
                </center>
                
            </td>
        </tr>
        <tr>
            <th class="option_A_title">
                <center>
                    Option A
                </center>
            </th>

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

            <th class="option_B_title">
                <center>
                    Option B
                </center>
            </th>
        </tr>
    </thead>

    <tbody>
        {% for wtp in participant.vars.WTP_values %}
            <tr>
                <td class="option_A col-a">
                   <b style="color:green;">A green ball</b> gives you <b style="color:green;">£{{ player.x1_me|floatformat:2 }} </b><br>
                   <b style="color:red;">A red ball </b> gives you <b style="color:red;">£{{ player.x2_me|floatformat:2 }}</b>
                </td>

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

                </td>

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

                </td>

                <td class="option_B col-b">
                   <b> £{{ wtp|floatformat:2 }}</b> for you
                </td>
            </tr>
        {% endfor %}
        <tr>
            <td colspan=4 style="border: 3px solid red;">
                <center>
                    
                    <button class="blue-button">NEXT</button>
                    
                </center>
            </td>
        </tr>
    </tbody>
</table>
   


<input type="hidden" name="temps_total_urne" id="temps-total-urne">
<input type="hidden" name="user_actions" id="user-actions">



{% endblock %}
{% block scripts %}

<script>
    // --------------------------------------------
    // CREATION DE L'URNE ET DU MASQUAGE
    // --------------------------------------------
    document.addEventListener('DOMContentLoaded', (event) => {
        const urne = document.getElementById('urne');
        let boules = [];
    
        // Ajoutez P1 boules blanches
        for (let i = 0; i < {{ player.P1 }}; i++) {
            boules.push('blanche');
        }
        
        // Ajoutez P2 boules noires
        for (let i = 0; i < {{ player.P2 }}; i++) {
            boules.push('noire');
        }
        
        // Fonction pour mélanger les boules
        function melangerBoules(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
    
        // Mélangez les boules
        melangerBoules(boules);
    
        // Créez les éléments de boule et ajoutez-les à l'urne
        boules.forEach(couleur => {
            let boule = document.createElement('div');
            boule.className = `boule ${couleur}`;
            urne.appendChild(boule);
        });
    });


    // 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
        });
    });
    
</script>

<script>
    // --------------------------------------------------------
    // ENREGISTREMENT DU TEMPS PASSE A REGARDER L'URNE
    // --------------------------------------------------------
    document.addEventListener('DOMContentLoaded', function() {
        var urneContainer = document.getElementById('urne-container');
        var cache = document.getElementById('cache');
        var tempsDebut;
        var tempsIntervals = []; // Tableau pour stocker les intervalles de temps
    
        urneContainer.addEventListener('mouseenter', function() {
            cache.style.visibility = 'hidden';
            tempsDebut = Date.now(); // Commence à mesurer le temps
        });
    
        urneContainer.addEventListener('mouseleave', function() {
            cache.style.visibility = 'visible';
            var tempsInterval = Date.now() - tempsDebut; // Calcule le temps passé lors de cette intervalle
            tempsIntervals.push(tempsInterval); // Ajoute l'intervalle au tableau
            console.log(tempsIntervals)
            console.log(Date.now() )
        });
    
        // Lorsque l'utilisateur soumet sa réponse
        var form = document.querySelector('form');
        form.addEventListener('submit', function() {
            // Convertir le tableau des intervalles en chaîne de caractères
            var inputTemps = document.createElement('input');
            inputTemps.type = 'hidden';
            inputTemps.name = 'temps_regard_urne';
            inputTemps.value = JSON.stringify(tempsIntervals);
            form.appendChild(inputTemps);
        });
    });
    
    
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('keydown', function(event) {
            // Liste des touches à désactiver
            var keysToDisable = ['Tab', 'Enter', 'Space'];

            if (keysToDisable.includes(event.key)) {
                event.preventDefault(); // Empêche l'action par défaut de la touche
            }
        });
    });
</script>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        var urneContainer = document.getElementById('urne-container');
        var cache = document.getElementById('cache');
        var tempsDebut;
        var tempsIntervals = []; // Tableau pour stocker les durées de chaque visite

        urneContainer.addEventListener('mouseenter', function() {
            cache.style.visibility = 'hidden';
            tempsDebut = Date.now(); // Commence à mesurer le temps
        });

        urneContainer.addEventListener('mouseleave', function() {
            cache.style.visibility = 'visible';
            var tempsInterval = Date.now() - tempsDebut; // Calcule le temps passé lors de cette visite
            tempsIntervals.push(tempsInterval); // Ajoute la durée au tableau
        });

        // Lors de la soumission du formulaire
        var form = document.querySelector('form');
        form.addEventListener('submit', function() {
            // Convertir le tableau des durées en chaîne JSON
            var inputTemps = document.createElement('input');
            inputTemps.type = 'hidden';
            inputTemps.name = 'temps_regard_urne';
            inputTemps.value = JSON.stringify(tempsIntervals);
            form.appendChild(inputTemps);
        });
    });
</script>




<script>
    // -------------------------------------------------------
    // SURLIGNAGE EN JAUNE ET CHECKED RADIO BUTTON
    // --------------------------------------------------------
 
    document.addEventListener('DOMContentLoaded', function() {
        var table = document.querySelector('.table_MPL');
    
        function highlightCells(row, startIdx, endIdx) {
            // D'abord, supprimez le surlignage de toutes les cellules de cette ligne
            Array.from(row.cells).forEach(cell => {
                cell.classList.remove('highlight-yellow');
            });
    
            // Ensuite, surlignez les cellules spécifiées
            for (let i = startIdx; i <= endIdx; i++) {
                row.cells[i].classList.add('highlight-yellow');
            }
        }
    
        table.addEventListener('click', function(e) {
            if (e.target.tagName === 'TD') {
                var cellIndex = e.target.cellIndex;
                var row = e.target.parentNode;
    
                // Cocher le bouton radio et surligner les cellules correspondantes
                if (cellIndex === 0 || cellIndex === 1) {
                    var radioA = row.querySelector('.radio-a');
                    if (radioA) {
                        radioA.checked = true;
                        highlightCells(row, 0, 1);
                    }
                } else if (cellIndex === 2 || cellIndex === 3) {
                    var radioB = row.querySelector('.radio-b');
                    if (radioB) {
                        radioB.checked = true;
                        highlightCells(row, 2, 3);
                    }
                }
            }
        });
    
        // Gérer le changement d'état des boutons radio
        var radios = document.querySelectorAll('.table_MPL input[type="radio"]');
        radios.forEach(function(radio) {
            radio.addEventListener('change', function() {
                var row = radio.closest('tr');
                if (radio.classList.contains('radio-a')) {
                    highlightCells(row, 0, 1);
                } else if (radio.classList.contains('radio-b')) {
                    highlightCells(row, 2, 3);
                }
            });
        });
    });
    
    
</script>
<script>
// -------------------------------------------
// ENREGISTRER LES CHOIX ET LES TEMPS
// -------------------------------------------
        
    document.addEventListener('DOMContentLoaded', function() {
        const startTime = Date.now();
        const actions = [];
        const lastChoices = {};
        const table = document.querySelector('.table_MPL');
        const urneContainer = document.getElementById('urne-container');
        let urneStartTime;

        // Gestion des clics sur les choix de la table
        table.addEventListener('click', function(e) {
            if (e.target.tagName === 'TD') {
                var cellIndex = e.target.cellIndex;
                var row = e.target.parentNode;
                var rowIndex = row.rowIndex;
                var currentChoice = cellIndex <= 1 ? 'a' : 'b';

                if (lastChoices[rowIndex] !== currentChoice) {
                    lastChoices[rowIndex] = currentChoice;
                    recordAction(rowIndex, currentChoice);
                }
            }
        });

        // Gestion du temps passé à regarder l'urne
        urneContainer.addEventListener('mouseenter', function() {
            urneStartTime = Date.now(); // Commence le chronométrage
        });

        urneContainer.addEventListener('mouseleave', function() {
            if (urneStartTime) {
                var urneTimeSpent = Date.now() - urneStartTime;
                urneStartTime = null; // Réinitialise le chronométrage
                recordAction('urne', urneTimeSpent);
            }
        });

        function recordAction(line, actionOrTime) {
            var currentTime = Date.now();
            var responseTime = currentTime - startTime;
            actions.push({ ligne: line , temps: responseTime, action: actionOrTime });
            printActions();
        }

        function printActions() {
            let formattedActions = actions.map(a => 
                `ligne: ${a.ligne}, temps: ${a.temps} ms, action: ${a.action}`
            ).join('; ');
        
            // Mettre à jour le champ caché avec les données formatées
            document.getElementById('user-actions').value = formattedActions;
        
            // Vous pouvez toujours conserver cette ligne si vous souhaitez également les afficher dans la console
            console.log(formattedActions);
        }
        
    });




</script>

{% endblock %}