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

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

{% block wfbo_content %}

<style>
.cr-kpi { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; height: 100%; }
.cr-kpi__label { font-size: 12px; color: #6b7280; margin: 0; }
.cr-kpi__value { font-size: 20px; font-weight: 800; margin: 2px 0 0; color: #111827; }
.cr-sub { font-size: 11px; color: #9ca3af; }
.cr-type { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
.cr-type--deposit  { background: #dbeafe; color: #1e40af; }
.cr-type--cashback { background: #dcfce7; color: #166534; }
.cr-type--bonus    { background: #fef3c7; color: #92400e; }
.cr-status { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b7280; }
</style>

    {# ── Period ── #}
    <div class="period-filter-bar mb-2 d-flex flex-wrap gap-2 align-items-center">
        {% for key, label in presets %}
            <a href="{{ path('app_wfbo_campaigns_report', {period: key}) }}"
               class="period-pill {% if period.period == key %}is-active{% endif %}" data-testid="cr-period-{{ key }}">{{ label }}</a>
        {% endfor %}
    </div>
    <form method="GET" action="{{ path('app_wfbo_campaigns_report') }}" class="d-flex flex-wrap align-items-end gap-2 mb-3" data-testid="cr-range-form">
        <div>
            <label class="form-label--sm d-block" for="cr-from">From</label>
            <input type="date" id="cr-from" name="from" value="{{ from }}" class="form-control form-control-sm" data-testid="cr-from">
        </div>
        <div>
            <label class="form-label--sm d-block" for="cr-to">To</label>
            <input type="date" id="cr-to" name="to" value="{{ to }}" class="form-control form-control-sm" data-testid="cr-to">
        </div>
        <button type="submit" class="btn btn-sm btn-dark" data-testid="cr-range-submit">Apply</button>
        <span class="pagination-info mb-0 ms-2" data-testid="cr-period-label">Showing <strong>{{ period.label }}</strong></span>
    </form>

    {# ── KPIs ── #}
    {% set k = report.kpis %}
    <div class="row g-2 mb-3">
        <div class="col-6 col-lg-3"><div class="cr-kpi"><p class="cr-kpi__label">Total campaign cost</p><p class="cr-kpi__value" data-testid="cr-total">₱{{ k.total|number_format(2) }}</p><p class="cr-sub mb-0">{{ k.costPct is null ? 'no approved deposits in period' : k.costPct ~ '% of approved deposits (₱' ~ k.depositsIn|number_format(2) ~ ')' }}</p></div></div>
        <div class="col-6 col-lg-3"><div class="cr-kpi"><p class="cr-kpi__label">Deposit promos</p><p class="cr-kpi__value" data-testid="cr-total-deposit">₱{{ k.deposit|number_format(2) }}</p></div></div>
        <div class="col-6 col-lg-3"><div class="cr-kpi"><p class="cr-kpi__label">Cashback</p><p class="cr-kpi__value" data-testid="cr-total-cashback">₱{{ k.cashback|number_format(2) }}</p></div></div>
        <div class="col-6 col-lg-3"><div class="cr-kpi"><p class="cr-kpi__label">Claimable bonuses · players reached</p><p class="cr-kpi__value"><span data-testid="cr-total-bonus">₱{{ k.bonus|number_format(2) }}</span> · <span data-testid="cr-players">{{ k.players }}</span></p><p class="cr-sub mb-0">unique players credited by any campaign</p></div></div>
    </div>

    {# ── Chart ── #}
    <div class="card mb-3" data-controller="campaigns-report" data-campaigns-report-series-value="{{ report.series|json_encode|e('html_attr') }}" data-testid="cr-chart">
        <div class="card-body" style="height: 260px;"><canvas data-campaigns-report-target="canvas"></canvas></div>
    </div>

    {# ── Campaigns ── #}
    <div class="table-card">
        <div class="card-body p-0">
            {% if report.rows is empty and report.bonus.credits == 0 %}
                <p class="td-empty--lg text-center" data-testid="cr-empty">No campaigns were active in this period.</p>
            {% else %}
            <div class="table-scroll">
            <table class="w-100" data-testid="cr-table">
                <thead>
                    <tr class="thead-row--strong">
                        <th class="th-white">Campaign</th>
                        <th class="th-white">Runs</th>
                        <th class="th-white" style="text-align:right;">Paid in period</th>
                        <th class="th-white" style="text-align:right;">Players</th>
                        <th class="th-white">Details</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in report.rows %}
                    {% set c = r.campaign %}
                    <tr class="table-row" data-testid="cr-row-{{ r.type }}-{{ c.id }}">
                        <td class="td-cell">
                            <span class="cr-type cr-type--{{ r.type }}">{{ r.type == 'deposit' ? 'Deposit promo' : 'Cashback' }}</span>
                            <span class="td-cell--dark fw-semibold ms-1">{{ c.name }}</span>
                            <div class="cr-status">{{ r.status }}</div>
                        </td>
                        <td class="td-cell" style="white-space:nowrap;">
                            {{ c.startDate|date('M j') }} – {{ c.endDate|date('M j, Y') }}
                            <div class="cr-sub">{{ c.windowStart|date('g:i A') }} – {{ c.windowEnd|date('g:i A') }} · {{ c.daysOfWeekLabel }}</div>
                        </td>
                        <td class="td-cell fw-semibold" style="text-align:right;" data-testid="cr-paid-{{ r.type }}-{{ c.id }}">₱{{ r.total|number_format(2) }}
                            <div class="cr-sub">{{ r.credits }} credit{{ r.credits != 1 ? 's' : '' }}</div>
                        </td>
                        <td class="td-cell" style="text-align:right;">{{ r.players }}</td>
                        <td class="td-cell" style="font-size:13px;">
                            {% if r.type == 'deposit' %}
                                ₱{{ c.bonusAmount|number_format(2) }} for ₱{{ c.minDeposit|number_format(2) }}+ ·
                                {{ r.qualifying }} qualifying deposit{{ r.qualifying != 1 ? 's' : '' }}{% if r.perQualifying is not null %} (₱{{ r.perQualifying|number_format(2) }} each){% endif %}
                                <div><a href="{{ path('app_wfbo_deposit_campaign_report', {id: c.id}) }}" data-testid="cr-link-{{ r.type }}-{{ c.id }}">Effectiveness report →</a></div>
                            {% else %}
                                {{ c.percentage + 0 }}% of net loss on {{ c.gamesLabel }} ·
                                {{ r.releases }} release{{ r.releases != 1 ? 's' : '' }}, ₱{{ r.netLoss|number_format(2) }} loss covered
                                <div><a href="{{ path('app_wfbo_cashback_campaign_payout', {id: c.id}) }}" data-testid="cr-link-{{ r.type }}-{{ c.id }}">Payouts →</a></div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                    {% if report.bonus.credits > 0 %}
                    <tr class="table-row" data-testid="cr-row-bonus">
                        <td class="td-cell"><span class="cr-type cr-type--bonus">Claimable bonuses</span></td>
                        <td class="td-cell">—</td>
                        <td class="td-cell fw-semibold" style="text-align:right;">₱{{ report.bonus.total|number_format(2) }}
                            <div class="cr-sub">{{ report.bonus.credits }} claimed</div>
                        </td>
                        <td class="td-cell" style="text-align:right;">{{ report.bonus.players }}</td>
                        <td class="td-cell" style="font-size:13px;"><a href="{{ path('app_wfbo_bonuses', {status: 'claimed'}) }}">Bonuses →</a></td>
                    </tr>
                    {% endif %}
                </tbody>
                <tfoot>
                    <tr style="border-top:2px solid #d1d5db; background:#f1f5f9;">
                        <td class="td-cell fw-bold" colspan="2">Total</td>
                        <td class="td-cell fw-bold" style="text-align:right;">₱{{ k.total|number_format(2) }}</td>
                        <td class="td-cell fw-bold" style="text-align:right;">{{ k.players }}</td>
                        <td class="td-cell"></td>
                    </tr>
                </tfoot>
            </table>
            </div>
            {% endif %}
        </div>
    </div>
    <p class="cr-sub mt-2">
        A campaign is listed when its dates overlap the period or it paid something in it. Cost is the wallet credits made in the period
        (a deposit promo when the deposit was approved, a cashback when it was released) — the same figures as Finance ▸ Report's Bonuses Paid.
    </p>

{% endblock %}