{{ extends 'global/Page.html' }}
{{ block title }}   {{ endblock }}

{{ block content }}

<style>
    .page-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .subheader {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .content-container {
        display: flex;
        justify-content: center;
        align-items: right;
        gap: 40px;
    }

    .parameter-table {
        border-collapse: collapse;
        width: auto;
    }

    .parameter-table th, .parameter-table td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }

    .image-container h3 {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .extra-content {
        margin-top: 30px;
    }

    .metrics-table {
        width: 100%;
        border-collapse: collapse;
    }

    .metrics-table th, .metrics-table td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    .metrics-table th {
        font-weight: bold;
        background-color: #f2f2f2;
    }

    .metrics-table td:first-child {
        font-weight: bold;
        text-align: left;
    }
</style>

<div class="page-container">
    <h2>Decision Page – Game Round {{ game_round }} (Period {{ display_round }}/12)</h2>

    <div class="content-container">
        <table class="parameter-table">
            <tr><td>Sales Price</td><td>$15.00 / unit / round</td></tr>
            <tr><td>Purchase Cost</td><td>$6.00 / unit / round</td></tr>
            <tr><td>Holding Cost</td><td>$1.00 / unit / round</td></tr>
            <tr><td>Forecasted Demand Distribution</td><td>N~(500, {{ current_demand_std }})</td></tr>
        </table>

        <div class="image-container">
            <h3>Forecasted Demand Probability Distribution</h3>
            <img src="{% static demand_image_path %}" alt="Demand Distribution" style="width:400px; height:auto;">
        </div>
    </div>

    {% if game_history %}
    <h3>Summary of key metrics of prior periods</h3>
    <table class="metrics-table">
        <tr>
            <th>Metrics</th>
            {% for data in game_history %}
                <th>Period {{ data.period }}</th>
            {% endfor %}
        </tr>
        <tr>
            <td>Leftover Inventory</td>
            {% for data in game_history %}
                <td>{{ data.starting_inventory }}</td>
            {% endfor %}
        </tr>
        <tr>
            <td>Order Quantity</td>
            {% for data in game_history %}
                <td>{% if data.order_quantity != '' %}{{ data.order_quantity }}{% else %}&nbsp;{% endif %}</td>
            {% endfor %}
        </tr>
        <tr>
            <td>Actual Demand Quantity</td>
            {% for data in game_history %}
                <td>{% if data.demand_quantity != '' %}{{ data.demand_quantity }}{% else %}&nbsp;{% endif %}</td>
            {% endfor %}
        </tr>
        <tr>
            <td>Profit</td>
            {% for data in game_history %}
                <td>{% if data.profit != '' %}${{ data.profit }}{% else %}&nbsp;{% endif %}</td>
            {% endfor %}
        </tr>
    </table>
    {% endif %}

    <h3>You have {{ starting_inventory }} units leftover from the last period. How much would you like to order for this period?</h3>

    {{ formfields }}
    <p>If you'd like to review the instructions in text form, you can find them <a href="https://drive.google.com/file/d/1Oh7kOt7m6UgnVVpFxuiT9z_yy_LAT2-X/view?usp=drive_link" target="_blank">here</a>.</p>
<p>
    {{ next_button }}
</div>


{{ endblock }}