{#
    Claimable-bonus popup (PlayerBonus). Opens on every home visit while the
    player has an unclaimed bonus inside its claim window; × only hides it for
    this page view. Several bonuses are shown one at a time, soonest-expiring
    first. Behaviour: assets/controllers/bonus_popup_controller.js.
#}
{% if claimableBonuses is defined and claimableBonuses is not empty %}
<style>
.bonus-modal .modal-content { background: #111827; color: #f9fafb; border: 1px solid #f59e0b; border-radius: 16px; overflow: hidden; }
.bonus-modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.55); border: 0; border-radius: 50%; width: 32px; height: 32px; color: #fff; display: flex; align-items: center; justify-content: center; }
.bonus-modal__image-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.bonus-modal__image-btn img { display: block; width: 100%; max-height: 60vh; object-fit: contain; background: #000; transition: transform .15s ease; }
.bonus-modal__image-btn:hover img { transform: scale(1.02); }
.bonus-modal__image-btn:disabled { cursor: progress; opacity: .7; }
.bonus-modal__amount { font-size: 28px; font-weight: 800; color: #fbbf24; margin: 0; }
.bonus-modal__details { font-size: 14px; color: #d1d5db; white-space: pre-line; margin: 8px 0 4px; }
.bonus-modal__until { font-size: 12px; color: #9ca3af; margin: 0; }
.bonus-modal__claim { width: 100%; border: 0; border-radius: 999px; padding: 12px; font-weight: 800; font-size: 16px; color: #111827; background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.bonus-modal__claim:disabled { opacity: .7; }
.bonus-modal__error { font-size: 13px; color: #fca5a5; margin: 8px 0 0; }
.bonus-modal__success { text-align: center; padding: 28px 16px; }
.bonus-modal__success p { margin: 0; }
/* Lottie confetti (assets/game/confetti.json) over the whole viewport, above the modal. */
.bonus-confetti { position: fixed; inset: 0; z-index: 1060; pointer-events: none; }
.bonus-confetti svg { width: 100% !important; height: 100% !important; }
</style>

<div class="modal fade bonus-modal" id="bonusModal" tabindex="-1" aria-labelledby="bonusModalLabel" aria-hidden="true"
     data-controller="bonus-popup"
     data-bonus-popup-confetti-url-value="{{ asset('game/confetti.json') }}"
     data-testid="bonus-popup">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content position-relative">
            <button type="button" class="bonus-modal__close" data-bs-dismiss="modal" aria-label="Close" data-testid="bonus-popup-close">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>

            {% for bonus in claimableBonuses %}
            <div data-bonus-popup-target="item"
                 data-url="{{ path('app_bonus_claim', {id: bonus.id}) }}"
                 data-token="{{ csrf_token('bonus_claim_' ~ bonus.id) }}"
                 data-testid="bonus-item-{{ bonus.id }}"
                 {% if not loop.first %}hidden{% endif %}>
                <button type="button" class="bonus-modal__image-btn" data-action="bonus-popup#claim" data-testid="bonus-claim-{{ bonus.id }}"
                        aria-label="Claim your ₱{{ bonus.amount|number_format(2) }} bonus">
                    <img src="{{ bonus.imageUrl }}" alt="Bonus ₱{{ bonus.amount|number_format(2) }}">
                </button>
                <div class="p-3">
                    <p id="bonusModalLabel" class="bonus-modal__amount">₱{{ bonus.amount|number_format(2) }} Bonus</p>
                    {% if bonus.details %}
                        <p class="bonus-modal__details">{{ bonus.details }}</p>
                    {% endif %}
                    <p class="bonus-modal__until mb-3">Claim before {{ bonus.claimUntil|date('M j, Y g:i A') }}</p>
                    <button type="button" class="bonus-modal__claim" data-action="bonus-popup#claim" data-testid="bonus-claim-btn-{{ bonus.id }}">
                        Claim ₱{{ bonus.amount|number_format(2) }}
                    </button>
                    <p class="bonus-modal__error" data-role="error" data-testid="bonus-error-{{ bonus.id }}" hidden></p>
                </div>
            </div>
            {% endfor %}

            <div class="bonus-modal__success" data-bonus-popup-target="success" data-testid="bonus-success" hidden>
                <p style="font-size: 40px;">🎉</p>
                <p class="bonus-modal__amount" data-bonus-popup-target="successAmount"></p>
                <p class="bonus-modal__details">has been added to your wallet.</p>
            </div>
        </div>
    </div>
</div>
{% endif %}