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

{% block title %}

{% endblock %}


{% block content %}
<style>
.otree-body{
padding-right: 10px;
padding-left: 10px;
max-width: 1400px;}
</style>

<div style ="float: left; width: 57%">
     <div class = "card bg-light instructions">
         <div class="card-body">
             <h5 align="center">
                 COST INFORMATION
             </h5>
             <h6 align="center">
                 If you order too much, the cost per unit of positive inventory remaining is <font color="blue"><strong> {{ Constants.overage_cost }} tokens. </strong></font>
                 <br>
                 If you order too little, the cost per unit of unsatisfied demand is <font color="blue"><strong>{{ Constants.underage_cost }} tokens. </strong> </font><br>
             </h6>
         </div>
     </div>

     <div> <br> </div>

     <div style="margin:0 auto;">
         <script src="https://code.highcharts.com/highcharts.js"></script>
         <div id="container" style="margin:auto; width: 100%">
             <script>
                 var data1 = {{ highchart_series1|json }};
                 $(function () {
                     Highcharts.setOptions({
                         lang: {
                             thousandsSep: ''
                         }
                     });
                     $('#container').highcharts({
                         title: {
                             text: 'Demand Information'
                         },
                         chart: {
                             height: 350,
                         },
                         xAxis: {
                             title: {
                                 text: 'Period'
                             },
                             categories: ['1','2','3','4','5','6','7',
                                '8','9','10','11','12','13','14','15','16',
                                '17','18','19','20','21','22','23','24','25',
                                '26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42',
                                '43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58',
                                '59','60','61','62','63','64','65'],
                             linWidth: 1,
                         },
                         yAxis: {
                             title: {
                                 text: ''
                             },
                             labels: {
                                 format: '{value}'
                             },
                             tickInterval: 200,
                             min: 4000,
                             max: 6200,
                         },
                         legend: {
                             enabled: false
                         },
                         plotOptions: {
                             series: {
                                 animation: false,
                                 pointStart: 0,
                             }
                             },
                         series:[{ name: 'demand', data: data1 }],
                         credits: {
                             enabled: false
                         }
                     });
                 });
             </script>
         </div>
     </div>
 </div>

<div style ="float: right; width: 42%">
         <div class = "card bg-light instructions">
             <div class="card-body">
                 <h5 align="center"> TASK DESCRIPTION (PERIOD {{ period }}): <br> (2) DISTRIBUTION FORECAST </h5>
                 <br>
                 <h5> Make a distribution forecast for demand in period {{ next_period }}. </h5>
                 <p>
                     Estimate the 90% confidence interval so that you expect 90% of all future demands to lie somewhere within this interval.
                     The midpoint of the interval is the point forecast you just entered.
                 </p>
                 <p>
                     <strong>Please enter the lower bound of this interval</strong>(the higher bound will be automatically calculated so that
                     the interval is symmetric about your point forecast).
                 </p>

                 <br>

                 <p align="right">
                     Your Point forecast was {{ point_forecast }}
                 </p>
                 <div align="center">
                     <p> ENTER YOUR LOWER BOUND FORECAST for 90% CONFIDENCE LEVEL : {% formfield group.distribution_forecast label = ""%} </p>
                 </div>


                 <div style="float: right">
                     <button class="otree-btn-next btn btn-primary next-button otree-next-button">Submit</button>             </div>
                 </div>
         </div>
</div>

<div style = "clear: both"></div>
<br>
<h5 align="center">HISTORY (if necessary use the scroll bar to view the entire history) </h5>
    <table class='table table-sm text-center'>
        <colgroup>
            <col width="7%">
            <col width="11%">
            <col width="11%">
            <col width="13%">
            <col width="13%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">

        </colgroup>
                   <tr>
                       <td>Period</td>
                       <td>Demand</td>
                       <td>Point Forecast</td>
                       <td>Lower Bound Forecast</td>
                       <td>Upper Bound Forecast</td>
                       <td>Service Level</td>
                       <td>Order Quantity</td>
                       <td>Mismatch Cost</td>
                       <td>Profit</td>
                   </tr>
    </table>

<div style=" height: 200px; left:3%; right:3%; overflow:auto">
    <table table class='table table-sm text-center' style="font-size: 15px">
        <colgroup>
            <col width="7%">
            <col width="11%">
            <col width="11%">
            <col width="13%">
            <col width="13%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
        </colgroup>
                     {% for p in groups_in_previous_rounds %}
                    <tr>
                        <td>{{ p.new_round_number }}</td>
                        <td>{{ p.demand }}</td>
                        <td>{{ p.point_forecast }}</td>
                        <td>{{ p.distribution_forecast }}</td>
                        <td>{{ p.upper_bound }}</td>
                        <td>{{ p.service_level }}</td>
                        <td>{{ p.order_quantity }}</td>
                        <td>{{ p.mismatch_cost }}</td>
                        <td>{{ p.profit }}</td>
                    </tr>
                    {% endfor %}

                    {% for k in demand_series %}
                        {%if forloop.revcounter <= 50 %}
                            <tr>
                                <td> {{ forloop.revcounter }} </td>
                                <td> {{ k }}</td>
                                <td> - </td>
                                <td> - </td>
                                <td> - </td>
                                <td> - </td>
                                <td> - </td>
                                <td> - </td>
                                <td> - </td>
                            </tr>
                        {% endif %}
                    {% endfor %}

    </table>
    </div>

{% endblock %}