@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 SKU(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, pick the SKUs that earn 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="form-row">
                                <div class="col-12 mb-2">
                                    <label class="sku-bonus-field-label" for="sku_bonus_skus">Products (by SKU)</label>
                                    <select class="form-control select2 select2bs4" id="sku_bonus_skus" multiple
                                        data-normalSearch="true" style="width: 100%;"></select>
                                    <small class="form-text sku-bonus-help">
                                        A SKU is listed once. Picking it covers every retail partner stocking it.
                                    </small>
                                </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
        // the whole active sku list arrives with the settings payload, so the
        // dropdown searches in the browser with no request per keystroke
        window.skuBonusCatalogue = window.skuBonusCatalogue || {skus: []};
        // skus for rules saved before the picker offered them, keyed by product id
        window.skuBonusLegacySkus = window.skuBonusLegacySkus || {};

        var skuRules = [];           // the rules that get saved
        var skuEditingIndex = null;  // rule the editor is editing, null while adding a new one

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

        var $skuSelect = $('#sku_bonus_skus');
        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();

        var uniq = list => list.filter((item, index, all) => all.indexOf(item) === index);

        // a rule written before the picker offered skus names product ids.
        // Opening it in the editor converts it; left alone it saves back
        // untouched, so a row that has since been deleted is not dropped
        var ruleSkus = rule => (rule.skus || []).length
            ? rule.skus.slice()
            : uniq((rule.product_ids || []).map(id => window.skuBonusLegacySkus[id]).filter(Boolean));

        var ruleIsEmpty = rule => !(rule.skus || []).length && !(rule.product_ids || []).length;

        // what the rule card shows; a legacy id whose row is gone has no sku left
        var ruleLabels = rule => (rule.skus || []).length
            ? rule.skus.slice()
            : uniq((rule.product_ids || []).map(id => window.skuBonusLegacySkus[id] || ('Product #' + id)));

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

        var renderSkuOptions = (selected = []) => {
            var options = window.skuBonusCatalogue.skus
                // a rule can name a sku the catalogue no longer carries; keep it
                // selectable so editing the rule does not silently drop it
                .concat(selected.filter(sku => window.skuBonusCatalogue.skus.indexOf(sku) === -1))
                .map(sku => new Option(sku, sku, false, selected.indexOf(sku) > -1));
            $skuSelect.empty().append(options).val(selected).trigger('change');
        };

        var ruleSummary = rule => {
            var count = ruleLabels(rule).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 ? 'SKU' : 'SKUs'} `
                + `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;
        };

        var ruleProducts = rule => {
            var labels = ruleLabels(rule);
            var shown = labels.slice(0, 4);
            var rest = labels.length - shown.length;
            return shown.join(', ') + (rest > 0 ? ` and ${rest} more` : '');
        };

        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(ruleProducts(rule))}</span>
                    </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 {
                skus: ($skuSelect.val() || []).slice(),
                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();
            renderSkuOptions(ruleSkus(rule));
            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 (ruleIsEmpty(rule)) {
                problems.push('Select at least one SKU.');
            }
            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;
        };

        // 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.setSkuBonusCatalogue = catalogue => {
            window.skuBonusCatalogue = {skus: (catalogue && catalogue.skus) || []};
            renderSkuOptions($skuSelect.val() || []);
        };

        window.resetSkuBonusRules = () => {
            skuRules = [];
            resetEditor();
            renderRules();
        };

        window.addSkuBonusRow = (row = {}) => {
            skuRules.push({
                skus: (row.skus || []).slice(),
                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 => !ruleIsEmpty(rule) && rule.qty
                && (rule.type !== 'voucher' || rule.voucher_series_id))
            .map(rule => ({
                // a legacy rule nobody opened keeps its product ids, converting
                // it here would drop any whose row has since been deleted
                skus: rule.skus || [],
                product_ids: (rule.skus || []).length ? [] : (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);
        registerSelect2($skuSelect);
        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-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()