@php
    $reward_qty_id = $reward_qty_id ?? null;
    $is_half = $is_half ?? false;
    $data_category = $data_category ?? null;
@endphp

@if ($reward_qty_id !== false)
    @php
        $id = $reward_qty_id ?? 'qty';
        $hasError = $errors->has($id);
    @endphp
    @component('admin.components.form_field', [
        'class' => 'col-12 col-sm-12 col-md-3 col-lg-2',
        'label' => $form[$id]['label'],
        'required' => $form[$id]['req'],
        'description' => $form[$id]['descr'],
        'hasError' => $hasError,
    ])
    @endcomponent
@endif

@php
    $challenge_id = blank($challenge_id ?? null)
        ? ''
        : "{$challenge_id}_";
    $id = $reward_type_id ?? 'type';
    $hasError = $errors->has($id);
    $classes = ['col-sm-12',];
    if (!$is_half) {
        $classes = array_merge($classes, [
            // 'col-md-8', 'col-lg-8', 'col-xl-7',
            'col-md-9', 'col-lg-10', 'col-xl-10',
        ]);
    }
@endphp
@component('admin.components.form_field', [
    'class' => implode(' ', $classes),
    'label' => '',
    'required' => $form[$id]['req'],
    'description' => $form[$id]['descr'],
    'hasError' => $hasError,
])

    <div class="form-group" data-category="{{$data_category}}"
        data-ignore-group-listen="{{ boolToInt($data_ignore_group_listen ?? 0) }}">
        @foreach ($form[$id]['input'] as $gid => $name)
            @php
                $_tmp = "{$challenge_id}{$id}_{$gid}";
