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

{% block title %}{{ campaign ? 'Edit' : 'New' }} Cashback Campaign — WFBO{% endblock %}
{% block wfbo_title %}{{ campaign ? 'Edit' : 'New' }} Cashback Campaign{% endblock %}

{% block wfbo_content %}
{% set locked = campaign and campaign.hasReleases %}

<style>
.dc-day { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d1d5db; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.dc-day:has(input:checked) { background: #111827; border-color: #111827; color: #fff; }
.dc-day input { accent-color: #fff; }
</style>
<script>
document.addEventListener('click', function (e) {
    const link = e.target.closest('[data-dc-days],[data-cb-games]');
    if (!link) return;
    e.preventDefault();
    if (link.dataset.dcDays !== undefined) {
        const days = link.dataset.dcDays.split(',');
        document.querySelectorAll('input[name="days[]" {{ locked ? 'disabled' : '' }}]').forEach(function (cb) { cb.checked = days.includes(cb.value); });
    } else {
        const all = link.dataset.cbGames === 'all';
        document.querySelectorAll('input[name="games[]" {{ locked ? 'disabled' : '' }}]').forEach(function (cb) { cb.checked = all; });
    }
});
</script>

    <div class="mb-4">
        <a href="{{ path('app_wfbo_cashback_campaigns') }}" class="back-link">← Back to Cashback Campaigns</a>
    </div>

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

    <div class="card" style="max-width: 640px;">
        <div class="card-body">
            <h2 class="wfbo-card-title mb-3">{{ campaign ? 'Edit ' ~ campaign.name : 'New Cashback Campaign' }}</h2>

            <form method="POST"
                  action="{{ campaign ? path('app_wfbo_cashback_campaign_edit', {id: campaign.id}) : path('app_wfbo_cashback_campaign_new') }}"
                  data-testid="cashback-campaign-form" data-turbo="false" novalidate>
                <input type="hidden" name="_token" value="{{ csrf_token(campaign ? 'wfbo_cashback_campaign_edit_' ~ campaign.id : 'wfbo_cashback_campaign_new') }}">
                {% if locked %}
                    <div class="alert alert-info" data-testid="cb-locked-note">
                        This campaign has already paid a release (up to {{ campaign.paidUntil|date('M j, Y g:i A') }}), so its rules are locked.
                        You can still rename it or change the end date.
                    </div>
                {% endif %}

                <div class="mb-3">
                    <label class="form-label--sm" for="cb-name">Campaign Name <span class="text-danger">*</span></label>
                    <input type="text" id="cb-name" name="name" maxlength="120" class="form-control" style="max-width: 420px;"
                           placeholder="e.g. Weekend Cash Back" value="{{ submitted.name }}" data-testid="input-cb-name">
                    <p class="form-hint">Shown on the player's Bonus transaction.</p>
                </div>

                <div class="row g-3 mb-3" style="max-width: 520px;">
                    <div class="col-12 col-sm-6">
                        <label class="form-label--sm" for="cb-start-date">From Date <span class="text-danger">*</span></label>
                        <input type="date" id="cb-start-date" name="start_date" {{ locked ? 'disabled' : '' }} class="form-control" value="{{ submitted.startDate }}" data-testid="input-cb-start-date">
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label--sm" for="cb-end-date">To Date <span class="text-danger">*</span></label>
                        <input type="date" id="cb-end-date" name="end_date" class="form-control" value="{{ submitted.endDate }}" data-testid="input-cb-end-date">
                    </div>
                </div>

                <div class="row g-3 mb-3" style="max-width: 520px;">
                    <div class="col-12 col-sm-6">
                        <label class="form-label--sm" for="cb-window-start">Daily Start Time <span class="text-danger">*</span></label>
                        <input type="time" id="cb-window-start" name="window_start" {{ locked ? 'disabled' : '' }} class="form-control" value="{{ submitted.windowStart }}" data-testid="input-cb-window-start">
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label--sm" for="cb-window-end">Daily End Time <span class="text-danger">*</span></label>
                        <input type="time" id="cb-window-end" name="window_end" {{ locked ? 'disabled' : '' }} class="form-control" value="{{ submitted.windowEnd }}" data-testid="input-cb-window-end">
                    </div>
                    <div class="col-12"><p class="form-hint mb-0">Philippine time. A bet counts when it is <strong>placed</strong> from the start time up to (not including) the end time. An end time of 12:00 AM means midnight, so 12:00 AM – 12:00 AM is the whole day.</p></div>
                </div>

                <div class="mb-3" data-testid="cb-days">
                    <label class="form-label--sm d-block">Run On <span class="text-danger">*</span></label>
                    <div class="d-flex flex-wrap gap-2 mb-1">
                        {% for num, label in {1: 'Mon', 2: 'Tue', 3: 'Wed', 4: 'Thu', 5: 'Fri', 6: 'Sat', 7: 'Sun'} %}
                            <label class="dc-day">
                                <input type="checkbox" name="days[]" {{ locked ? 'disabled' : '' }} value="{{ num }}" {{ num in submitted.days ? 'checked' : '' }} data-testid="input-cb-day-{{ num }}">
                                <span>{{ label }}</span>
                            </label>
                        {% endfor %}
                    </div>
                    <p class="form-hint mb-0">
                        Quick select:
                        <a href="#" data-dc-days="1,2,3,4,5,6,7">Every day</a> ·
                        <a href="#" data-dc-days="1,2,3,4,5">Weekdays</a> ·
                        <a href="#" data-dc-days="6,7">Weekends</a>.
                    </p>
                </div>

                <div class="mb-3" data-testid="cb-games">
                    <label class="form-label--sm d-block">Games <span class="text-danger">*</span></label>
                    <div class="d-flex flex-wrap gap-2 mb-1">
                        {% for key, label in constant('App\\Entity\\CashbackCampaign::GAMES') %}
                            <label class="dc-day">
                                <input type="checkbox" name="games[]" {{ locked ? 'disabled' : '' }} value="{{ key }}" {{ key in submitted.games ? 'checked' : '' }} data-testid="input-cb-game-{{ key }}">
                                <span>{{ label }}</span>
                            </label>
                        {% endfor %}
                    </div>
                    <p class="form-hint mb-0">
                        <a href="#" data-cb-games="all">All</a> · <a href="#" data-cb-games="none" data-testid="cb-games-none">None</a>.
                        Only losses on the selected games count.
                    </p>
                </div>

                <div class="row g-3 mb-4" style="max-width: 600px;">
                    <div class="col-12 col-sm-4">
                        <label class="form-label--sm" for="cb-pct">Cashback % <span class="text-danger">*</span></label>
                        <input type="number" id="cb-pct" name="percentage" {{ locked ? 'disabled' : '' }} min="0.01" max="100" step="0.01" class="form-control" value="{{ submitted.percentage }}" data-testid="input-cb-percentage">
                        <p class="form-hint mb-0">Of the player's net loss.</p>
                    </div>
                    <div class="col-12 col-sm-4">
                        <label class="form-label--sm" for="cb-min">Minimum Loss (₱)</label>
                        <input type="number" id="cb-min" name="min_loss" {{ locked ? 'disabled' : '' }} min="0.01" step="0.01" class="form-control" value="{{ submitted.minLoss }}" placeholder="No minimum" data-testid="input-cb-min-loss">
                        <p class="form-hint mb-0">Smaller losses get nothing.</p>
                    </div>
                    <div class="col-12 col-sm-4">
                        <label class="form-label--sm" for="cb-max">Max Cashback (₱)</label>
                        <input type="number" id="cb-max" name="max_cashback" {{ locked ? 'disabled' : '' }} min="0.01" step="0.01" class="form-control" value="{{ submitted.maxCashback }}" placeholder="No cap" data-testid="input-cb-max-cashback">
                        <p class="form-hint mb-0">Per player.</p>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <button type="submit" class="btn btn-admin-save" data-testid="btn-submit-cashback-campaign">{{ campaign ? 'Update' : 'Create' }} Campaign</button>
                    <a href="{{ path('app_wfbo_cashback_campaigns') }}" class="back-link">Cancel</a>
                </div>
            </form>
        </div>
    </div>

{% endblock %}