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

{% block wfbo_title %}Event Details{% endblock %}

{% block wfbo_content %}

    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">{{ flash }}</div>
    {% endfor %}

    <div class="mb-4">
        <a href="{{ path('app_wfbo_events') }}"
           class="back-link">
            ← Back to Event Management
        </a>
    </div>

    <div class="card mb-4">
        <div class="card-body">

            <h2 class="wfbo-card-title mb-3">
                {{ event.management.name }} — {{ event.eventDate|date('Y-m-d') }}
            </h2>

            <div class="detail-grid mb-3">
                <div class="detail-item">
                    <div class="detail-label">Arena</div>
                    <div class="detail-value">{{ event.management.name }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Event Date</div>
                    <div class="detail-value">{{ event.eventDate|date('Y-m-d') }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Video Link</div>
                    <div class="detail-value">
                        {% if event.videoUrl %}
                            <a href="{{ event.videoUrl }}" target="_blank" rel="noopener">{{ event.videoUrl }}</a>
                        {% else %}
                            —
                        {% endif %}
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Status</div>
                    <div class="detail-value">
                        {% if event.published %}
                            <span class="badge-role badge-role--active" data-testid="event-status">Published</span>
                        {% else %}
                            <span class="badge-role badge-role--suspended" data-testid="event-status">Draft</span>
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if not event.published %}
                <form method="POST"
                      action="{{ path('app_wfbo_event_publish', {id: event.id}) }}"
                      onsubmit="return confirm('Publish this event? Races and horses cannot be edited or deleted once published.');"
                      class="m-0">
                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_publish_' ~ event.id) }}">
                    <button type="submit"
                            class="btn btn-admin-save"
                            data-testid="btn-publish-event">
                        Publish Event
                    </button>
                </form>
            {% else %}
                <a href="{{ path('app_wfbo_live_racing_monitor', {event: event.id}) }}"
                   target="_blank" rel="noopener"
                   class="btn btn-outline-secondary btn-sm"
                   data-testid="wfbo-event-open-monitor">
                    🖥 Live Monitor ↗
                </a>
            {% endif %}

        </div>
    </div>

    <div class="d-flex gap-2 mb-3 tabs-border-bottom">
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'races'}) }}"
           class="tab-link--block {% if currentTab == 'races' %}is-active{% endif %}"
           data-testid="tab-races">
            Races <span class="tab-count">({{ races|length }})</span>
        </a>
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'report'}) }}"
           class="tab-link--block {% if currentTab == 'report' %}is-active{% endif %}"
           data-testid="tab-report">
            Report
        </a>
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'win-rates'}) }}"
           class="tab-link--block {% if currentTab == 'win-rates' %}is-active{% endif %}"
           data-testid="tab-win-rates">
            Win Rates
        </a>
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'puro'}) }}"
           class="tab-link--block {% if currentTab == 'puro' %}is-active{% endif %}"
           data-testid="tab-puro">
            Puro
        </a>
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'bet-types'}) }}"
           class="tab-link--block {% if currentTab == 'bet-types' %}is-active{% endif %}"
           data-testid="tab-bet-types">
            Bet Types
        </a>
        <a href="{{ path('app_wfbo_live_racing_audit', {eventId: event.id}) }}"
           class="tab-link--block"
           data-testid="tab-audit">
            Audit
        </a>
        <a href="{{ path('app_wfbo_event_settlements', {id: event.id}) }}"
           class="tab-link--block"
           data-testid="tab-settlements">
            Settlements
        </a>
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'earners'}) }}"
           class="tab-link--block {% if currentTab == 'earners' %}is-active{% endif %}"
           data-testid="tab-earners">
            Top Earners
        </a>
    </div>

    {% if currentTab == 'races' %}

    <div class="d-flex align-items-center justify-content-between mb-4">
        <h2 class="wfbo-card-title mb-0">Races</h2>
        <a href="{{ path('app_wfbo_event_race_new', {id: event.id}) }}"
           class="pill-link--primary"
           data-testid="btn-new-race">
            + Add Race
        </a>
    </div>

    <div class="table-card">
        <div class="card-body p-0">

            {% if races is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state-races">
                    No races added yet.
                </p>
            {% else %}
                <table class="w-100 stack-table" data-testid="races-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Race Number</th>
                            <th class="th-white">Horses</th>
                            <th class="th-white">Status</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for race in races %}
                        <tr class="table-row" data-testid="race-row-{{ race.id }}">
                            <td class="td-cell td-cell--dark fw-semibold" data-label="Race Number">{{ race.raceNumber }}</td>
                            <td class="td-cell" data-label="Horses" data-testid="race-horse-count-{{ race.id }}">{{ horseCountByRaceId[race.id] ?? 0 }}</td>
                            <td class="td-cell" data-label="Status">
                                {% if race.open %}
                                    <span class="badge-role badge-role--active" data-testid="race-status-{{ race.id }}">Open</span>
                                {% else %}
                                    <span class="badge-role badge-role--suspended" data-testid="race-status-{{ race.id }}">Closed</span>
                                {% endif %}
                            </td>
                            <td class="td-cell" data-label="Actions">
                                <div class="d-flex gap-2 align-items-center">
                                    <a href="{{ path('app_wfbo_event_race_show', {id: race.id}) }}"
                                       class="pill-link--secondary"
                                       data-testid="btn-view-race-{{ race.id }}">
                                        View
                                    </a>
                                    {% if race.open and not event.published %}
                                    <form method="POST"
                                          action="{{ path('app_wfbo_event_race_delete', {id: race.id}) }}"
                                          onsubmit="return confirm('Delete this race?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_race_delete_' ~ race.id) }}">
                                        <button type="submit"
                                                class="btn-reject"
                                                data-testid="btn-delete-race-{{ race.id }}">
                                            Delete
                                        </button>
                                    </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}

        </div>
    </div>

    {% endif %}

    {% if currentTab == 'report' %}

    <div class="d-flex align-items-center justify-content-between mb-2">
        <h2 class="wfbo-card-title mb-0">Report</h2>
    </div>
    <p class="text-muted small mb-4" data-testid="report-combo-note">
        Multi-race bets (Daily Double, Pick 4/5/6, …) are attributed entirely to their
        last leg's race, not split across every race they cover, so these rows sum to
        the event <strong>Total</strong> — the true event net revenue, each bet counted
        once, test accounts excluded, matching the dashboard.
    </p>

    <div class="table-card">
        <div class="card-body p-0">

            {% if races is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state-report">
                    No races added yet.
                </p>
            {% else %}
                <table class="w-100 stack-table" data-testid="report-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Race Number</th>
                            <th class="th-white">Bets</th>
                            <th class="th-white">Bet Amount</th>
                            <th class="th-white">Payout</th>
                            <th class="th-white">Commission</th>
                            <th class="th-white">Revenue</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for race in races %}
                        {% set s = raceStatsByRaceId[race.id] ?? {count: 0, betAmount: '0.00', payout: '0.00', commission: '0.00', revenue: '0.00'} %}
                        <tr class="table-row" data-testid="report-row-{{ race.id }}">
                            <td class="td-cell td-cell--dark fw-semibold" data-label="Race Number">{{ race.raceNumber }}</td>
                            <td class="td-cell" data-label="Bets" data-testid="report-bet-count-{{ race.id }}">{{ s.count }}</td>
                            <td class="td-cell" data-label="Bet Amount" data-testid="report-bet-amount-{{ race.id }}">₱{{ s.betAmount|number_format(2) }}</td>
                            <td class="td-cell" data-label="Payout" data-testid="report-payout-{{ race.id }}">₱{{ s.payout|number_format(2) }}</td>
                            <td class="td-cell" data-label="Commission" data-testid="report-commission-{{ race.id }}">₱{{ s.commission|number_format(2) }}</td>
                            <td class="td-cell" data-label="Revenue" data-testid="report-revenue-{{ race.id }}">₱{{ s.revenue|number_format(2) }}</td>
                        </tr>
                        {% endfor %}
                        <tr class="table-row fw-bold" data-testid="report-totals-row">
                            <td class="td-cell td-cell--dark" data-label="Race Number">Total</td>
                            <td class="td-cell" data-label="Bets" data-testid="report-total-bet-count">{{ reportTotals.count }}</td>
                            <td class="td-cell" data-label="Bet Amount" data-testid="report-total-bet-amount">₱{{ reportTotals.betAmount|number_format(2) }}</td>
                            <td class="td-cell" data-label="Payout" data-testid="report-total-payout">₱{{ reportTotals.payout|number_format(2) }}</td>
                            <td class="td-cell" data-label="Commission" data-testid="report-total-commission">₱{{ reportTotals.commission|number_format(2) }}</td>
                            <td class="td-cell" data-label="Revenue" data-testid="report-total-revenue">₱{{ reportTotals.revenue|number_format(2) }}</td>
                        </tr>
                    </tbody>
                </table>
            {% endif %}

        </div>
    </div>

    {% endif %}

    {% if currentTab == 'win-rates' %}

    <style>
    .wr-scroll { overflow-x: auto; }
    .wr-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
    .wr-table th, .wr-table td { padding: 10px 12px; border-bottom: 1px solid #eef0f3; vertical-align: top; white-space: nowrap; }
    .wr-table thead th { position: sticky; top: 0; }
    .wr-table .wr-race { font-weight: 700; color: #111827; background: #fff; position: sticky; left: 0; z-index: 1; }
    .wr-table .wr-all, .wr-table tr.wr-total td { background: #f8fafc; }
    .wr-table tr.wr-total td { font-weight: 700; border-top: 2px solid #e5e7eb; }
    .wr-rate { font-size: 15px; font-weight: 800; line-height: 1.1; }
    .wr-sub { font-size: 11px; color: #6b7280; margin-top: 2px; }
    .wr-rate-label { font-size: 11px; font-weight: 600; color: #6b7280; }
    .wr-none { color: #9ca3af; font-size: 12px; }
    .wr-na { color: #d1d5db; }
    .wr-hot  { color: #15803d; }
    .wr-cold { color: #b91c1c; }
    </style>

    {% macro wr_cell(c) %}
        {% if not c.offered %}
            <span class="wr-na" title="Not offered on this race">—</span>
        {% elseif c.settled == 0 %}
            <span class="wr-none">No settled bets</span>
        {% else %}
            {# Headline = payout % (return to player), coloured from the house's
               side: red over 100% (house lost), green under 100% (house won),
               neutral at exactly 100% (breakeven). #}
            {% set p = c.payoutRate %}
            {% set tone = p is null ? '' : (p > 100 ? 'wr-cold' : (p < 100 ? 'wr-hot' : '')) %}
            {% set toneTitle = tone == 'wr-cold' ? 'House lost: paid out more than it took in' : (tone == 'wr-hot' ? 'House won: paid out less than it took in' : '') %}
            <div class="wr-rate {{ tone }}"{% if toneTitle %} title="{{ toneTitle }}"{% endif %}><span data-role="payout-rate">{{ p is null ? '—' : p|number_format(1) ~ '%' }}</span> <span class="wr-rate-label">payout</span></div>
            <div class="wr-sub">Win <span data-role="win-rate">{{ c.winRate|number_format(1) }}%</span> · <span data-role="won-settled">{{ c.won }}/{{ c.settled }} won</span></div>
        {% endif %}
    {% endmacro %}

    <div class="d-flex align-items-center justify-content-between mb-2 flex-wrap gap-2">
        <h2 class="wfbo-card-title mb-0">Win Rates</h2>
        {% if winRateMatrix is not null and winRateMatrix.columns is not empty and races is not empty %}
            <a href="{{ path('app_wfbo_event_win_rates_export', {id: event.id}) }}"
               class="pill-link--secondary"
               data-turbo="false"
               data-testid="btn-export-win-rates-pdf">
                Export PDF
            </a>
        {% endif %}
    </div>
    <p class="text-muted small mb-4" data-testid="win-rates-note">
        <strong>Payout %</strong> (large) = amount paid out ÷ amount staked on settled tickets —
        <span class="wr-cold fw-semibold">red over 100%</span> — the house lost (paid out more than it took in);
        <span class="wr-hot fw-semibold">green under 100%</span> — the house won.
        <strong>Win %</strong> = winning tickets ÷ settled tickets (a boxed ticket counts once — won if any combo won).
        Settled bets only (won + lost), test accounts excluded; multi-race bets count under their last leg's race.
    </p>

    <div class="table-card">
        <div class="card-body p-0">
            {% if winRateMatrix is null or winRateMatrix.columns is empty or races is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state-win-rates">
                    {{ races is empty ? 'No races added yet.' : 'No bet types offered on this event yet.' }}
                </p>
            {% else %}
                {% import _self as wr %}
                <div class="wr-scroll">
                <table class="wr-table" data-testid="win-rates-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white wr-race">Race</th>
                            {% for col in winRateMatrix.columns %}
                                <th class="th-white" data-testid="wr-col-{{ col.key }}">{{ col.label }}</th>
                            {% endfor %}
                            <th class="th-white">All bet types</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in winRateMatrix.rows %}
                        <tr data-testid="wr-row-{{ row.key }}">
                            <td class="wr-race">{{ row.label }}</td>
                            {% for col in winRateMatrix.columns %}
                                <td data-testid="wr-{{ row.key }}-{{ col.key }}">{{ wr.wr_cell(row.cells[col.key]) }}</td>
                            {% endfor %}
                            <td class="wr-all" data-testid="wr-{{ row.key }}-all">{{ wr.wr_cell(row.all) }}</td>
                        </tr>
                        {% endfor %}
                        <tr class="wr-total" data-testid="wr-row-total">
                            <td class="wr-race">Total</td>
                            {% for col in winRateMatrix.columns %}
                                <td data-testid="wr-total-{{ col.key }}">{{ wr.wr_cell(winRateMatrix.totals[col.key]) }}</td>
                            {% endfor %}
                            <td data-testid="wr-total-all">{{ wr.wr_cell(winRateMatrix.grandTotal) }}</td>
                        </tr>
                    </tbody>
                </table>
                </div>
            {% endif %}
        </div>
    </div>

    {% endif %}

    {% if currentTab == 'puro' %}

    <style>
    .puro-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
    .puro-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
    .puro-title { font-size: 15px; font-weight: 800; color: #111827; margin: 0; }
    .puro-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #374151; }
    .puro-status--running { background: #fef3c7; color: #92400e; }
    .puro-status--finished { background: #dcfce7; color: #166534; }
    .puro-legs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
    .puro-leg { font-size: 12px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 8px; color: #6b7280; }
    .puro-leg--done { border-color: #86efac; background: #f0fdf4; color: #166534; font-weight: 600; }
    .puro-leg--next { border-color: #fcd34d; background: #fffbeb; color: #92400e; font-weight: 600; }
    .puro-big { font-size: 26px; font-weight: 800; color: #111827; line-height: 1.1; }
    .puro-sub { font-size: 12px; color: #6b7280; }
    .puro-bar { height: 6px; background: #f3f4f6; border-radius: 3px; min-width: 80px; overflow: hidden; }
    .puro-bar > span { display: block; height: 100%; background: #f59e0b; }
    .puro-h { font-size: 12px; font-weight: 700; color: #374151; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .03em; }
    .puro-scroll { overflow-x: auto; }
    </style>

    {% set typeLabels = {'pick_4': 'Pick 4', 'pick_5': 'Pick 5', 'pick_6': 'Pick 6', 'wta': 'WTA'} %}

    <div class="d-flex align-items-center justify-content-between mb-2 flex-wrap gap-2">
        <h2 class="wfbo-card-title mb-0">Puro — Pick 4 / 5 / 6 &amp; WTA tickets still alive</h2>
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'puro'}) }}" class="pill-link--secondary" data-testid="btn-puro-refresh">Refresh</a>
    </div>
    <p class="puro-sub mb-3">A ticket is <strong>puro</strong> while it has hit the winner of every leg run so far. A scratched pick in a finished leg is out. Void bets and test accounts are not counted.</p>

    {% if puroCards is empty %}
        <p class="td-empty--lg text-center" data-testid="puro-empty">No Pick 4 / 5 / 6 or WTA offered in this event.</p>
    {% endif %}

    {% for card in puroCards %}
        {% set id = card.eventBetTypeId %}
        {% set first = card.legs|first %}
        {% set last = card.legs|last %}
        <div class="puro-card" data-testid="puro-card-{{ id }}">
            <div class="puro-head">
                <p class="puro-title">{{ typeLabels[card.betType] ?? card.betType }} · R{{ first.raceNumber }}–R{{ last.raceNumber }}</p>
                {% if card.status == 'finished' %}
                    <span class="puro-status puro-status--finished" data-testid="puro-status-{{ id }}">Finished — {{ card.alive.tickets }} winning ticket{{ card.alive.tickets != 1 ? 's' : '' }}</span>
                {% elseif card.status == 'running' %}
                    <span class="puro-status puro-status--running" data-testid="puro-status-{{ id }}">{{ card.completedLegs }} of {{ card.legs|length }} legs run</span>
                {% else %}
                    <span class="puro-status" data-testid="puro-status-{{ id }}">Not started</span>
                {% endif %}
            </div>

            <div class="puro-legs">
                {% for leg in card.legs %}
                    {% if loop.index0 < card.completedLegs %}
                        <span class="puro-leg puro-leg--done" title="{{ leg.winnerName }}">R{{ leg.raceNumber }} #{{ leg.winnerNumber }} ✓</span>
                    {% elseif loop.index0 == card.completedLegs %}
                        <span class="puro-leg puro-leg--next">R{{ leg.raceNumber }} next</span>
                    {% else %}
                        <span class="puro-leg">R{{ leg.raceNumber }}</span>
                    {% endif %}
                {% endfor %}
            </div>

            <div data-testid="puro-headline-{{ id }}">
                <div class="puro-big">{{ card.alive.ticketPct|number_format(1) }}% <span class="puro-sub" style="font-size:14px; font-weight:600;">puro</span></div>
                <div class="puro-sub">
                    <strong>{{ card.alive.tickets|number_format }}</strong> of {{ card.total.tickets|number_format }} tickets ·
                    {{ card.alive.combos|number_format }} of {{ card.total.combos|number_format }} combos ({{ card.alive.comboPct|number_format(1) }}%) ·
                    ₱{{ card.alive.stake|number_format(2) }} of ₱{{ card.total.stake|number_format(2) }} stake ·
                    {{ card.alive.players|number_format }} of {{ card.total.players|number_format }} players
                </div>
            </div>

            {% if card.funnel is not empty %}
                <p class="puro-h">After each leg</p>
                <div class="puro-scroll">
                <table class="w-100" data-testid="puro-funnel-{{ id }}">
                    <thead><tr class="thead-row--strong">
                        <th>Leg</th><th>Tickets puro</th><th></th><th class="text-end">Combos</th><th class="text-end">Stake</th><th class="text-end">Players</th>
                    </tr></thead>
                    <tbody>
                    {% for f in card.funnel %}
                        <tr data-testid="puro-funnel-{{ id }}-row">
                            <td>After R{{ f.raceNumber }} <span class="puro-sub">(#{{ f.winnerNumber }} won)</span></td>
                            <td><strong>{{ f.ticketPct|number_format(1) }}%</strong> <span class="puro-sub">{{ f.tickets|number_format }}</span></td>
                            <td style="width: 30%;"><div class="puro-bar"><span style="width: {{ f.ticketPct }}%;"></span></div></td>
                            <td class="text-end">{{ f.combos|number_format }} <span class="puro-sub">{{ f.comboPct|number_format(1) }}%</span></td>
                            <td class="text-end">₱{{ f.stake|number_format(2) }}</td>
                            <td class="text-end">{{ f.players|number_format }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                </div>
            {% endif %}

            {% if card.nextLeg is not null and card.alive.tickets > 0 %}
                <p class="puro-h">Next leg R{{ card.nextLeg.raceNumber }} — horses the puro tickets need</p>
                <div class="puro-scroll">
                <table class="w-100" data-testid="puro-next-{{ id }}">
                    <thead><tr class="thead-row--strong">
                        <th>Horse</th><th>Share of puro tickets</th><th></th><th class="text-end">Tickets</th><th class="text-end">Combos</th><th class="text-end">Stake</th>
                    </tr></thead>
                    <tbody>
                    {% for h in card.nextLeg.horses %}
                        <tr data-testid="puro-next-{{ id }}-row">
                            <td><strong>#{{ h.number }}</strong> {{ h.name }}{% if h.scratched %} <span class="puro-status" title="Scratched">scratched</span>{% endif %}</td>
                            <td><strong>{{ h.ticketShare|number_format(1) }}%</strong></td>
                            <td style="width: 30%;"><div class="puro-bar"><span style="width: {{ h.ticketShare }}%;"></span></div></td>
                            <td class="text-end">{{ h.tickets|number_format }}</td>
                            <td class="text-end">{{ h.combos|number_format }}</td>
                            <td class="text-end">₱{{ h.stake|number_format(2) }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                </div>
                <p class="puro-sub mt-1 mb-0">A boxed ticket can ride several horses, so shares can add up to more than 100%.</p>
            {% elseif card.status == 'running' and card.alive.tickets == 0 %}
                <p class="puro-sub mt-2 mb-0" data-testid="puro-none-alive-{{ id }}">No ticket is puro anymore.</p>
            {% endif %}
        </div>
    {% endfor %}

    {% endif %}

    {% if currentTab == 'bet-types' %}

    <div class="d-flex align-items-center justify-content-between mb-2">
        <h2 class="wfbo-card-title mb-0">Bet Types</h2>
    </div>

    {% if not event.published %}
    <form method="POST"
          action="{{ path('app_wfbo_event_bet_types_save', {id: event.id}) }}"
          data-testid="bet-types-form">
        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_bet_types_' ~ event.id) }}">
    {% endif %}

    {% if races is empty %}
        <p class="form-hint mb-4">Add races first before configuring bet types.</p>
    {% else %}

        <h3 class="wfbo-card-title" style="font-size: 14px;">Single-race bets</h3>
        {% if event.published %}
            <style>
            .bt-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1px 8px; font-weight: 600; }
            .bt-chip form { margin: 0; }
            .bt-chip__remove { border: 0; background: none; color: #b91c1c; font-size: 16px; line-height: 1; padding: 0 0 0 2px; cursor: pointer; }
            .bt-chip__remove:hover { color: #7f1d1d; }
            </style>
            <p class="form-hint mb-3" data-testid="bet-types-published-hint">
                The event is published: bet types can no longer be added.
                {% if is_granted('ROLE_SUPER_ADMIN') %}Use &times; to remove a single-race bet type from a race that has no result yet &mdash; every bet of that type on that race is voided and refunded, and it can't be added back.{% endif %}
            </p>
        {% else %}
            <p class="form-hint mb-3">Tick every race each bet type is offered on. Each is graded off that race alone.</p>
        {% endif %}

        <div class="table-card mb-4">
            <div class="card-body p-0">
                <table class="w-100 stack-table" data-testid="bet-types-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Bet Type</th>
                            <th class="th-white">Races Offered On</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for betType in liveRacingBetTypes|filter(bt => bt.kind == 'single') %}
                        {% set instance = (eventBetTypes[betType.value] ?? [])|first %}
                        {% set legIds = instance ? instance.legs : [] %}
                        <tr class="table-row" data-testid="bet-type-row-{{ betType.value }}">
                            <td class="td-cell td-cell--dark fw-semibold" data-label="Bet Type">{{ betType.label }}</td>
                            <td class="td-cell" data-label="Races Offered On">
                                <div class="d-flex flex-wrap gap-3">
                                    {% for race in races %}
                                        <label class="form-check-label d-flex align-items-center gap-1">
                                            {% if event.published %}
                                                {% if race.id in legIds %}
                                                    <span class="bt-chip" data-testid="chip-bet-type-{{ betType.value }}-{{ race.id }}">
                                                        {{ race.raceNumber }}
                                                        {% if is_granted('ROLE_SUPER_ADMIN') and not race.hasResult %}
                                                            {% set pending = pendingByTypeRace[instance.id][race.id] ?? {count: 0, stake: 0} %}
                                                            {% set confirmText = 'Remove ' ~ betType.label ~ ' from Race ' ~ race.raceNumber ~ '?\n\n'
                                                                ~ pending.count ~ ' pending bet' ~ (pending.count == 1 ? '' : 's') ~ ' (₱' ~ pending.stake|number_format(2) ~ ') will be voided and refunded.\n\n'
                                                                ~ 'This cannot be undone - the bet type cannot be added back to this race.' %}
                                                            <form method="POST" action="{{ path('app_wfbo_event_bet_type_remove', {id: event.id}) }}" class="d-inline"
                                                                  onsubmit="return confirm('{{ confirmText|e('js') }}');">
                                                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_bet_type_remove_' ~ event.id) }}">
                                                                <input type="hidden" name="bet_type" value="{{ betType.value }}">
                                                                <input type="hidden" name="race_id" value="{{ race.id }}">
                                                                <button type="submit" class="bt-chip__remove" title="Remove {{ betType.label }} from Race {{ race.raceNumber }} (void + refund {{ pending.count }} bet{{ pending.count == 1 ? '' : 's' }})"
                                                                        data-testid="btn-remove-bet-type-{{ betType.value }}-{{ race.id }}">&times;</button>
                                                            </form>
                                                        {% endif %}
                                                    </span>
                                                {% endif %}
                                            {% else %}
                                                <input type="checkbox"
                                                       class="form-check-input"
                                                       name="legs[{{ betType.value }}][]"
                                                       value="{{ race.id }}"
                                                       {{ race.id in legIds ? 'checked' : '' }}
                                                       data-testid="checkbox-leg-{{ betType.value }}-{{ race.id }}">
                                                {{ race.raceNumber }}
                                            {% endif %}
                                        </label>
                                    {% endfor %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <h3 class="wfbo-card-title" style="font-size: 14px;">Multi-race bets</h3>
        <p class="form-hint mb-3">
            Multi-race bets combine races based on the betting rules (e.g. Daily Double = 2 consecutive races;
            Extra Double = 2 races with one skipped in between; WTA = any races). You can add multiple combos of the
            same bet type &mdash; e.g. two separate Daily Doubles on different race pairs. To remove a combo, uncheck
            all of its races and save.
        </p>

        {% for betType in liveRacingBetTypes|filter(bt => bt.kind == 'multi') %}
        {% set instances = eventBetTypes[betType.value] ?? [] %}
        <div class="card mb-3" data-testid="bet-type-row-{{ betType.value }}">
            <div class="card-body">
                <h4 class="wfbo-card-title" style="font-size: 13px;">
                    {{ betType.label }}
                    <span class="form-hint" style="display:inline; font-weight: normal;">&mdash; {{ betType.legPatternHint }}</span>
                </h4>

                <div id="combo-list-{{ betType.value }}">
                    {% for instance in instances %}
                    <div class="d-flex flex-wrap align-items-center gap-3 mb-2 combo-row" data-testid="combo-{{ betType.value }}-{{ loop.index0 }}">
                        {% for race in races %}
                            <label class="form-check-label d-flex align-items-center gap-1">
                                {% if event.published %}
                                    {% if race.id in instance.legs %}{{ race.raceNumber }}{% endif %}
                                {% else %}
                                    <input type="checkbox"
                                           class="form-check-input"
                                           name="multi[{{ betType.value }}][{{ loop.parent.loop.index0 }}][]"
                                           value="{{ race.id }}"
                                           {{ race.id in instance.legs ? 'checked' : '' }}
                                           data-testid="checkbox-combo-{{ betType.value }}-{{ loop.parent.loop.index0 }}-{{ race.id }}">
                                    {{ race.raceNumber }}
                                {% endif %}
                            </label>
                        {% endfor %}
                        {% if not event.published %}
                            <button type="button"
                                    class="btn-reject"
                                    data-remove-combo
                                    data-testid="btn-remove-combo-{{ betType.value }}-{{ loop.index0 }}">
                                Remove
                            </button>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                <p class="form-hint mb-2" data-testid="empty-combos-{{ betType.value }}"{% if instances is not empty %} style="display:none;"{% endif %}>
                    Not configured.
                </p>

                {% if not event.published %}
                <template id="combo-template-{{ betType.value }}">
                    <div class="d-flex flex-wrap align-items-center gap-3 mb-2 combo-row" data-testid="combo-{{ betType.value }}-new-__INDEX__">
                        {% for race in races %}
                            <label class="form-check-label d-flex align-items-center gap-1">
                                <input type="checkbox"
                                       class="form-check-input"
                                       name="multi[{{ betType.value }}][__INDEX__][]"
                                       value="{{ race.id }}"
                                       data-testid="checkbox-combo-{{ betType.value }}-new-__INDEX__-{{ race.id }}">
                                {{ race.raceNumber }}
                            </label>
                        {% endfor %}
                        <button type="button" class="btn-reject" data-remove-combo data-testid="btn-remove-combo-{{ betType.value }}-new-__INDEX__">
                            Remove
                        </button>
                    </div>
                </template>
                <button type="button"
                        class="pill-link--secondary"
                        data-add-combo="{{ betType.value }}"
                        data-add-combo-next="{{ instances|length }}"
                        data-testid="btn-add-combo-{{ betType.value }}">
                    + Add {{ betType.label }} combo
                </button>
                <p class="form-hint mb-0 mt-2">
                    Click "+ Add {{ betType.label }} combo" to configure a combo &mdash; click it again to add
                    another before saving.
                </p>
                {% endif %}
            </div>
        </div>
        {% endfor %}

    {% endif %}

    {% if not event.published %}
        <div class="mb-4">
            <button type="submit"
                    class="btn btn-admin-save"
                    data-testid="btn-save-bet-types">
                Save Bet Types
            </button>
        </div>
    </form>
    {% endif %}

    {% if not event.published %}
    <script>
        // Multi-race combo rows start empty (no blank row by default): clicking
        // "+ Add {type} combo" instantiates one from that bet type's <template>,
        // and "Remove" deletes a row (existing or freshly-added) outright. The
        // backend accepts any number of multi[key][N][] groups per submit and
        // simply skips indices missing from the payload, so removing a row here
        // needs no server round-trip - it just won't be there when Save runs.
        document.addEventListener('click', function (event) {
            var addButton = event.target.closest('[data-add-combo]');
            if (addButton) {
                event.preventDefault();

                var key = addButton.getAttribute('data-add-combo');
                var list = document.getElementById('combo-list-' + key);
                var template = document.getElementById('combo-template-' + key);
                if (!list || !template) {
                    return;
                }

                var nextIndex = parseInt(addButton.getAttribute('data-add-combo-next'), 10);
                var html = template.innerHTML.split('__INDEX__').join(String(nextIndex));
                var wrapper = document.createElement('div');
                wrapper.innerHTML = html.trim();
                list.appendChild(wrapper.firstElementChild);
                addButton.setAttribute('data-add-combo-next', String(nextIndex + 1));

                var emptyHint = document.querySelector('[data-testid="empty-combos-' + key + '"]');
                if (emptyHint) {
                    emptyHint.style.display = 'none';
                }

                return;
            }

            var removeButton = event.target.closest('[data-remove-combo]');
            if (removeButton) {
                event.preventDefault();
                var row = removeButton.closest('.combo-row');
                var list = row ? row.closest('[id^="combo-list-"]') : null;
                if (row) {
                    row.remove();
                }
                if (list && list.children.length === 0) {
                    var key = list.id.replace('combo-list-', '');
                    var emptyHint = document.querySelector('[data-testid="empty-combos-' + key + '"]');
                    if (emptyHint) {
                        emptyHint.style.display = '';
                    }
                }
            }
        });
    </script>
    {% endif %}

    {% endif %}

    {% if currentTab == 'earners' %}

        <div class="card">
            <div class="card-body">
                <h3 class="wfbo-card-title mb-3">Top Earners</h3>
                <p class="form-hint mb-3">Players who won the most on this event, ranked by total payout.</p>

                {% if topEarners is empty %}
                    <p class="text-muted" data-testid="earners-empty">No winners yet for this event.</p>
                {% else %}
                    <div class="table-responsive">
                        <table class="w-100 stack-table" data-testid="earners-table">
                            <thead>
                                <tr class="thead-row--strong">
                                    <th class="th-white">#</th>
                                    <th class="th-white">Player</th>
                                    <th class="th-white">Won</th>
                                    <th class="th-white">Staked</th>
                                    <th class="th-white">Bets</th>
                                    <th class="th-white">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for earner in topEarners %}
                                    <tr class="table-row" data-testid="earner-row-{{ earner.userId }}">
                                        <td class="td-cell fw-bold">{{ loop.index }}</td>
                                        <td class="td-cell" data-label="Player">
                                            <a href="{{ path('app_wfbo_user_transactions', {id: earner.userId}) }}" style="color:inherit; text-decoration:underline; text-underline-offset:2px;">
                                                {{ earner.firstName }} {{ earner.lastName }}
                                            </a>
                                            <br><small class="text-muted">{{ earner.mobileNumber }}</small>
                                        </td>
                                        <td class="td-cell" data-label="Won" style="color:#059669; font-weight:600;">₱{{ earner.totalPayout|number_format(2) }}</td>
                                        <td class="td-cell" data-label="Staked">₱{{ earner.totalStaked|number_format(2) }}</td>
                                        <td class="td-cell" data-label="Bets">{{ earner.betCount }}</td>
                                        <td class="td-cell" data-label="Status">
                                            {% if earner.isOnHold %}
                                                <span class="badge-role" style="background:#f59e0b;color:#ffffff;">On Hold</span>
                                                <form method="post" action="{{ path('app_wfbo_user_action', {id: earner.userId, type: 'unhold'}) }}" style="display:inline;" data-turbo="false">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ earner.userId) }}">
                                                    <button type="submit" class="btn btn-sm btn-outline-secondary" style="font-size:11px;padding:2px 8px;" data-testid="btn-unhold-{{ earner.userId }}">Unhold</button>
                                                </form>
                                            {% else %}
                                                <span class="badge-role badge-role--active">Active</span>
                                                <form method="post" action="{{ path('app_wfbo_user_action', {id: earner.userId, type: 'hold'}) }}" style="display:inline;" data-turbo="false">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ earner.userId) }}">
                                                    <button type="submit" class="btn btn-sm btn-outline-warning" style="font-size:11px;padding:2px 8px;" data-testid="btn-hold-{{ earner.userId }}">Hold</button>
                                                </form>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>

    {% endif %}

{% endblock %}