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

{% block title %}Live Racing Report — WFBO{% endblock %}
{% block wfbo_title %}Live Racing Report{% endblock %}

{% macro peso(v) %}{{ v < 0 ? '-' : '' }}₱{{ v|abs|number_format(2) }}{% endmacro %}
{% macro pct(v) %}{{ v is null ? '—' : v|number_format(1) ~ '%' }}{% endmacro %}

{% block wfbo_content %}

<style>
.lrr-kpi { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; height: 100%; }
.lrr-kpi__label { font-size: 12px; color: #6b7280; margin: 0; }
.lrr-kpi__value { font-size: 20px; font-weight: 800; margin: 2px 0 0; color: #111827; }
.lrr-good { color: #16a34a !important; } .lrr-bad { color: #dc2626 !important; }
.lrr-sub { font-size: 11px; color: #9ca3af; }
.lrr-section { font-size: 15px; font-weight: 700; margin: 22px 0 10px; }
.lrr-num { text-align: right; white-space: nowrap; }
</style>

    <div class="period-filter-bar mb-2 d-flex flex-wrap gap-2 align-items-center">
        {% for key, label in presets %}
            <a href="{{ path('app_wfbo_live_racing_report', {period: key}) }}"
               class="period-pill {% if period.period == key %}is-active{% endif %}" data-testid="lrr-period-{{ key }}">{{ label }}</a>
        {% endfor %}
    </div>
    <form method="GET" action="{{ path('app_wfbo_live_racing_report') }}" class="d-flex flex-wrap align-items-end gap-2 mb-3" data-testid="lrr-range-form">
        <div><label class="form-label--sm d-block" for="lrr-from">From</label>
            <input type="date" id="lrr-from" name="from" value="{{ from }}" class="form-control form-control-sm" data-testid="lrr-from"></div>
        <div><label class="form-label--sm d-block" for="lrr-to">To</label>
            <input type="date" id="lrr-to" name="to" value="{{ to }}" class="form-control form-control-sm" data-testid="lrr-to"></div>
        <button type="submit" class="btn btn-sm btn-dark" data-testid="lrr-range-submit">Apply</button>
        <span class="pagination-info mb-0 ms-2" data-testid="lrr-period-label">Showing events dated <strong>{{ period.label }}</strong></span>
    </form>

    {% set t = report.totals %}
    {% if t.events == 0 %}
        <p class="td-empty--lg text-center" data-testid="lrr-empty">No Live Racing events in this period.</p>
    {% else %}

    {# ── KPIs ── #}
    <div class="row g-2 mb-2">
        <div class="col-6 col-lg-3"><div class="lrr-kpi"><p class="lrr-kpi__label">Revenue</p>
            <p class="lrr-kpi__value {{ t.revenue >= 0 ? 'lrr-good' : 'lrr-bad' }}" data-testid="lrr-revenue">{{ _self.peso(t.revenue) }}</p>
            <p class="lrr-sub mb-0">hold {{ _self.pct(t.hold) }} · avg {{ _self.peso(t.avgRevenue) }} per event</p></div></div>
        <div class="col-6 col-lg-3"><div class="lrr-kpi"><p class="lrr-kpi__label">Bets (settled)</p>
            <p class="lrr-kpi__value" data-testid="lrr-stake">{{ _self.peso(t.stake) }}</p>
            <p class="lrr-sub mb-0">{{ t.tickets|number_format }} tickets · {{ t.players|number_format }} players · {{ t.events }} event{{ t.events != 1 ? 's' : '' }}</p></div></div>
        <div class="col-6 col-lg-3"><div class="lrr-kpi"><p class="lrr-kpi__label">Payouts</p>
            <p class="lrr-kpi__value" data-testid="lrr-payout">{{ _self.peso(t.payout) }}</p>
            <p class="lrr-sub mb-0">{{ _self.pct(t.payoutPct) }} of bets · incl. ≈{{ _self.peso(t.bonus) }} payout bonus{% if t.bonusCapped > 0 %} ({{ t.bonusCapped }} capped wins not counted){% endif %}</p></div></div>
        <div class="col-6 col-lg-3"><div class="lrr-kpi"><p class="lrr-kpi__label">Agent commission</p>
            <p class="lrr-kpi__value" data-testid="lrr-commission">{{ _self.peso(t.commission) }}</p>
            <p class="lrr-sub mb-0">house-agent commission counted as revenue</p></div></div>
    </div>
    {% if t.pending > 0 %}
        <p class="lrr-sub" data-testid="lrr-pending">{{ _self.peso(t.pending) }} of bets in these events are still unsettled and not counted yet.</p>
    {% endif %}

    <div data-controller="live-racing-report"
         data-live-racing-report-events-value="{{ report.events|map(e => {label: e.date|date('M j'), revenue: e.revenue, hold: e.hold})|json_encode|e('html_attr') }}"
         data-live-racing-report-types-value="{{ report.betTypes|map(b => {label: b.label, result: b.revenue, payoutPct: b.payoutPct})|json_encode|e('html_attr') }}">
        <p class="lrr-section">Revenue per event</p>
        <div class="card mb-2" data-testid="lrr-chart-events"><div class="card-body" style="height: 300px;"><canvas data-live-racing-report-target="events"></canvas></div></div>

        {# ── Events ── #}
        <div class="table-card">
            <div class="table-scroll">
            <table class="w-100" data-testid="lrr-events-table">
                <thead><tr class="thead-row--strong">
                    <th class="th-white">Event</th><th class="th-white lrr-num">Races</th><th class="th-white lrr-num">Bets</th>
                    <th class="th-white lrr-num">Payouts</th><th class="th-white lrr-num">Commission</th><th class="th-white lrr-num">Revenue</th>
                    <th class="th-white lrr-num">Hold</th><th class="th-white lrr-num">Tickets</th><th class="th-white lrr-num">Players</th>
                </tr></thead>
                <tbody>
                {% for e in report.events %}
                    <tr class="table-row" data-testid="lrr-event-{{ e.eventId }}">
                        <td class="td-cell"><a href="{{ path('app_wfbo_event_show', {id: e.eventId, tab: 'report'}) }}" class="td-cell--dark fw-semibold" data-testid="lrr-event-link-{{ e.eventId }}">{{ e.date|date('D, M j') }}</a>
                            <div class="lrr-sub">{{ e.arena }}{% if e.pending > 0 %} · {{ _self.peso(e.pending) }} pending{% endif %}</div></td>
                        <td class="td-cell lrr-num">{{ e.races }}</td>
                        <td class="td-cell lrr-num">{{ _self.peso(e.stake) }}</td>
                        <td class="td-cell lrr-num">{{ _self.peso(e.payout) }}</td>
                        <td class="td-cell lrr-num">{{ _self.peso(e.commission) }}</td>
                        <td class="td-cell lrr-num fw-semibold {{ e.revenue >= 0 ? 'lrr-good' : 'lrr-bad' }}" data-testid="lrr-event-revenue-{{ e.eventId }}">{{ _self.peso(e.revenue) }}</td>
                        <td class="td-cell lrr-num">{{ _self.pct(e.hold) }}</td>
                        <td class="td-cell lrr-num">{{ e.tickets|number_format }}</td>
                        <td class="td-cell lrr-num">{{ e.players|number_format }}</td>
                    </tr>
                {% endfor %}
                </tbody>
                <tfoot><tr style="border-top:2px solid #d1d5db; background:#f1f5f9;">
                    <td class="td-cell fw-bold">Total</td><td class="td-cell"></td>
                    <td class="td-cell lrr-num fw-bold">{{ _self.peso(t.stake) }}</td>
                    <td class="td-cell lrr-num fw-bold">{{ _self.peso(t.payout) }}</td>
                    <td class="td-cell lrr-num fw-bold">{{ _self.peso(t.commission) }}</td>
                    <td class="td-cell lrr-num fw-bold {{ t.revenue >= 0 ? 'lrr-good' : 'lrr-bad' }}">{{ _self.peso(t.revenue) }}</td>
                    <td class="td-cell lrr-num fw-bold">{{ _self.pct(t.hold) }}</td>
                    <td class="td-cell lrr-num fw-bold">{{ t.tickets|number_format }}</td>
                    <td class="td-cell lrr-num fw-bold">{{ t.players|number_format }}</td>
                </tr></tfoot>
            </table>
            </div>
        </div>

        {# ── Bet types ── #}
        <p class="lrr-section">By bet type <span class="lrr-sub">(house result before agent commission)</span></p>
        <div class="card mb-2" data-testid="lrr-chart-types"><div class="card-body" style="height: 280px;"><canvas data-live-racing-report-target="types"></canvas></div></div>
        <div class="table-card">
            <div class="table-scroll">
            <table class="w-100" data-testid="lrr-types-table">
                <thead><tr class="thead-row--strong">
                    <th class="th-white">Bet type</th><th class="th-white lrr-num">Bets</th><th class="th-white lrr-num">Share</th>
                    <th class="th-white lrr-num">Payouts</th><th class="th-white lrr-num">Payout %</th><th class="th-white lrr-num">Payout bonus</th>
                    <th class="th-white lrr-num">House result</th>
                </tr></thead>
                <tbody>
                {% for b in report.betTypes %}
                    <tr class="table-row" data-testid="lrr-type-{{ b.key }}">
                        <td class="td-cell td-cell--dark fw-semibold">{{ b.label }}</td>
                        <td class="td-cell lrr-num">{{ _self.peso(b.stake) }}</td>
                        <td class="td-cell lrr-num">{{ b.share|number_format(1) }}%</td>
                        <td class="td-cell lrr-num">{{ _self.peso(b.payout) }}</td>
                        <td class="td-cell lrr-num fw-semibold {{ b.payoutPct > 100 ? 'lrr-bad' : '' }}">{{ _self.pct(b.payoutPct) }}</td>
                        <td class="td-cell lrr-num">{{ b.bonus > 0 ? '≈' ~ _self.peso(b.bonus) : '—' }}</td>
                        <td class="td-cell lrr-num fw-semibold {{ b.revenue >= 0 ? 'lrr-good' : 'lrr-bad' }}">{{ _self.peso(b.revenue) }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            </div>
        </div>
    </div>

    {# ── Top winners ── #}
    <p class="lrr-section">Top winners <span class="lrr-sub">(net payouts − bets across these events)</span></p>
    <div class="table-card">
        <div class="card-body p-0">
        {% if report.winners is empty %}
            <p class="td-empty--lg text-center">No player finished ahead.</p>
        {% else %}
            <div class="table-scroll">
            <table class="w-100" data-testid="lrr-winners-table">
                <thead><tr class="thead-row--strong">
                    <th class="th-white">Player</th><th class="th-white">Agent</th><th class="th-white lrr-num">Tickets</th>
                    <th class="th-white lrr-num">Winning tickets</th><th class="th-white lrr-num">Bets</th><th class="th-white lrr-num">Payouts</th><th class="th-white lrr-num">Net won</th>
                </tr></thead>
                <tbody>
                {% for w in report.winners %}
                    <tr class="table-row" data-testid="lrr-winner-{{ w.userId }}">
                        <td class="td-cell"><a href="{{ path('app_wfbo_user_transactions', {id: w.userId}) }}" class="td-cell--dark fw-semibold" style="text-decoration:none;">{{ w.name }}</a><div class="lrr-sub">{{ w.mobile }}</div></td>
                        <td class="td-cell">{{ w.agent ?? '—' }}</td>
                        <td class="td-cell lrr-num">{{ w.tickets|number_format }}</td>
                        <td class="td-cell lrr-num">{{ w.wins|number_format }}</td>
                        <td class="td-cell lrr-num">{{ _self.peso(w.stake) }}</td>
                        <td class="td-cell lrr-num">{{ _self.peso(w.payout) }}</td>
                        <td class="td-cell lrr-num fw-semibold lrr-bad">{{ _self.peso(w.net) }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            </div>
        {% endif %}
        </div>
    </div>
    {% endif %}

    <p class="lrr-sub mt-2">
        Same figures as each event's Report tab: settled (won + lost) bets, minus payouts, minus agent commission; test accounts excluded;
        commission to house agents counts as revenue. Events are picked by event date, so a night is never split. The payout bonus is estimated
        from the payout-bonus % settings (capped wins left out).
    </p>

{% endblock %}