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

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

{% block wfbo_content %}

<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]');
    if (!link) return;
    e.preventDefault();
    const days = link.dataset.dcDays.split(',');
    document.querySelectorAll('input[name="days[]"]').forEach(function (cb) { cb.checked = days.includes(cb.value); });
});
</script>

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

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

            <form method="POST"
                  action="{{ campaign ? path('app_wfbo_deposit_campaign_edit', {id: campaign.id}) : path('app_wfbo_deposit_campaign_new') }}"
                  data-testid="deposit-campaign-form" data-turbo="false" novalidate>
                <input type="hidden" name="_token" value="{{ csrf_token(campaign ? 'wfbo_deposit_campaign_edit_' ~ campaign.id : 'wfbo_deposit_campaign_new') }}">

                <div class="mb-3">
                    <label class="form-label--sm" for="dc-name">Campaign Name <span class="text-danger">*</span></label>
                    <input type="text" id="dc-name" name="name" maxlength="120" class="form-control" style="max-width: 420px;"
                           placeholder="e.g. Morning Deposit Promo" value="{{ submitted.name }}" data-testid="input-dc-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="dc-start-date">From Date <span class="text-danger">*</span></label>
                        <input type="date" id="dc-start-date" name="start_date" class="form-control" value="{{ submitted.startDate }}" data-testid="input-dc-start-date">
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label--sm" for="dc-end-date">To Date <span class="text-danger">*</span></label>
                        <input type="date" id="dc-end-date" name="end_date" class="form-control" value="{{ submitted.endDate }}" data-testid="input-dc-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="dc-window-start">Daily Start Time <span class="text-danger">*</span></label>
                        <input type="time" id="dc-window-start" name="window_start" class="form-control" value="{{ submitted.windowStart }}" data-testid="input-dc-window-start">
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label--sm" for="dc-window-end">Daily End Time <span class="text-danger">*</span></label>
                        <input type="time" id="dc-window-end" name="window_end" class="form-control" value="{{ submitted.windowEnd }}" data-testid="input-dc-window-end">
                    </div>
                    <div class="col-12"><p class="form-hint mb-0">Philippine time. A deposit counts when it is <strong>requested</strong> from the start time up to (not including) the end time — e.g. 9:00 AM – 12:00 PM includes 11:59 AM.</p></div>
                </div>

                <div class="mb-3" data-testid="dc-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[]" value="{{ num }}" {{ num in submitted.days ? 'checked' : '' }}
                                       data-testid="input-dc-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" data-testid="dc-days-every">Every day</a> ·
                        <a href="#" data-dc-days="1,2,3,4,5">Weekdays</a> ·
                        <a href="#" data-dc-days="6,7">Weekends</a>.
                        Deposits requested on other days earn nothing, even inside the dates and time window.
                    </p>
                </div>

                <div class="row g-3 mb-4" style="max-width: 520px;">
                    <div class="col-12 col-sm-6">
                        <label class="form-label--sm" for="dc-min">Minimum Deposit (₱) <span class="text-danger">*</span></label>
                        <input type="number" id="dc-min" name="min_deposit" min="0.01" step="0.01" class="form-control" value="{{ submitted.minDeposit }}" data-testid="input-dc-min-deposit">
                        <p class="form-hint mb-0">Checked against the approved amount.</p>
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label--sm" for="dc-bonus">Bonus (₱) <span class="text-danger">*</span></label>
                        <input type="number" id="dc-bonus" name="bonus_amount" min="0.01" step="0.01" class="form-control" value="{{ submitted.bonusAmount }}" data-testid="input-dc-bonus-amount">
                        <p class="form-hint mb-0">Credited once per player per day.</p>
                    </div>
                </div>

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

{% endblock %}