{% 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> <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 }}): SERVICE LEVEL </h5>
                 <br>
                 <h5> Make a service level for period {{ next_period }}. </h5>
                 <h6> Provide the probability (%) with which you want to be able to satisfy demand with your inventory
                 to minimize the mismatch cost.</h6>
                 <h6>
                     (This service level decision, together with the point and distribution forecasts your Demand Planner made,
                     will be automatically converted into an inventory order level. Your group's mismatch cost in this turn is based on
                     this inventory order level as well as the random demand realization this turn.)
                 </h6>

                 <br>

                     <table class='table table-sm text-center'>
        <colgroup>
            <col width="33%">
            <col width="33%">
            <col width="33%">
        </colgroup>
                   <tr>
                       <td>Point Forecast</td>
                       <td>Lower Bound Forecast</td>
                       <td>Upper Bound Forecast</td>
                   </tr>
    </table>
    <table table class='table table-sm text-center'>
        <colgroup>
            <col width="33%">
            <col width="33%">
            <col width="33%">
        </colgroup>
                    <tr>
                        <td>{{ point_forecast }}</td>
                        <td>{{ distribution_forecast }}</td>
                        <td>{{ upper_bound  }}</td>
                    </tr>
    </table>


                 <div align="center">
               <p>ENTER YOUR SERVICE LEVEL DECISION (%) : {% formfield group.service_level 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 %}