{% 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 class="card bg-light">
        <div class="card-body">
         <h5 align="center"> SUMMARY OF YOUR GROUP's PERFORMANCE IN {{ next_period }} </h5>
    <table class='table table-sm text-center'>
        <colgroup>
            <col width="12%">
            <col width="12%">
            <col width="12%">
            <col width="12%">
            <col width="12%">
            <col width="12%">
            <col width="12%">
            <col width="12%">
            <col width="12%">
        </colgroup>
        <tr>
            <td> Point Forecast </td>
            <td> Lower Bound Forecast </td>
            <td> Upper Bound Forecast </td>
            <td> Service Level Decision (%)</td>
            <td> Automated Inventory Order level </td>
            <td> &nbsp; </td>
            <td> Realized Demand </td>
            <td> Mismatch Cost </td>
           </tr>
        <tr>
            <td><font color="blue">{{ point_forecast }}</font></td>
            <td><font color="blue">{{ distribution_forecast }}</font></td>
            <td><font color="blue">{{ upper_bound }}</font></td>
            <td><font color="blue">{{ service_level}}</font></td>
            <td><font color="blue">{{ order_quantity}}</font></td>
            <td> &nbsp; </td>
            <td><font color="red">{{ demand }}</font></td>
            <td><font color="red">{{ mismatch_cost }}</font></td>
        </tr>
    </table>
            <br>
            <h6 align="center">Your Group's MISMATCH COST in period {{ next_period }} is {{ mismatch_cost }}</h6>
            <br>
            <div align="center">
                <button class="otree-btn-next btn btn-primary next-button otree-next-button">Continue</button>
            </div>
            <br>
            <h6 align="center"> Real Cash Earnings: You have earned {{ profit }} cents in this period. </h6>
            <h6 align="center"> Your PROFIT TO DATE inclusive of the start-up fee (5 dollars) is {{ bonus }} dollars. </h6>
            <h6 align="center"> Note that your matched with the same demand planner throughout. </h6>
        </div>
     </div>
    <br>
</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 %}