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

{% block title %}Color Game Results — WFBO{% endblock %}
{% block wfbo_title %}Color Game Results{% endblock %}

{% block wfbo_content %}

    {% set colorHex = {'red':'#E63946','yellow':'#F4B942','blue':'#3D87E8','green':'#3FB65D','white':'#F5F5F5','pink':'#FF3E9A'} %}

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

    <div class="card table-card" data-testid="cg-results-table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="cg-results-table">
                <thead>
                    <tr class="thead-row--strong">
                        <th class="th-white">#</th>
                        <th class="th-white">Scheduled</th>
                        <th class="th-white">Result</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">Players</th>
                        <th class="th-white"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for round in rounds %}
                        {% set stat   = betStats[round.id] ?? {betCount: 0, totalAmount: '0.00', totalPayout: '0.00', winRate: 0} %}
                        {% set rColor = resultColors[round.id] ?? null %}
                        {% set cStats = colorStats[round.id] ?? {} %}

                        <tr class="table-row" data-testid="cg-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 rColor %}
                                    <span style="display:inline-flex;align-items:center;gap:4px;">
                                        <span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:{{ attribute(colorHex, rColor.resultColor1)|default('#ccc') }};border:1px solid rgba(0,0,0,0.15);"></span>
                                        {{ rColor.resultColor1|upper }}
                                    </span>
                                    <span style="display:inline-flex;align-items:center;gap:4px;margin-left:6px;">
                                        <span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:{{ attribute(colorHex, rColor.resultColor2)|default('#ccc') }};border:1px solid rgba(0,0,0,0.15);"></span>
                                        {{ rColor.resultColor2|upper }}
                                    </span>
                                    <span style="display:inline-flex;align-items:center;gap:4px;margin-left:6px;">
                                        <span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:{{ attribute(colorHex, rColor.resultColor3)|default('#ccc') }};border:1px solid rgba(0,0,0,0.15);"></span>
                                        {{ rColor.resultColor3|upper }}
                                    </span>
                                {% else %}
                                    <span class="td-cell--muted">—</span>
                                {% endif %}
                            </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" style="max-width:250px;font-size:12px;">
                                {% set roundPlayers = players[round.id] ?? {} %}
                                {% if roundPlayers is empty %}
                                    <span class="td-cell--muted">—</span>
                                {% else %}
                                    {% for p in roundPlayers %}
                                        <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;">
                                            {{ p.displayName }}
                                            <span class="td-cell--muted" style="font-size:11px;">
                                                {{ p.colors|map(c => c|upper)|join(', ') }}
                                                (₱{{ p.totalAmount|number_format(2) }})
                                            </span>
                                        </div>
                                    {% endfor %}
                                {% endif %}
                            </td>
                            <td class="td-cell td-cell--nowrap">
                                <button type="button"
                                        class="btn-pair-toggle"
                                        style="font-size:12px; padding:3px 10px;"
                                        onclick="toggleColorBreakdown(this, 'color-detail-{{ round.id }}')"
                                        data-testid="btn-color-breakdown-{{ round.id }}">
                                    ▼ Colors
                                </button>
                            </td>
                        </tr>

                        <tr id="color-detail-{{ round.id }}" style="display:none;" data-testid="color-detail-{{ round.id }}">
                            <td colspan="9" 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;">
                                        Color Breakdown — Round #{{ round.id }}
                                    </p>
                                    <div class="table-scroll">
                                        <table style="width:100%; border-collapse:collapse; font-size:13px;" data-testid="color-table-{{ round.id }}">
                                            <thead>
                                                <tr style="background:#e5e7eb;">
                                                    <th style="padding:6px 10px; text-align:left; color:#374151; font-weight:600; white-space:nowrap;">Color</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:left; color:#374151; font-weight:600; white-space:nowrap;">Players</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for color in ['yellow','white','pink','blue','red','green'] %}
                                                    {% set cs = cStats[color] ?? {betCount: 0, totalAmount: '0.00'} %}
                                                    {% set poolPct = stat.totalAmount > 0 ? (cs.totalAmount / stat.totalAmount * 100)|round(2) : 0 %}
                                                    {% set colorBettors = bettors[round.id][color] ?? [] %}
                                                    {% set isWinningColor = rColor and color in [rColor.resultColor1|lower, rColor.resultColor2|lower, rColor.resultColor3|lower] %}
                                                    <tr style="border-top:1px solid #e5e7eb; {{ loop.index is even ? 'background:#f9fafb;' : '' }} {{ isWinningColor ? 'background:#d1fae5;font-weight:600;' : '' }}">
                                                        <td style="padding:6px 10px; white-space:nowrap;">
                                                            <span style="display:inline-flex;align-items:center;gap:4px;">
                                                                <span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:{{ attribute(colorHex, color) }};border:1px solid rgba(0,0,0,0.15);"></span>
                                                                {{ color|upper }}
                                                            </span>
                                                        </td>
                                                        <td style="padding:6px 10px; text-align:right; color:#374151;">{{ cs.betCount }}</td>
                                                        <td style="padding:6px 10px; text-align:right; color:#374151;">₱{{ cs.totalAmount|number_format(2) }}</td>
                                                        <td style="padding:6px 10px; text-align:right; color:#6b7280;">{{ poolPct }}%</td>
                                                        <td style="padding:6px 10px; text-align:left; color:#374151; font-size:12px;">
                                                            {% if colorBettors is empty %}
                                                                <span class="td-cell--muted">—</span>
                                                            {% else %}
                                                                {% for bettor in colorBettors %}
                                                                    <div>{{ bettor.displayName }} <span class="td-cell--muted">(₱{{ bettor.amount|number_format(2) }})</span></div>
                                                                {% endfor %}
                                                            {% endif %}
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>

                    {% else %}
                        <tr>
                            <td colspan="9" 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="cg-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_color_game_results', {page: currentPage - 1}) }}"
                   class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_color_game_results', {page: currentPage + 1}) }}"
                   class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

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

{% endblock %}