{% 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;" data-testid="recent-bets-total">{{ 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>

    {# Game category filter #}
    <div class="d-flex gap-2 mb-3 flex-wrap" data-testid="recent-bets-category-filters">
        {% set categories = [
            {label: 'All',         value: null},
            {label: 'Mini Games',  value: 'mini_games'},
            {label: 'Live Racing', value: 'live_racing'},
        ] %}
        {% for c in categories %}
            <a href="{{ path('app_wfbo_recent_bets', {category: c.value, date_from: date_from, date_to: date_to}|filter(v => v is not null and v != '')) }}"
               class="filter-pill {% if currentCategory == c.value %}is-active{% endif %}"
               data-testid="filter-{{ c.label|lower|replace({' ': '-'}) }}">
                {{ c.label }}
            </a>
        {% endfor %}
    </div>

    {# Date range filter #}
    <form method="GET" action="{{ path('app_wfbo_recent_bets') }}"
          class="d-flex flex-wrap align-items-end gap-2 mb-3"
          data-testid="recent-bets-filter-form">
        {% if currentCategory %}<input type="hidden" name="category" value="{{ currentCategory }}">{% endif %}
        <div>
            <label for="recent-bets-date-from" class="form-label--sm">From</label>
            <input type="date" id="recent-bets-date-from" name="date_from"
                   value="{{ date_from }}" class="period-filter-input--light"
                   data-testid="input-recent-bets-date-from">
        </div>
        <div>
            <label for="recent-bets-date-to" class="form-label--sm">To</label>
            <input type="date" id="recent-bets-date-to" name="date_to"
                   value="{{ date_to }}" class="period-filter-input--light"
                   data-testid="input-recent-bets-date-to">
        </div>
        <button type="submit" class="btn-page-next" data-testid="btn-recent-bets-filter">Apply</button>
        {% if date_from or date_to %}
            <a href="{{ path('app_wfbo_recent_bets', currentCategory ? {category: currentCategory} : {}) }}" class="btn-page-prev"
               data-testid="link-recent-bets-clear">Clear</a>
        {% endif %}
    </form>

    <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">lose</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 %}
    {% set rangeStart = max(1, currentPage - 2) %}
    {% set rangeEnd   = min(totalPages, currentPage + 2) %}
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mt-4"
         data-testid="recent-bets-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="wfbo-pager">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_recent_bets', filterParams|merge({page: currentPage - 1})) }}"
                   class="wfbo-pager__item" data-testid="recent-bets-page-prev" aria-label="Previous page">‹</a>
            {% endif %}

            {% if rangeStart > 1 %}
                <a href="{{ path('app_wfbo_recent_bets', filterParams|merge({page: 1})) }}"
                   class="wfbo-pager__item" data-testid="recent-bets-page-1">1</a>
                {% if rangeStart > 2 %}<span class="wfbo-pager__ellipsis">…</span>{% endif %}
            {% endif %}

            {% for p in rangeStart..rangeEnd %}
                {% if p == currentPage %}
                    <span class="wfbo-pager__item is-active" data-testid="recent-bets-page-{{ p }}">{{ p }}</span>
                {% else %}
                    <a href="{{ path('app_wfbo_recent_bets', filterParams|merge({page: p})) }}"
                       class="wfbo-pager__item" data-testid="recent-bets-page-{{ p }}">{{ p }}</a>
                {% endif %}
            {% endfor %}

            {% if rangeEnd < totalPages %}
                {% if rangeEnd < totalPages - 1 %}<span class="wfbo-pager__ellipsis">…</span>{% endif %}
                <a href="{{ path('app_wfbo_recent_bets', filterParams|merge({page: totalPages})) }}"
                   class="wfbo-pager__item" data-testid="recent-bets-page-{{ totalPages }}">{{ totalPages }}</a>
            {% endif %}

            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_recent_bets', filterParams|merge({page: currentPage + 1})) }}"
                   class="wfbo-pager__item" data-testid="recent-bets-page-next" aria-label="Next page">›</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

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

{% endblock %}