{% extends "global/Page.html" %}
{{ block title }}Final Experiment Summary{{ endblock }}

{{ block content }}
<div class="container mt-4">
    <div class="card shadow-sm border-0 mb-5" style="border-radius: 15px;">
        <div class="card-header bg-primary text-white p-3 text-center" style="border-radius: 15px 15px 0 0;">
            <h3 class="mb-0">Final Performance Ranking</h3>
        </div>
        <div class="card-body p-0">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4">Rank</th>
                        <th>Player</th>
                        <th class="text-end pe-4">Total Profit</th>
                    </tr>
                </thead>
                <tbody>
                    {{ for entry in leaderboard }}
                    <tr {{ if entry.is_me }}class="table-primary fw-bold"{{ endif }}>
                        <td class="ps-4">{{ forloop.counter }}</td>
                        <td>
                            {{ entry.name }}
                            {{ if entry.is_me }}
                                <span class="badge rounded-pill bg-dark ms-2">YOU</span>
                            {{ endif }}
                        </td>
                        <td class="text-end pe-4">
                            {{ entry.total_profit }}
                        </td>
                    </tr>
                    {{ endfor }}
                </tbody>
            </table>
        </div>
    </div>


    <div class="card shadow-sm border-0 mb-5" style="border-radius: 15px;">
        <div class="card-body p-4">
            <h5 class="fw-bold mb-4" style="color: navy"><i class="bi bi-graph-up"></i> Evolution of Average Contribution</h5>
            <div id="evolution-chart" style="height: 400px; width: 100%;"></div>
        </div>
    </div>



    <div class="text-center p-4">
        <p class="text-muted">The experiment is now complete. Thank you for participating!</p>
    </div>
</div>

<style>
    body { background-color: #f8f9fa; }
    .table-primary { background-color: #cfe2ff !important; }
</style>
{{ endblock }}

{{ block scripts }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.4.1/highcharts.js"></script>

<script>
    window.addEventListener('load', function() {
        if (typeof Highcharts === 'undefined') {
            console.error("Highcharts failed to load. Please check your connection.");
            return;
        }

        Highcharts.chart('evolution-chart', {
            chart: {
                type: 'line',
                backgroundColor: '#ffffff'
            },
            title: {
                text: 'Average Group Contribution per Round',
                style: { fontWeight: 'bold' }
            },
            xAxis: {
                title: { text: 'Round' },
                categories: {{ rounds|json }},
                tickInterval: 1
            },
            yAxis: {
                title: { text: 'Points Contributed' },
                min: 0,
                max: 10
            },
            series: [{
                name: 'Average Contribution',
                data: {{ avg_contrib_history|json }},
                color: '#0d6efd',
                lineWidth: 3,
                marker: {
                    enabled: true,
                    radius: 6,
                    symbol: 'circle'
                }
            }],
            plotOptions: {
                line: {
                    dataLabels: { enabled: true }
                }
            },
            credits: { enabled: false }
        });
    });
</script>
{{ endblock }}