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

{% block wfbo_title %}Live Racing Bets{% endblock %}

{% block wfbo_content %}

    {% set presets = [
        {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_live_racing_bets', {period: p.key, status: status, event_id: eventId, reference: reference, bet_type: betType, race_number: raceNumber}) }}"
               class="period-pill {% if period.period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}
    </div>

    {# ── Overall stats row ── #}
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Total Tickets</p>
                    <p class="stat-value--lg" data-testid="stat-total">{{ stats.total }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Pending</p>
                    <p class="stat-value--lg" data-testid="stat-pending">{{ stats.pending }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Won / Lose / Void / Mixed</p>
                    <p class="stat-value--lg" data-testid="stat-outcomes">
                        <span style="color:#059669;">{{ stats.won }}</span> /
                        <span style="color:#dc2626;">{{ stats.lost }}</span> /
                        <span style="color:#6b7280;">{{ stats.void }}</span> /
                        <span style="color:#7c3aed;" data-testid="stat-mixed">{{ stats.mixed }}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Staked / Paid Out</p>
                    <p class="stat-value--lg" style="font-size:20px;" data-testid="stat-amounts">
                        ₱{{ stats.totalStaked|number_format(2) }} / ₱{{ stats.totalPayout|number_format(2) }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    {# ── Filters ── #}
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ path('app_wfbo_live_racing_bets') }}" class="row g-3 align-items-end">
                <input type="hidden" name="period" value="{{ period.period }}">
                <div class="col-12 col-md-4">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select form-select-sm" data-testid="select-status">
                        <option value="">All</option>
                        <option value="pending" {{ status == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="won" {{ status == 'won' ? 'selected' : '' }}>Won</option>
                        <option value="lost" {{ status == 'lost' ? 'selected' : '' }}>Lose</option>
                        <option value="void" {{ status == 'void' ? 'selected' : '' }}>Void</option>
                        <option value="mixed" {{ status == 'mixed' ? 'selected' : '' }}>Mixed</option>
                    </select>
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label">Bet Type</label>
                    <select name="bet_type" class="form-select form-select-sm" data-testid="select-bet-type">
                        <option value="">All</option>
                        {% for bt in betTypes %}
                            <option value="{{ bt.value }}" {{ betType == bt.value ? 'selected' : '' }}>{{ bt.label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label">Race #</label>
                    <select name="race_number" class="form-select form-select-sm" data-testid="select-race-number">
                        <option value="">All</option>
                        {% for n in raceNumbers %}
                            <option value="{{ n }}" {{ raceNumber == n ? 'selected' : '' }}>Race {{ n }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label">Arena / Event</label>
                    <select name="event_id" class="form-select form-select-sm" data-testid="select-event">
                        <option value="">All</option>
                        {% for event in events %}
                            <option value="{{ event.id }}" {{ eventId == event.id ? 'selected' : '' }}>
                                {{ event.management.name }} — {{ event.eventDate|date('Y-m-d') }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label">Reference Number</label>
                    <input type="text" name="reference" value="{{ reference }}" class="form-control form-control-sm" data-testid="input-reference">
                </div>
                <div class="col-12 col-md-4">
                    <button type="submit" class="btn btn-admin-save w-100" data-testid="btn-filter">Filter</button>
                </div>
            </form>
        </div>
    </div>

    {# ── Bet list ── #}
    <div class="table-card">
        <div class="card-body p-0">
            {% if tickets is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state">
                    No live racing bets match these filters.
                </p>
            {% else %}
                <table class="w-100 stack-table" data-testid="live-racing-bets-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Reference</th>
                            <th class="th-white">Player</th>
                            <th class="th-white">Bet Type</th>
                            <th class="th-white">Race #</th>
                            <th class="th-white">Selection</th>
                            <th class="th-white">Amount</th>
                            <th class="th-white">Status</th>
                            <th class="th-white">Payout</th>
                            <th class="th-white">Placed At</th>
                            {% if is_granted('ROLE_SUPER_ADMIN') %}
                                <th class="th-white">Settle</th>
                            {% endif %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for ticket in tickets %}
                            <tr class="table-row" data-testid="live-racing-bet-row-{{ ticket.id }}">
                                <td class="td-cell" data-label="Reference">
                                    <small>{{ ticket.baseReference }}</small>
                                    {% if ticket.comboCount > 1 %}
                                        <span data-testid="combo-count-{{ ticket.id }}">×{{ ticket.comboCount }}</span>
                                    {% endif %}
                                </td>
                                <td class="td-cell" data-label="Player">
                                    <a href="{{ path('app_wfbo_user_transactions', {id: ticket.user.id}) }}" style="color:inherit;text-decoration:underline;text-underline-offset:2px;">
                                        {{ ticket.user.mobileNumber }}
                                    </a>
                                </td>
                                <td class="td-cell" data-label="Bet Type">{{ ticket.betTypeLabel }}</td>
                                <td class="td-cell" data-label="Race #" data-testid="race-number-{{ ticket.id }}">{{ ticket.raceNumbersLabel }}</td>
                                <td class="td-cell" data-label="Selection">{{ ticket.selectionsSummary }}</td>
                                <td class="td-cell" data-label="Amount">₱{{ ticket.amount|number_format(2) }}</td>
                                <td class="td-cell" data-label="Status">
                                    {% if ticket.status == 'won' %}
                                        <span class="badge-role badge-role--active" data-testid="badge-status-{{ ticket.id }}">Won</span>
                                    {% elseif ticket.status == 'lost' %}
                                        <span class="badge-role badge-role--suspended" data-testid="badge-status-{{ ticket.id }}">Lose</span>
                                    {% elseif ticket.status == 'void' %}
                                        <span class="badge-role" style="background:#374151; color:#e5e7eb;" data-testid="badge-status-{{ ticket.id }}">Void</span>
                                    {% elseif ticket.status == 'mixed' %}
                                        <span class="badge-role" style="background:#4c1d95; color:#ddd6fe;" data-testid="badge-status-{{ ticket.id }}">{{ ticket.statusLabel }}</span>
                                    {% else %}
                                        <span class="badge-role" style="background:#78350f; color:#fde68a;" data-testid="badge-status-{{ ticket.id }}">Pending</span>
                                    {% endif %}
                                </td>
                                <td class="td-cell" data-label="Payout">
                                    {% if ticket.payout %}
                                        ₱{{ ticket.payout|number_format(2) }}
                                    {% else %}
                                        —
                                    {% endif %}
                                </td>
                                <td class="td-cell" data-label="Placed At">{{ ticket.createdAt|date('Y-m-d H:i') }}</td>
                                {% if is_granted('ROLE_SUPER_ADMIN') %}
                                    <td class="td-cell" data-label="Settle">
                                        {% if ticket.status in ['pending', 'mixed'] %}
                                            <div class="manual-settle" data-testid="manual-settle-{{ ticket.id }}"
                                                 data-ticket-id="{{ ticket.id }}"
                                                 data-bet-ids="{{ ticket.betIds|join(',') }}"
                                                 data-token="{{ csrf_token('wfbo_live_racing_bet_settle_' ~ ticket.id) }}">
                                                <button type="button" class="btn btn-sm btn-primary"
                                                        data-testid="btn-manual-settle-{{ ticket.id }}"
                                                        onclick="manualSettleTicket(this)">Manual Settle</button>
                                                <span class="ms-1 small text-muted d-none" data-testid="manual-settle-result-{{ ticket.id }}"></span>
                                            </div>
                                        {% else %}
                                            —
                                        {% endif %}
                                    </td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
    </div>

    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="live-racing-bets-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_live_racing_bets', {page: currentPage - 1, status: status, event_id: eventId, reference: reference, bet_type: betType, race_number: raceNumber, period: period.period}) }}"
                   class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_live_racing_bets', {page: currentPage + 1, status: status, event_id: eventId, reference: reference, bet_type: betType, race_number: raceNumber, period: period.period}) }}"
                   class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
// SUPER_ADMIN "Manual Settle" - POSTs one ticket's bet ids to the settle
// endpoint and reflects the result inline. The status/payout update below is a
// client-side approximation of the server rollup (LiveRacingTicket::getStatus);
// a page refresh always shows the canonical state. It is exact for the common
// single-combo ticket and only differs for boxed/partial tickets until reload.
function manualSettleTicket(btn) {
    var wrap   = btn.closest('.manual-settle');
    var id     = wrap.dataset.ticketId;
    var result = wrap.querySelector('[data-testid="manual-settle-result-' + id + '"]');
    var url    = '{{ path('app_wfbo_live_racing_bet_settle') }}';

    btn.disabled = true;
    result.classList.remove('d-none', 'text-danger', 'text-success');
    result.classList.add('text-muted');
    result.textContent = 'Settling…';

    var body = new FormData();
    body.set('_token', wrap.dataset.token);
    body.set('ticket_id', id);
    body.set('bet_ids', wrap.dataset.betIds);

    fetch(url, { method: 'POST', body: body, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
    .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
    .then(function (res) {
        var d = res.data;
        if (!res.ok || !d.ok) {
            result.classList.remove('text-muted');
            result.classList.add('text-danger');
            result.textContent = (d && d.error) ? d.error : 'Settlement failed.';
            btn.disabled = false;
            return;
        }

        var won = d.won || 0, lost = d.lost || 0, voided = d.void || 0, open = d.remaining_open || 0;
        var parts = [];
        if (won)    parts.push(won + ' won ₱' + parseFloat(d.total_payout || '0').toFixed(2));
        if (lost)   parts.push(lost + ' lose');
        if (voided) parts.push(voided + ' void');
        if (open)   parts.push(open + ' still pending');
        if (d.credit_failed) parts.push(d.credit_failed + ' failed');
        result.classList.remove('text-muted');
        result.classList.add(open || d.credit_failed ? 'text-danger' : 'text-success');
        result.textContent = parts.length ? parts.join(' · ') : 'Nothing to settle.';

        var badge  = document.querySelector('[data-testid="badge-status-' + id + '"]');
        var payout = wrap.closest('tr').querySelector('[data-label="Payout"]');
        if (!open) {
            var label = 'Mixed';
            if (won && !lost && !voided)      label = 'Won';
            else if (lost && !won && !voided) label = 'Lose';
            else if (voided && !won && !lost) label = 'Void';
            if (badge) badge.textContent = label;
            if (payout) payout.textContent = won ? '₱' + parseFloat(d.total_payout || '0').toFixed(2) : '—';
            wrap.querySelector('button').classList.add('d-none');
        } else {
            btn.disabled = false;
        }
    })
    .catch(function () {
        result.classList.remove('text-muted');
        result.classList.add('text-danger');
        result.textContent = 'Network error during settlement.';
        btn.disabled = false;
    });
}
</script>
{% endblock %}