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

{% block title %}Live Racing Settlements{% endblock %}
{% block wfbo_title %}Live Racing Settlements{% endblock %}

{% block wfbo_content %}

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

{% if eventData|length == 0 %}
    <div class="text-center py-5" data-testid="no-settlements-needed">
        <h3 class="text-body">All Settled</h3>
        <p class="text-body-secondary">No races with pending results to settle.</p>
    </div>
{% else %}
    {% for group in eventData %}
        {% set event = group.event %}
        <div class="card mb-4" data-testid="settlement-event-{{ event.id }}">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0" style="font-size:16px;">{{ event.management.name }} — {{ event.eventDate|date('M j, Y') }}</h4>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="data-table mb-0" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;">
                        <thead>
                            <tr class="thead-row--light">
                                <th class="th-gray">Race</th>
                                <th class="th-gray">Result</th>
                                <th class="th-gray">Dividends</th>
                                <th class="th-gray th-gray--right">Pending Bets</th>
                                <th class="th-gray"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for rd in group.races %}
                                {% set race = rd.race %}
                                <tr data-testid="settlement-race-row-{{ race.id }}">
                                    <td class="td-cell td-cell--dark" data-label="Race">Race {{ race.raceNumber }}</td>
                                    <td class="td-cell" data-label="Result">
                                        {% if race.result %}
                                            {% for finisher in race.result %}
                                                <span class="badge bg-secondary me-1">#{{ finisher.horseNumber }}</span>
                                            {% endfor %}
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                    <td class="td-cell" data-label="Dividends">
                                        {% if rd.dividendRows|length > 0 %}
                                            {% for row in rd.dividendRows %}
                                                <div style="font-size:12px;">
                                                    <span class="fw-semibold">{{ row.label }}</span>:
                                                    {% if row.refund %}<span class="badge bg-dark">Refund</span>{% endif %}
                                                    {% for c in row.combinations %}
                                                        {{ not loop.first ? ' · ' : (row.refund ? ' · ' : '') }}{% if c.selection %}{{ c.selection|capitalize }}{% else %}{{ c.numbers|join('-') }}{% endif %}: {{ c.dividend }}
                                                    {% else %}
                                                        {% if not row.refund %}—{% endif %}
                                                    {% endfor %}
                                                </div>
                                            {% endfor %}
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                    <td class="td-cell td-cell--right" data-label="Pending">
                                        <span class="badge bg-warning text-dark" data-testid="pending-count-{{ race.id }}">{{ rd.pendingCount }}</span>
                                    </td>
                                    <td class="td-cell td-cell--right">
                                        <div class="settle-actions d-inline-flex gap-1" data-testid="settle-actions-{{ race.id }}"
                                             data-settle-race-id="{{ race.id }}"
                                             data-settle-token="{{ csrf_token('wfbo_event_race_settle_' ~ race.id) }}"
                                             data-settle-mark-token="{{ csrf_token('wfbo_event_race_mark_settled_' ~ race.id) }}">
                                            <button type="button"
                                                    class="btn btn-sm btn-primary"
                                                    data-testid="btn-settle-race-{{ race.id }}"
                                                    onclick="settleRace(this)">
                                                Settle + Receipt
                                            </button>
                                        </div>
                                        <div class="settlement-progress d-none" data-testid="settlement-progress-{{ race.id }}" style="min-width:200px;">
                                            <div class="d-flex justify-content-between small text-muted mb-1">
                                                <span class="settlement-text" data-testid="settlement-text-{{ race.id }}">Settling…</span>
                                                <span class="settlement-percent" data-testid="settlement-percent-{{ race.id }}">0%</span>
                                            </div>
                                            <div class="progress" style="height:20px;">
                                                <div class="progress-bar progress-bar-striped progress-bar-animated"
                                                     role="progressbar"
                                                     data-testid="settlement-bar-{{ race.id }}"
                                                     style="width:0%;background:#d4af37;">
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endfor %}
{% endif %}

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
function settleRace(btn) {
    var actions = btn.closest('.settle-actions');
    var raceId = actions.dataset.settleRaceId;
    var token = actions.dataset.settleToken;
    var markToken = actions.dataset.settleMarkToken;
    var baseUrl = '{{ path('app_wfbo_event_race_settle', {id: 0}) }}';
    var settleUrl = baseUrl.replace('0', raceId);
    var markUrl = '{{ path('app_wfbo_event_race_mark_settled', {id: 0}) }}'.replace('0', raceId);
    actions.style.display = 'none';
    var progressEl = document.querySelector('[data-testid="settlement-progress-' + raceId + '"]');
    var barEl = document.querySelector('[data-testid="settlement-bar-' + raceId + '"]');
    var textEl = document.querySelector('[data-testid="settlement-text-' + raceId + '"]');
    var percentEl = document.querySelector('[data-testid="settlement-percent-' + raceId + '"]');
    var pendingCountEl = document.querySelector('[data-testid="pending-count-' + raceId + '"]');
    progressEl.classList.remove('d-none');
    // Fixed denominator for the progress bar: the race's pending-bet count at
    // page load. The settle endpoint only returns a live `remaining` count on
    // its final batch, so the bar is driven off this instead.
    var total = parseInt(pendingCountEl ? pendingCountEl.textContent : '0', 10) || 1;
    var processed = 0, won = 0, lost = 0, voided = 0, totalPayout = 0, afterId = 0;
    (function poll() {
        var url = settleUrl + '?afterId=' + afterId + '&receipt=1';
        fetch(url, { method: 'GET', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            processed += data.processed;
            won += data.won;
            lost += data.lost;
            voided += data.void;
            totalPayout += parseFloat(data.total_payout);
            afterId = data.nextAfterId;
            var pct = Math.min(100, Math.round((processed / total) * 100));
            barEl.style.width = pct + '%';
            percentEl.textContent = pct + '%';
            textEl.textContent = processed + ' / ' + total + ' bets';
            if (!data.done) {
                // Gap between requests so a small instance's PHP-FPM workers
                // aren't held back-to-back for the whole sweep.
                setTimeout(poll, 200);
                return;
            }
            barEl.classList.remove('progress-bar-animated', 'progress-bar-striped');
            barEl.style.background = '#22c55e';
            percentEl.textContent = '100%';
            textEl.textContent = processed + ' settled: ' + won + ' won, ' + lost + ' lost, ' + voided + ' void.';
            if (pendingCountEl) pendingCountEl.textContent = '0';
            // Mark race as settled
            var mfd = new FormData();
            mfd.set('_token', markToken);
            fetch(markUrl, { method: 'POST', body: mfd, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .catch(function () {
                textEl.textContent = 'Done but failed to mark settled.';
            });
        })
        .catch(function () {
            barEl.classList.remove('progress-bar-animated', 'progress-bar-striped');
            barEl.style.background = '#dc2626';
            barEl.style.width = '100%';
            textEl.textContent = 'Error during settlement.';
        });
    })();
}
</script>
{% endblock %}