{{ 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">
        Economy Complete &mdash; Your Results
    </h2>
            <!-- TODO: delete this debug. -->
            <h3>(DEBUG: Treatment: {{Treatment}})</h3>
    <hr class="section-divider">


        <!-- ── Multiplier table ──────────────────────────────────────────── -->
    <!-- <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>
    </div> -->
    {% if multiplier_reminder %}
    <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>
    {% endif %}


    <p style="text-align:center; color:#555;">
        Below is a summary of the <strong>ECs you earned</strong> so far in the experiment.
    </p>

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

        <!-- Left: your earnings breakdown -->
        <div style="flex:1; min-width:260px; max-width:380px; text-align:center;">
            <h4 style="margin-bottom:6px;">
                Your Earnings Breakdown
            </h4>
            <canvas id="breakdownChart"></canvas>
            <p style="margin-top:6px; font-size:0.82em; color:#777;">
                ECs earned from each part of the experiment
            </p>
        </div>

        <!-- Right: group comparison -->
        <div style="flex:1; min-width:260px; max-width:380px; text-align:center;">
            <h4 style="margin-bottom:6px;">
                Total Earnings
                <span style="font-weight:normal; color:#777; font-size:0.9em;">(group comparison)</span>
            </h4>
            <canvas id="groupChart"></canvas>
            <p style="margin-top:6px; font-size:0.82em; color:#777;">
                Total ECs earned by each group member
            </p>
        </div>

    </div>


    <!-- ── Summary table ──────────────────────────────────────────── -->
    <div class="section-box box-calm" style="margin-top:32px;">
        <div class="section-header">
            <div class="icon">🪙</div>
            <h3>Earnings Summary</h3>
        </div>
        <table style="width:100%; border-collapse:collapse; margin-top:8px;">
            <tbody>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:10px 16px;">Practice rounds</td>
                    <td style="padding:10px 16px; text-align:right; font-weight:bold;">{{ practice_ecs }} ECs</td>
                </tr>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:10px 16px;">Competition stage (4 rounds)</td>
                    <td style="padding:10px 16px; text-align:right; font-weight:bold;">{{ competition_ecs }} ECs</td>
                </tr>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:10px 16px;">Cooperation stage (round {{ pgg_selected_round }} selected)</td>
                    <td style="padding:10px 16px; text-align:right; font-weight:bold;">{{ pgg_earnings }} ECs</td>
                </tr>
                <tr style="border-top:2px solid #333; background:#f8f9fa;">
                    <td style="padding:12px 16px; font-weight:bold; font-size:1.05em;">Total bonus so far</td>
                    <td style="padding:12px 16px; text-align:right; font-weight:bold; font-size:1.05em;">
                        {{ total_ecs }} ECs 
                    </td>
                </tr>
            </tbody>
        </table>
        <p style="margin-top:12px; font-size:0.9em; color:#666;">
            One of the four cooperation rounds was randomly selected for payment (round {{ pgg_selected_round }}).
            Your bonus will be paid in addition to the completion fee.
        </p>
    </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 constants (matching Round_Feedback) ─────────────────────
    const MEMBER_BG     = ['rgba(76,175,80,0.8)', 'rgba(91,155,213,0.8)', 'rgba(255,179,71,0.8)'];
    const MEMBER_BORDER = ['#388E3C',              '#2E75B6',               '#E8923A'];
    const MEMBERS       = ['You', 'Group member 2', 'Group member 3'];

    // Breakdown colours (practice / competition / cooperation)
    const BREAKDOWN_BG     = ['rgba(91,155,213,0.8)', 'rgba(76,175,80,0.8)', 'rgba(255,179,71,0.8)'];
    const BREAKDOWN_BORDER = ['#2E75B6',               '#388E3C',               '#E8923A'];
    const BREAKDOWN_LABELS = ['Practice', 'Competition', 'Cooperation'];

    // Data from Python
    const breakdownData = [{{ practice_ecs }}, {{ competition_ecs }}, {{ pgg_earnings }}];
    const groupTotals   = {{ group_totals }};

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

    document.addEventListener('DOMContentLoaded', function () {
        makeBarChart('breakdownChart', BREAKDOWN_LABELS, breakdownData,
                     BREAKDOWN_BG, BREAKDOWN_BORDER, 'ECs');
        makeBarChart('groupChart', MEMBERS, groupTotals,
                     MEMBER_BG, MEMBER_BORDER, 'ECs');
    });
</script>

{{ endblock }}