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

{{ block content }}

{{ if participant.positive == 1 }}
<h3>
  Rezultati i mëparshëm (20. nga 20 runde)
</h3>
<p>
    Keni porositur {{ participant.final_order }} njesi me kosto {{ final_cost }}.
</p>
<p>
    Kerkesa ishte {{ C.FINAL_DEMAND }} njesi.
</p>
<p>
    Ju fituat <span name="pos">{{ final_earn }}</span>.
</p>
{{ next_button }}
{{ endif }}

{{ if participant.positive == 0 }}
<h3>
  Rezultati i mëparshëm (20. nga 20 runde)
</h3>
<p>
    Ju porositet {{ participant.final_order }} njesi.
</p>
<p>
    Kerkesa ishte {{ C.FINAL_DEMAND }} njesi.
</p>
<p>
    Kompania humbi <span name="neg">{{ final_loss }}</span>.
</p>
{{ next_button }}
{{ endif }}

{{ if participant.positive == 2 }}
<h3>
   Rezultati i mëparshëm (20. nga 20 runde)
</h3>
<p>
    Ju porositet {{ participant.final_order }} njesi me kosto {{ final_cost }}.
</p>
<p>
    Kerkesa ishte {{ C.FINAL_DEMAND }} njesi.
</p>
{{ if C.FINAL_DEMAND >= participant.final_order }}
<p>
   Gjithçka që keni porositur është shitur dhe ka gjeneruar të hyra prej {{ final_revenue }}.
</p>
{{ endif }}
{{ if C.FINAL_DEMAND > participant.final_order }}
<p>
    Për shkak të mos perputhjes se kërkesës, kompania juaj duhej të bënte një porosi të nxituar me një kosto prej {{ final_loss }}.
</p>
{{ endif }}
{{ if C.FINAL_DEMAND < participant.final_order }}
<p>
    Ju gjeneruat te hyra prej {{ final_revenue }}.
</p>
{{ endif }}
<p>
    Kompania juaj fitoj {{ final_earn2 }}.
</p>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<figure class="highcharts-figure">
  <div id="outcome"></div>
</figure>
{{ next_button }}
{{ endif }}

{{ endblock }}

{{ block scripts }}
<script>
var posElements = document.getElementsByName("pos");
for (var i = 0; i < posElements.length; i++) {
    posElements[i].style.color = "limegreen";
  	posElements[i].style.fontWeight = "bold";
}

var negElements = document.getElementsByName("neg");
for (var i = 0; i < negElements.length; i++) {
    negElements[i].style.color = "red";
  	negElements[i].style.fontWeight = "bold";
}

if (js_vars.positive == 2) {
  if (js_vars.final_earn2 >= 0) {
    Highcharts.chart('outcome', {
      chart: {
        type: 'waterfall'
      },
      title: {
        text: 'Outcome'
      },
      credits: {
        enabled: false
      },
      xAxis: {
        type: 'category'
      },
      yAxis: {
        min: -700,
        max: 1500,
        title: {
          text: 'EUR'
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: '<b>{point.y}</b>'
      },
      series: [{
        upColor: '#bcbcbc',
        color: '#bcbcbc',
        data: [{
          name: 'Blerjet',
          y: -js_vars.final_cost,
          color: '#de2d26'
        }, {
          name: 'Te hyrat',
          y: js_vars.final_revenue,
          color: '#31a354'
        }, {
          name: 'Porosi te nxituara',
          y: -js_vars.final_rush,
          color: '#de2d26'
        }, {
          name: 'Profiti',
          isSum: true,
          color: '#31a354'
        }],
        dataLabels: {
          enabled: true
        }
      }]
    });
  } else {
    Highcharts.chart('outcome', {
      chart: {
        type: 'waterfall'
      },
      title: {
        text: 'Outcome'
      },
      credits: {
        enabled: false
      },
      xAxis: {
        type: 'category'
      },
      yAxis: {
        min: -700,
        max: 1500,
        title: {
          text: 'EUR'
        }
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: '<b>{point.y}</b>'
      },
      series: [{
        upColor: '#bcbcbc',
        color: '#bcbcbc',
        data: [{
          name: 'Blerjet',
          y: -js_vars.final_cost,
          color: '#de2d26'
        }, {
          name: 'Te hyrat',
          y: js_vars.final_revenue,
          color: '#31a354'
        }, {
          name: 'Porosi te nxituara',
          y: -js_vars.final_rush,
          color: '#de2d26'
        }, {
          name: 'Profiti',
          isSum: true,
          color: '#de2d26'
        }],
        dataLabels: {
          enabled: true
        }
      }]
    });
  }
}
</script>
{{ endblock }}