{% 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 }}): (1) POINT FORECAST </h5>
                 <br>
                 <h5> Make a point forecast for demand in period {{ next_period }}. </h5>
                 <p>
                     (This point forecast, together with the distribution forecast you will decide on next and
                     the service level your Operations Manager decides on, will be automatically converted into an
                     inventroy order level. Your group's mismatch cost is this turn is based on this inventory order level
                     as well as  the random demand realization this turn.)
                 </p>

                 <br>
                 <div align="center">
                 {% formfield group.point_forecast label = "ENTER YOUR POINT FORECAST"%}
                 </div>

                 <br>

                 <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 %}