{{ 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">
                            <span class="{{ if entry.total_profit < 0 }}text-danger{{ endif }}">
                                {{ entry.total_profit }}
                            </span>
                        </td>
                    </tr>
                    {{ endfor }}
                </tbody>
            </table>
        </div>
    </div>

    <hr class="my-5">
    <h3 class="text-muted text-center mb-4">Round-by-Round Analysis</h3>

    {{ for h in history }}
    <div class="card shadow-sm mb-5 border-0" style="border-radius: 15px;">
        <div class="card-header bg-dark text-white p-3">
            <h4 class="mb-0">Round {{ h.round }} Analysis</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6>1. Equilibrium (Theoretical)</h6>
                    <table class="table table-sm small table-bordered">
                        <tr class="table-light">
                            <th>Price (P<sup>*</sup>)</th><th>Qty (Q<sup>*</sup>)</th><th>Sorted Values/Costs</th>
                        </tr>
                        <tr>
                            <td>${{ h.theo_p }}</td>
                            <td>{{ h.theo_q }}</td>
                            <td class="text-muted">{{ h.theo_vals }} vs {{ h.theo_costs }}</td>
                        </tr>
                    </table>
                    <div id="chart-theo-{{ h.round }}" style="height: 300px;"></div>
                </div>

                <div class="col-md-6 border-start">
                    <h6>2. Actual Behavior</h6>
                    <table class="table table-sm small table-bordered">
                        <tr class="table-light">
                            <th>Actual P</th><th>Actual Q</th><th>Bids/Asks</th>
                        </tr>
                        <tr>
                            <td>${{ h.actual_p }}</td>
                            <td>{{ h.actual_q }}</td>
                            <td class="text-muted">{{ h.actual_bids }} vs {{ h.actual_asks }}</td>
                        </tr>
                    </table>
                    <div id="chart-actual-{{ h.round }}" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
    {{ endfor }}
    <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: #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>
    // This function handles the drawing of step-functions for S/D curves [cite: 138, 139]
    function createChart(container, title, buyers, sellers) {
        if (typeof Highcharts === 'undefined') {
            console.error("Highcharts is still not loading. Check your internet connection or browser extensions.");
            return;
        }

        let demand = [];
        let supply = [];

        // Constructing the discrete step functions as per Step 2 & 3 logic [cite: 152, 153, 163]
        buyers.forEach((v, i) => { demand.push([i, v]); demand.push([i + 1, v]); });
        sellers.forEach((c, i) => { supply.push([i, c]); supply.push([i + 1, c]); });

        Highcharts.chart(container, {
            chart: { type: 'line', backgroundColor: '#ffffff' },
            title: { text: title, style: { color: '#333', fontWeight: 'bold' } },
            xAxis: { title: { text: 'Quantity (Q)' }, min: 0, tickInterval: 1 },
            yAxis: { title: { text: 'Price (P)' }, min: 0 },
            series: [
                { name: 'Demand (Bids)', data: demand, step: 'left', color: '#0d6efd' },
                { name: 'Supply (Asks)', data: supply, step: 'left', color: '#198754' }
            ],
            plotOptions: { series: { marker: { enabled: false }, lineWidth: 3 } },
            credits: { enabled: false }
        });
    }

    // Use a small delay to ensure the library is fully parsed by the browser
    window.addEventListener('load', function() {
        {{ for h in history }}
            createChart('chart-theo-{{ h.round }}', 'Theoretical Equilibrium', {{ h.theo_vals|json }}, {{ h.theo_costs|json }});
            createChart('chart-actual-{{ h.round }}', 'Actual Market Behavior', {{ h.actual_bids|json }}, {{ h.actual_asks|json }});
        {{ endfor }}
    });
</script>
{{ endblock }}