{% extends "global/Base.html" %}
{% load staticfiles %}
{% load otree_tags %}
{% block styles %}
    <style type="text/css">

        hr {
          border: none;
          border-top: 2px dashed black;
          color: black;
          height: 30px;
          width: 100%;
        }
      table#longtable {
          margin-left:auto;
          margin-right:auto;
          left: 0px;
          width: 540px;
          border-collapse: collapse;
      }

        .bleft {
          border-left: 5px solid black;
        }

        button:disabled{
            background-color: #aaa;
        }

        .center {
            margin:auto;
        }
        .form-group{display:inline-block; margin-right:-5%;}
        #element2 {display:inline-block;}
        ul{  list-style-type: none;}
        .legend { list-style: vertical; }
        .legend li { float: top; margin-left: 10px; z-index:-1;}
        .value { list-style: none; }
        .value li {  display:inline;  padding: 25px; z-index:-1; top: -87px; left: 130px;position: relative;}
        .valueN { list-style: none; }
        .valueN li {  display:inline;  padding: 25px; z-index:-1; top: 5px; left: 88px;position: relative; }

		html, body {
			height: 100%;
		}
        table tr:not(:first-child) {
        border-top: 1px solid black;
    }
    table td{
        border-left: 2px solid black;
        height: 336px;
    }

    table tr:first-child th {
        border-top: 0;
    }

    table th {
        border: 2px solid black;
    }
    table tr:last-child td {
        border-bottom: 0;
    }
    table tr td:first-child,
    table tr th:first-child {
        border-left: 0;
    }
    table tr td:last-child,
    table tr th:last-child {
        border-right: 0;
    }

    </style>

{% endblock %}


{% block title %}{% endblock %}



{% block content %}

    <!-- The area with the chart and the button. -->
    <!-- BELOW DIV contains the wanted position for Simulation X - 100 -->
