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

{% block title %}Head2Head Karera - History{% 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">Head2Head Karera</h2>
            <p class="text-muted mb-0">Bet History</p>
        </div>
        <a href="{{ path('app_play_head2head_karera') }}" class="btn btn-outline-secondary">
            ← Back to Game
        </a>
    </div>

    {% if bets|length == 0 %}
        <div class="text-center py-5">
            <h3>No Bets Yet</h3>
            <p class="text-muted">Your bet history will appear here.</p>
            <a href="{{ path('app_play_head2head_karera') }}" class="btn btn-primary mt-3">
                Place Your First Bet
            </a>
        </div>
    {% else %}
        <div class="card">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Event</th>
                            <th>Race</th>
                            <th>Horse</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Payout</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for bet in bets %}
                            <tr>
                                <td>{{ bet.createdAt|date('M j, Y g:i A') }}</td>
                                <td>{{ bet.race.event.eventDate|date('M j') }}</td>
                                <td>Race {{ bet.race.raceNo }}</td>
                                <td>
                                    <span class="badge {% if bet.horse == 'A' %}bg-info text-dark{% else %}bg-danger{% endif %}">
                                        Horse {{ bet.horse }}
                                    </span>
                                </td>
                                <td>₱{{ bet.amount|number_format(2) }}</td>
                                <td>
                                    {% if bet.status == 'pending' %}
                                        <span class="badge bg-warning text-dark">Pending</span>
                                    {% elseif bet.status == 'won' %}
                                        <span class="badge bg-success">Won</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Lost</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if bet.payout %}
                                        ₱{{ bet.payout|number_format(2) }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}

</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 %}