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


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

{% block head_title %}
	CRAINICH
{% endblock %}


{% block title %}
<center style="margin-bottom:1%; margin-top:0%;">
    <div style="display:none; width:0%; heigth:0px;">
        {{ form.REPONSE_SEVEN.errors }}<br>
        
        {{ form.BOUTON_STOP.errors }}<br>        
    </div>

</center>

{% endblock %}

{% block content %}

{% if player.BOUTON_STOP != 1 %}

<div id="arret_confirmer" style="display:block;">

<div id="click_arrete">

    <div class="tableau_de_bord">
    <br>

    <table class="tble_score_gain">

        <tr class="tr_score_gain">
            <td class="td_score_gain">
                VOTRE SCORE : {{participant.vars.SCORE}} point(s)
            </td>

            <td class="td_vide">
            </td>

            <td class="td_score_gain">
                VOTRE GAIN : {{participant.vars.GAIN_GRILLE}}€
            </td>
        </tr>
    </table>

    <br>

    
    <br>

    </div>


    <b class="consigne_grille">Comptez le nombre de 7 dans cette grille :</b> <br><br>

    <table style="width:100%; font-weight:bold;%">
    {% for row in participant.vars.EFFORT_MATRIX %}
    <tr style="border:1px gray solid; text-align:center;">
        {% for col in row %}
            <td style="border:1px gray solid; text-align:center;">   {{ col }}</td>
        {% endfor %}
    </tr>
    {% endfor %}

    </table>

    <div id="timer_display" style="display:none; padding: 2%;">
        
    </div>

    <div id="encadre_reponse">

        <div class="reponse">
            <br>
            Votre réponse : <br>
            <input type="number" name="REPONSE_SEVEN"   autofocus="autofocus" id="reponse" > 
            <br><br>
        </div>

        


        <table class="tble_boutton">
            <tr class="tr_boutton">
                <td class="td_boutton">
                    <button type="button" name="BOUTON_STOP" class="btn_rep" onclick="checkSubmit();" id="button_confirm"  >CONFIRMER</button>
                </td>
            </tr>
        </table>


        <table class="tble_boutton">
            <tr>
                <td class="td_boutton_stop">
                    <button type="button"    class="arrete btn_rep_stop"   onclick="arrete_fct();" >J'arrête</button>
                </td>
            </tr>
        </table>

    </div>
    </div>

    <div id="confirmation" style="display:none;">

        <table class="tble_score_gain">

            <tr class="tr_score_gain">
                <td class="td_score_gain">
                    VOTRE SCORE : {{participant.vars.SCORE}}
                </td>
    
                <td class="td_vide">
                </td>
    
                <td class="td_score_gain">
                    VOTRE GAIN : {{participant.vars.GAIN_GRILLE}}
                </td>
            </tr>
        </table>
    
        <table class="tble_confirmation">
            <tr class="tr_confirmation">
                <td class="td_confirmation">
                    <button type="button"  class="retour btn_rep" onclick="retour_fct();"  value=1 style="background-color:blue;" >RETOUR A L'EXPERIENCE </button>
                </td>

                <td class="td_confirmation">
                    <button type="submit"  name="BOUTON_STOP"  class="confirm btn_rep" value=1  onclick="confirm_fct();"> JE CONFIRME VOULOIR ARRETER LA </button>
                </td>
            </tr>
        </table>

       
      
        
        <br>
    </div>

</div>
{% else %}
<center>
    <button type="submit"  name="BOUTON_STOP"  class=" btn_rep" value=1  > CONTINUER VERS LA SUITE DE L'EXPERIENCE </button>
</center>

{% endif %}

{% endblock %}



{% block scripts %}

<script>

  


// BOUTON ARRET / STOP
    function arrete_fct() {
        document.getElementsByClassName("arrete")[0].value = 1;
        var arretage = document.getElementsByClassName("arrete")[0].value;

        if(arretage == 1){
            document.getElementById('click_arrete').style.display='none';
            document.getElementById('confirmation').style.display='block';
        }
    }

    function retour_fct() {
        document.getElementsByClassName("retour")[0].value = 1;
        var retourage = document.getElementsByClassName("retour")[0].value;
        var arretage = 1;

        if (arretage == 1 && retourage == 1){
            document.getElementById('click_arrete').style.display='block';
            document.getElementById('confirmation').style.display='none';
        }
    }  
    
    function confirm_fct() {
        document.getElementsByClassName("retour")[0].value = 1;
        var confirmage = document.getElementsByClassName("confirm")[0].value;
        var arretage = 1;

        if (arretage == 1 && confirmage == 1){
            document.getElementById('click_arrete').style.display='none';
            document.getElementById('confirmation').style.display='none';
        }
    }

    




