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

{% block title %}Fruit King Results — WFBO{% endblock %}
{% block wfbo_title %}Fruit King 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_fruit_king_results', {period: p.key, symbol: symbol}) }}"
               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-symbol stats ── #}
    {% if bySymbol 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">Symbol</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 bySymbol %}
                        {% 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.symbol }}</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" style="flex-wrap: wrap;">
        <span class="stat-label--sm" style="color:#6b7280;">Filter by symbol:</span>
        <a href="{{ path('app_wfbo_fruit_king_results', {period: period.period}) }}"
           class="badge-status {{ symbol is null ? 'badge-status--approved' : '' }}"
           style="{{ symbol is null ? '' : 'background:#f3f4f6; color:#374151;' }} text-decoration:none; cursor:pointer;">
            All
        </a>
        {% for s in ['bar','seven','star','watermelon','bell','mango','orange','apple'] %}
            <a href="{{ path('app_wfbo_fruit_king_results', {symbol: s, period: period.period}) }}"
               class="badge-status {{ symbol == s ? 'badge-status--approved' : '' }}"
               style="{{ symbol == s ? '' : 'background:#f3f4f6; color:#374151;' }} text-transform:capitalize; text-decoration:none; cursor:pointer;">
                {{ s == 'seven' ? '7' : s }}
            </a>
        {% endfor %}
    </div>

    {# ── Bets table ── #}
    <div class="card table-card" data-testid="fk-results-table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="fk-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">Result</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" style="text-transform:capitalize; font-weight:600;">
                                {{ bet.symbol == 'seven' ? '7' : bet.symbol }}
                            </td>
                            <td class="td-cell td-cell--nowrap" style="text-transform:capitalize;">
                                {% if bet.result_symbol %}
                                    {{ bet.result_symbol == 'seven' ? '7' : bet.result_symbol }}
                                    {% if bet.result_tier == 'triple' %}<span class="td-cell--muted" style="font-size:12px;">(triple)</span>{% endif %}
                                {% else %}
                                    <span class="td-cell--muted">—</span>
                                {% endif %}
                            </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>
                                {% elseif bet.status == 'void' %}
                                    <span class="badge-role badge-role--default">refunded</span>
                                {% else %}
                                    <span class="badge-role" style="background:#78350f; color:#fde68a;">pending</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="7" class="td-empty">No Fruit King 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="fk-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_fruit_king_results', {page: currentPage - 1, symbol: symbol, period: period.period}) }}"
                   class="btn-page-prev">← Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_fruit_king_results', {page: currentPage + 1, symbol: symbol, period: period.period}) }}"
                   class="btn-page-next">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}