<div>
    <div id = "adjusted" style="position: relative; left:-150px; " >
         <ul class="legend" id='l' style="text-align:center; position: relative; z-index: -1;  top: 10px;display: none;">
            <!-- <font size="3" > Both Assets: Average return per year = 5% <br></font> -->
            <!--  <font size="3" > Asset 1: Low volatility (low risk) <br></font> -->
            <!-- <font size="3"> Asset 2: High volatility (high risk) </font> -->
         </ul>
        <div id='canvas' style='position:relative;width:1044px;height:300px; margin-left: auto; margin-right:auto; margin-top: 20px; display: block;'>
            <!-- The area for the chart-->
            <ul class="value" id='v' style="position: relative; z-index: -1; left: 223px; top: 100px; visibility: hidden;">
                <font size="6"><li id="re1">  </li></font>
                <font size="6"><li id="re2">  </li></font>
            </ul>
            <div 	id='contr2'
                    style='	width: 416px; height: 320px; left: -50px;
                            position: relative;z-index: -2; margin-left: auto; margin-right:auto;
                        '
            >
    {#            <img id="des" height="330px" width="600px" src="{% static image_path %}"/>#}
            </div>

        </div>
    </div>

    <div>
<!-- Selected portfolio return-->
    <div id="portrendite" class = "bleft" style="display: none; position: relative; left: 553px; top: -340px;">
        <ul class="legend" id='l1' style=" position: relative; z-index: -1; left: 15px; top: -20px; text-align:center; width: 344px">
            <font size="3" > Portfolio return based on <br></font>
	            <font size="3" > your current investment decision</font>
         </ul>
        <div id='canvas1' style='position:relative;width:1044px;height:336px; margin-left: auto; margin-right:auto; margin-top: 20px; left: -30px; top: -25px;'>
            <!-- The area for the chart-->
            <ul class="value" id='v' style="position: relative; z-index: -1; left: 20px; top: 100px; ">
                <font size="6"><li id="re">  </li></font>
            </ul>
            <div 	id='contr3' style='	width: 316px; height: 320px; left: -310px; position: relative;z-index: -2; margin-left: auto; margin-right:auto;' >
            </div>
        </div>
    </div>
    </div>

    <div id = "at50" style=' display: none; top: 80px; position: relative; left: 141px; width: 800px'>
    You have now seen 50 out of 100 return simulations. Please make your final investment decision.
    </div>

    <div id = "bb1" style='position: relative; top: -300px; left: 50px; text-align: center; background-color: transparent;'>
    <button id="b1" style="display: none; margin: 0 auto;" class="otree-btn-next btn btn-primary">Next</button>
    <div id="b" style='display: none; margin: auto; width: 50px;' class="otree-btn-next btn btn-primary">Next</div>
    </div>
    <br>
    <div id = "after50" style=' display: none;top: 130px; position: relative; left: 141px'>
    </div>

    <div id="preQue" style='position: relative;top: -270px;  left: 141px'>
        How much of the £10 000 do you invest into Asset 2? The remainder of the £10 000 will be invested into Asset 1.
    </div>
    <br>
    <div id = "InvestmentAsset1" style=' top: -270px; position: relative; left: 141px'>
    Investment into Asset 1:
    </div>
    <div style=' top: 20px; position: relative; left: 0px'>

    <p>
    {% for field in form %}
    {% formfield field %}
    {% endfor %}
    </p>
    </div>

       <div style=' height: 10px; width: 800px'>
   </div>
    <br>

    <div id="preQue1" style='top: -300px; position: relative; left: 141px'>
      As a reminder: Please select a portfolio that
      {% if investment_goal == 1 %} has the highest possible expected return (i.e., median return).
      {% elif investment_goal == 2 %} has the lowest-possible risk (i.e., probability of loss).
      {% elif investment_goal == 4 %} best suits your personal preferences.
      {% endif %}
      Simulations 1 to 50 inform you about the return distributions, so that you can make an optimal decision for your portfolio.
      You are making your final investment decision after viewing return simulation 50. If this round is drawn as the round for your payment, the payment
      will be based on your final investment decision and another return simulation for the two assets. You can adjust your investment decision up to return
      simulation 50.
    </div>

</div>
{#        </div>#}



<div style = "height: 150px;">
<p><br>
<br>
</p>
</div>
{% endblock %}

{% block scripts %}

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <!-- for the draggable of the scrollbar -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="//code.highcharts.com/highcharts-3d.js"></script>
    <script src="//code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>

    <script>
        {% include "PRE2/Treatment_Graph.js.html" %}
    </script>
    <script>

            (function ($) {
                var i;
                // NB: class "form-group required" refers to otree forms
                for (i = 0; i < document.getElementsByClassName("form-group required").length; i++) {
                    document.getElementsByClassName('form-group required')[i].style.display = "none";
                    document.getElementsByClassName('form-group required')[i].style.top = "-300px";
                    document.getElementsByClassName('form-group required')[i].style.position = "relative";
		            document.getElementsByClassName('form-group required')[i].style.left = "140px";
                    //var lab = document.createElement("LABEL");
                    //lab.innerHTML  = "Investment into Asset 2: "
                    //lab.setAttribute("for", 'id_InvestmentAsset2'.concat((i + 1).toString(10)));
                    //lab.setAttribute("id", "horiz");
//document.getElementsByClassName('input-group input-group-narrow')[i].insertBefore(lab, document.getElementsByClassName('form-control')[i]);
                    //document.getElementsByClassName('controls  field-InvestmentAsset2'.concat((i + 1).toString(10)))[0].insertBefore(lab, document.getElementsByClassName('input-group input-group-narrow')[i]);

                }
                console.log("aaaaaaa")
                // This defines the header 'h2' formatting (i.e. the formatting of simulation of X of 100)
                document.getElementsByTagName('h2')[0].style.fontSize = "20px";
                document.getElementsByTagName('h2')[0].style.textAlign = "center";
                document.getElementById('b').style.display = 'inline';
                document.getElementById('l').style.display = 'block';


                    // split the screen into asset_1, asset2 | portfolio
                    document.getElementsByTagName('h2')[0].innerHTML = 'Simulation of Returns: 1 of 100';
                    document.title = 'Simulation of Returns: 1 of 100';
                    if ({{ format }} == 1){
                        // change the location of the "simulation of returns header to left from center by below margin", when format = 1
                        document.getElementsByTagName('h2')[0].style.marginLeft = '-250px';
                        document.getElementsByTagName('h2')[0].style.fontSize = '17px';
                        document.getElementById('preQue').style.width = '800px';
                        document.getElementById('portrendite').style.display = 'block';
                        document.getElementById('bb1').style.top = "-280px";
                        document.getElementById('at50').style.top = '-315px';

                        document.getElementById('after50').style.top='-270px';


                    }else{
                        document.getElementById('preQue').style.width = '800px';
                        document.getElementById('preQue').style.top = '105px';
                        document.getElementById('InvestmentAsset1').style.top = '105px';

                        for (i = 0; i < document.getElementsByClassName("form-group required").length; i++) {
                            document.getElementsByClassName('form-group required')[i].style.top = "105px";
                            document.getElementsByClassName('form-group required')[i].style.left = "140px";
                        }
                        document.getElementById('bb1').style.left = "35px";

                        document.getElementById('bb1').style.top = "100px";
                        document.getElementById('adjusted').style.left = '0px';
                        {#document.getElementById('after50').style.top =  "80px";#}
                        {#document.getElementById('after50').style.left =  "290px";#}
                        {#document.getElementById('at50').style.top =  "80px";#}
                        {#document.getElementById('at50').style.left =  "290px";#}

                    }
                    funcPortfoliorendite();





                if(window.screen.width < 500){
                    document.getElementsByTagName('h2')[0].style.textAlign = "left";
                    document.getElementById('l').style.textAlign = "left";
                    document.getElementById('l').style.left = "-40px";

                    document.getElementById('longtable').style.marginLeft = "0";
                    document.getElementById('bb1').style.textAlign = "left";
                    document.getElementById('b1').style.margin = "0";
                    document.getElementById('contr2').style.margin = "0";
                    document.getElementById('contr2').style.left = "10px";
                    document.getElementById('v').style.left = "-26px";
                }





        }(jQuery));
        $( document ).ready(function() {

        });
    </script>
{% endblock %}