@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>
                @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,
                        },
                    };
                }

                payload["upload_receipt"] = {
                    ...payload["upload_receipt"], // keep existing data
                    ...multiplierData, // append stacking/tiering details
                };
            }

            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();
            }
        });
    });

</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 */
    }
</style>
@endpush @endonce()