{{ block title }}{{ endblock }}

{{ block content }}
<link rel="stylesheet" href="{{ static 'css/css.css' }}">
<link rel="stylesheet" href="{{ static 'css/modal.css' }}">
<script type="text/javascript" src="{{ static 'js/Script_modal.js' }}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<div class="content-box box-neutral">
    <h2 class="section-title">
        Round {{ round_number }} of {{C.Economy_num_rounds}} — Results &amp; Feedback
    </h2>
    <hr class="section-divider">


    <!-- ── Multiplier table (Excessive Meritocracy & Aristocracy only) ──── -->
    {% if Treatment == 'Excessive_Meritocracy' or Treatment == 'Aristocracy' %}
    <div class="section-box box-neutral" style="margin-top:32px;">
        <div class="section-header">
            <div class="icon">✖️</div>
            <h3>Multipliers in your Economy</h3>
        </div>
        <table style="width:100%; border-collapse:collapse; text-align:center; margin-top:8px;">
            <thead>
                <tr style="background:#f5f5f5;">
                    <th style="padding:10px 16px; border-bottom:2px solid #ddd; text-align:left;">
                        Group member
                    </th>
                    <th style="padding:10px 16px; border-bottom:2px solid #ddd;">
                        Multiplier
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:10px 16px; border-bottom:1px solid #eee; text-align:left;">
                        <span style="color:#4CAF50; font-size:1.1em;">●</span>&nbsp;<strong>You</strong>
                    </td>
                    <td style="padding:10px 16px; border-bottom:1px solid #eee;">
                        <strong>&times;{{ multipliers_list.0 }}</strong>
                    </td>
                </tr>
                <tr>
                    <td style="padding:10px 16px; border-bottom:1px solid #eee; text-align:left;">
                        <span style="color:#5B9BD5; font-size:1.1em;">●</span>&nbsp;Group member 2
                    </td>
                    <td style="padding:10px 16px; border-bottom:1px solid #eee;">
                        <strong>&times;{{ multipliers_list.1 }}</strong>
                    </td>
                </tr>
                <tr>
                    <td style="padding:10px 16px; text-align:left;">
                        <span style="color:#FFB347; font-size:1.1em;">●</span>&nbsp;Group member 3
                    </td>
                    <td style="padding:10px 16px;">
                        <strong>&times;{{ multipliers_list.2 }}</strong>
                    </td>
                </tr>
            </tbody>
        </table>
        <p style="margin-top:14px; padding:10px 14px; background:#f0f7ff; border-left:3px solid #5B9BD5; border-radius:4px; font-size:0.92em; color:#333;">
            ℹ️ {{ multiplier_reminder|safe }}
        </p>
    </div>
    {% endif %}

    <!-- ── Welfare note (Welfare State only) ─────────────────────────────── -->
    {% if Treatment == 'Welfare_State' %}
    <div style="margin-top:32px; padding:12px 16px; background:#f0f7ff; border-left:4px solid #5B9BD5; border-radius:6px; font-size:0.93em; color:#333;">
        ℹ️ Remember: score is calcualted as your performance plus the average performance of all three players.
    </div>
    {% endif %}

    <p style="text-align:center; color:#555;">
        Below you can see how your <strong>performance</strong> and <strong>accumulated earnings</strong>
        compare to the other members of your Economy.
    </p>

    <!-- ── Three bar charts ──────────────────────────────────────────── -->
    <div style="display:flex; justify-content:center; gap:32px; flex-wrap:wrap; margin-top:24px;">

        <!-- 1: performance this round -->
        <div style="flex:1; min-width:220px; max-width:300px; text-align:center;">
            <h4 style="margin-bottom:6px;">
                Performance
                <span style="font-weight:normal; color:#777; font-size:0.9em;">(this round)</span>
            </h4>
            <canvas id="performanceChart"></canvas>
            <p style="margin-top:6px; font-size:0.82em; color:#777;">
                Correctly solved questions in round {{ round_number }}
            </p>
        </div>

        <!-- 2: earnings this round -->
        <div style="flex:1; min-width:220px; max-width:300px; text-align:center;">
            <h4 style="margin-bottom:6px;">
                Earnings
                <span style="font-weight:normal; color:#777; font-size:0.9em;">(this round)</span>
            </h4>
            <canvas id="earningsThisRoundChart"></canvas>
            <p style="margin-top:6px; font-size:0.82em; color:#777;">
                ECs earned in round {{ round_number }}
            </p>
        </div>

        <!-- 3: accumulated competition earnings -->
        <div style="flex:1; min-width:220px; max-width:300px; text-align:center;">
            <h4 style="margin-bottom:6px;">
                Accumulated Earnings
                <span style="font-weight:normal; color:#777; font-size:0.9em;">(all rounds so far)</span>
            </h4>
            <canvas id="earningsChart"></canvas>
            <p style="margin-top:6px; font-size:0.82em; color:#777;">
                ECs earned from all rounds so far
            </p>
        </div>

    </div>

   

    <div class="buttons-container" style="margin-top:30px;">
        <div class="Instructions">
            <!-- <a onclick="open_modal(1)" class="btn btn-info">General Instructions</a> -->
        </div>
        <button id="NextButton" class="btn btn-primary">Next</button>
    </div>
</div>

<!-- Modal: general instructions -->
<div id="myModal1" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><span class="icon">📘</span> Instructions</h2>
            <span class="close" onclick="span_click(1)">&times;</span>
        </div>
        <div class="modal-body">
            {{ include C.Instructions_general_path }}
        </div>
    </div>
</div>

<script>
    // Colour scheme — matches the legend dots in the multiplier table
    const BAR_BG     = ['rgba(76,175,80,0.8)', 'rgba(91,155,213,0.8)', 'rgba(255,179,71,0.8)'];
    const BAR_BORDER = ['#388E3C',              '#2E75B6',               '#E8923A'];
    const MEMBERS    = ['You', 'Group member 2', 'Group member 3'];

    const performances       = {{ performances }};         // [you, m2, m3] — raw correct answers this round
    const earningsThisRound  = {{ earnings_this_round }};  // [you, m2, m3] — competition ECs this round
    const accumulated        = {{ accumulated }};          // [you, m2, m3] — cumulative competition ECs

    function makeBarChart(canvasId, data, yLabel) {
        const ctx = document.getElementById(canvasId).getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: MEMBERS,
                datasets: [{
                    data:            data,
                    backgroundColor: BAR_BG,
                    borderColor:     BAR_BORDER,
                    borderWidth:     1.5,
                    borderRadius:    5,
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: ctx => ` ${ctx.parsed.y} ${yLabel}`
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: { display: true, text: yLabel }
                    }
                }
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        makeBarChart('performanceChart',      performances,      'questions');
        makeBarChart('earningsThisRoundChart', earningsThisRound, 'ECs');
        makeBarChart('earningsChart',          accumulated,       'ECs');
    });
</script>

{{ endblock }}