// TIMEOUT QUAND ERREUR > 2
    if({{participant.vars.WRONG}} > 2)
    {
        document.getElementById("timer_display").style.display="block";

        var timeout_time = {{Constants.TIMEOUT_CHRONO}};
        var time_remaining = 0;

        if(localStorage.getItem('timeout_time')==null){
            run_timeout(timeout_time);
            document.getElementById('encadre_reponse').style.display='none';
            document.getElementById("timer_display").style.display='block';
        }
        else{
            run_timeout(localStorage.getItem('timeout_time'))
            document.getElementById('encadre_reponse').style.display='none';
            document.getElementById("timer_display").style.display='block';
            
        }

        setInterval(function(){
            time_remaining = localStorage.getItem('timeout_time');

            if(time_remaining > 0 || time_remaining != null){
                localStorage.setItem('timeout_time', time_remaining - 1);
                document.getElementById('encadre_reponse').style.display='none';
                document.getElementById("timer_display").style.display='block';
                document.getElementById("timer_display").innerHTML = 'Il reste : ' + time_remaining + ' secondes avant que vous puissiez à nouveau donner votre réponse concernant le nombre de 7 dans cette grille';
            }
        }, 1000);

        function run_timeout(time){
            setTimeout(function(){
                localStorage.removeItem('timeout_time');
                document.getElementById('encadre_reponse').style.display='block';
                document.getElementById("timer_display").style.display='none';
                
            }, time * 1000);
            localStorage.setItem('timeout_time', time);
            

        }
    }


    

    // empeche la recherche par ctrl+F
    $(window).keydown(function(e)
    {
        if (e.keyCode === 13 || e.keyCode === 123 || e.keyCode === 116 ) 
        {
            e.preventDefault();
        }
    });


    // empeche d'appuyer sur entrée
    $(window).keydown(function(e)
    {
        if ((e.ctrlKey || e.metaKey) && e.keyCode === 70) 
        {
            e.preventDefault();
        }
    });

    
    // COMPARE LA REPONSE A LA BONNE REPONSE
function checkSubmit() {
    
    let form = document.getElementById('form');
    let isValid = form.reportValidity();
    if (!isValid) return;
    let warnings = [];
    
    let REPONSE_SEVEN_CHECK = document.getElementsByName('REPONSE_SEVEN')[0].value;


    if (REPONSE_SEVEN_CHECK != {{ player.COUNT_SEVEN }} && REPONSE_SEVEN_CHECK!=='' ) {
        
        if ( {{participant.vars.WRONG|add:1}} < 3 )  {
            alert("raté ! Le nombre de 7 dans le tableau est de : " + {{player.COUNT_SEVEN}} + "\n\n Sur cette grille vous avez fait " + {{participant.vars.WRONG|add:1}} + 
            " erreur(s). \n\n Au bout de la 3ème erreur, vous devrez attendre 60 secondes avant de pour voir proposer une nouvelle réponse sur une nouvelle grille. \n Pendant, ce temps de 60 secondes la grille sera affichée.");
            form.submit();
        } else if ( {{participant.vars.WRONG|add:1}} > 2)  {
            alert("raté ! Le nombre de 7 dans le tableau est de : " + {{player.COUNT_SEVEN}} + "\n\n Sur cette grille vous avez fait " + {{participant.vars.WRONG|add:1}} + 
            " erreur(s). \n\n Vous avez fait plus de 2 erreurs, vous devrez donc attendre 60 secondes avant de pour voir proposer une nouvelle réponse sur une nouvelle grille.\n Pendant, ce temps de 60 secondes la grille sera affichée.");
            form.submit();
        }
    

  
    }else if (REPONSE_SEVEN_CHECK==='' ){
        alert("Vous n'avez pas donné de réponse. Veuillez, proposer un chiffre avant de cliquer sur 'confirmer'")

    }else if (REPONSE_SEVEN_CHECK == {{ player.COUNT_SEVEN }} ){
        document.getElementById('button_confirm').disabled = false; 
        document.getElementById('button_confirm').style.cursor = "pointer";
        form.submit();
    }

}



</script>

{% endblock %}