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

{% block title %}{{ bonus ? 'Edit' : 'New' }} Bonus — WFBO{% endblock %}
{% block wfbo_title %}{{ bonus ? 'Edit' : 'New' }} Bonus{% endblock %}

{% block wfbo_content %}

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

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

    <div class="card" style="max-width: 600px;">
        <div class="card-body">

            <h2 class="wfbo-card-title mb-3">{{ bonus ? 'Edit Bonus #' ~ bonus.id : 'New Bonus' }}</h2>

            <form method="POST"
                  action="{{ bonus ? path('app_wfbo_bonus_edit', {id: bonus.id}) : path('app_wfbo_bonus_new') }}"
                  data-testid="bonus-form"
                  data-turbo="false"
                  enctype="multipart/form-data"
                  novalidate>
                <input type="hidden" name="_token" value="{{ csrf_token(bonus ? 'wfbo_bonus_edit_' ~ bonus.id : 'wfbo_bonus_new') }}">

                <div class="mb-3">
                    <label class="form-label--sm" for="bonus-image">
                        Bonus Image {% if not bonus %}<span class="text-danger">*</span>{% endif %}
                    </label>
                    {% if bonus %}
                        <div class="mb-2">
                            <img src="{{ bonus.imageUrl }}" alt="Current bonus image" style="max-height: 100px; border-radius: 6px;">
                        </div>
                    {% endif %}
                    <input type="file" id="bonus-image" name="image" accept="image/*" class="form-control" style="max-width: 420px;" data-testid="input-bonus-image">
                    <p class="form-hint">{{ bonus ? 'Leave empty to keep the current image. ' : '' }}The player clicks this image to claim the bonus.</p>
                </div>

                <div class="mb-3">
                    <label class="form-label--sm" for="bonus-mobile">User Mobile Number <span class="text-danger">*</span></label>
                    <input type="text" id="bonus-mobile" name="mobile" class="form-control" style="max-width: 260px;"
                           placeholder="e.g. 09171234567" value="{{ submitted.mobile }}" data-testid="input-bonus-mobile">
                    <p class="form-hint">The one user who can claim this bonus.</p>
                </div>

                <div class="mb-3">
                    <label class="form-label--sm" for="bonus-amount">Amount (₱) <span class="text-danger">*</span></label>
                    <input type="number" id="bonus-amount" name="amount" min="0.01" step="0.01" class="form-control" style="max-width: 200px;"
                           value="{{ submitted.amount }}" data-testid="input-bonus-amount">
                </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="bonus-claim-from">Claim From <span class="text-danger">*</span></label>
                        <input type="datetime-local" id="bonus-claim-from" name="claim_from" class="form-control"
                               value="{{ submitted.claimFrom }}" data-testid="input-bonus-claim-from">
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label--sm" for="bonus-claim-until">Claim Until <span class="text-danger">*</span></label>
                        <input type="datetime-local" id="bonus-claim-until" name="claim_until" class="form-control"
                               value="{{ submitted.claimUntil }}" data-testid="input-bonus-claim-until">
                    </div>
                    <div class="col-12"><p class="form-hint mb-0">Philippine time. The popup shows only inside this period.</p></div>
                </div>

                <div class="mb-4">
                    <label class="form-label--sm" for="bonus-details">Bonus Details</label>
                    <textarea id="bonus-details" name="details" rows="4" class="form-control" style="max-width: 520px;"
                              placeholder="e.g. Thank you for playing! Here's a birthday bonus." data-testid="input-bonus-details">{{ submitted.details }}</textarea>
                    <p class="form-hint">Optional — shown to the player in the popup.</p>
                </div>

                {% if bonus %}
                    <p class="form-hint mb-3">Created by {{ bonus.createdBy.firstName }} {{ bonus.createdBy.lastName }} on {{ bonus.createdAt|date('M j, Y g:i A') }}.</p>
                {% endif %}

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

        </div>
    </div>

{% endblock %}