{% extends 'base.html.twig' %}

{% block title %}Live Racing - {{ event.management.name }} Results{% endblock %}

{% block body %}
<div class="container page-container" style="padding-top: 16px; padding-bottom: 100px;">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">{{ event.management.name }}</h2>
            <p class="text-muted mb-0">{{ event.eventDate|date('l, F j, Y') }}</p>
        </div>
        <a href="{{ path('app_play_live_racing_results') }}" class="btn btn-outline-secondary" data-testid="link-back-to-results">
            ← Race Results
        </a>
    </div>

    {% if myTickets|length > 0 %}
        <h3 class="wfbo-card-title mb-2" style="font-size: 16px;">Your Bets</h3>
        <div class="card bg-white mb-4" data-bs-theme="light">
            <div class="table-responsive">
                <table class="table table-hover mb-0 stack-table" data-testid="player-my-tickets-table">
                    <thead>
                        <tr>
                            <th>Bet Type</th>
                            <th>Race #</th>
                            <th>Selection</th>
                            <th>Reference</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Payout</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for ticket in myTickets %}
                            <tr data-testid="player-my-ticket-row-{{ ticket.id }}">
                                <td>{{ ticket.betTypeKey|replace({'_': ' '})|title }}</td>
                                <td data-testid="race-number-{{ ticket.id }}">{{ ticket.raceNumbersLabel }}</td>
                                <td>{{ ticket.selectionsSummary }}</td>
                                <td>
                                    <small>{{ ticket.baseReference }}</small>
                                    {% if ticket.comboCount > 1 %}
                                        <span data-testid="combo-count-{{ ticket.id }}">×{{ ticket.comboCount }}</span>
                                    {% endif %}
                                </td>
                                <td data-label="Amount">₱{{ ticket.amount|number_format(2) }}</td>
                                <td data-label="Status">
                                    {% if ticket.status == 'pending' %}
                                        <span class="badge bg-warning text-dark">Pending</span>
                                    {% elseif ticket.status == 'won' %}
                                        <span class="badge bg-success">Won</span>
                                    {% elseif ticket.status == 'void' %}
                                        <span class="badge bg-dark">Void</span>
                                    {% elseif ticket.status == 'mixed' %}
                                        <span class="badge" style="background:#4c1d95; color:#ddd6fe;">{{ ticket.statusLabel }}</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Lose</span>
                                    {% endif %}
                                </td>
                                <td data-label="Payout">
                                    {% if ticket.payout %}
                                        ₱{{ ticket.payout|number_format(2) }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}

    <h3 class="wfbo-card-title mb-2" style="font-size: 16px;">Race Results</h3>

    {% for entry in raceResults %}
        {% set race = entry.race %}
        {% set horses = entry.horses %}
        {% set dividendRows = entry.dividendRows %}

        <div class="card bg-white mb-3" data-bs-theme="light" data-testid="player-race-result-{{ race.id }}">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="mb-0" style="font-size: 15px;">Race {{ race.raceNumber }}</h4>
                    {% if race.settled %}
                        <span class="badge bg-success">Settled</span>
                    {% elseif race.closed %}
                        <span class="badge bg-warning text-dark">Closed</span>
                    {% else %}
                        <span class="badge bg-secondary">Open</span>
                    {% endif %}
                </div>

                {% if race.settled %}
                    <div class="detail-grid mb-0">
                        <div class="detail-item">
                            <div class="detail-label">Winner{{ race.result|length > 1 ? 's' : '' }}</div>
                            <div class="detail-value" data-testid="player-race-result-text-{{ race.id }}">
                                {% for finisher in race.result %}
                                    {{ not loop.first ? ', ' : '' }}Horse #{{ finisher.horseNumber }}
                                {% else %}—{% endfor %}
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Result Set At</div>
                            <div class="detail-value">{{ race.resultSetAt|date('Y-m-d H:i') }}</div>
                        </div>
                        {% set scratchedAfterClose = horses|filter(h => h.scratchedAfterClose) %}
                        {% if scratchedAfterClose is not empty %}
                            <div class="detail-item">
                                <div class="detail-label">Scratched After Close</div>
                                <div class="detail-value" data-testid="player-scratched-after-close-{{ race.id }}">
                                    {% for horse in scratchedAfterClose %}
                                        {{ not loop.first ? ', ' : '' }}Horse #{{ horse.horseNumber }}
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                        {% if dividendRows is not empty %}
                            <div class="detail-item">
                                <div class="detail-label">Dividends</div>
                                <div class="detail-value" data-testid="player-dividends-summary-{{ race.id }}">
                                    {% for row in dividendRows %}
                                        <div data-testid="player-dividend-row-{{ row.id }}">
                                            {{ row.label }}:
                                            {% if row.refund %}Refunded{% 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 %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                {% else %}
                    <p class="text-body-secondary mb-0" data-testid="player-race-result-pending-{{ race.id }}">Result pending.</p>
                {% endif %}
            </div>
        </div>
    {% endfor %}

</div>

{# Wallet Bar #}
<div class="wallet-bar" data-testid="wallet-bar">
    <div class="wallet-bar__balance"
         data-controller="balance-counter"
         data-balance-counter-amount-value="{{ app.user.walletBalance }}">
        <p class="wallet-bar__label">Balance</p>
        <p class="wallet-bar__amount" data-testid="wallet-bar-amount"
           data-balance-counter-target="display">₱{{ app.user.walletBalance|number_format(2) }}</p>
    </div>
    <div class="wallet-bar__actions">
        <a href="{{ path('app_deposit') }}"
           class="pill-link--ghost"
           style="font-size: 12px; padding: 7px 14px;"
           data-testid="wallet-bar-add-funds">+ Add Funds</a>
    </div>
</div>

{% endblock %}