{% extends "layout.html" %}

{% block content %}
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <meta charset="UTF-8">


<style type="text/css">
    #lstBox1, #output_option, #calcolo{
  height:350px;
  width:400px;

}
    #lstBox2, #output_option, #calcolo{
  height:350px;
  width:400px;

}


.box{
    margin-right: 30px;
  margin-left: 30px;
}

.set_input{
    display:flex;
    justify-content:center;
    border-style: solid;
}

.transferBtns {
  margin-right: 30px;
  margin-left: 30px;
}

.transferBtns{
  float:left;
  align-self:center;
}

.set_output{
  justify-content:center;
    border-style: solid;
    width: auto;
    height: auto;}

.textarea{
    width: 300px;
  height: 150px;
    margin-right: 10px;
  margin-left: 10px;
}


input {float:left;}

#nome_completo_variabile {
    clear: both;
}






</style>


<script>
function showcontent(elem) {
        //var popup = document.getElementById("myPopup");
        //popup.classList.toggle("show")
        console.log(elem.value);
        $("#nome_completo_variabile").text(elem.value);
    }
</script>



<h1> n crosstab selection </h1>
<div class="set_input">


    <div class="box">
    <b>variabili disponibili X e Y</b><br/>

               <select multiple="multiple" id='lstBox1', name="bivariate_x">
               {% for variable in variable_name_type %}
                    <option onclick="save_on_x(this)" onmouseover="showcontent(this)" value= "{{variable}}">{{ variable }} :  {{variable_name_type[ variable ]}} </option>
               {% endfor %}

            </select>


        <select multiple="multiple" id='lstBox2', name="bivariate_y">
               {% for variable in variable_name_type %}
                    <option onclick="save_on_y(this)" onmouseover="showcontent(this)" value= "{{variable}}">{{ variable }} :  {{variable_name_type[ variable ]}} </option>
               {% endfor %}

            </select>

    <!--
        <h2> variabile type </h2>
        <input type="radio" name="var_type" value="categoriale" checked> categorical <br>
        <input type="radio" name="var_type" value="cardinale"> cardinal <br>
    <input type="radio" name="var_type" value="ordinale"> ordinal <br>

    <h2> for ordinal variable set order</h2>
    <p> list example: "one","two","three </p>
    <input type="text" name="ordinal_list" size="200">
    -->
    </div>




</div>
<div class="set_output">
<p> nome variabile completo (allo scorrimento del mouse) </p>
        <p id="nome_completo_variabile"> </p>
</div>
    <br/>


    <div >
    <p> index on variable:</p>
    <ul id="select_index">

    </ul>
    </div>
    <div >
    <p> columns on variable </p>
    <ul id="select_columns">

    </ul>
    </div>

    <div>
    <button onclick="create_script()"> generate python script for crosstab</button>

    </div>



    <div>
    <div class="row">

            <div class="col-sm-6">
            <p> crosstab without margin </p>
            <form action = "{{ url_for('ncrosstab_output')}}" method = "POST", enctype="multipart/form-data" accept-charset="UTF-8">
            <textarea rows="4" columns = "200" class = "textarea" name="textarea_script" id="textarea_script"></textarea>
            </div>
            <div class="col-sm-6">
            <p> crosstab with margin </p>
            <textarea rows="4" columns = "200" class = "textarea" name="textarea_script_margin" id="textarea_script_margin"></textarea>
            </div>
    </div>
    <div class="row">
            <div class="col-sm-6">
            <p> crosstab index </p>
            <textarea rows="4" columns = "200" class = "textarea" name="textarea_script_index" id="textarea_script_index"></textarea>
            </div>
            <div class="col-sm-6">
            <p> crosstab columns </p>
            <textarea rows="4" columns = "200" class = "textarea" name="textarea_script_columns" id="textarea_script_columns"></textarea>
            </div>
    </div>
    <div class="row">
    <div class="col-sm-6">
    <input type="submit">
    </div>
    </form>

    </div>
    </div>





<script>
function save_on_x(elem) {
    var node = document.createElement("LI");
    node.setAttribute("onclick", "autoremove(this)");
    node.setAttribute("id", "elem.value");
    var textnode = document.createTextNode("data['" +  elem.value + "']");
    node.appendChild(textnode);
    document.getElementById("select_index").appendChild(node);

}

function save_on_y(elem) {
    var node = document.createElement("LI");
    node.setAttribute("onclick", "autoremove(this)");
    node.setAttribute("id", "elem.value");
    var textnode = document.createTextNode("data['" +  elem.value + "']");
    node.appendChild(textnode);
    document.getElementById("select_columns").appendChild(node);
}

function autoremove(elem) {
    elem.parentNode.removeChild(elem);

}

function create_script(){

    var index = document.getElementById("select_index").getElementsByTagName("li");
    var columns = document.getElementById("select_columns").getElementsByTagName("li");
    var str = ","
    var str_index = []
    for (i = 0; i < index.length; ++i) {
        str_index.push(index[i].textContent);

    }
    var str_columns = []
    for (i = 0; i < columns.length; ++i) {
        str_columns.push(columns[i].textContent);

    }
    var index_concat = str.concat(str_index).substr(1);
    var columns_concat  = str.concat(str_columns).substr(1);


    var result = `pd.crosstab(index=[${index_concat}],columns=[${columns_concat}])` ;
    document.getElementById("textarea_script").value = result;

    var result_margin = `pd.crosstab(index=[${index_concat}],columns=[${columns_concat}], margins = True)` ;
    document.getElementById("textarea_script_margin").value = result_margin;


    var result_index = `${index_concat}` ;
    document.getElementById("textarea_script_index").value = result_index;


    var result_columns = `${columns_concat}` ;
    document.getElementById("textarea_script_columns").value = result_columns;



}

</script>


</body>
{% endblock %}



