{{ extends 'global/Page.html' }}
{{ block title }}
    Estimating the GDP per capita - Country {{ player.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}


{{ block content }}
<style>
    .float-container {
    border: 3px ;
    padding: 20px;
}

.float-child {
    background-color: white;
    float: left;
    padding: 20px;
    border: 2px ;
}
</style>


<div style="text-align: justify;" class="card bg-light mb-3  ">
    <div class="card-body">
        <br>
            <table class="table">
                <tr>
                    <td style="font-weight: bold; color: #185177">Result of the estimation</td>
                    <td> </td>
                </tr>
                <tr>
                    <td>The <b>algorithm's estimate</b>:</td>
                    <td style="text-align:center"> <b>{{ player.gdpcappredict}}</b> </td>
                </tr>
                <tr>
                    <td><b>Submitted estimate</b>:</td>
                    <td style="text-align:center"> <b>{{ player.finalguess }}</b> </td>
                </tr>
                 <tr>
                    <td><b>Actual GDP per capita</b>:</td>
                    <td style="text-align:center"> <b>{{ player.gdpcap }}</b> </td>
                </tr>
                <tr>
                    <td><b>Deviation</b> of the submitted estimate from the actual GDP per capita:</td>
                    <td style="text-align:center">  <b>{{ player.finalpredictionerror}}</b> </td>
                </tr>
                <tr>
                    <td><b>Profit</b> for this estimation:</td>
                    <td style="text-align:center">  <b>{{ player.reward}}</b> </td>
                </tr>
            </table>

            </div>
            </div>


<div style="text-align: justify;" class="card bg-light mb-3  ">
    <div class="card-body">

                <br>

            <p>In this diagram you find all estimates as well as your confidence in these estimates.</p>

            <div class="float-container">


              <div style="width: 70%; " class="float-child">
                <div class="green">
                    <canvas id="myChart1" style="width:100%; height:360px" ></canvas>

                </div>
              </div>

              <div style="width: 30%;" class="float-child">
                <div class="blue">
                   <div style=" margin-bottom: 190px">
                        <div style="margin-top: -10px;"><canvas id="myChart2" style="width:100%; height:90px"></canvas></div>
                        <canvas id="myChart3" style="width:100%; height:90px"></canvas>
                   </div>
                </div>
              </div>
            </div>


    </div>
</div>





 <script type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.1.0/dist/chartjs-plugin-datalabels.min.js"></script>


<script>

         //BAR CHART
            let var1 = js_vars.initialguess;
            let var2 = js_vars.finalguess;
            let var3 = js_vars.gdpcappredict;
            let var4 = js_vars.gdpcap;


            var xValues = ["Your initial estimate", "Submitted estimate", "The algorithm's estimate", "Actual GDP per capita"];
            var yValues = [var1, var2, var3, var4];
            var barColors = ["rgba(41,89,139,0.5)", "rgba(48,236,233,0.6)",
            "rgba(117,80,126,0.65)", "rgba(192,27,49,0.5)"];


            Chart.defaults.set('plugins.datalabels', {
        font: {
            weight: 'bold',
            size: 13
        }
    });

    const data = {
        labels: xValues,
        datasets: [{
            data: yValues,
            backgroundColor: barColors,
            borderColor: barColors,
            borderWidth: 1
        }]
    };

    const config = {
        type: 'bar',
        data,
        plugins: [ChartDataLabels],
        options: {
            plugins: {
                legend: {display: false},
                title: {
                    display: true,
                    text: 'Comparison of the estimates and the actual GDP per capita'
                }
            },
            indexAxis: 'y',
            scales: {
                y: {
                    beginAtZero: true
                },
                x: {
                    min: 0,
                    max: 100,
                    title: {
                        display: true,
                        text: 'GDP per capita'
                    }
                }
            }
        }
    };

    new Chart(
        document.getElementById('myChart1'),
        config
    );

         //PIE CHART 1
             let var5 = js_vars.confidence;

            //var xValuesPie = ["Confidence in your initial estimate", "",];
            var yValuesPie = [var5, 100-var5];
            var pieColors = [
              "rgb(169,200,236)",
              "white",
            ];


              const data2 = {
        datasets: [{
            backgroundColor: pieColors,
            borderColor: "rgb(169,200,236)",
            data: yValuesPie,
            datalabels: {
                display: function (context) {
                    var index = context.dataIndex;
                    var value = context.dataset.data[index];
                    return value === var5;
                }
            }
        }]
    };


    const config2 = {
        type: 'pie',
        plugins: [ChartDataLabels],
        data: data2,
        options: {
            responsive: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: "Confidence in your initial estimate"
                }
            }
        }
    };

    new Chart(
        document.getElementById('myChart2'),
        config2
    );

            //PIE CHART 2
            let var6 = js_vars.finalconfidence;

            //var xValuesPie = ["Confidence in the submitted estimate", "",];
            var yValuesPie2 = [var6, 100-var6];
            var pieColors2 = [
              "rgb(155,243,242)",
              "white",
            ];


             const data3 = {
        datasets: [{
            backgroundColor: pieColors2,
            borderColor: "rgb(155,243,242)",
            data: yValuesPie2,
            datalabels: {
                display: function (context) {
                    var index = context.dataIndex;
                    var value = context.dataset.data[index];
                    return value === var6;
                }
            }
        }]
    };


    const config3 = {
        type: 'pie',
        plugins: [ChartDataLabels],
        data: data3,
        options: {
            responsive: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: "Confidence in the submitted estimate"
                }
            }
        }
    };

 new Chart(
        document.getElementById('myChart3'),
        config3
    );

</script>


    <br>
    <!-- {{ next_button }}  -->
    <button class="otree-btn-next btn btn-primary button1" style="float: right;">Continue</button>

{{ endblock }}