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

{% block title %}Deposit Campaigns — WFBO{% endblock %}
{% block wfbo_title %}Deposit 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--active    { background: #dcfce7; color: #166534; }
.dc-status--scheduled { background: #e0e7ff; color: #3730a3; }
.dc-status--ended     { 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 whose deposit is <strong>requested</strong> inside a campaign's daily window, on one of its dates, for at least the
            minimum, get the bonus credited automatically when Finance approves it — at most once per player per day.
        </p>
        <a href="{{ path('app_wfbo_deposit_campaign_new') }}" class="pill-link--primary" data-testid="btn-new-deposit-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 deposit campaigns yet.</p>
            {% else %}
                <div class="table-scroll">
                <table class="w-100" data-testid="deposit-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" style="text-align:right;">Min Deposit</th>
                            <th class="th-white" style="text-align:right;">Bonus</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="deposit-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') }}</td>
                            <td class="td-cell" style="white-space:nowrap;" data-testid="deposit-campaign-window-{{ c.id }}">
                                {{ c.windowStart|date('g:i A') }} – {{ c.windowEnd|date('g:i A') }}
                                <div class="dc-sub" data-testid="deposit-campaign-days-{{ c.id }}">{{ c.daysOfWeekLabel }}</div>
                            </td>
                            <td class="td-cell" style="text-align:right;">₱{{ c.minDeposit|number_format(2) }}</td>
                            <td class="td-cell fw-semibold" style="text-align:right;">₱{{ c.bonusAmount|number_format(2) }}</td>
                            <td class="td-cell"><span class="dc-status dc-status--{{ st }}" data-testid="deposit-campaign-status-{{ c.id }}">{{ st }}</span></td>
                            <td class="td-cell" style="text-align:right;">
                                <a href="{{ path('app_wfbo_deposit_campaign_awards', {id: c.id}) }}" data-testid="deposit-campaign-paid-{{ c.id }}">{{ s.count }} · ₱{{ s.total|number_format(2) }}</a>
                            </td>
                            <td class="td-cell">
                                <div class="d-flex gap-2 align-items-center">
                                    <a href="{{ path('app_wfbo_deposit_campaign_report', {id: c.id}) }}" class="pill-link--secondary" data-testid="btn-report-deposit-campaign-{{ c.id }}">Report</a>
                                    <a href="{{ path('app_wfbo_deposit_campaign_edit', {id: c.id}) }}" class="pill-link--secondary" data-testid="btn-edit-deposit-campaign-{{ c.id }}">Edit</a>
                                    <form method="POST" action="{{ path('app_wfbo_deposit_campaign_toggle', {id: c.id}) }}" class="m-0"
                                          {% if c.enabled %}onsubmit="return confirm('Disable this campaign? Deposits approved from now on will not earn its bonus.');"{% endif %}>
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_deposit_campaign_toggle_' ~ c.id) }}">
                                        <button type="submit" class="{{ c.enabled ? 'btn-disable' : 'btn-approve' }}" data-testid="btn-toggle-deposit-campaign-{{ c.id }}">
                                            {{ c.enabled ? 'Disable' : 'Enable' }}
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                </div>
            {% endif %}
        </div>
    </div>

{% endblock %}