//                dump($challenge_id);
            @endphp
            <div class="row mb-2">
                <div class="{{ implode(' ', [
                    'col-12', 'col-xs-12', 'col-sm-12', 'col-md-6',
                    // 'col-lg-5', 'col-xl-5',
                    'col-lg-4', 'col-xl-3',
                ]) }}">
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" id="{{ $_tmp }}_act"
                            name="{{ $_tmp }}_act">
                        <label for="{{ $_tmp }}_act" class="custom-control-label w-100">{{ $name }}</label>
                    </div>
                </div>
                <div class="{{ implode(' ', [
                    'col-12', 'col-xs-12', 'col-sm-12', 'col-md-3',
                    'col-lg-3', 'col-xl-2',
                ]) }}">
                    <input name="{{ $_tmp }}" id="{{ $_tmp }}" placeholder="{{ 1 }}"
                        data-type="{{ $gid }}"
                        type="number" min="0" class="form-control" />
                </div>
            </div>
        @endforeach

        @foreach ($form[$id]['select'] as $gid => $name)
            @php
                $_tmp = "{$challenge_id}{$id}_{$gid}";
            @endphp
            <div class="row mb-2">
                <div class="{{ implode(' ', [
                    'col-12', 'col-xs-12', 'col-sm-12', 'col-md-6',
                    // 'col-lg-5', 'col-xl-5',
                    'col-lg-4', 'col-xl-3',
                ]) }}">
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" id="{{ $_tmp }}_act"
                            name="{{ $_tmp }}_act">
                        <label for="{{ $_tmp }}_act" class="custom-control-label w-100">{{ $name }}</label>
                    </div>
                </div>
                <div class="{{ implode(' ', [
                    'col-12', 'col-xs-12', 'col-sm-12', 'col-md-6',
                    // 'col-lg-7', 'col-xl-7',
                    'col-lg-8', 'col-xl-9',
                ]) }}">
                    <input type="number" id="{{ $_tmp }}_amount" name="{{ $_tmp }}_amount" class="form-control"
                           placeholder="{{ 1 }}" />
                    <select id="{{ $_tmp }}" name="{{ $_tmp }}"
                        class="form-control select2 mb-3 {{ $errors->has($_tmp) ? 'select2-danger' : 'select2bs4' }}"
                        data-normalsearch="true"
                        data-type="{{$gid}}"
                        data-ajax-url="{{ route('admin.select2.ajax.get_data', 'voucher_series') }}"
                        placeholder="{{ $form[$id]['placeholder'] }}" style="width: 100%;" multiple>
                    </select>
                    <small class="text-muted d-block">Only provisioned while stocks last</small>
                </div>
            </div>

                @if($challenge_id === 'upload_receipt_')
                    <div class="form-group">
                        <label>Reward Type</label>
                        <div class="custom-control custom-radio">
                            <input class="custom-control-input reward-option" type="radio" id="stacking_tiering_none" name="reward_option" value="stacking_tiering_none" checked>
                            <label for="stacking_tiering_none" class="custom-control-label">No Stacking, No Tiering</label>
                        </div>
                        <div class="custom-control custom-radio">
                            <input class="custom-control-input reward-option" type="radio" id="stacking_yes" name="reward_option" value="stacking_yes">
                            <label for="stacking_yes" class="custom-control-label">Stacking</label>
                        </div>
                        <div class="custom-control custom-radio">
                            <input class="custom-control-input reward-option" type="radio" id="tiering_yes" name="reward_option" value="tiering_yes">
                            <label for="tiering_yes" class="custom-control-label">Tiering</label>
                        </div>
                    </div>

                    {{-- stacking --}}
                    <div id="stacking_fields" style="display: none;">
                        <div class="form-group">
                            <label>Daily Reward Award Limit (Per User)</label>
                            <input type="number" name="limit_per_user_per_day" id="limit_per_user_per_day" class="form-control">
                        </div>

                        <div class="form-group">
                            <label class="required">Initial Spend Threshold In Order for Receipt to be Valid
                                <span
                                    class="info-icon"
                                    title="Note that this figure is not used as the Stacking / Tiering multiplier and is the min spend for the receipt to be valid"
                                    aria-label="More info"
                                >ℹ</span>
                            </label>
                            <input type="number" name="prerequisite_transaction_amount" id="prerequisite_transaction_amount" class="form-control">
                        </div>

                        <div class="form-group">
                            <label class="required">Source of Total Spend Amount</label>
                            <select name="multiplier_amount_source" id="multiplier_amount_source" class="form-control">
                                <option value="" disabled selected>Select here</option>
                                <option value="product">Product-Specific Spend / SKU Qualifying Spend</option>
                                <option value="total">Total Receipt Transaction Value</option>
                                <option value="sku_qty">SKU Quantity</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Min # of Receipts Accepted</label>
                            <input type="number" name="prerequisite_min_receipts" id="prerequisite_min_receipts" class="form-control">
                        </div>

                        <div class="form-group">
                            <label>Receipts must have the same day of purchase</label>
                            <select name="prerequisite_is_same_day" id="prerequisite_is_same_day" class="form-control">
                                <option value="" disabled selected>Select here</option>
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Max # of Receipts Accepted</label>
                            <input type="number" name="prerequisite_max_top_receipts" id="prerequisite_max_top_receipts" class="form-control">
                        </div>

                        <div class="form-group">
                            <label class="required">Spending Needed Per Stack (E.g.$80)
                                <span
                                    class="info-icon"
                                    title="Amount needed to be spent for each additional reward"
                                    aria-label="More info"
                                >ℹ</span>
                            </label>
                            <input type="number" name="multiplier_every_amount" id="multiplier_every_amount" class="form-control">
                        </div>
                    </div>

                    {{-- tiering --}}
                    <div id="tiering_fields" style="display: none;">
                        <div class="form-group">
                            <label class="required">Initial Spend Threshold In Order for Receipt to be Valid
                                <span
                                    class="info-icon"
                                    title="Note that this figure is not used as the Stacking / Tiering multiplier and is the min spend for the receipt to be valid"
                                    aria-label="More info"
                                >ℹ</span>
                            </label>
                            <input type="number" name="prerequisite_transaction_amount_tier" id="prerequisite_transaction_amount_tier" class="form-control">
                        </div>

                        <div class="form-group">
                            <label class="required">Source of Total Spend Amount</label>
                            <select name="multiplier_amount_source_tier" id="multiplier_amount_source_tier" class="form-control">
                                <option value="" disabled selected>Select here</option>
                                <option value="product">Product-Specific Spend / SKU Qualifying Spend</option>
                                <option value="total">Total Receipt Transaction Value</option>
                                <option value="sku_qty">SKU Quantity</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="required">Tier Configuration
                                <span
                                    class="info-icon"
                                    title="Ensure the figures input are to 2 decimal point (e.g. Max = $27.99)"
                                    aria-label="More info"
                                >ℹ</span></label>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>Min</th>
                                    <th>Max</th>
                                    <th>Value</th>
                                    <th><button type="button" class="btn btn-sm btn-primary" id="add-tier">+</button></th>
                                </tr>
                                </thead>
                                <tbody id="tiering_table_body"></tbody>
                            </table>
                        </div>
                    </div>

                    {{-- bonus reward by sku --}}
                    <div class="form-group">
                        <label>Bonus Reward by SKU
                            <span
                                class="info-icon"
                                title="Extra reward when the approved receipt contains the selected product(s). Awarded on top of the reward above; the reward type must be one already ticked above (and the same voucher series)."
                                aria-label="More info"
                            >ℹ</span>
                        </label>
                        <p class="text-muted mb-2 sku-bonus-hint">
                            Set the mechanics, tick the product tagging that earns it, then add the rule.
                            Add as many rules as the challenge needs.
                        </p>

                        <div class="sku-bonus-editor">
                            <div class="form-row">
                                <div class="col-12 col-sm-6 col-lg mb-2">
                                    <label class="sku-bonus-field-label" for="sku_bonus_match">Match</label>
                                    <select class="form-control" id="sku_bonus_match">
                                        <option value="any">Any of</option>
                                        <option value="all">All of</option>
                                    </select>
                                    <small class="form-text sku-bonus-help">Any of: one product is enough. All of: the receipt needs every one.</small>
                                </div>
                                <div class="col-12 col-sm-6 col-lg mb-2">
                                    <label class="sku-bonus-field-label" for="sku_bonus_count_mode">Award</label>
                                    <select class="form-control" id="sku_bonus_count_mode">
                                        <option value="receipt">Once per receipt</option>
                                        <option value="sku">Per matching SKU</option>
                                        <option value="unit">Per matching unit</option>
                                    </select>
                                    <small class="form-text sku-bonus-help">How often it counts: per receipt, per different product, or per item bought.</small>
                                </div>
                                <div class="col-12 col-sm-6 col-lg mb-2">
                                    <label class="sku-bonus-field-label" for="sku_bonus_type">Reward</label>
                                    <select class="form-control" id="sku_bonus_type">
                                        <option value="chance">Chance(s)</option>
                                        <option value="points">Point(s)</option>
                                        <option value="voucher">Voucher Series</option>
                                    </select>
                                    <small class="form-text sku-bonus-help">Tick this same reward on the challenge above, or the bonus never pays.</small>
                                </div>
                                <div class="col-12 col-sm-6 col-lg mb-2">
                                    <label class="sku-bonus-field-label" for="sku_bonus_qty">Qty</label>
                                    <input type="number" min="1" class="form-control" id="sku_bonus_qty" placeholder="1">
                                    <small class="form-text sku-bonus-help">What one award is worth. Per matching unit multiplies it by the items bought.</small>
                                </div>
                                <div class="col-12 col-sm-6 col-lg mb-2">
                                    <label class="sku-bonus-field-label" for="sku_bonus_max">Max / receipt</label>
                                    <input type="number" min="1" class="form-control" id="sku_bonus_max" placeholder="No cap">
                                    <small class="form-text sku-bonus-help" id="sku_bonus_max_help"></small>
                                </div>
                            </div>

                            <div class="form-row" id="sku_bonus_series_wrap" style="display: none;">
                                <div class="col-12 mb-2">
                                    <label class="sku-bonus-field-label" for="sku_bonus_series">Voucher series</label>
                                    <select class="form-control select2 select2bs4" id="sku_bonus_series"
                                        data-normalSearch="true"
                                        data-ajax-url="{{ route('admin.select2.ajax.get_data', ['type' => 'voucher_series']) }}"
                                        style="width: 100%;"></select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 mb-3">
                                    <div class="sku-picker">
                                        <div class="sku-picker-head">
                                            <span class="sku-picker-title">Product tagging</span>
                                            <span class="sku-picker-count" id="sku_tagging_count"></span>
                                        </div>
                                        <input type="search" class="form-control form-control-sm sku-picker-search"
                                            id="sku_tagging_search" placeholder="Search taggings" aria-label="Search product taggings">
                                        <div class="sku-picker-list" id="sku_tagging_list"></div>
                                        <div class="sku-picker-foot">
                                            <span class="text-muted" id="sku_tagging_extra_note"></span>
                                            <span class="sku-picker-acts">
                                                <a href="{{ route('admin.list_product_taggings') }}" target="_blank" rel="noopener">Manage taggings</a>
                                                <button type="button" class="btn btn-link btn-sm p-0" id="sku_tagging_clear">Clear</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="sku-bonus-actions">
                                <button type="button" class="btn btn-primary btn-sm" id="sku_bonus_save">Add rule</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="sku_bonus_cancel" style="display: none;">Cancel</button>
                                <span class="text-danger sku-bonus-error" id="sku_bonus_error"></span>
                            </div>
                        </div>

                        <div id="sku_bonus_rules" class="sku-rules"></div>

                        <small class="text-muted d-block">
                            Leave empty if the challenge has no SKU bonus.
                        </small>
                    </div>
                @endif
        @endforeach

    </div>


    @component('admin.components.form_error_msg', ['hasError' => $hasError])
        {{ $errors->first($id) }}
    @endcomponent
