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

{% block title %}Pachinko Results — WFBO{% endblock %}
{% block wfbo_title %}Pachinko Results{% endblock %}

{% block wfbo_content %}
    {% 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_pachinko_results', {period: p.key, multiplier: multiplier}) }}"
               class="period-pill {% if period.period == p.key %}is-active{% endif %}"
               data-testid="period-{{ p.key }}">
                {{ p.label }}
            </a>
        {% endfor %}
    </div>

    <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 Drops</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>

    {% if byMultiplier 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">Multiplier</th>
                        <th class="th-white">Drops</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 byMultiplier %}
                        {% 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">{{ row.multiplier }}x</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 %}

    <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 multiplier:</span>
        <a href="{{ path('app_wfbo_pachinko_results', {period: period.period}) }}"
           class="badge-status {{ multiplier is null ? 'badge-status--approved' : '' }}"
           style="{{ multiplier is null ? '' : 'background:#f3f4f6; color:#374151;' }} text-decoration:none; cursor:pointer;">
            All
        </a>
        {% for m in [3, 2, 1.2, 0.5, 0] %}
            <a href="{{ path('app_wfbo_pachinko_results', {multiplier: m, period: period.period}) }}"
               class="badge-status {{ multiplier == m ? 'badge-status--approved' : '' }}"
               style="{{ multiplier == m ? '' : 'background:#f3f4f6; color:#374151;' }} text-decoration:none; cursor:pointer;">
                {{ m }}x
            </a>
        {% endfor %}
    </div>

    <div class="card table-card" data-testid="pk-results-table-card">
        <div class="table-scroll">
            <table class="data-table">
                <thead>
                    <tr class="thead-row--light">
                        <th class="th-white">Time</th>
                        <th class="th-white">Player</th>
                        <th class="th-white">Multiplier</th>
                        <th class="th-white th-white--right">Amount</th>
                        <th class="th-white th-white--right">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--nowrap">
                            <p class="date-primary td-cell--dark">{{ bet.created_at|date('M d, Y') }}</p>
                            <p class="date-secondary">{{ bet.created_at|date('h:i A') }}</p>
                        </td>
                        <td class="td-cell td-cell--dark">
                            {% if is_granted('ROLE_ADMIN') %}
                                <a href="{{ path('app_wfbo_user_transactions', {id: bet.user_id}) }}" class="td-link">{{ bet.first_name }} {{ bet.last_name }}</a>
                            {% else %}
                                {{ bet.first_name }} {{ bet.last_name }}
                            {% endif %}
                            <p class="td-sub">{{ bet.mobile_number }}</p>
                        </td>
                        <td class="td-cell td-cell--dark fw-semibold">{{ bet.multiplier }}x</td>
                        <td class="td-cell td-cell--dark text-end font-mono-sm fw-medium">₱{{ bet.amount|number_format(2) }}</td>
                        <td class="td-cell text-end font-mono-sm fw-semibold" style="color:{{ bet.payout > bet.amount ? '#059669' : (bet.payout > 0 ? '#2563eb' : '#6b7280') }};">
                            {% if bet.payout > 0 %}₱{{ bet.payout|number_format(2) }}{% else %}—{% endif %}
                        </td>
                        <td class="td-cell">
                            {% if bet.status == 'won' and bet.multiplier >= 1 %}
                                <span class="badge-status badge-status--approved">Won</span>
                            {% else %}
                                <span class="badge-status badge-status--rejected">Lost</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="td-cell text-center" style="color:#6b7280; padding:40px 16px;">No bets found for this period.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="pk-results-pagination">
        <p class="mb-0" style="font-size:13px;color:#6b7280;">Page {{ currentPage }} of {{ totalPages }} ({{ total }} total)</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_pachinko_results', {page: currentPage - 1, period: period.period, multiplier: multiplier}) }}" class="btn btn-outline-secondary btn-sm">Previous</a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_pachinko_results', {page: currentPage + 1, period: period.period, multiplier: multiplier}) }}" class="btn btn-outline-secondary btn-sm">Next</a>
            {% endif %}
        </div>
    </div>
    {% endif %}
{% endblock %}