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



{% block styles %}


<style>
        .button_help{
  background-color: whitesmoke;
  border: none;
  color: blue;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    border-radius: 8px;
}

button:hover {background-color: lightblue}



</style>

{% endblock %}

{% block title %}
Belief MPL
{% endblock %}

{% block content %}


<table>
    {% for v, ide, idp, st, cr, idr in zip_table %}
    <tr  {{st}}  id={{idr}} class={{cr}}  >
        <td>
              <input type="checkbox" id={{ide}} name="skewed0" value={{v}} onclick="f2(this.value, this.id); toggleText(this.value, this.id); error()"  >
              <label for={{ide}}>get X if event Y </label><br>
         </td>
        <td>
            <input type="checkbox" id={{idp}} name="skewed1" value={{v}} onclick="f2(this.value, this.id); toggleText(this.value, this.id); error()">
              <label for={{idp}}>get X with {{v}}% </label><br>
        </td>

    </tr>

    {% endfor %}

</table>

<input type="hidden" id="belief" name="belief" />
     <a style='display: none' id="belief_a"> </a>

<input type="hidden" id="errori" name="errori" />
     <a style='display: none' id="errori_a"> </a>




<div id="display2" style='display: none'>
hello hello
</div>


<script>
    // var E1 = document.getElementById("E1").checked;
        function toggleText(value, id_field) {
        if (value == 0 || value == 10 || value == 20 || value == 30 || value == 40 || value == 50 || value == 60
            || value == 70 || value == 80 || value == 90 || value == 100 ){
            tt = "I" + value.toString()
            var all_classes = ["I0"];
            for (let i = 1; i < 10; i++){
                all_classes.push("I" + i.toString() + "0");
            }
            tttt = [];
            for (let i = 0; i < all_classes.length; i++) {
                tttt.push(all_classes[i])

                if (all_classes[i]===tt) {
                    ERS = document.getElementsByClassName(all_classes[i])
                    for (let j = 0; j < ERS.length; j++) {
                        if (ERS[j].style.display === "none") {
                            ERS[j].style.display = "table";
                        }
                        // else {
                        //     ERS[j].style.display = "none";
                        // }
                    }
                }
                if (all_classes[i]!==tt) {
                         ERS2 = document.getElementsByClassName(all_classes[i])

                    for (let k = 0; k < ERS2.length; k++) {
                            ERS2[k].style.display = "none";
                    }
                }


            }



        }
               // document.getElementById('display').innerHTML = tttt;

}



    function f2(value, id_field) {
        value = Number(value)
        if (id_field.substring(0, 1)=="P") {
            proba = value - 0.5
        } else {
            proba = value + 0.5
        }
        // the following 2 lines are to record the value of belief as variables
        document.getElementById("belief_a").innerHTML = proba;
        document.getElementById("belief").value = proba;
        if (id_field.substring(1, 2)=="D") {
            var PS = [];
            var ES = [];
            var values= [];
            for (let i = 0; i < 10; i++) {
                v = i*10
                PS.push("PD" + v.toString());
                ES.push("ED" + v.toString());
                values.push(v);
                for (let j = 0; j < 10; j++) {
                v = i*10 + j
                PS.push("PI" + v.toString());
                ES.push("EI" + v.toString());
                values.push(v);
                }
            }
            v=100
            PS.push("PD" + v.toString());
            ES.push("ED" + v.toString());
            values.push(v);

            s2 = [];
            for (let h = 0; h < values.length; h++) {
                i = values[h]
                 if (i < value) {
                    document.getElementById(PS[h]).checked = false
                    document.getElementById(ES[h]).checked = true
                }
                if (i == value) {
                    if (id_field.substring(0, 1)=="P") {
                        document.getElementById(PS[h]).checked = true
                        document.getElementById(ES[h]).checked = false
                    } else {
                        document.getElementById(PS[h]).checked = false
                        document.getElementById(ES[h]).checked = true
                    }
                }

                if ( value +9 < i){
                    document.getElementById(PS[h]).checked = true
                    document.getElementById(ES[h]).checked = false

                }
                if (i > value && i <= value + 9) {
                        document.getElementById(PS[h]).checked = false
                        document.getElementById(ES[h]).checked = false

                    }
            }
        } else {
            var PS = [];
            var ES = [];
            var values= [];
            for (let i = 0; i < 10; i++) {
                v = i*10
                PS.push("PD" + v.toString());
                ES.push("ED" + v.toString());
                values.push(v);
                for (let j = 0; j < 10; j++) {
                v = i*10 + j
                PS.push("PI" + v.toString());
                ES.push("EI" + v.toString());
                values.push(v);
                }
            }
            v=100
            PS.push("PD" + v.toString());
            ES.push("ED" + v.toString());
            values.push(v);
            for (let h = 0; h < PS.length; h++) {
                i = values[h]
                if (i < value) {
                    document.getElementById(PS[h]).checked = false
                    document.getElementById(ES[h]).checked = true
                }
                if (i == value) {
                    if (id_field.substring(0, 1)=="P") {
                        document.getElementById(PS[h]).checked = true
                        document.getElementById(ES[h]).checked = false
                    } else {
                        document.getElementById(PS[h]).checked = false
                        document.getElementById(ES[h]).checked = true
                    }
                }
                if (i > value) {
                    document.getElementById(PS[h]).checked = true
                    document.getElementById(ES[h]).checked = false
                }
            }

        }
       // document.getElementById('display').innerHTML = ES;
    }

    //
    // function f1() {
    //     var array = [document.getElementById("try11").value, document.getElementById("try22").value];
    //     array.push(document.getElementById("try33").value);
    //    document.getElementById('display').innerHTML = array;
    //
    // }

    function error() {
        var PS = [];
        var ES = [];
        var values= [];
        for (let i = 0; i < 10; i++) {
            v = i*10
            PS.push("PD" + v.toString());
            ES.push("ED" + v.toString());
            values.push(v);
            for (let j = 0; j < 10; j++) {
            v = i*10 + j
            PS.push("PI" + v.toString());
            ES.push("EI" + v.toString());
            values.push(v);
            }
        }
        v=100
        PS.push("PD" + v.toString());
        ES.push("ED" + v.toString());
        values.push(v);

        checks = [];
        for (let h = 0; h < PS.length; h++) {
            if (document.getElementById(PS[h]).checked === true) {
                ap = 1
            } else if (document.getElementById(PS[h]).checked === false) {
                ap = 0
            } else {
                ap = -99
            }

            if (document.getElementById(ES[h]).checked === true) {
                ae = 1
            } else if (document.getElementById(ES[h]).checked === false) {
                ae = 0
            } else {
                ae = -99
            }
            checks.push(ae + ap)
        }

       erroryes = 0
       for (let h = 0; h < checks.length; h++) {
           if (checks[h] !== 1){erroryes=1}
       }
       // if (erroryes==1){
       //     alert("Name must be filled out")
       // }
        document.getElementById("errori_a").innerHTML = erroryes;
        document.getElementById("errori").value = erroryes;
        // document.getElementById("belief_a").innerHTML = proba;
        // document.getElementById("belief").value = proba;
        document.getElementById('display').innerHTML = erroryes;


    }



    function myFunction() {
    var try11 =  document.getElementById("try11").checked;
    var skewed11 = document.getElementById("skewed1");
       document.getElementById('display').innerHTML = skewed11;
       // if (try11==true) {
       //     var checked2 = "checked"
       // } else{
       //     var checked2 = ""
       // }
       if (try11==true) {
           document.getElementById("try22").checked = true
           document.getElementById("try33").checked = true
       }
}

    function myFunction2() {
    var try22 =  document.getElementById("try22").checked;
       // if (try11==true) {
       //     var checked2 = "checked"
       // } else{
       //     var checked2 = ""
       // }
       if (try22==true) {
           document.getElementById("try11").checked = false
           document.getElementById("try33").checked = true
       } else {
           document.getElementById("try11").checked = false
       }
}

    function myFunction3() {
    var try33 =  document.getElementById("try33").checked;
       // if (try11==true) {
       //     var checked2 = "checked"
       // } else{
       //     var checked2 = ""
       // }
       if (try33==true) {
           document.getElementById("try11").checked = false
           document.getElementById("try22").checked = false
       }   else {
           document.getElementById("try11").checked = false
           document.getElementById("try22").checked = false
       }

}
    // console.log(try11)
</script>

    {{ next_button }}

{% endblock %}