@endcomponent

@once('script_gamification_reward') @push('script')
<script>
    $(() => {
        var getRewardByRow = $row => {
            var payload = [];
            var $sel = $row.find('select[data-type="voucher"]');
            var selName = $sel.prop('name');

            // get value from voucher's companion input by name
            var amtVal = parseInt($row.find(`input[name="${selName}_amount"]`).val(), 10) || 1;

            $row.find('input[data-type], select[data-type]').each(function(){
                var $comp   = $(this);
                var type = $comp.attr('data-type');
                var name = $comp.prop('name');
                var val  = $comp.val();

                // skip the _amount field
                if (name === `${selName}_amount`) {
                    return;
                }

                payload.push({
                    type: type,
                    qty: val,
                    checked: $row.find(`[name="${name}_act"]`).is(':checked'),
                });
            });

            // attach the numeric amount onto each voucher entry
            payload = payload.map(r => {
                if (r.type === 'voucher') {
                    r.amount = amtVal;
                }
                return r;
            });

            return payload;
        };
        var generatePayload = ($row = null) => {
            var payload = [];
            let isValid = true; // validation flag for stacking/tiering
            if ($row) {
                $row = $($row);
                payload[$row.data('category')] = getRewardByRow($row);
            } else {
                $('div.form-group[data-category]:not([data-ignore-group-listen=1])').each(function () {
                    var $row = $(this);
                    payload[$row.data('category')] = getRewardByRow($row);
                });
            }

            if (payload["upload_receipt"]) {
                let rewardOption = $('input[name="reward_option"]:checked').val();
                let multiplierData = {};

                if (rewardOption === "stacking_yes") {
                    const transaction_amount = $("#prerequisite_transaction_amount").val();
                    const amount_source = $("#multiplier_amount_source").val();
                    let every_amount = $("#multiplier_every_amount").val();

                    // validation for required fields for stacking
                    if (!transaction_amount || !amount_source || !every_amount) {
                        isValid = false;
                        const errors = [];
                        if (!transaction_amount) errors.push('Transaction Amount is required.');
                        if (!amount_source) errors.push('Amount Source is required.');
                        if (!every_amount) errors.push('Every Amount is required.');

                        makeToast('bg-danger', errors.join('<br>'));
                    }

                    // ensure that it will never be 0 or negative value
                    if (every_amount < 1) {
                        every_amount = 1;
                    }

                    multiplierData = {
                        limit_per_user_per_day: $("#limit_per_user_per_day").val(),
                        prerequisite: {
                            transaction_amount: transaction_amount,
                            min_receipts: $("#prerequisite_min_receipts").val(),
                            is_same_day: $("#prerequisite_is_same_day").val(),
                            max_top_receipts: $("#prerequisite_max_top_receipts").val(),
                        },
                        multiplier: {
                            amount_source: amount_source,
                            every_amount: every_amount,
                        },
                    };
                } else if (rewardOption === "tiering_yes") {
                    let tiers = [];
                    const transaction_amount = $("#prerequisite_transaction_amount_tier").val();
                    const amount_source = $("#multiplier_amount_source_tier").val();

                    // validation for required fields for tiering
                    if (!transaction_amount || !amount_source) {
                        isValid = false;
                        const errors = [];
                        if (!transaction_amount) errors.push('Transaction Amount is required.');
                        if (!amount_source) errors.push('Amount Source is required.');

                        makeToast('bg-danger', errors.join('<br>'));
                    }

                    let hasValidTier = false;
                    $("#tiering_table_body tr").each(function () {
                        let min   = $(this).find("input[name='tiers[min][]']").val();
                        let rawMax = $(this).find("input[name='tiers[max][]']").val();
                        let maxNum = parseFloat(rawMax);
                        let max;
                        let value = $(this).find("input[name='tiers[value][]']").val();
                        if (!isNaN(maxNum) && maxNum % 1 === 0) {
                            // if is whole number -> bump it to .99
                            max = (maxNum + 0.99).toFixed(2);
                            $(this).find("input[name='tiers[max][]']").val(max);
                        } else {
                            // if already got decimal or invalid, leave it
                            max = rawMax;
                        }
                        if (min && max && value) {
                            hasValidTier = true;
                            tiers.push({ min, max, value });
                        }
                    });

                    if (tiers.length > 0) {
                        if (tiers[0].min !== transaction_amount) {
                            isValid = false;
                            makeToast('bg-danger', 'Tier 1 "Min" must match the Min Spend Amount/Min Band Threshold');
                        }
                    }

                    if (!hasValidTier) {
                        isValid = false;
                        makeToast('bg-danger', 'At least one valid Tier entry with Min, Max, and Value is required.');
                    }

                    multiplierData = {
                        prerequisite: {
                            transaction_amount: $("#prerequisite_transaction_amount_tier").val(),
                        },
                        multiplier: {
                            amount_source: $("#multiplier_amount_source_tier").val(),
                            type: "tiers",
                            tiers: tiers,
                        },
                    };
                }

                var bonusErrors = window.validateSkuBonusRows ? window.validateSkuBonusRows() : [];
                if (bonusErrors.length) {
                    isValid = false;
                    makeToast('bg-danger', bonusErrors.join('<br>'));
                }

                payload["upload_receipt"] = {
                    ...payload["upload_receipt"], // keep existing data
                    ...multiplierData, // append stacking/tiering details
                    // bonus rules stand on their own, they apply with or without stacking/tiering
                    bonus: window.getSkuBonusPayload ? window.getSkuBonusPayload() : [],
                };
            }

            window.isPayloadValid = isValid;
            // console.log("Generated Payload:", payload);
            return payload;
        };
        var populateReward = (module, settings, path, alternative_path = null) => {
            const is_main = module === 'main_game';
            const to_default = is_main; // || ['offline_eng'].find(iv => iv === module);
            var arr = data_get(settings, path) || data_get(settings, alternative_path ?? Math.random());
            arr && $.each(arr, (k, v) => {
                if (to_default) {
                    $(`[name="${module}_qty"]`).val(v.qty);
                    $(`[name="${module}_type"][value="${v.type}"]`).prop('checked',true);
                    is_main && $(`[name="${module}_mechanism"][value="${settings.reward_details.mechanism}"]`)
                        .prop('checked', true).trigger('change');
                    return;
                }
                let iname = `${module}_type_${v.type}`;
                $(`[name="${iname}"]`).val(v.qty).trigger('change');
                $(`[name="${iname}_act"]`).prop('checked', v.checked);

                // get the value from "amount" sent by the backend and populate the input
                if(v.type === 'voucher') {
                    const inputName = `${module}_type_voucher`;
                    $(`input[name="${inputName}_amount"]`).val(v.amount || '1');
                }
            });
        };

        window.getGamificationReward = generatePayload;
        window.setGamificationReward = populateReward;
    });

    document.addEventListener('DOMContentLoaded', function () {
        const stackingRadio = document.getElementById('stacking_yes');
        const tieringRadio = document.getElementById('tiering_yes');
        const noStackingTiering = document.getElementById('stacking_tiering_none');
        const stackingFields = document.getElementById('stacking_fields');
        const tieringFields = document.getElementById('tiering_fields');

        // default select no stacking/tiering
        noStackingTiering.checked = true;

        // handles the display and hiding of fields for each radiobutton
        function toggleFields() {
            stackingFields.style.display = stackingRadio.checked ? 'block' : 'none';
            tieringFields.style.display = tieringRadio.checked ? 'block' : 'none';

            if (!stackingRadio.checked) {
                clearFields([
                    'limit_per_user_per_day', 'prerequisite_transaction_amount',
                    'prerequisite_min_receipts', 'prerequisite_is_same_day',
                    'prerequisite_max_top_receipts', 'multiplier_amount_source',
                    'multiplier_every_amount'
                ]);
            }

            if (!tieringRadio.checked) {
                clearFields([
                    'prerequisite_transaction_amount_tier', 'multiplier_amount_source_tier'
                ]);
                $('#tiering_table_body').empty(); // remove all the added tiers in the table when tiering is not chosen
            }

            if (noStackingTiering.checked) {
                clearFields([
                    'limit_per_user_per_day', 'prerequisite_transaction_amount',
                    'prerequisite_min_receipts', 'prerequisite_is_same_day',
                    'prerequisite_max_top_receipts', 'multiplier_amount_source',
                    'multiplier_every_amount',
                    'prerequisite_transaction_amount_tier', 'multiplier_amount_source_tier'
                ]);
            }
        }

        // to clear fields when other options are selected
        // for safety measures, so that existing input from stacking won't be saved for tiering, vice versa
        function clearFields(fields) {
            fields.forEach(field => {
                const element = document.getElementById(field);
                if (element) element.value = '';
            });
        }

        stackingRadio.addEventListener('change', toggleFields);
        tieringRadio.addEventListener('change', toggleFields);
        noStackingTiering.addEventListener('change', toggleFields);

        toggleFields();

        // add tier row
        document.getElementById('add-tier').addEventListener('click', function () {
            let tableBody = document.getElementById('tiering_table_body');
            let row = document.createElement('tr');
            row.innerHTML = `
            <td><input type="number" name="tiers[min][]" class="form-control"></td>
            <td><input type="number" name="tiers[max][]" class="form-control"></td>
            <td><input type="number" name="tiers[value][]" class="form-control"></td>
            <td><button type="button" class="btn btn-sm btn-danger remove-tier">-</button></td>
        `;
            tableBody.appendChild(row);
        });

        // remove tier row
        document.addEventListener('click', function (event) {
            if (event.target.classList.contains('remove-tier')) {
                event.target.closest('tr').remove();
            }
        });

        // #region bonus reward by sku
        // ticking a tagging puts every product under it into the rule, so only the
        // taggings arrive with the settings payload and the search is array work
        window.skuBonusTaggings = window.skuBonusTaggings || [];
        // labels for products a saved rule names that no tagging covers
        window.skuBonusProductOptions = window.skuBonusProductOptions || {};

        var skuRules = [];           // the rules that get saved
        var skuEditingIndex = null;  // rule the editor is editing, null while adding a new one
        var skuTagged = [];          // tagging ids ticked in the editor
        var skuExtra = [];           // product ids the rule carries that no tagging covers

        var COUNT_MODE_TEXT = {
            receipt: 'once per receipt',
            sku: 'per matching SKU',
            unit: 'per matching unit',
        };

        var $taggingList = $('#sku_tagging_list');
        var $rulesList = $('#sku_bonus_rules');
        var $skuError = $('#sku_bonus_error');
        var $skuSeries = $('#sku_bonus_series');

        var registerSelect2 = $el => {
            var helper = window.AdminMaintUtilityHelper || window.UtilityHelper;
            helper && helper.RegisterSelect2($el);
        };

        var esc = text => $('<div>').text(text == null ? '' : text).html();

        // id -> name for every tagged product, so a rule built in the browser can be
        // listed by name; skuBonusProductOptions only covers what a saved rule named
        var skuProductNames = {};

        var productLabel = id =>
            skuProductNames[id] || window.skuBonusProductOptions[id] || ('Product #' + id);

        var seriesLabel = id => window.skuBonusSeriesOptions
            ? (window.skuBonusSeriesOptions[id] || id)
            : id;

        var matchesTerm = (text, term) => !term || String(text).toLowerCase().indexOf(term) > -1;

        var countText = (n, noun) => `${n} ${n === 1 ? noun : noun + 's'}`;

        // a tagging describes a rule when the rule carries every product under it,
        // which is how a saved rule - it stores product ids only - gets its ticks back
        var taggingsFor = ids => window.skuBonusTaggings.filter(tagging =>
            tagging.product_ids.length && tagging.product_ids.every(id => ids.indexOf(id) > -1));

        var uncoveredIn = (ids, taggings) => {
            var covered = taggings.reduce((all, tagging) => all.concat(tagging.product_ids), []);
            return ids.filter(id => covered.indexOf(id) === -1);
        };

        // what the rule saves: every product under the ticked taggings, plus the ones
        // it already carried that no tagging covers - dropping those would edit the
        // rule behind the admin's back
        var pickedProducts = () => Array.from(new Set(
            skuTagged.reduce(function (ids, tagging_id) {
                var tagging = window.skuBonusTaggings.find(t => t.id === tagging_id);
                return tagging ? ids.concat(tagging.product_ids) : ids;
            }, skuExtra.slice())
        ));

        // the disclosure sits outside the label, or opening it would tick the box
        var taggingRow = (tagging, checked) => `
            <div class="sku-tagging">
                <label class="sku-option${checked ? ' is-checked' : ''}">
                    <input type="checkbox" value="${tagging.id}"${checked ? ' checked' : ''}>
                    <span class="sku-option-text">
                        <span class="sku-option-name">${esc(tagging.name)}</span>
                    </span>
                </label>
                ${tagging.products.length
                    ? `<details class="sku-tagging-products">
                        <summary>${esc(countText(tagging.products.length, 'product'))}</summary>
                        <ul>${tagging.products.map(product => `<li>${esc(product.name)}</li>`).join('')}</ul>
                    </details>`
                    : '<p class="sku-tagging-empty">No products in this tagging.</p>'}
            </div>`;

        var emptyNote = text => `<p class="sku-picker-empty">${esc(text)}</p>`;

        var updateTaggingCount = () => {
            var total = window.skuBonusTaggings.length;
            $('#sku_tagging_count').text(skuTagged.length
                ? `${skuTagged.length} of ${total} selected, ${countText(pickedProducts().length, 'product')}`
                : `None of ${total} selected`);
            $('#sku_tagging_extra_note').text(skuExtra.length
                ? `${countText(skuExtra.length, 'product')} from no tagging, kept`
                : '');
        };

        var renderTaggings = () => {
            var term = ($('#sku_tagging_search').val() || '').trim().toLowerCase();
            var taggings = window.skuBonusTaggings.filter(tagging => matchesTerm(tagging.name, term));
            $taggingList.html(taggings.length
                ? taggings.map(tagging =>
                    taggingRow(tagging, skuTagged.indexOf(tagging.id) > -1)).join('')
                : emptyNote(term
                    ? 'No tagging matches that search.'
                    : 'This account has no product taggings yet. Create one first.'));
            updateTaggingCount();
        };

        var ruleSummary = rule => {
            var count = rule.product_ids.length;
            var reward = rule.type === 'voucher'
                ? seriesLabel(rule.voucher_series_id)
                : (rule.type === 'points' ? 'point(s)' : 'chance(s)');
            var text = `${rule.match === 'all' ? 'All of these' : 'Any of these'} `
                + `${count} ${count === 1 ? 'product' : 'products'} `
                + `earns ${rule.qty} ${reward}, ${COUNT_MODE_TEXT[rule.count_mode] || rule.count_mode}`;
            return rule.max_per_receipt ? `${text}, capped at ${rule.max_per_receipt} per receipt` : text;
        };

        // name the taggings the rule was built from; anything they do not cover is
        // listed by product so a rule predating the taggings still reads
        var ruleSource = rule => {
            var taggings = taggingsFor(rule.product_ids);
            var parts = taggings.map(tagging => tagging.name);
            var extra = uncoveredIn(rule.product_ids, taggings);
            if (extra.length) {
                var names = extra.slice(0, 4).map(productLabel);
                var rest = extra.length - names.length;
                parts.push(names.join(', ') + (rest > 0 ? ` and ${rest} more` : ''));
            }
            return parts.join(' + ');
        };

        var renderRules = () => {
            if (!skuRules.length) {
                $rulesList.html('<p class="sku-rules-empty">No SKU bonus on this challenge yet.</p>');
                return;
            }
            $rulesList.html(skuRules.map((rule, index) => `
                <div class="sku-rule${skuEditingIndex === index ? ' is-editing' : ''}">
                    <div class="sku-rule-body">
                        <span class="sku-rule-summary">${esc(ruleSummary(rule))}</span>
                        <span class="sku-rule-products">${esc(ruleSource(rule))}</span>
                        ${rule.product_ids.length ? `<details class="sku-tagging-products">
                            <summary>${esc(countText(rule.product_ids.length, 'product'))}</summary>
                            <ul>${rule.product_ids.map(id => `<li>${esc(productLabel(id))}</li>`).join('')}</ul>
                        </details>` : ''}
                    </div>
                    <div class="sku-rule-actions">
                        <button type="button" class="btn btn-sm btn-outline-secondary" data-sku-edit="${index}">Edit</button>
                        <button type="button" class="btn btn-sm btn-outline-danger" data-sku-remove="${index}">Remove</button>
                    </div>
                </div>`).join(''));
        };

        var toggleSeries = () => {
            $('#sku_bonus_series_wrap').toggle($('#sku_bonus_type').val() === 'voucher');
        };

        var setSeries = id => {
            $skuSeries.empty();
            if (id) {
                $skuSeries.append(new Option(seriesLabel(id), id, true, true));
            }
            $skuSeries.val(id || null).trigger('change');
        };

        var readEditor = () => {
            var type = $('#sku_bonus_type').val();
            return {
                product_ids: pickedProducts(),
                match: $('#sku_bonus_match').val(),
                count_mode: $('#sku_bonus_count_mode').val(),
                type: type,
                voucher_series_id: type === 'voucher' ? ($skuSeries.val() || null) : null,
                qty: parseInt($('#sku_bonus_qty').val(), 10) || null,
                max_per_receipt: parseInt($('#sku_bonus_max').val(), 10) || null,
            };
        };

        var writeEditor = (rule = {}) => {
            $('#sku_bonus_match').val(rule.match || 'any');
            $('#sku_bonus_count_mode').val(rule.count_mode || 'receipt');
            $('#sku_bonus_type').val(rule.type || 'chance');
            $('#sku_bonus_qty').val(rule.qty ?? '');
            $('#sku_bonus_max').val(rule.max_per_receipt ?? '');
            setSeries(rule.type === 'voucher' ? rule.voucher_series_id : null);
            toggleSeries();
            // a rule saves product ids, not the taggings it was built from, so tick
            // back every tagging the rule fully contains and keep the rest as extras
            var rule_products = (rule.product_ids || []).map(Number);
            var taggings = taggingsFor(rule_products);
            skuTagged = taggings.map(tagging => tagging.id);
            skuExtra = uncoveredIn(rule_products, taggings);
            $('#sku_tagging_search').val('');
            renderTaggings();
            updateMaxHelp();
        };

        var resetEditor = () => {
            skuEditingIndex = null;
            writeEditor({});
            $('#sku_bonus_save').text('Add rule');
            $('#sku_bonus_cancel').hide();
            $skuError.text('');
        };

        // a bonus adds to an existing reward block, so a rule naming a reward that
        // is not ticked above would save fine and then never pay out
        var ruleProblems = rule => {
            var problems = [];
            if (!rule.product_ids.length) {
                problems.push('Tick at least one product tagging.');
            }
            if (!rule.qty) {
                problems.push('Enter how many the bonus awards.');
            }
            if (!$(`[name="upload_receipt_type_${rule.type}_act"]`).is(':checked')) {
                problems.push('Tick the same reward above first, a bonus only adds to a reward already given for the receipt.');
            }
            if (rule.type === 'voucher') {
                var enabled = $('[name="upload_receipt_type_voucher"]').val() || [];
                if (!rule.voucher_series_id) {
                    problems.push('Select a voucher series.');
                } else if (enabled.indexOf(rule.voucher_series_id) === -1) {
                    problems.push('That voucher series must also be selected as a receipt reward above.');
                }
            }
            return problems;
        };

        $('#sku_tagging_search').on('input', renderTaggings);

        $('#sku_tagging_clear').on('click', () => {
            skuTagged = [];
            skuExtra = [];
            $('#sku_tagging_search').val('');
            renderTaggings();
        });

        // the list is rebuilt often, so ticking updates in place to keep scroll position
        $taggingList.on('change', 'input[type=checkbox]', function () {
            var id = parseInt(this.value, 10);
            skuTagged = this.checked ? skuTagged.concat(id) : skuTagged.filter(value => value !== id);
            $(this).closest('.sku-option').toggleClass('is-checked', this.checked);
            updateTaggingCount();
        });

        // the cap clamps the chances the rule pays, not how often it fires, so a cap
        // below the qty silently throws the qty away, @see getBonusSkuMultiplier()
        var updateMaxHelp = () => {
            var qty = parseInt($('#sku_bonus_qty').val(), 10);
            var cap = parseInt($('#sku_bonus_max').val(), 10);
            var warn = qty && cap && cap < qty;
            $('#sku_bonus_max_help')
                .toggleClass('is-warning', !!warn)
                .text(warn
                    ? `A cap of ${cap} pays ${cap}, not ${qty}. Set it above Qty, or leave it blank.`
                    : 'Most this rule pays from one receipt. Blank for no limit.');
        };

        $('#sku_bonus_qty, #sku_bonus_max').on('input', updateMaxHelp);

        $('#sku_bonus_type').on('change', toggleSeries);

        $('#sku_bonus_save').on('click', () => {
            var rule = readEditor();
            var problems = ruleProblems(rule);
            if (problems.length) {
                $skuError.text(problems[0]);
                return;
            }
            if (skuEditingIndex === null) {
                skuRules.push(rule);
            } else {
                skuRules[skuEditingIndex] = rule;
            }
            resetEditor();
            renderRules();
        });

        $('#sku_bonus_cancel').on('click', () => {
            resetEditor();
            renderRules();
        });

        $rulesList.on('click', '[data-sku-edit]', function () {
            skuEditingIndex = parseInt($(this).data('sku-edit'), 10);
            writeEditor(skuRules[skuEditingIndex]);
            $('#sku_bonus_save').text('Save rule');
            $('#sku_bonus_cancel').show();
            $skuError.text('');
            renderRules();
        });

        $rulesList.on('click', '[data-sku-remove]', function () {
            var index = parseInt($(this).data('sku-remove'), 10);
            skuRules.splice(index, 1);
            if (skuEditingIndex === index) {
                resetEditor();
            } else if (skuEditingIndex !== null && skuEditingIndex > index) {
                skuEditingIndex -= 1;
            }
            renderRules();
        });

        window.setSkuBonusTaggings = taggings => {
            window.skuBonusTaggings = (taggings || []).map(tagging => {
                var products = (tagging.products || []).map(product => ({
                    id: Number(product.id),
                    name: product.name,
                }));
                products.forEach(product => {
                    skuProductNames[product.id] = product.name;
                });
                return {
                    id: Number(tagging.id),
                    name: tagging.name,
                    products: products,
                    // everything downstream matches on ids, so derive them once here
                    product_ids: products.map(product => product.id),
                };
            });
            renderTaggings();
            // the rule list names taggings, so it is stale until they arrive
            renderRules();
        };

        window.resetSkuBonusRules = () => {
            skuRules = [];
            $('#sku_tagging_search').val('');
            resetEditor();
            renderRules();
        };

        window.addSkuBonusRow = (row = {}) => {
            skuRules.push({
                product_ids: (row.product_ids || []).map(Number),
                match: row.match || 'any',
                count_mode: row.count_mode || 'receipt',
                type: row.type || 'chance',
                voucher_series_id: row.type === 'voucher' ? (row.voucher_series_id || null) : null,
                qty: parseInt(row.qty, 10) || null,
                max_per_receipt: parseInt(row.max_per_receipt, 10) || null,
            });
            renderRules();
        };

        window.getSkuBonusPayload = () => skuRules
            // an incomplete rule is not a rule, drop it rather than saving a no-op
            .filter(rule => rule.product_ids.length && rule.qty
                && (rule.type !== 'voucher' || rule.voucher_series_id))
            .map(rule => ({
                product_ids: rule.product_ids,
                match: rule.match,
                count_mode: rule.count_mode,
                type: rule.type,
                voucher_series_id: rule.type === 'voucher' ? rule.voucher_series_id : null,
                qty: rule.qty,
                max_per_receipt: rule.max_per_receipt || null,
            }));

        window.validateSkuBonusRows = () => {
            var errors = [];
            skuRules.forEach((rule, index) => {
                ruleProblems(rule).forEach(problem => {
                    errors.push(`SKU bonus rule ${index + 1}: ${problem}`);
                });
            });
            // an open editor would be dropped silently on save
            if (skuEditingIndex !== null) {
                errors.push('Save or cancel the SKU bonus rule you are editing.');
            }
            return errors;
        };

        registerSelect2($skuSeries);
        resetEditor();
        renderRules();
        // #endregion
    });

