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

{% block title %}Cashback Campaigns — WFBO{% endblock %}
{% block wfbo_title %}Cashback Campaigns{% endblock %}

{% block wfbo_content %}

<style>
.dc-status { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.dc-status--running   { background: #dcfce7; color: #166534; }
.dc-status--scheduled { background: #e0e7ff; color: #3730a3; }
.dc-status--ready     { background: #fef3c7; color: #92400e; }
.dc-status--paid      { background: #f3f4f6; color: #6b7280; }
.dc-status--disabled  { background: #fee2e2; color: #991b1b; }
.dc-sub { font-size: 11px; color: #9ca3af; }
</style>

    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">{{ flash }}</div>
    {% endfor %}

    <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
        <p class="wfbo-card-desc mb-0">
            Players who end up <strong>net down</strong> (stakes minus payouts, settled bets only) on the chosen games, for bets placed
            on the campaign's dates and days inside its daily window, get the cashback % of that loss. Once the campaign ends,
            review the list and pay it out — each player is paid once per campaign.
        </p>
        <a href="{{ path('app_wfbo_cashback_campaign_new') }}" class="pill-link--primary" data-testid="btn-new-cashback-campaign">+ New Campaign</a>
    </div>

    <div class="table-card">
        <div class="card-body p-0">
            {% if campaigns is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state">No cashback campaigns yet.</p>
            {% else %}
                <div class="table-scroll">
                <table class="w-100" data-testid="cashback-campaigns-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Campaign</th>
                            <th class="th-white">Dates</th>
                            <th class="th-white">Daily Window / Days</th>
                            <th class="th-white">Games</th>
                            <th class="th-white" style="text-align:right;">Cashback</th>
                            <th class="th-white">Status</th>
                            <th class="th-white" style="text-align:right;">Paid</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for c in campaigns %}
                        {% set st = c.status(now) %}
                        {% set s = stats[c.id] ?? {count: 0, total: '0.00'} %}
                        <tr class="table-row" data-testid="cashback-campaign-row-{{ c.id }}">
                            <td class="td-cell">
                                <span class="td-cell--dark fw-semibold">{{ c.name }}</span>
                                <div class="dc-sub">by {{ c.createdBy.firstName }} {{ c.createdBy.lastName }}, {{ c.createdAt|date('M j, Y') }}{% if c.updatedBy %} · edited by {{ c.updatedBy.firstName }}{% endif %}</div>
                            </td>
                            <td class="td-cell" style="white-space:nowrap;">
                                {{ c.startDate|date('M j') }} – {{ c.endDate|date('M j, Y') }}
                                {% if c.endedAt %}<div class="dc-sub">ended {{ c.endedAt|date('M j, g:i A') }}</div>{% endif %}
                            </td>
                            <td class="td-cell" style="white-space:nowrap;" data-testid="cashback-campaign-window-{{ c.id }}">
                                {{ c.windowStart|date('g:i A') }} – {{ c.windowEnd|date('g:i A') }}
                                <div class="dc-sub">{{ c.daysOfWeekLabel }}</div>
                            </td>
                            <td class="td-cell" style="max-width:220px;" data-testid="cashback-campaign-games-{{ c.id }}">{{ c.gamesLabel }}</td>
                            <td class="td-cell" style="text-align:right; white-space:nowrap;">
                                <span class="fw-semibold" data-testid="cashback-campaign-pct-{{ c.id }}">{{ c.percentage + 0 }}%</span>
                                {% if c.minLoss or c.maxCashback %}
                                    <div class="dc-sub">
                                        {% if c.minLoss %}min loss ₱{{ c.minLoss|number_format(2) }}{% endif %}
                                        {% if c.minLoss and c.maxCashback %} · {% endif %}
                                        {% if c.maxCashback %}max ₱{{ c.maxCashback|number_format(2) }}{% endif %}
                                    </div>
                                {% endif %}
                            </td>
                            <td class="td-cell"><span class="dc-status dc-status--{{ st }}" data-testid="cashback-campaign-status-{{ c.id }}">{{ st }}</span></td>
                            <td class="td-cell" style="text-align:right;" data-testid="cashback-campaign-paid-{{ c.id }}">
                                {% set rs = releaseStats[c.id] ?? null %}
                                {% if rs %}
                                    ₱{{ s.total|number_format(2) }}
                                    <div class="dc-sub">{{ rs.releases }} release{{ rs.releases != 1 ? 's' : '' }} · last {{ rs.lastReleasedAt|date('M j, g:i A') }}</div>
                                {% else %}—{% endif %}
                            </td>
                            <td class="td-cell">
                                <div class="d-flex gap-2 align-items-center flex-wrap">
                                    {% if st in ['running', 'ready', 'paid'] %}
                                        <a href="{{ path('app_wfbo_cashback_campaign_payout', {id: c.id}) }}" class="pill-link--secondary" data-testid="btn-review-cashback-campaign-{{ c.id }}">{{ st == 'ready' ? 'Final release' : (st == 'paid' ? 'Payouts' : (st == 'running' ? 'Preview / Release' : 'Preview')) }}</a>
                                    {% endif %}
                                    {% if st != 'paid' %}
                                        <a href="{{ path('app_wfbo_cashback_campaign_edit', {id: c.id}) }}" class="pill-link--secondary" data-testid="btn-edit-cashback-campaign-{{ c.id }}">Edit</a>
                                    {% endif %}
                                    {% if st == 'running' %}
                                        <form method="POST" action="{{ path('app_wfbo_cashback_campaign_end', {id: c.id}) }}" class="m-0"
                                              onsubmit="return confirm('End this campaign now? Bets from this moment on will not count.');">
                                            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_cashback_campaign_end_' ~ c.id) }}">
                                            <button type="submit" class="btn-disable" data-testid="btn-end-cashback-campaign-{{ c.id }}">End now</button>
                                        </form>
                                    {% endif %}
                                    {% if st != 'paid' %}
                                        <form method="POST" action="{{ path('app_wfbo_cashback_campaign_toggle', {id: c.id}) }}" class="m-0"
                                              {% if c.enabled %}onsubmit="return confirm('Disable this campaign? It cannot be paid out while disabled.');"{% endif %}>
                                            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_cashback_campaign_toggle_' ~ c.id) }}">
                                            <button type="submit" class="{{ c.enabled ? 'btn-disable' : 'btn-approve' }}" data-testid="btn-toggle-cashback-campaign-{{ c.id }}">
                                                {{ c.enabled ? 'Disable' : 'Enable' }}
                                            </button>
                                        </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                </div>
            {% endif %}
        </div>
    </div>

{% endblock %}