{{ 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">Part 1</th>
                        <th class="text-end">Part 2</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">{{ entry.p1_profit }}</td>
                        <td class="text-end">{{ entry.p2_profit }}</td>
                        <td class="text-end pe-4">
                            <span>{{ entry.total_profit }}</span>
                        </td>
                    </tr>
                    {{ endfor }}
                </tbody>
            </table>
        </div>
    </div>

    <hr class="my-5">

    <h3 class="text-muted text-center mb-4">Group Aggregate Profit Over Time (Part 2)</h3>
    <div class="card shadow-sm border-0 mb-5 p-4" style="border-radius: 15px; background-color: #fff;">
        <div id="aggregate-profit-chart" style="height: 400px; width: 100%;"></div>
    </div>

    <hr class="my-5">

    <h3 class="text-muted text-center mb-4">Your Round-by-Round History &ndash; Part 1</h3>
    <div class="card shadow-sm mb-5 border-0" style="border-radius: 15px;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0 text-center">
                    <thead class="table-dark">
                        <tr>
                            <th>Round</th>
                            <th>Your Choice</th>
                            {{ if show_others_p1 }}<th>Others (Low)</th><th>Others (High)</th>{{ endif }}
                            <th>Profit</th>
                            <th>Cumulative</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ for h in history_p1 }}
                        <tr>
                            <td>{{ h.round }}</td>
                            <td><span class="badge {{ if h.choice == 'Low' }}bg-info text-dark{{ else }}bg-warning text-dark{{ endif }}">{{ h.choice }}</span></td>
                            {{ if show_others_p1 }}<td>{{ h.others_low }}</td><td>{{ h.others_high }}</td>{{ endif }}
                            <td class="fw-bold text-success">{{ h.profit }}</td>
                            <td class="fw-bold">{{ h.cumulative }}</td>
                        </tr>
                        {{ endfor }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <h3 class="text-muted text-center mb-4">Your Round-by-Round History &ndash; Part 2</h3>
    <div class="card shadow-sm mb-5 border-0" style="border-radius: 15px;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0 text-center">
                    <thead class="table-dark">
                        <tr>
                            <th>Round</th>
                            <th>Your Choice</th>
                            <th>Others (Low)</th>
                            <th>Others (High)</th>
                            <th>Profit</th>
                            <th>Cumulative</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ for h in history_p2 }}
                        <tr>
                            <td>{{ h.round }}</td>
                            <td><span class="badge {{ if h.choice == 'Low' }}bg-info text-dark{{ else }}bg-warning text-dark{{ endif }}">{{ h.choice }}</span></td>
                            <td>{{ h.others_low }}</td>
                            <td>{{ h.others_high }}</td>
                            <td class="fw-bold text-success">{{ h.profit }}</td>
                            <td class="fw-bold">{{ h.cumulative }}</td>
                        </tr>
                        {{ endfor }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<style>
    body { background-color: #f4f7f6; }
    h6 { font-weight: bold; color: #555; text-transform: uppercase; letter-spacing: 1px; }
    .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>
    document.addEventListener('DOMContentLoaded', function () {
        // Pull the variables passed from Python via oTree's json filter
        const rounds = {{ group_rounds|json }};
        const profits = {{ aggregate_profits|json }};

        // Render the chart
        Highcharts.chart('aggregate-profit-chart', {
            chart: {
                type: 'line',
                animation: true,
                style: { fontFamily: 'inherit' }
            },
            title: { text: null }, // Hiding title since we have the HTML h3 tag
            xAxis: {
                title: { text: 'Round Number (Part 2)', style: { fontWeight: 'bold' } },
                min: 1,
                tickInterval: 1
            },
            yAxis: {
                title: { text: 'Aggregate Profit (All Players)', style: { fontWeight: 'bold' } },
                min: 0
            },
            tooltip: {
                formatter: function() {
                    return '<b>Round ' + this.x + '</b><br/>Total Profit: ' + this.y;
                }
            },
            series: [{
                name: 'Group Aggregate Profit',
                data: profits,
                pointStart: 1,
                color: '#198754', // Bootstrap success green
                lineWidth: 3,
                marker: {
                    radius: 6,
                    fillColor: '#fff',
                    lineColor: '#198754',
                    lineWidth: 2
                }
            }],
            plotOptions: {
                line: {
                    dataLabels: { enabled: true, format: '{y}' }
                }
            },
            legend: { enabled: false },
            credits: { enabled: false }
        });
    });
</script>
{{ endblock }}