{% extends "global/Page.html" %}
{% load otree static %}
{% block global_styles  %}
       <script>
          src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
       </script>
        <link rel="stylesheet" href="{% static 'global/styles/styles.css' %}">
        <link rel="stylesheet" href="{% static 'global/styles/OmEx_Lottery.css' %}">
{% endblock %}


{% block content %}
{#    Dieser div ist ein weisser Bildschirm (Blende), der sich ueber alles legt vor jedem Laden, um ein #}
{#    eventuelles Springen der divs zu verhindern#}
    <div id="placeholder"></div>
    {% include player.lottery_template %}

        <input type="hidden" name="default_side_hidden" />
        <input type="hidden" name="default_deck_letter_hidden" />
        <input type="hidden" name="exp_deck_seen_hidden" />
        <input type="hidden" name="length_exp_deck_seen_hidden" />
        <input type="hidden" name="real_lottery_win_hidden" />
        <input type="hidden" name="page_time_hidden" />
{#        <input type="hidden" name="page_refresh_hidden" />#}


<script>
// diese Funktion steuert den Rahmen um die Options bei Click auf Radio Button Option
// Einmal brauche ich sie direkt beim Laden der Seite fur den ersten Trial - weiter unten dann bei Click auf
// Radio Button Options


        $(document).ready(function(){

                      if (document.getElementById("radio-def").checked  == true){
                         document.getElementById('risk-default').style.border = "20px solid #0062cc";
                         document.getElementById('risk-default').style.borderRadius = "15px";
                         document.getElementById('risk-alternative').style.border = "20px solid white";
                      }
                        if (document.getElementById("radio-alt").checked  == true){
                         document.getElementById('risk-alternative').style.border = "20px solid #0062cc";
                         document.getElementById('risk-alternative').style.borderRadius = "15px";
                         document.getElementById('risk-default').style.border = "20px solid white";
                      }
        });

        $(document).ready(function(){

            $('input[type=radio]').click(function(){

                        if (document.getElementById("radio-def").checked  == true){
                         document.getElementById('risk-default').style.border = "20px solid #0062cc";
                         document.getElementById('risk-default').style.borderRadius = "15px";
                         document.getElementById('risk-alternative').style.border = "20px solid white";
                      }
                        if (document.getElementById("radio-alt").checked  == true){
                         document.getElementById('risk-alternative').style.border = "20px solid #0062cc";
                         document.getElementById('risk-alternative').style.borderRadius = "15px";
                         document.getElementById('risk-default').style.border = "20px solid white";
                      }
            });
        });


// dieser code ist dazu da, in die Daten ""o_click" reinzuschreiben, wenn nicht das Experience Sampling benutzt wurde
    document.querySelector('[name=exp_deck_seen_hidden]').value = 'no_click';


        let order = js_vars.order; // Wert is "R" oder "L" - steht für Seiten der Default-Risk_Information
        let trial = js_vars.trial;
        let table_order = js_vars.table_order;
        let exp_deck = js_vars.exp_deck;

        var exp_deck_seen;
        var outcome_to_show;
        var placeholder = document.getElementById("placeholder");
        var timeStart;
        var def_deck = 'X';
        var alt_deck = 'Y';
        let arr1 = document.getElementsByClassName("Default_Deck");
        let arr2 = document.getElementsByClassName("Alternative_Deck");


        console.log(trial)
        console.log(exp_deck)
// get_order() determines by iterating (popping) elements from the original python array 'order', on which side the
// risk-information divs ( left/right) and the radio-button divs (up/down) should be displayed.
// It also creates the variables def_deck and alt_deck that are used to display the corresponding letters on the html page
        window.onload = function get_order() { // window.onload means: sobald page geladen wird
            timeStart = new Date();

                 if (order == 'R') {
                      $('#risk-alternative').each(function() {$(this).insertBefore($(this).prev('#risk-default')); //packe risk-alternative vor risk-default
                      }); // code to change div position

                      $('#radio-btn-alt').each(function() {$(this).insertBefore($(this).prev('#radio-btn-def')); // packe radio-alt vor radio-btn-1
                      }); // code to change div position

                      def_deck = 'Y';
                      alt_deck = 'X';
                 }

            /// Reihenfolge von Probability und Points
                 if (table_order == 'prob_first') {
                         $('.prob').each(function() {
                         $(this).insertBefore($(this).prev('.points'));
                        }); // code to change div position, diesmal in jquery, weil bei classen das andere nicht geht
                 }
                 if (table_order == 'prob_first') {
                     $('.prob').each(function() {
                         $(this).insertBefore($(this).prev('.points'));
                        }); // code to change div position, diesmal in jquery, weil bei classen das andere nicht geht
                 }
                 /// Display the JS variables inside the different containers. As get.ElementbyClass returnes a nodelist,
                      /// it is necessary to make these loops. Otherwise only the first container will display the value.

                     for(let i=0; i<arr1.length; i++) {
                       arr1[i].innerText = def_deck;
                     }
                     for(let i=0; i<arr2.length; i++) {
                       arr2[i].innerText = alt_deck;
                     }
            document.querySelector('[name=default_side_hidden]').value = order;
            document.querySelector('[name=default_deck_letter_hidden]').value = def_deck;

            }

        // function for experience test game
        exp_deck_seen = []
        // Um auch eine 0 zu haben, wenn nicht geklickt wird, muss hier einmal die Length ausserhalb
        // des Loops und Button Clicks gesetzt werden
        document.querySelector('[name=length_exp_deck_seen_hidden]').value = exp_deck_seen.length;

        document.getElementById("expButton").onclick = function expGame() {
            if  (exp_deck_seen.length <449){
                $('#outcome_exp').empty(); // leere Div um deutlich zu machen, wenn neuer Wert gezogen wurde

                outcome_to_show = exp_deck.shift();
                exp_deck_seen.push(outcome_to_show);
                // Debug:
                console.log(outcome_to_show);
                console.log(exp_deck_seen);
                // Setze Timeout, damit nach dem Leeren des Divs, der leere Div kurz zu sehen ist, so dass gleiche Werte
                // als neues Ziehen erkannt werden
                setTimeout(() => {document.getElementById('outcome_exp').innerHTML = JSON.parse(outcome_to_show)}, 200);
                 // Schreibe die Liste in das hidden HTML Element
            } else {
                window.alert("You have reached the maximum amount of test draws."); //Alert Box PopUp,wenn array leer
                // Debug
                console.log("There is nothing left to sample!");
            }
            // Schreibe die Liste in das hidden HTML Element
            document.querySelector('[name=exp_deck_seen_hidden]').value = JSON.stringify(exp_deck_seen);
            document.querySelector('[name=length_exp_deck_seen_hidden]').value = exp_deck_seen.length;
            console.log(exp_deck_seen.length);
        }
// Blende: weisser Screen, der verdecken soll, wenn Divs Position aendern, weil Funktion zu langsam ist
setTimeout(() => {placeholder.remove()}, 150);

</script>

{% endblock %}