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

{% block title %}High Stakes Results — WFBO{% endblock %}
{% block wfbo_title %}High Stakes Results{% endblock %}

{% block wfbo_content %}

    <p class="pagination-info mb-3">
        {{ total }} finished round{{ total != 1 ? 's' : '' }}
    </p>

    <div class="card table-card" data-testid="hl-results-table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="hl-results-table">
                <thead>
                    <tr class="thead-row--strong">
                        <th class="th-white">#</th>
                        <th class="th-white">Scheduled</th>
                        <th class="th-white">Winning Card</th>
                        <th class="th-white">Bets</th>
                        <th class="th-white">Collected</th>
                        <th class="th-white">Paid Out</th>
                        <th class="th-white">Payout Rate</th>
                        <th class="th-white"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for round in rounds %}
                        {% set winner  = round.result ?? 'card1' %}
                        {% set stat    = betStats[round.id] ?? {betCount: 0, totalAmount: '0.00', totalPayout: '0.00', winRate: 0} %}
                        {% set rPreds  = predStats[round.id] ?? {} %}

                        {# ── Summary row ── #}
                        <tr class="table-row" data-testid="hl-result-row-{{ round.id }}">

                            <td class="td-cell td-cell--id">{{ round.id }}</td>

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

                            <td class="td-cell td-cell--nowrap">
                                {% if winner in ['card1', 'card2'] %}
                                <img src="{{ asset('game/small_cards/' ~ attribute(round, winner) ~ '.png') }}" alt="" style="height:20px;width:auto;vertical-align:middle;margin-right:4px;border-radius:2px;">
                                {% endif %}
                                Card {{ winner|slice(4) }}
                            </td>

                            <td class="td-cell td-cell--nowrap">{{ stat.betCount }}</td>

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

                            <td class="td-cell td-cell--nowrap">
                                <span class="stat-value--green">₱{{ stat.totalPayout|number_format(2) }}</span>
                            </td>

                            <td class="td-cell td-cell--nowrap">{{ stat.winRate }}%</td>

                            <td class="td-cell td-cell--nowrap">
                                <button type="button"
                                        class="btn-pair-toggle"
                                        style="font-size:12px; padding:3px 10px;"
                                        onclick="togglePredBreakdown(this, 'pred-detail-{{ round.id }}')"
                                        data-testid="btn-pred-breakdown-{{ round.id }}">
                                    ▼ Cards
                                </button>
                            </td>
                        </tr>

                        {# ── Per-card breakdown (hidden by default) ── #}
                        <tr id="pred-detail-{{ round.id }}" style="display:none;" data-testid="pred-detail-{{ round.id }}">
                            <td colspan="8" style="padding: 0 0 12px 0; background:#f8fafc;">
                                <div style="padding: 12px 16px 0 16px;">
                                    <p style="font-size:12px; font-weight:600; color:#374151; margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em;">
                                        Card Breakdown — Round #{{ round.id }}
                                    </p>
                                    <div class="table-scroll">
                                        <table style="width:100%; border-collapse:collapse; font-size:13px;" data-testid="pred-table-{{ round.id }}">
                                            <thead>
                                                <tr style="background:#e5e7eb;">
                                                    <th style="padding:6px 10px; text-align:left; color:#374151; font-weight:600; white-space:nowrap;">Card</th>
                                                    <th style="padding:6px 10px; text-align:right; color:#374151; font-weight:600; white-space:nowrap;">Bets</th>
                                                    <th style="padding:6px 10px; text-align:right; color:#374151; font-weight:600; white-space:nowrap;">Amount Bet</th>
                                                    <th style="padding:6px 10px; text-align:right; color:#374151; font-weight:600; white-space:nowrap;">Pool %</th>
                                                    <th style="padding:6px 10px; text-align:right; color:#374151; font-weight:600; white-space:nowrap;">Multiplier</th>
                                                    <th style="padding:6px 10px; text-align:right; color:#374151; font-weight:600; white-space:nowrap;">Payout Rate</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for prediction in predictions %}
                                                    {% set isWinner = (prediction == winner) %}
                                                    {% set ps       = rPreds[prediction] ?? {betCount: 0, totalAmount: '0.00'} %}
                                                    {% set poolPct  = stat.totalAmount > 0 ? (ps.totalAmount / stat.totalAmount * 100)|round(2) : 0 %}
                                                    {% set payoutIfWon = ps.totalAmount * hlMultiplier %}
                                                    {% set wrIfWon  = stat.totalAmount > 0 ? (payoutIfWon / stat.totalAmount * 100)|round(2) : 0 %}
                                                    <tr style="border-top:1px solid #e5e7eb; {{ isWinner ? 'background:#d1fae5;' : (loop.index is even ? 'background:#f9fafb;' : '') }}">
                                                        <td style="padding:6px 10px; white-space:nowrap;">
                                                            <img src="{{ asset('game/small_cards/' ~ attribute(round, prediction) ~ '.png') }}" alt="" style="height:26px;width:auto;vertical-align:middle;margin-right:6px;border-radius:3px;">
                                                            Card {{ prediction|slice(4) }}
                                                            {% if isWinner %}
                                                                <span style="margin-left:6px; font-size:11px; font-weight:700; color:#15803d;">✓ WINNER</span>
                                                            {% endif %}
                                                        </td>
                                                        <td style="padding:6px 10px; text-align:right; color:#374151;">{{ ps.betCount }}</td>
                                                        <td style="padding:6px 10px; text-align:right; color:#374151;">₱{{ ps.totalAmount|number_format(2) }}</td>
                                                        <td style="padding:6px 10px; text-align:right; color:#6b7280;">{{ poolPct }}%</td>
                                                        <td style="padding:6px 10px; text-align:right; color:#374151;">{{ hlMultiplier }}×</td>
                                                        <td style="padding:6px 10px; text-align:right; {{ isWinner ? 'color:#15803d; font-weight:600;' : 'color:#374151;' }}">
                                                            {{ wrIfWon }}%
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>

                    {% else %}
                        <tr>
                            <td colspan="8" class="td-empty">No finished rounds 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="hl-results-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_high_stakes_results', {page: currentPage - 1}) }}"
                   class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_high_stakes_results', {page: currentPage + 1}) }}"
                   class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

<script>
function togglePredBreakdown(btn, rowId) {
    var row = document.getElementById(rowId);
    var showing = row.style.display !== 'none';
    row.style.display = showing ? 'none' : 'table-row';
    btn.textContent = showing ? '▼ Cards' : '▲ Cards';
}
</script>

{% endblock %}