{{--    Bonus Rewards tab — admin can configure per-card rules that fire when:
      - Case 1: 'any N' stamps completed (rule_type = any_n)
      - Case 2: specific Grid IDs completed (rule_type = specific)
      - Case 3: full card completed (rule_type = card_complete)

    Output is collected by stampcard_admin.js' serializeBonusRewards() and POST inside the existing main_game[setting_details][bonus_rewards] structure on the Save Changes button.
--}}

@component('admin.components.card', ['header' => 'Bonus Rewards'])
    <div class="d-flex justify-content-end mb-3">
        <button type="button" class="btn btn-sm btn-outline-primary" id="dsc-bonus-add">
            + Add Bonus Reward
        </button>
    </div>
 
    <p class="text-muted small mb-3">
        Rules are evaluated whenever a user completes a grid. Each rule fires at most once
        per user per card iteration. Rewards are distributed using the same engine as the
        generic Bonus Module feature.
    </p>
 
    <div id="dsc-bonus-host">
        {{-- Cloned rows from #dsc-bonus-row-template will be appended here. --}}
        <div class="text-muted small dsc-bonus-empty">No bonus rewards configured yet.</div>
    </div>
@endcomponent
 
 
{{-- ============================================================ --}}
{{-- Template — one bonus reward rule row                         --}}
{{-- ============================================================ --}}
<template id="dsc-bonus-row-template">
    <div class="card mb-3 dsc-bonus-row">
        <div class="card-body">
            <input type="hidden" class="dsc-br-id">
 
            <div class="form-row align-items-end">
                <div class="form-group col-md-4">
                    <label class="small font-weight-bold">Name</label>
                    <input type="text" class="form-control form-control-sm dsc-br-name"
                           placeholder="e.g. Halfway Bonus">
                </div>
 
                <div class="form-group col-md-2">
                    <label class="small font-weight-bold">Card</label>
                    <select class="form-control form-control-sm dsc-br-card">
                        {{-- options injected from response.main_game.cards --}}
                    </select>
                </div>
 
                <div class="form-group col-md-3">
                    <label class="small font-weight-bold">Rule Type</label>
                    <select class="form-control form-control-sm dsc-br-type">
                        <option value="any_n">Any N stamps</option>
                        <option value="specific">Specific Grid IDs</option>
                        <option value="card_complete">Card complete</option>
                    </select>
                </div>
 
                <div class="form-group col-md-2">
                    <label class="small font-weight-bold d-block">Active</label>
                    {{-- id + for are stamped by JS (buildBonusRow). --}}
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input dsc-br-active" checked>
                        <label class="custom-control-label">Enabled</label>
                    </div>
                </div>
 
                <div class="form-group col-md-1 text-right">
                    <button type="button" class="btn btn-sm btn-outline-danger dsc-br-delete" title="Delete rule">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
 
            <div class="form-row">
                {{-- any_n branch --}}
                <div class="form-group col-md-3 dsc-br-when-any_n">
                    <label class="small">Threshold (N)</label>
                    <input type="number" min="1" step="1" class="form-control form-control-sm dsc-br-threshold" value="1">
                    <small class="form-text text-muted">Fires when this many stamps are completed on the card.</small>
                </div>
 
                {{-- specific branch --}}
                <div class="form-group col-md-6 dsc-br-when-specific d-none">
                    <label class="small">Required Grid IDs</label>
                    <select class="form-control form-control-sm dsc-br-grids" multiple>
                        {{-- options injected based on the chosen card --}}
                    </select>
                    <small class="form-text text-muted">All selected grids must be completed before the rule fires.</small>
                </div>
 
                {{-- card_complete branch — no extra controls --}}
                <div class="form-group col-md-6 dsc-br-when-card_complete d-none">
                    <small class="form-text text-muted mt-4">Fires once when every grid on the chosen card is completed.</small>
                </div>
            </div>
 
            <fieldset class="border rounded p-3">
                <legend class="w-auto px-2 small text-uppercase">Rewards</legend>
                <div class="form-row align-items-end">
                    <div class="form-group col-md-3">
                        <div class="custom-control custom-checkbox mb-1">
                            {{-- id + for are stamped by JS (buildBonusRow). --}}
                            <input type="checkbox" class="custom-control-input dsc-br-points-act">
                            <label class="custom-control-label">Points</label>
                        </div>
                        <input type="number" min="0" step="1" class="form-control form-control-sm dsc-br-points" value="0">
                    </div>
                    <div class="form-group col-md-9">
                        <div class="custom-control custom-checkbox mb-1">
                            {{-- id + for are stamped by JS (buildBonusRow). --}}
                            <input type="checkbox" class="custom-control-input dsc-br-vouchers-act">
                            <label class="custom-control-label">Voucher Series</label>
                        </div>
                        <select class="form-control form-control-sm select2 w-100 dsc-br-vouchers" multiple
                                data-ajax-url="{{ route('admin.select2.ajax.get_data', 'voucher_series') }}">
                        </select>
                        <small class="form-text text-muted">Only provisioned while stocks last.</small>
                    </div>
                </div>
            </fieldset>

            <fieldset class="border rounded p-3 mt-3">
                <legend class="w-auto px-2 small text-uppercase">Achievement Popup</legend>

                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input dsc-br-popup-enabled">
                    <label class="custom-control-label">Show a popup when this reward is achieved</label>
                </div>

                <div class="dsc-br-popup-fields">
                    <div class="form-group">
                        <label class="small font-weight-bold">Title <span class="text-muted">(HTML supported)</span></label>
                        <textarea class="form-control form-control-sm dsc-rte dsc-br-popup-title" rows="3"
                                  placeholder="e.g. <b>Congratulations!</b>"></textarea>
                    </div>

                    <div class="form-group">
                        <label class="small font-weight-bold">Subtitle <span class="text-muted">(optional)</span></label>
                        <input type="text" class="form-control form-control-sm dsc-br-popup-subtitle"
                               placeholder="Leave blank to hide">
                    </div>

                    <div class="form-group">
                        <label class="small font-weight-bold">Media <span class="text-muted">(image, GIF or video — optional)</span></label>
                        <div class="form-row">
                            <div class="col-md-7">
                                <input type="text" class="form-control form-control-sm dsc-br-popup-media-url"
                                       placeholder="Paste a URL or upload">
                            </div>
                            <div class="col-md-3">
                                <select class="form-control form-control-sm dsc-br-popup-media-type">
                                    <option value="image">Image / GIF</option>
                                    <option value="video">Video</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="file" class="d-none dsc-br-popup-media-upload"
                                       accept="image/*,video/*">
                                <button type="button" class="btn btn-sm btn-outline-secondary w-100 dsc-br-popup-media-pick">
                                    Upload
                                </button>
                            </div>
                        </div>
                        <small class="form-text text-muted">
                            Images/GIFs and MP4/WebM videos are supported. Choose the matching media type.
                        </small>
                        <div class="dsc-br-popup-media-preview mt-2"></div>
                    </div>

                    <small class="form-text text-muted">A “Close” button is added to the popup automatically.</small>
                </div>
            </fieldset>
        </div>
    </div>
</template>