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

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

{% block wfbo_content %}

    {# ── Period filter bar ── #}
    {% set presets = [
        {key: 'this_month', label: 'This Month'},
        {key: 'last_month', label: 'Last Month'},
        {key: 'this_year',  label: 'This Year'},
        {key: 'last_year',  label: 'Last Year'},
    ] %}
    <div class="period-filter-bar mb-3">
        {% for p in presets %}
            <a href="{{ path('app_wfbo_color_game_results', {period: p.key, color: color}) }}"
               class="period-pill {% if period.period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}
    </div>

    {# ── Overall stats row ── #}
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Total Bets</p>
                    <p class="stat-value--lg">{{ overall.total }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Total Won</p>
                    <p class="stat-value--lg" style="color:#059669;">{{ overall.wins }}</p>
                    <p class="stat-sub">Losses: {{ overall.losses }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Net Revenue</p>
                    <p class="stat-value--lg" style="color:{{ overall.revenue >= 0 ? '#059669' : '#dc2626' }};">₱{{ overall.revenue|number_format(2) }}</p>
                    <p class="stat-sub">Bets: ₱{{ overall.bet_amount|number_format(2) }} &middot; Won: ₱{{ overall.win_amount|number_format(2) }}</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Payout Rate</p>
                    <p class="stat-value--lg" style="color:#2563eb;">{{ overall.payout_rate|number_format(2) }}%</p>
                    <p class="stat-sub">Revenue Rate: {{ overall.bet_amount > 0 ? ((overall.revenue / overall.bet_amount) * 100)|number_format(2) : '0.00' }}%</p>
                </div>
            </div>
        </div>
    </div>

    {# ── Per-color stats ── #}
    {% if byColor is not empty %}
    <div class="card table-card mb-4">
        <div class="table-scroll">
            <table class="data-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Color</th>
                        <th class="th-white">Bets</th>
                        <th class="th-white">Wins</th>
                        <th class="th-white">Losses</th>
                        <th class="th-white">Win %</th>
                        <th class="th-white">Bet Amount</th>
                        <th class="th-white">Win Amount</th>
                        <th class="th-white">Revenue</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in byColor %}
                        {% set winPct = row.total > 0 ? ((row.wins / row.total) * 100)|number_format(1) : '0.0' %}
                        <tr class="table-row">
                            <td class="td-cell fw-semibold" style="text-transform:capitalize;">{{ row.color }}</td>
                            <td class="td-cell">{{ row.total }}</td>
                            <td class="td-cell" style="color:#059669;">{{ row.wins }}</td>
                            <td class="td-cell" style="color:#dc2626;">{{ row.losses }}</td>
                            <td class="td-cell">{{ winPct }}%</td>
                            <td class="td-cell">₱{{ row.bet_amount|number_format(2) }}</td>
                            <td class="td-cell">₱{{ row.win_amount|number_format(2) }}</td>
                            <td class="td-cell" style="color:{{ row.revenue >= 0 ? '#059669' : '#dc2626' }}; font-weight:600;">₱{{ row.revenue|number_format(2) }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# ── Filter ── #}
    <div class="d-flex align-items-center gap-3 mb-3">
        <span class="stat-label--sm" style="color:#6b7280;">Filter by color:</span>
        <a href="{{ path('app_wfbo_color_game_results', {period: period.period}) }}"
           class="badge-status {{ color is null ? 'badge-status--approved' : '' }}"
           style="{{ color is null ? '' : 'background:#f3f4f6; color:#374151;' }} text-decoration:none; cursor:pointer;">
            All
        </a>
        {% for c in ['yellow','white','pink','blue','red','green'] %}
            <a href="{{ path('app_wfbo_color_game_results', {color: c, period: period.period}) }}"
               class="badge-status {{ color == c ? 'badge-status--approved' : '' }}"
               style="{{ color == c ? '' : 'background:#f3f4f6; color:#374151;' }} text-transform:capitalize; text-decoration:none; cursor:pointer;">
                {{ c }}
            </a>
        {% endfor %}
    </div>

    {% set CG_DICE_BG = {'yellow':'#F4B942','white':'#F5F5F5','pink':'#FF3E9A','blue':'#3D87E8','red':'#E63946','green':'#3FB65D'} %}
    {% set CG_DICE_FG = {'yellow':'#3a2606','white':'#1a1330','pink':'#ffffff','blue':'#ffffff','red':'#ffffff','green':'#ffffff'} %}

    {# ── Bets table ── #}
    <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">Time</th>
                        <th class="th-white">Player</th>
                        <th class="th-white">Bet</th>
                        <th class="th-white">Dice</th>
                        <th class="th-white">Matches</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">Payout</th>
                        <th class="th-white">Status</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">
                                <span style="display:inline-flex; align-items:center; gap:6px; font-weight:600; text-transform:capitalize;">
                                    <span style="display:inline-block;width:14px;height:14px;border-radius:50%;background:{{ CG_DICE_BG[bet.color]|default('#e5e7eb') }};border:1px solid rgba(0,0,0,0.15);"></span>
                                    {{ bet.color }}
                                </span>
                            </td>
                            <td class="td-cell td-cell--nowrap">
                                <span style="display:inline-flex; gap:3px;">
                                    {% for die in [bet.dice1, bet.dice2, bet.dice3] %}
                                        <span title="{{ die|capitalize }}"
                                              style="display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:{{ CG_DICE_BG[die]|default('#e5e7eb') }};color:{{ CG_DICE_FG[die]|default('#374151') }};border:1px solid rgba(0,0,0,0.15);font-weight:700;font-size:10px;text-transform:uppercase;">{{ die|slice(0, 1) }}</span>
                                    {% endfor %}
                                </span>
                            </td>
                            <td class="td-cell td-cell--nowrap">{{ bet.match_count }}</td>
                            <td class="td-cell td-cell--nowrap">₱{{ bet.amount|number_format(2) }}</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>
                            <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>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="8" class="td-empty">No color game 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="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, color: color, period: period.period}) }}"
                   class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_color_game_results', {page: currentPage + 1, color: color, period: period.period}) }}"
                   class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}