{% extends 'wfbo/_layout.html.twig' %}

{% block title %}Games Report — WFBO{% endblock %}
{% block wfbo_title %}Games Report{% endblock %}

{% block wfbo_content %}

    {# ── Period filter bar ── #}
    {% set presets = [
        {key: 'today',      label: 'Today'},
        {key: 'yesterday',  label: 'Yesterday'},
        {key: 'this_month', label: 'This Month'},
        {key: 'last_month', label: 'Last Month'},
        {key: 'this_year',  label: 'This Year'},
        {key: 'last_year',  label: 'Last Year'},
    ] %}
    <div class="period-filter-bar mb-3">
        {% for p in presets %}
            <a href="{{ path('app_wfbo_games_report', {period: p.key}) }}"
               class="period-pill {% if period.period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}

        {# Custom month picker #}
        <form method="GET" action="{{ path('app_wfbo_games_report') }}" style="display:inline-flex; align-items:center; gap:6px;">
            <input type="month" name="_month_val"
                   value="{{ period.period starts with 'month_' ? period.period|replace({'month_': '', '_': '-'}) : '' }}"
                   class="period-filter-input period-filter-input--light {% if period.period starts with 'month_' %}is-active{% endif %}">
            <button type="submit" class="period-filter-go period-filter-go--light {% if period.period starts with 'month_' %}is-active{% endif %}">Go</button>
            <input type="hidden" name="period" id="gr-hidden-period-month" value="">
        </form>

        {# Custom year picker #}
        <form method="GET" action="{{ path('app_wfbo_games_report') }}" style="display:inline-flex; align-items:center; gap:6px;">
            <input type="number" name="_year_val" min="2020" max="2100" placeholder="Year"
                   value="{{ period.period starts with 'year_' ? period.period|replace({'year_': ''}) : '' }}"
                   class="period-filter-input period-filter-input--light {% if period.period starts with 'year_' %}is-active{% endif %}"
                   style="width:90px;">
            <button type="submit" class="period-filter-go period-filter-go--light {% if period.period starts with 'year_' %}is-active{% endif %}">Go</button>
            <input type="hidden" name="period" id="gr-hidden-period-year" value="">
        </form>
    </div>

    <script>
    (function () {
        var mf = document.getElementById('gr-hidden-period-month');
        mf = mf ? mf.closest('form') : null;
        if (mf) {
            mf.addEventListener('submit', function (e) {
                var val = mf.querySelector('[name="_month_val"]').value;
                if (!val) { e.preventDefault(); return; }
                var parts = val.split('-');
                document.getElementById('gr-hidden-period-month').value = 'month_' + parts[0] + '_' + parts[1];
                mf.querySelector('[name="_month_val"]').disabled = true;
            });
        }
        var yf = document.getElementById('gr-hidden-period-year');
        yf = yf ? yf.closest('form') : null;
        if (yf) {
            yf.addEventListener('submit', function (e) {
                var val = yf.querySelector('[name="_year_val"]').value;
                if (!val) { e.preventDefault(); return; }
                document.getElementById('gr-hidden-period-year').value = 'year_' + val;
                yf.querySelector('[name="_year_val"]').disabled = true;
            });
        }
    })();
    </script>

    <p class="stat-sub mb-3">{{ period.label }} &middot; all games except Live Racing</p>

    {# ── Aggregate summary cards ── #}
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3" data-testid="games-report-card-turnover">
            <div class="card h-100"><div class="card-body">
                <p class="stat-label">Total Turnover</p>
                <p class="stat-value--lg">₱{{ totals.turnover|number_format(2) }}</p>
                <p class="stat-sub" data-testid="games-report-card-turnover-def">Total amount players staked (all bets placed)</p>
                <p class="stat-sub">{{ totals.settledBets }} settled bet{{ totals.settledBets != 1 ? 's' : '' }}</p>
            </div></div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3" data-testid="games-report-card-payout">
            <div class="card h-100"><div class="card-body">
                <p class="stat-label">Total Payout</p>
                <p class="stat-value--lg" style="color:#dc2626;">₱{{ totals.payout|number_format(2) }}</p>
                <p class="stat-sub" data-testid="games-report-card-payout-def">Winnings paid back to players</p>
                <p class="stat-sub">= {{ totals.payoutRate|number_format(2) }}% of turnover</p>
            </div></div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3" data-testid="games-report-card-commission">
            <div class="card h-100"><div class="card-body">
                <p class="stat-label">Total Commissions</p>
                <p class="stat-value--lg" style="color:#dc2626;">₱{{ totals.commission|number_format(2) }}</p>
                <p class="stat-sub" data-testid="games-report-card-commission-def">Agent commission earned on these bets</p>
                <p class="stat-sub">house-agent commission reclassified as revenue</p>
            </div></div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3" data-testid="games-report-card-net-revenue">
            <div class="card h-100"><div class="card-body">
                <p class="stat-label">Net Revenue</p>
                <p class="stat-value--lg" style="color:{{ totals.netRevenue >= 0 ? '#059669' : '#dc2626' }};">₱{{ totals.netRevenue|number_format(2) }}</p>
                <p class="stat-sub" data-testid="games-report-card-net-revenue-def">What the house kept: turnover &minus; payout &minus; commission</p>
                <p class="stat-sub">Hold {{ totals.hold|number_format(2) }}%</p>
            </div></div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3" data-testid="games-report-card-settled-bets">
            <div class="card h-100"><div class="card-body">
                <p class="stat-label">Settled Bets</p>
                <p class="stat-value--lg">{{ totals.settledBets }}</p>
                <p class="stat-sub" data-testid="games-report-card-settled-bets-def">Bets that finished won or lost (pending / in-progress excluded)</p>
                <p class="stat-sub">{{ totals.wins }} won &middot; {{ totals.losses }} lost &middot; win rate {{ totals.winRate|number_format(2) }}%</p>
            </div></div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3" data-testid="games-report-card-payout-rate">
            <div class="card h-100"><div class="card-body">
                <p class="stat-label">Overall Payout Rate</p>
                <p class="stat-value--lg" style="color:#2563eb;">{{ totals.payoutRate|number_format(2) }}%</p>
                <p class="stat-sub" data-testid="games-report-card-payout-rate-def">Share of turnover returned to players (payout &divide; turnover)</p>
            </div></div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3" data-testid="games-report-card-hold">
            <div class="card h-100"><div class="card-body">
                <p class="stat-label">Overall Hold %</p>
                <p class="stat-value--lg" style="color:{{ totals.hold >= 0 ? '#059669' : '#dc2626' }};">{{ totals.hold|number_format(2) }}%</p>
                <p class="stat-sub" data-testid="games-report-card-hold-def">Share of turnover the house kept (net revenue &divide; turnover)</p>
                <p class="stat-sub">the higher, the better for the house</p>
            </div></div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3" data-testid="games-report-card-active-players">
            <div class="card h-100"><div class="card-body">
                <p class="stat-label">Active Players</p>
                <p class="stat-value--lg">{{ activePlayers }}</p>
                <p class="stat-sub" data-testid="games-report-card-active-players-def">Distinct real players who bet in any of these games this period</p>
                <p class="stat-sub">excludes Live Racing, test accounts and staff</p>
            </div></div>
        </div>
    </div>

    {# ── Per-game breakdown ── #}
    <p class="stat-sub mb-2" data-testid="games-report-legend">
        Turnover = total staked &middot; Payout = winnings paid &middot;
        Net Revenue = turnover &minus; payout &minus; commission &middot;
        Payout Rate = payout &divide; turnover &middot; Hold % = net revenue &divide; turnover
    </p>
    <div class="card table-card mb-4">
        <div class="table-scroll">
            <table class="data-table" data-testid="games-report-table">
                <thead>
                    <tr class="thead-row--strong">
                        <th class="th-white" title="The game">Game</th>
                        <th class="th-white" title="Bets that finished won or lost; pending / in-progress excluded">Settled Bets*</th>
                        <th class="th-white" title="Number of settled bets that won">Wins</th>
                        <th class="th-white" title="Number of settled bets that lost">Losses</th>
                        <th class="th-white" title="Wins &divide; settled bets">Win Rate %</th>
                        <th class="th-white" title="Total amount players staked">Turnover &#8369;</th>
                        <th class="th-white" title="Winnings paid back to players">Payout &#8369;</th>
                        <th class="th-white" title="Agent commission earned on these bets">Commission &#8369;</th>
                        <th class="th-white" title="Turnover &minus; payout &minus; commission — what the house kept">Net Revenue &#8369;</th>
                        <th class="th-white" title="Payout &divide; turnover">Payout Rate %</th>
                        <th class="th-white" title="Net revenue &divide; turnover — the house margin">Hold %</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                        <tr class="table-row" data-testid="games-report-row-{{ row.slug }}">
                            <td class="td-cell fw-semibold">
                                {% if row.resultsRoute %}
                                    <a href="{{ path(row.resultsRoute, {period: period.period}) }}" style="color:inherit; text-decoration:underline; text-underline-offset:2px;">{{ row.label }}</a>
                                {% else %}{{ row.label }}{% endif %}
                            </td>
                            <td class="td-cell">{{ row.settledBets }}</td>
                            <td class="td-cell" style="color:#059669;">{{ row.wins }}</td>
                            <td class="td-cell" style="color:#dc2626;">{{ row.losses }}</td>
                            <td class="td-cell">{{ row.winRate|number_format(2) }}%</td>
                            <td class="td-cell">₱{{ row.turnover|number_format(2) }}</td>
                            <td class="td-cell">₱{{ row.payout|number_format(2) }}</td>
                            <td class="td-cell">₱{{ row.commission|number_format(2) }}</td>
                            <td class="td-cell" style="color:{{ row.netRevenue >= 0 ? '#059669' : '#dc2626' }}; font-weight:600;">₱{{ row.netRevenue|number_format(2) }}</td>
                            <td class="td-cell">{{ row.payoutRate|number_format(2) }}%</td>
                            <td class="td-cell">{{ row.hold|number_format(2) }}%</td>
                        </tr>
                    {% endfor %}
                    <tr class="table-row fw-bold" data-testid="games-report-total-row">
                        <td class="td-cell">Total</td>
                        <td class="td-cell">{{ totals.settledBets }}</td>
                        <td class="td-cell">{{ totals.wins }}</td>
                        <td class="td-cell">{{ totals.losses }}</td>
                        <td class="td-cell">{{ totals.winRate|number_format(2) }}%</td>
                        <td class="td-cell">₱{{ totals.turnover|number_format(2) }}</td>
                        <td class="td-cell">₱{{ totals.payout|number_format(2) }}</td>
                        <td class="td-cell">₱{{ totals.commission|number_format(2) }}</td>
                        <td class="td-cell" style="color:{{ totals.netRevenue >= 0 ? '#059669' : '#dc2626' }};">₱{{ totals.netRevenue|number_format(2) }}</td>
                        <td class="td-cell">{{ totals.payoutRate|number_format(2) }}%</td>
                        <td class="td-cell">{{ totals.hold|number_format(2) }}%</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <p class="stat-sub" data-testid="games-report-footnote">
        * Settled bets exclude pending / still-active rounds. Figures reflect each game's
        settled activity within the selected period. House-agent commission is reclassified
        from commission to net revenue, matching the WFBO dashboard. Test accounts are
        excluded. Hold % = net revenue &divide; turnover. Live Racing is not included in this report.
    </p>

{% endblock %}