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

{% block title %}Recent Bets — WFBO{% endblock %}
{% block wfbo_title %}Recent Bets{% endblock %}

{% block wfbo_content %}

<div data-controller="recent-bets"
     data-recent-bets-total-value="{{ total }}"
     data-recent-bets-poll-url-value="{{ path('app_wfbo_recent_bets_count') }}">

    {# New-bets notification banner #}
    <div data-recent-bets-target="banner"
         style="display:none; align-items:center; gap:12px; background:#1e3a2f; border:1px solid #16a34a;
                border-radius:10px; padding:10px 16px; margin-bottom:16px; color:#4ade80; font-weight:600; font-size:14px;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
        </svg>
        <span data-recent-bets-count></span> arrived
        <button data-action="recent-bets#refresh"
                style="margin-left:auto; background:#16a34a; color:#fff; border:none; border-radius:6px;
                       padding:5px 14px; font-size:13px; font-weight:700; cursor:pointer;">
            Refresh
        </button>
    </div>

    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
        <p class="pagination-info" style="margin:0;">{{ total }} bet{{ total != 1 ? 's' : '' }}</p>
        <button data-action="recent-bets#refresh"
                style="background:transparent; border:1px solid #374151; border-radius:8px; color:#9ca3af;
                       font-size:13px; font-weight:600; padding:5px 14px; cursor:pointer; display:flex; align-items:center; gap:6px;">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.09"/>
            </svg>
            Refresh
        </button>
    </div>

    <div class="card table-card" data-testid="recent-bets-table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="recent-bets-table">
                <thead>
                    <tr class="thead-row--strong">
                        <th class="th-white">Time</th>
                        <th class="th-white">Player</th>
                        <th class="th-white">Game</th>
                        <th class="th-white">Details</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">Payout</th>
                    </tr>
                </thead>
                <tbody>
                    {% for bet in bets %}
                        <tr class="table-row">

                            <td class="td-cell td-cell--muted td-cell--nowrap">
                                {{ bet.created_at|date('M d, Y') }}<br>
                                <span style="font-size:12px;">{{ bet.created_at|date('H:i:s') }}</span>
                            </td>

                            <td class="td-cell td-cell--nowrap">
                                <a href="{{ path('app_wfbo_user_transactions', {id: bet.user_id}) }}"
                                   style="color:inherit; text-decoration:underline; text-underline-offset:2px;">
                                    {{ bet.mobile_number }}
                                </a>
                                {% if bet.first_name or bet.last_name %}
                                    <br><span class="td-cell--muted" style="font-size:12px;">{{ bet.first_name }} {{ bet.last_name }}</span>
                                {% endif %}
                            </td>

                            <td class="td-cell td-cell--nowrap">
                                {% if bet.game == 'vk' %}
                                    <span style="color:#a78bfa; font-weight:600;">Video Karera</span><br>
                                    <span class="td-cell--muted" style="font-size:12px;">Race #{{ bet.ref_id }}</span>
                                {% elseif bet.game == 'hl' %}
                                    <span style="color:#34d399; font-weight:600;">Pataasan</span><br>
                                    <span class="td-cell--muted" style="font-size:12px;">Round #{{ bet.ref_id }}</span>
                                {% elseif bet.game == 'mn' %}
                                    <span style="color:#818cf8; font-weight:600;">Mines</span><br>
                                    <span class="td-cell--muted" style="font-size:12px;">{{ bet.prediction|replace({'_': ' '})|capitalize }}</span>
                                {% elseif bet.game == 'fk' %}
                                    <span style="color:#a78bfa; font-weight:600;">Fruit King</span><br>
                                    <span class="td-cell--muted" style="font-size:12px;">{{ bet.prediction == 'seven' ? '7' : bet.prediction|capitalize }}</span>
                                {% elseif bet.game == 'ez' %}
                                    <span style="color:#7dd3fc; font-weight:600;">EZDOS</span><br>
                                    <span class="td-cell--muted" style="font-size:12px;">Draw #{{ bet.ref_id }}</span>
                                {% elseif bet.game == 'pk' %}
                                    <span style="color:#a5b4fc; font-weight:600;">Pachinko</span><br>
                                    <span class="td-cell--muted" style="font-size:12px;">{{ bet.prediction }}</span>
                                {% elseif bet.game == 'h2h' %}
                                    <span style="color:#fed7aa; font-weight:600;">Head2Head</span><br>
                                    <span class="td-cell--muted" style="font-size:12px;">Race #{{ bet.ref_id }}</span>
                                {% elseif bet.game == 'lr' %}
                                    <span style="color:#93c5fd; font-weight:600;">Live Racing</span><br>
                                    <span class="td-cell--muted" style="font-size:12px;">{{ bet.prediction }}</span>
                                {% else %}
                                    <span style="color:#f97316; font-weight:600;">Color Game</span><br>
                                    <span class="td-cell--muted" style="font-size:12px;">{{ bet.prediction|capitalize }}</span>
                                {% endif %}
                            </td>

                            <td class="td-cell td-cell--nowrap">
                                {% if bet.game == 'vk' %}
                                    {{ bet.first_horse }} – {{ bet.second_horse }}
                                {% elseif bet.game == 'hl' %}
                                    {{ bet.prediction|upper }}
                                {% elseif bet.game == 'mn' %}
                                    {{ bet.prediction|replace({'_': ' '})|capitalize }} tier
                                {% elseif bet.game == 'fk' %}
                                    {{ bet.prediction == 'seven' ? '7' : bet.prediction|capitalize }} Bet
                                {% elseif bet.game == 'ez' %}
                                    {{ bet.prediction }}
                                {% elseif bet.game == 'h2h' %}
                                    {{ bet.prediction }}
                                {% else %}
                                    {{ bet.prediction|capitalize }} Bet
                                {% endif %}
                            </td>

                            <td class="td-cell td-cell--nowrap">₱{{ bet.amount|number_format(2) }}</td>

                            <td class="td-cell td-cell--nowrap">
                                {% if bet.status == 'won' %}
                                    <span class="badge-role badge-role--active">won</span>
                                {% elseif bet.status == 'lost' %}
                                    <span class="badge-role badge-role--suspended">lost</span>
                                {% else %}
                                    <span class="badge-role" style="background:#78350f; color:#fde68a;">pending</span>
                                {% endif %}
                            </td>

                            <td class="td-cell td-cell--nowrap">
                                {% if bet.payout and bet.payout > 0 %}
                                    <span class="stat-value--green">₱{{ bet.payout|number_format(2) }}</span>
                                {% else %}
                                    <span class="td-cell--muted">—</span>
                                {% endif %}
                            </td>

                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="7" class="td-empty">No bets yet.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4"
         data-testid="recent-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_recent_bets', {page: currentPage - 1}) }}"
                   class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_recent_bets', {page: currentPage + 1}) }}"
                   class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

</div>{# /recent-bets controller #}

{% endblock %}