{% extends 'buybackprogram/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block details %}

<div class="card mb-3">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="fas fa-trophy me-1"></i> {% trans "Leaderboard:" %} {{ program.name }}</span>
        <div class="d-flex align-items-center gap-3">
            <button class="btn btn-sm btn-outline-secondary" onclick="prior()">
                <i class="fas fa-chevron-left"></i>
            </button>
            <span class="fw-semibold" id="month"></span>
            <button class="btn btn-sm btn-outline-secondary" onclick="next()">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <table class="table table-striped table-hover mb-0" id="leaderboard">
            <thead>
                <tr>
                    <th class="ps-3">{% trans "Rank" %}</th>
                    <th>{% trans "Name" %}</th>
                    <th>{% trans "Contract Total (ISK)" %}</th>
                    <th>{% trans "Donation Total (ISK)" %}</th>
                </tr>
            </thead>
            <tbody id="data"></tbody>
            <tfoot id="leaderboard-totals"></tfoot>
        </table>
    </div>
</div>

{% endblock %}

{% block extra_javascript %}
<script>
{% autoescape off %}
var data;
var curi;

function next() {
    if (!data.months.length) return;
    curi = Math.min(curi + 1, data.months.length - 1);
    render();
}

function prior() {
    if (!data.months.length) return;
    curi = Math.max(curi - 1, 0);
    render();
}

function render() {
    if (!data.months.length) return;

    const month = data.months[curi].split(":")[1];
    document.getElementById("month").textContent = month;

    const tbody = document.getElementById("data");
    const tfoot = document.getElementById("leaderboard-totals");
    tbody.innerHTML = "";
    tfoot.innerHTML = "";

    const entries = Object.entries(data.users[data.months[curi]]);
    entries.sort((a, b) => b[1][0] - a[1][0]);

    entries.forEach(([uid, arr], idx) => {
        const rank = idx + 1;
        let rankHtml = rank;
        if (rank === 1) rankHtml = '<span class="badge bg-warning text-dark"><i class="fas fa-medal me-1"></i>1</span>';
        else if (rank === 2) rankHtml = '<span class="badge bg-secondary"><i class="fas fa-medal me-1"></i>2</span>';
        else if (rank === 3) rankHtml = '<span class="badge" style="background:#cd7f32;"><i class="fas fa-medal me-1"></i>3</span>';

        const tr = document.createElement("tr");
        tr.innerHTML = `
            <td class="ps-3">${rankHtml}</td>
            <td>
                <img src="${data.userinfo[uid].pic}" style="height:24px;width:24px;border-radius:50%;margin-right:8px;">
                ${data.userinfo[uid].name}
            </td>
            <td>${arr[0].toLocaleString("en-US")} ISK</td>
            <td>${arr[1].toLocaleString("en-US")} ISK</td>
        `;
        tbody.appendChild(tr);
    });

    const totalContracts = entries.reduce((sum, [, arr]) => sum + arr[0], 0);
    const totalDonations = entries.reduce((sum, [, arr]) => sum + arr[1], 0);
    tfoot.innerHTML = `
        <tr class="table-active fw-bold">
            <td class="ps-3" colspan="2">{% trans "Total" %}</td>
            <td>${totalContracts.toLocaleString("en-US")} ISK</td>
            <td>${totalDonations.toLocaleString("en-US")} ISK</td>
        </tr>
    `;
}

(function () {
    data = {{stats}};
    if (!data.months.length) {
        document.getElementById("data").innerHTML =
            '<tr><td colspan="4" class="text-center text-muted py-3">{% trans "No data available." %}</td></tr>';
        document.getElementById("leaderboard-totals").innerHTML = "";
        return;
    }
    curi = data.months.length - 1;
    render();
})();
{% endautoescape %}
</script>
{% endblock %}

{% block extra_css %}
{% include "buybackprogram/bundles/buybackprogram-css-light.html" %}
{% endblock %}