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

{% block title %}
Resultados del juego.
{% endblock %}

{% block content %}

    <style type="text/css">
        .tg  {border-collapse:collapse;border-spacing:0;align: right;}
        .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
        .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
        .tg .tg-y5zp{background-color:#ffffff;border-color:#3166ff;text-align:left;vertical-align:top}
        .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
        .tg .tg-0lax{text-align:left;vertical-align:top}
        .tg .tg-7btt{font-weight:bold;border-color:inherit;text-align:center;vertical-align:middle}
    </style>
<h5> Eres el participante {{player.id_in_group}} y estos son tus resultados para el año {{ player.round_number }}: </h5>
<br>
<hr>
<h3 align="center"> Estado de su capacidad al final del año {{ player.round_number }} </h3>
<br></br>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
            <tr>
                <td style="width: 50%; vertical-align: top;  align: right;">
                    <table class="tg">
                        <tbody>
                          <tr>
                              <br> </br>
                              <br> </br>
                              <br> </br>
                              <br> </br>
                              <br> </br>
                          </tr>
                          <tr>
                            <th class="tg-0pky" colspan="2"><span style="font-weight:bold">Capacidad en Construcción [unidades]</span></th>
                          </tr>
                          <tr>
                            <td class="tg-0pky">Capacidad en construcción <span style="font-weight:bold">año 1</span></td>
                            <td class="tg-0pky">{{player.capacidadConstruida1|floatformat:4}}</td>
                          </tr>
                          <tr>
                            <td class="tg-0pky">Capacidad en construcción <span style="font-weight:bold">año 2</span></td>
                            <td class="tg-0pky">{{player.capacidadConstruida2|floatformat:4}}</td>
                          </tr>
                          <tr>
                            <td class="tg-0pky">Capacidad en construcción <span style="font-weight:bold">año 3</span></td>
                            <td class="tg-0pky">{{player.capacidadConstruida3|floatformat:4}}</td>
                          </tr>
                          <tr>
                            <td class="tg-0pky">Capacidad en construcción <span style="font-weight:bold">año 4</span></td>
                            <td class="tg-0pky">{{player.capacidadConstruida4|floatformat:4}}</td>
                          </tr>
                          <tr>
                            <td class="tg-0pky"><span style="font-weight:bold">Capacidad en Construcción Total</span> </td>
                            <td class="tg-0pky">{{player.CapacidadConstruccionActual|floatformat:4}}</td>
                          </tr>
                        </tbody>
                    </table>
                </td>
                <td style="width: 50%; vertical-align: top; align: center;">
                    <table class="tg">
                        <tbody>
                              <tr>
                                <th class="tg-0pky" colspan="2"><span style="font-weight:bold">Capacidad Instalada [unidades]</span></th>
                              </tr>
                              <tr>
                                <td class="tg-0pky">Capacidad instalada <span style="font-weight:bold">año 1</span></td>
                                <td class="tg-0pky">{{player.capacidadInstalada1|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0pky">Capacidad instalada <span style="font-weight:bold">año 2</span></td>
                                <td class="tg-0pky">{{player.capacidadInstalada2|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0pky">Capacidad instalada <span style="font-weight:bold">año 3</span></td>
                                <td class="tg-0pky">{{player.capacidadInstalada3|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0pky">Capacidad instalada <span style="font-weight:bold">año 4</span></td>
                                <td class="tg-0pky">{{player.capacidadInstalada4|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0pky">Capacidad instalada<span style="font-weight:bold"> año 5</span></td>
                                <td class="tg-0pky">{{player.capacidadInstalada5|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0pky">Capacidad instalada <span style="font-weight:bold">año 6</span></td>
                                <td class="tg-0pky">{{player.capacidadInstalada6|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 7</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada7|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 8</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada8|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 9</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada9|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 10</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada10|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 11</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada11|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 12</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada12|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 13</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada13|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 14</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada14|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 15</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada15|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax">Capacidad instalada <span style="font-weight:bold">año 16</span></td>
                                <td class="tg-0lax">{{player.capacidadInstalada16|floatformat:4}}</td>
                              </tr>
                              <tr>
                                <td class="tg-0lax"><span style="font-weight:700">Capacidad Instalada Total</span></td>
                                <td class="tg-0lax">{{player.CapacidadInstaladaActual|floatformat:4}}</td>
                              </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>


    <br> </br>

    <hr>

    <h3 align="center"> Información general historica del participante {{player.id_in_group}} </h3>
    <br> </br>
     <table class="tg">
        <tr>
            <th class="tg-7btt">Año</th>
            <th class="tg-7btt">Capacidad Instalada Total</th>
            <th class="tg-7btt">Capacidad Instalada Total de los otros Jugadores</th>
            <th class="tg-7btt">Capacidad Instalada del Mercado</th>
            <th class="tg-7btt">Precio</th>
            <th class="tg-7btt">Costo</th>
            <th class="tg-7btt">Margen de utilidad</th>
            <th class="tg-7btt">Utilidad anual</th>
            <th class="tg-7btt">Utilidad Acumulada</th>
        </tr>
        {% for p in player.in_all_rounds %}
            <tr>
                <td class="tg-0pky">{{ p.round_number }}</td>
                <td class="tg-0pky">{{ p.CapacidadInstaladaActual|floatformat:4 }}</td>
                <td class="tg-0pky">{{ p.capacidadInstaladaOtrosJugadores|floatformat:4 }}</td>
                <td class="tg-0pky">{{ p.group.capacidadInstaladaTotal|floatformat:4 }}</td>
                <td class="tg-0pky">{{ p.group.precio|floatformat:4 }}</td>
                <td class="tg-0pky">{{ p.group.costo|floatformat:4 }}</td>
                <td class="tg-0pky">{{ p.margenUtilidad|floatformat:4 }}</td>
                <td class="tg-0pky">{{ p.utilidad|floatformat:4 }}</td>
                <td class="tg-0pky">{{ p.utilidadAcumulada|floatformat:4 }}</td>
            </tr>
        {% endfor %}
    </table>
    <br> </br>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

{%block script%}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script>

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Comportamiento del precio de la energía'
    },
    xAxis: {

        categories: {{años}}
    },
    yAxis: {
        title: {
            text: 'Precio [$/unidad]'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: 'Precio',
        data: {{precio}}
    }]
});
</script>

{% endblock%}




{% formfields %}

{% next_button %}


{% endblock %}