</script>
<style>
    label.required {
        color: inherit;
    }
    label.required::after {
        content: " *";
        color: red;
        margin-left: 0.1em;
    }
    .info-icon {
        display: inline-block;
        margin-left: 4px;
        font-style: normal;    /* so ℹ doesn’t italicize */
        cursor: help;          /* shows the ﹖ pointer */
    }

    /* --- bonus reward by sku ------------------------------------------------ */
    .sku-bonus-hint {
        font-size: .875rem;
        max-width: 62ch;
    }
    .sku-bonus-editor {
        border: 1px solid #dee2e6;
        border-radius: .25rem;
        padding: .875rem .875rem .5rem;
        background: #fff;
    }
    .sku-bonus-help {
        font-size: .75rem;
        line-height: 1.35;
        color: #6c757d;
        margin-top: .25rem;
    }
    .sku-bonus-help.is-warning {
        color: #b02a37;
    }
    .sku-bonus-field-label {
        display: block;
        margin-bottom: .2rem;
        font-size: .8125rem;
        font-weight: 600;
        color: #495057;
    }

    .sku-picker {
        display: flex;
        flex-direction: column;
        border: 1px solid #dee2e6;
        border-radius: .25rem;
        overflow: hidden;
    }
    .sku-picker-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: .5rem;
        padding: .45rem .6rem;
        background: #f4f6f9;
        border-bottom: 1px solid #dee2e6;
    }
    .sku-picker-title {
        font-weight: 600;
        color: #495057;
    }
    .sku-picker-count {
        font-size: .8125rem;
        color: #6c757d;
    }
    /* the search reads as part of the box, not a control floating inside it */
    .sku-picker-search.form-control-sm {
        border: 0;
        border-bottom: 1px solid #dee2e6;
        border-radius: 0;
        box-shadow: none;
    }
    .sku-picker-search:focus {
        border-bottom-color: #007bff;
    }
    .sku-picker-list {
        max-height: 15rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .sku-picker-empty {
        margin: 0;
        padding: .9rem .6rem;
        color: #6c757d;
        font-size: .875rem;
    }
    .sku-picker-foot {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
        padding: .3rem .6rem;
        border-top: 1px solid #dee2e6;
        background: #fff;
        font-size: .8125rem;
    }
    .sku-picker-foot .btn-link {
        white-space: nowrap;
    }
    .sku-picker-acts {
        display: flex;
        gap: .7rem;
    }

    .sku-option {
        display: flex;
        align-items: flex-start;
        gap: .55rem;
        margin: 0;
        padding: .45rem .6rem .45rem .45rem;
        min-height: 2.375rem;
        border-left: 3px solid transparent;
        border-bottom: 1px solid #f1f3f5;
        cursor: pointer;
        font-weight: 400;
    }
    .sku-option:last-child {
        border-bottom: 0;
    }
    .sku-option:hover {
        background: #f8f9fa;
    }
    .sku-option.is-checked {
        border-left-color: #007bff;
        background: #eaf3ff;
    }
    .sku-option input {
        margin-top: .25rem;
        flex: none;
        width: 1rem;
        height: 1rem;
    }
    .sku-option input:focus-visible {
        outline: 2px solid #007bff;
        outline-offset: 2px;
    }
    .sku-option-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .sku-option-name {
        line-height: 1.3;
    }
    /* the product list hangs under its tagging, lined up past the checkbox */
    .sku-tagging {
        border-bottom: 1px solid #f1f3f5;
    }
    .sku-tagging:last-child {
        border-bottom: 0;
    }
    .sku-tagging .sku-option {
        border-bottom: 0;
    }
    .sku-tagging-products,
    .sku-tagging-empty {
        margin: 0;
        padding: 0 .6rem .45rem 2rem;
        font-size: .75rem;
        color: #6c757d;
    }
    /* in a rule there is no checkbox to line up past */
    .sku-rule-body .sku-tagging-products {
        padding: .25rem 0 0;
    }
    .sku-tagging-products summary {
        cursor: pointer;
        list-style: revert;
    }
    .sku-tagging-products summary:hover {
        color: #007bff;
    }
    .sku-tagging-products ul {
        margin: .3rem 0 0;
        padding-left: 1.1rem;
        max-height: 12rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .sku-tagging-products li {
        line-height: 1.5;
    }

    .sku-bonus-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding-bottom: .375rem;
    }
    .sku-bonus-error:empty {
        display: none;
    }
    .sku-bonus-error {
        font-size: .8125rem;
    }

    .sku-rules {
        margin-top: .75rem;
    }
    .sku-rules-empty {
        margin: 0;
        color: #6c757d;
        font-size: .875rem;
    }
    .sku-rule {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
        padding: .55rem .7rem;
        border: 1px solid #dee2e6;
        border-radius: .25rem;
        margin-bottom: .4rem;
    }
    .sku-rule.is-editing {
        border-color: #007bff;
        background: #eaf3ff;
    }
    .sku-rule-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1 1 18rem;
    }
    .sku-rule-summary {
        line-height: 1.35;
    }
    .sku-rule-products {
        font-size: .75rem;
        color: #6c757d;
    }
    .sku-rule-actions {
        display: flex;
        gap: .35rem;
        flex: none;
    }
</style>
@endpush @endonce()