@component('admin.components.card', [
    'header' => 'Outlets',
    'collapse' => 1,
    'class' => 'w-100 mb-0',
    'withShadowClass' => 0,
    'table' => 1,
    'body_class' => 'overflow-hidden',
])
<div data-challenge="{{ $challenge_id }}">
    <div class="row p-3">
        <div class="col-8 col-sm-6 col-md-6 col-lg-6 col-xl-6">
            <a role="button" href="javascript:void(0);" class="btn btn-info btn-sm mx-1 my-1 btn-modal-outlet">
                <i class="fas fa-plus"></i>&nbsp;Add Outlet
            </a>

            <a role="button" href="javascript:void(0);" class="btn btn-warning btn-sm mx-1 my-1 btn-edit-bulk">
                <i class="fas fa-pencil-alt"></i>&nbsp;Edit in Bulk
            </a>
        </div>

        <div class="col-4 col-sm-6 col-md-6 col-lg-6 col-xl-6" style="text-align: right">
            <a role="button" 
                {{-- target="_blank"  --}}
                href="javascript:void(0);"
                data-route="{{ route('admin.assets.download_qr_codes', ['source' => 'challenge_settings']) }}" 
                class="btn btn-default btn-sm mx-1 my-1"
            >
                <i class="fas fa-download"></i>&nbsp;Download QR Codes
            </a>
            <a role="button" 
                {{-- target="_blank"  --}}
                href="javascript:void(0);"
                data-route="{{ route('admin.assets.download_6_digit_pins', ['source' => 'challenge_settings']) }}" 
                class="btn btn-default btn-sm mx-1 my-1"
            >
                <i class="fas fa-file-export"></i>&nbsp;Export 6 Digit Pins
            </a>
        </div>
    </div>

    <table class="table text-nowrap tbl_challenge_outlet" id="TBL_CHALLENGE_OUTLET"
        data-route="{{ route('admin.settings.ajax_get_offeng_outlet') }}">
        <thead>
            <tr>
                <th style="width: 10px">
                    <div class="custom-control custom-checkbox">
                        <input id="outlet_check_all" class="custom-control-input" type="checkbox">
                        <label for="outlet_check_all" class="custom-control-label font-weight-normal"></label>
                    </div>
                </th>
                <th style="width: 10px">#</th>
                <th style="min-width: 150px">Outlet</th>
                <th style="width: 100px">Category</th>
                <th style="width: 100px">Chance Limit</th>
                <th style="width: 50px;">Chance</th>
                <th style="width: 50px;">Points</th>
                <th style="width: 180px;">Voucher Series</th>
                <th style="width: 100px;"></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
@endcomponent


{{-- add --}}
@php
    $form_prefix = 'modal_add_outlet_';
@endphp
@component('components.utility.template_popup', [
    'id' => $form_prefix . $challenge_id,
    'custom_dialog_class' => 'modal-md',
    'body_class' => '',
])
    @slot('slot_header')
        <label class="modal-title">Add Outlet</label>
    @endslot

    @slot('slot')
        @php
            $id = "{$form_prefix}outlets";
        @endphp
        @component('admin.components.form_field', [
            'class' => 'col-sm-12',
            'label' => 'Select Outlet Name',
            'required' => false,
            'description' => '',
            'hasError' => false,
        ])
            <select id="{{ $id }}" name="{{ $id }}" class="form-control select2 outlet-sel" data-normalsearch="true"
                data-ajax-url="{{ route('admin.select2.ajax.get_data', 'merchant_name') }}" 
                style="width: 100%;" multiple>
            </select>
        @endcomponent
    @endslot

    @slot('slot_footer')
        <div class="w-100">
            <button type="button" class="btn btn-default float-left" data-dismiss="modal">{{ 'Discard & Close' }}</button>
            <button type="button" class="btn btn-info btn-confirm float-right">Add</button>
        </div>
    @endslot
@endcomponent

{{-- config --}}
@php
    $form_prefix = 'modal_config_reward_';
@endphp
@component('components.utility.template_popup', [
    'id' => 'modal_config_reward_' . $challenge_id,
    'custom_dialog_class' => '',
    'custom_dialog_style' => 'max-width: 550px;',
    'body_class' => '',
])
    @php
        $class_left = 'col-12 col-sm-12 col-md-4';
        $class_right = 'col-12 col-sm-12 col-md-8 mx-0 px-0';
    @endphp

    @slot('slot_header')
        <label class="modal-title">Edit Outlet(s) - <span class="outlet-name">***</span></label>
    @endslot

    @slot('slot')
        <div class="w-100" style="max-height: 60vh; overflow-y: auto; overflow-x: hidden;">
            <div class="row w-100 px-2 align-items-center row-use-default">
                @component('admin.components.form_field', [
                    'class' => 'col-10 col-sm-4 col-md-4',
                    'label' => 'Use Default Settings',
                    'required' => false,
                    'description' => '',
                    'hasError' => false,
                ])
                @endcomponent

                @php
                    $id = "{$form_prefix}use_default_act";
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-2 col-sm-8 col-md-8 mx-0 px-0',
                    'label' => '',
                    'required' => false,
                    'description' => '',
                    'hasError' => false,
                ])
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="{{ $id }}" name="{{ $id }}">
                        <label class="custom-control-label" for="{{ $id }}"></label>
                    </div>
                @endcomponent
            </div>

            <hr class="w-100 px-2 mb-3 mt-0 row-use-default">

            <div class="row w-100 px-2">
                @component('admin.components.form_field', [
                    'class' => $class_left,
                    'label' => 'Chance Limit',
                    'required' => false,
                    'description' => '',
                    'hasError' => false,
                ])
                @endcomponent

                @component('admin.components.form_field', [
                    'class' => $class_right,
                    'label' => '',
                    'required' => false,
                    'description' => '',
                    'hasError' => false,
                ])
                    <div class="row">
                        @php
                            $id = "{$form_prefix}mechanism";
                        @endphp
                        <div class="col-sm-4">
                            <div class="row">
                                @foreach (['daily_limit' => 'Daily', 'lifetime_limit' => 'Lifetime'] as $val => $txt)
                                    <div class="custom-control custom-radio mx-2 col-4 col-md-12">
                                        <input class="custom-control-input" type="radio" name="{{ $id }}"
                                            id="{{ $id }}_{{ $val }}" value="{{ $val }}">
                                        <label for="{{ $id }}_{{ $val }}"
                                            class="custom-control-label">{{ $txt }}</label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        @php
                            $id = "{$form_prefix}mechanism_qty";
                        @endphp
                        <div class="col-sm-8">
                            @component('admin.components.form_field', [
                                'label' => '',
                                'required' => false,
                                'description' => '',
                                'hasError' => $hasError,
                            ])
                                <input name="{{ $id }}" id="{{ $id }}" type="text" class="form-control"
                                    placeholder="1" />
                                <small class="text-muted d-block description">
                                    New chances will only be reflected on the next day 12AM
                                </small>
                            @endcomponent
                        </div>
                    </div>
                @endcomponent
            </div>

            <hr class="w-100 px-2 mb-3 mt-0">

            <div class="row w-100">
                @component('admin.setting.components.gamification_reward', [
                    'form' => $form,
                    'errors' => $errors,
                    'reward_qty_id' => $reward_qty_id,
                    'reward_type_id' => $reward_type_id,
                    'challenge_id' => rtrim($form_prefix, '_'),
                    'data_category' => $data_category,
                    'data_ignore_group_listen' => 1,
                ])
                @endcomponent
            </div>

            <hr class="w-100 px-2 mb-3 mt-0">

            <div class="row w-100 px-2 align-items-center">
                @component('admin.components.form_field', [
                    'class' => $class_left,
                    'label' => 'Reward Title',
                    'required' => false,
                    'description' => '',
                    'hasError' => false,
                ])
                @endcomponent

                @php
                    $id = "{$form_prefix}title";
                @endphp
                @component('admin.components.form_field', [
                    'class' => $class_right,
                    'label' => '',
                    'required' => false,
                    'description' => '',
                    'hasError' => false,
                ])
                    <input name="{{ $id }}" id="{{ $id }}" type="text" class="form-control"
                        placeholder="{{ 'Congratulations' }}" />
                @endcomponent

                @component('admin.components.form_field', [
                    'class' => $class_left,
                    'label' => 'Reward Subtitle',
                    'required' => false,
                    'description' => '',
                    'hasError' => false,
                ])
                @endcomponent

                @php
                    $id = "{$form_prefix}subtitle";
                @endphp
                @component('admin.components.form_field', [
                    'class' => $class_right,
                    'label' => '',
                    'required' => false,
                    'description' => '',
                    'hasError' => false,
                ])
                    <textarea name="{{ $id }}" id="{{ $id }}" class="form-control"
                        placeholder="{{ 'You have been awarded points' }}"></textarea>
                @endcomponent
            </div>
        </div>
    @endslot

    @slot('slot_footer')
        <div class="w-100">
            <button type="button" class="btn btn-default float-left"
                data-dismiss="modal">{{ 'Discard & Close' }}</button>
            <button type="button" class="btn btn-info btn-confirm float-right">Save Changes</button>
        </div>
    @endslot
@endcomponent

@component('components.utility.modal_confirmation_delete')
@endcomponent


@once @push('style')
<style>
    span.badge.breakable {
        width: 170px;
        max-width: 170px;
        white-space: normal;
        text-align: left;
    }
</style>
@endpush @endonce

@once @push('script')
<script>
    $(function () {
        var isDataSaved = true;
        var num_process = 0;
        const refreshDataTable = e => {
            var $tbl = $(e.currentTarget);
            var reqAjax = $tbl.data('reqAjax');
            reqAjax && reqAjax.abort();

            var tbl_id = $tbl.prop('id');
            var $loading = $tbl.parents('.row:first').find(`#${tbl_id}_processing`).show();
            var $savebtn = $('.page-submit-btn').addClass('disabled').prop('disabled', true);
            if (num_process < 0) {
                num_process = 0;
            }
  
            ++num_process;
            var req = window.sKaleHttp.doAbsoluteAJAX(
                $tbl.data('route')
            );
            $tbl.data('reqAjax', reqAjax = req.ajax);
            req.promise.then(res => {
                $tbl.data('serieses', res.serieses).data('outlets', res.data);
                var $dt = $tbl.DataTable().clear();
                $dt.rows.add($tbl.data('outlets'));
                $dt.draw();
            }).finally(() => {
                $tbl.data('reqAjax', null);
                $loading.hide();
                --num_process;
                num_process <= 0 && $savebtn.removeClass('disabled').prop('disabled', false);
            });
        };
        const handleCheckboxAll = $tbl => {
            var $parent = $($tbl);
            var $tbl = $parent.DataTable();
            var $checkboxes = $tbl.$('td input[type=checkbox][id^=outlet_check_all]');

            if ($tbl.search() !== '') {
                $checkboxes = $checkboxes.filter(':visible');
            }

            var $checked = $checkboxes.filter(':checked');
            $parent.find('#outlet_check_all')
                .prop('checked', $checkboxes.length === $checked.length)
                .trigger('change', {programatically: true});

            var $btn_bulk = $parent.parents('.card:first').find('.btn-edit-bulk');
            $checked.length ?
                $btn_bulk.removeClass('disabled') :
                $btn_bulk.addClass('disabled');
        };
        const fn_removeDtRowByCond = ($tblWrap, closureIsRemove, isManualDelete = false) => {
            var dt_index = 0;
            var cls_remove = 'queue-remove';
            var found = false;
            var tbl_id = $tblWrap.prop('id');
            var $loading = $tblWrap.parents('.row:first').find(`#${tbl_id}_processing`).show();
            var $tbl = $tblWrap.DataTable();
            $tbl.rows().every(function (index) {
                var row = $tbl.row(index);
                var data = row.data();

                if (closureIsRemove(data.DT_RowIndex)) {
                    found = true;
                    isManualDelete && (data._manualDelete = true);
                    $(row.node()).addClass(cls_remove);
                    return;
                }
                ++dt_index;
                if (found) {
                    data.DT_RowIndex = dt_index;
                    row.data(data);
                }
            });
            $tbl.rows(`tr.${cls_remove}`).remove().draw();
            $loading.hide();
        };
        const reRenderDtOffline = ($tblWrap, storeTypeSels) => {
            var populate = [];
            storeTypeSels = storeTypeSels || {};
            var is_arr = Array.isArray(storeTypeSels);
            var num_type = 0;
            var tmp = is_arr ? {} : storeTypeSels;

            $.each(storeTypeSels, (k, v) => {
                is_arr && (tmp[v] = 1);
                ++num_type;
            });

            $.each($tblWrap.data('outlets') || [], (k, v) => {
                var is_show = !v._manualDelete && (
                    v.default || (num_type === 0 || tmp[v.store_type.id] === 1)
                );
                is_show && populate.push(v);
            });
            $tblWrap.DataTable().clear().rows.add(populate).draw();
        };

        const btn_edit = [
            '<a role="button" href="javascript:void(0);" class="btn btn-primary btn-sm mx-1 my-1 btn-edit">',
            '<i class="fas fa-pencil-alt"></i>',
            '&nbsp;Edit</a>',
        ].join('');
        const btn_delete = [
            '<a role="button" href="javascript:void(0);" class="btn btn-danger btn-sm mx-1 my-1 btn-delete">',
            '<i class="fas fa-trash-alt"></i>',
            '&nbsp;Delete</a>',
        ].join('');
        const reward_path = 'reward_details.rewards';
        var t = $('.tbl_challenge_outlet').DataTable({
            processing: true,
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"]],
            dom:
                "<'justify-content-center justify-content-sm-between row p-3'<''l><'col text-right'f>>" +
                "<'row'<'col-sm-12 overflow-auto'tr>>" +
                "<'row p-2'<'col-sm-5'i> <'col-sm-7'p>>",
            columns: [
                {data: 'checkbox', name: 'checkbox', render: (data, type, row) => {
                    var ref = data_get(row, 'DT_RowIndex');
                    row._uid = row._uid ?? [
                        new Date().getTime().toString(36),
                        (Math.random() + 1).toString(36).substring(7),
                    ].join('');
                    row._rowIndex = row._rowIndex ?? ref;
                    var cid = 'outlet_check_all_' + row._uid;
                    return [
                        '<div class="custom-control custom-checkbox">',
                        `<input id="${cid}" data-ref="${ref}" class="custom-control-input" type="checkbox">`,
                        `<label for="${cid}" class="custom-control-label font-weight-normal"></label>`,
                        '</div>',
                    ].join('');
                }},
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'name', name: 'outlet'},
                {name: 'store_category', render: (data, type, row) => data_get(row, 'store_type.name')},
                {name: 'chance_limit', render: (data, type, row) => {
                    var setting = data_get(row, 'setting_details');
                    if (!setting) {
                        return '';
                    }
                    var is_life = setting.lifetime_limit !== undefined;
                    var limit = setting.lifetime_limit ?? setting.daily_limit;

                    if (limit === undefined) {
                        return '';
                    }

                    return [
                        $('<span>').text(is_life ? 'Lifetime' : 'Daily').text(),
                        ', ',
                        $('<span>').text(
                            limit == -1 ? 'Unlimited' : (limit + ' time(s)'),
                        ).text(),
                    ].join('');
                }},
                {name: 'chance', render: (data, type, row) => {
                    var r = data_get(row, reward_path + '.chance');
                    return r && r.checked ? r.qty : '';
                }},
                {name: 'point', render: (data, type, row) => {
                    var r = data_get(row, reward_path + '.points');
                    return r && r.checked ? r.qty : '';
                }},
                {name: 'voucher_series', render: (data, type, row, meta) => {
                    var $tbl = $(meta.settings.nTable);
                    var r = data_get(row, reward_path + '.voucher');
                    var serieses = $tbl.data('serieses') || [];
                    var html = [];
                    $.each(!r || !r.checked || !Array.isArray(r.qty) ? [] : r.qty, (k, v) => {
                        html.push('<span class="badge badge-secondary mb-1 mr-1 breakable d-block">');
                        html.push(serieses[v] || v);
                        html.push('</span>');
                    });
    
                    return html.join('');
                }},
                {name: 'action', render: (data, type, row) => data_get(row, 'default') ? btn_edit : btn_edit + btn_delete},
            ],
            columnDefs: [{
                targets: [0,7],
                searchable: false,
                orderable: false,
            }, {
                targets: [8],
                searchable: false,
                orderable: false,
                className: 'text-center action-group',
            }],
            order: [[8, 'asc']],
            autoWidth: false,
        });

        const rewardPopupPrefix = 'modal_config_reward_';
        const addOutletPopupPrefix = 'modal_add_outlet_';
        $('.tbl_challenge_outlet')
            .on('onRemoteRefresh', refreshDataTable)
            .on('search.dt', e => setTimeout(() => handleCheckboxAll(e.currentTarget), 100))
            .on('click', 'thead input[type=checkbox]#outlet_check_all', (e, t) => {
                if (t && t.programatically) {
                    return;
                }
                var $this = $(e.currentTarget);
                var is_chk = $this.is(':checked');
                var sel = is_chk ? 'not(:checked)' : 'checked';
                var $tbl = $this.parents('table:first').DataTable();
                if ($tbl.search() !== '') {
                    sel += ':visible';
                }
                $tbl.$(`td input[type=checkbox][id^=outlet_check_all]:${sel}`)
                    .prop('checked', is_chk)
                    .trigger('change', {programatically: true});
                handleCheckboxAll($this.parents('table:first'));
            })
            .on('click', 'tbody input[type=checkbox][id^=outlet_check_all]', (e, t) => {
                (!t || !t.programatically) &&
                    handleCheckboxAll($(e.currentTarget).parents('table:first'));
            })
            .on('click', '.btn.btn-edit', e => {
                var $this = $(e.currentTarget);
                var $tbl = $this.parents('table:first').DataTable();
                var $row = $tbl.row($this.parents('tr:first'));
                var data = $row.data();
                var cid = $this.parents('[data-challenge]:first').data('challenge');
                var $modal = $(`#${rewardPopupPrefix}${cid}`).modal({
                    backdrop: 'static',
                    show: true,
                }).data('rows', [$row]).data('challenge', cid);
                
                resetRewardModal($modal).find('.outlet-name')
                    .text(`Row #: ${data.DT_RowIndex} - ${data.name}`);
                var mechanism = 'daily_limit';
                if (data_get(data, 'setting_details.lifetime_limit')) {
                    mechanism = 'lifetime_limit';
                }
                $modal.find(
                    `[name="${rewardPopupPrefix}mechanism"][value="${mechanism}"]`
                ).prop('checked', true).trigger('change');
                $modal.find(`[name="${rewardPopupPrefix}mechanism_qty"]`).val(
                    data_get(data, `setting_details.${mechanism}`)
                ).trigger('change');
                window.setGamificationReward(
                    rewardPopupPrefix.substring(0, rewardPopupPrefix.length - 1),
                    data,
                    'reward_details.rewards'
                );

                var copy_path = 'setting_details.messages.success.';
                var maps = $.each({
                    title: `${copy_path}title`,
                    subtitle: `${copy_path}subtitle`,
                    use_default_act: 'use_default_all',
                }, (k, v) => {
                    var $comp = $modal.find(`[name="${rewardPopupPrefix}${k}"]`);
                    var ctype = ($comp.prop('type') || '').toLowerCase();
                    v = data_get(data, v);
                    if (k === 'use_default_act') {
                        data.default ?
                            $modal.find('.row-use-default').hide() :
                            $modal.find('.row-use-default').show();
                    }
                    if (ctype === 'checkbox' || ctype === 'radio') {
                        $comp.prop('checked', v === true);
                    } else {
                        $comp.val(v);
                    }
                    $comp.trigger('change');
                });
            })
            .on('click', '.btn.btn-delete', e => {
                var $this = $(e.currentTarget);
                var $modal = $('#modal_delete_confirmation').modal('show');
                var $wrap = $this.parents('table:first');
                var dindex = $this.parents('tr:first').find('input[data-ref]:first').data('ref');
                $modal.find('.btn-confirm').off('click').on('click', e => {
                    isDataSaved = false;
                    $modal.modal('hide');
                    fn_removeDtRowByCond($wrap, rowIndex => rowIndex == dindex, 1);
                });
            });

        $('#{{$challenge_id}}_store_types').on('change', (e, data) => {
            {{--  update select2 filter --}}
            $(`#${addOutletPopupPrefix}{{$challenge_id}}`)
                .find(`[name=${addOutletPopupPrefix}outlets]`)
                .data('filters', {
                    categories: $(e.currentTarget).val(),
                });

            {{-- data source from ajax do nothing --}}
            if (data && data.ajax_update) {
                return;
            }

            isDataSaved = false;
            var $target = $(e.currentTarget);
            var vals = {};
            var num = 0;
            $.each($target.val(), (k, v) => {
                vals[v] = 1;
                ++num;
            });
            var $wrap = $('[data-challenge="{{$challenge_id}}"] table');
            reRenderDtOffline($wrap, vals);
        });
        $('.btn-modal-outlet').on('click', e => {
            var $btn = $(e.currentTarget);
            var cid = $btn.parents('[data-challenge]:first').data('challenge');
            var ids = $btn.parents('.card:first')
                .find('.tbl_challenge_outlet:first')
                .data('outlets') || [];

            ids = ids.map(v => v.id && !v._manualDelete ? v.id : null);
            $(`#${addOutletPopupPrefix}${cid}`).modal('show')
                .data('challenge', cid)
                .find(`[name=${addOutletPopupPrefix}outlets]`).val('').trigger('change')
                .data('select2_selected', ids);
        });
        $(`[id^="${addOutletPopupPrefix}"] .btn-confirm`).on('click', e => {
            setButtonToLoading(e.currentTarget);
            var $modal = $(e.currentTarget).parents('.modal:first');
            var cid = $modal.data('challenge');
            var $tbl = $(`[data-challenge="${cid}"]`).find('.tbl_challenge_outlet:first')
            var $comp = $modal.find(`[name=${addOutletPopupPrefix}outlets]`);
            var outlets = $tbl.data('outlets') || [];
            if (!Array.isArray(outlets)) {
                outlets = [];
            }
            var have_restore = false;
            var init_row = 2;
            var news = [];
            $.each($comp.val(), (k, v) => {
                var found = outlets.find(iv => iv.id == v);
                if (found) {
                    if (found._manualDelete) {
                        delete found._manualDelete;
                        have_restore = true;
                    }
                    return;
                }
                var store = ($comp.data('_results') || []).find(store => store.id == v);
                news.push({
                    DT_RowIndex: init_row,
                    id: store.id,
                    name: store.text,
                    reward_details: {},
                    setting_details: {},
                    store_type: Object.assign({}, store.storeType),
                    use_default: {},
                    use_default_all: true,
                });
                ++init_row;
            });
            if (!have_restore && !news.length) {
                $modal.modal('hide');
                resetLoadingButton();
                return;
            }
            isDataSaved = false;
            outlets = outlets.map(v => {
                if (!v.default) {
                    v.DT_RowIndex += init_row - 2;
                }
                return v;
            }).concat(news).sort((item1, item2) => {
                return item1.DT_RowIndex - item2.DT_RowIndex;
            });
            $tbl.data('outlets', outlets);
            var store_types = $('#{{$challenge_id}}_store_types').val().reduce((pool, v) => {
                pool[v] = 1;
                return pool;
            }, {});
            reRenderDtOffline($tbl, store_types);
            
            $modal.modal('hide');
            resetLoadingButton();
        });
        $(`[id^="${rewardPopupPrefix}"] .btn-confirm`).on('click', e => {
            setButtonToLoading(e.currentTarget);

            var $modal = $(e.currentTarget).parents('.modal:first');
            var $first = null;
            var getName = (name, quantifier = '') => $modal.find(`[name="${rewardPopupPrefix}${name}"]${quantifier}`);
            var removeProp = (obj, key) => {
                if (key.indexOf('.') !== -1) {
                    var splits = key.split('.');
                    var pop = splits.pop();
                    return removeProp(obj[pop], splits.join('.'));
                }
                if (typeof obj === 'object') {
                    delete obj[key];
                }
            };
            $.each($modal.data('rows'), (k, $row) => {
                isDataSaved = false;
                if (!$first) {
                    $first = $row;
                }
                var data = $row.data();

                //
                data.use_default_all = getName('use_default_act').is(':checked');
                data.setting_details = data.setting_details || {};
                var sd = data.setting_details;
                ['lifetime_limit', 'daily_limit', 'messages.success'].forEach(v => {
                    removeProp(sd, v);
                });
                var mechanism = getName('mechanism', ':checked').val();
                if (mechanism) {
                    sd[mechanism] = getName('mechanism_qty').val();
                }

                var title = getName('title').val().trim();
                var subtitle = getName('subtitle').val().trim();
                
                if (title !== '' || subtitle !== '') {
                    sd.messages = sd.messages || {};
                    sd.messages.success = {
                        title: title,
                        subtitle: subtitle,
                    };
                } else if (sd.messages) {
                    delete sd.messages.success;
                }

                data.reward_details = data.reward_details || {};
                var rd = data.reward_details;
                rd.rewards = rd.rewards || {};
                if (Array.isArray(rd.rewards)) {
                    rd.rewards = {...rd.rewards};
                }
                var rewards = window.getGamificationReward($modal)[undefined];
                rewards.forEach(item => rd.rewards[item.type] = item);

                $row.data(data);
            });

            $first && $first.table().draw();
            $modal.modal('hide');
            resetLoadingButton();
        });
        var resetRewardModal = $modal => {
            var challenge = $modal.data('challenge');
            var $tbl = $(`[data-challenge="${challenge}"]`).find('.tbl_challenge_outlet');
            var serieses = $tbl.data('serieses') || [];
            var $serieses = $modal.find(`select[name="${rewardPopupPrefix}type_voucher"]`);

            $serieses.length && $.each(serieses, (k, v) => {
                var $opt = $serieses.find(`option[value="${k}"]`);
                if (!$opt.length) {
                    $('<option>').val(k).text(v).appendTo($serieses)
                }
            });

            $modal.find('input[type="radio"], input[type="checkbox"]').prop('checked', false).trigger('change');
            $modal.find('input[type="text"], textarea, input[type="number"]').val('').trigger('change');
            $modal.find('select').val('').trigger('change');
            $modal.find('.row-use-default').show();
            return $modal;
        };
        $('.btn-edit-bulk').addClass('disabled').on('click', e => {
            var $btn = $(e.currentTarget);
            var cid = $btn.parents('[data-challenge]:first').data('challenge');
            var $card = $btn.parents('.card:first');

            var dtRows = [];
            var $rows = [];
            var $dtWrap = $card.find('.tbl_challenge_outlet');
            var $dt = $dtWrap.DataTable();
            var have_default = false;
            var default_outlet = $dtWrap.data('outlets').find(item => item.default);
            var $checkboxes = $dt
                .$('td input[type=checkbox][id^=outlet_check_all]:checked')
                .each(function () {
                    var ref = $(this).data('ref');
                    dtRows.push(ref);
                    $rows.push($dt.row($(this).parents('tr:first')));

                    !have_default && default_outlet && 
                        (have_default = default_outlet.DT_RowIndex == ref);
                });
            if (!$checkboxes.length) {
                makeToast('bg-warning', 'Please select at least one row to enable bulk edit');
                return;
            }

            var $modal = $(`#${rewardPopupPrefix}${cid}`).modal({
                backdrop: 'static',
                show: true,
            }).data('rows', $rows).data('challenge', cid);
            // reset
            dtRows = dtRows.join(', ')
            resetRewardModal($modal).find('.outlet-name').text(`[Row #: ${dtRows}]`);

            if (have_default) {
                $modal.find('.row-use-default').hide();
            }
        });
        $(`[name="${rewardPopupPrefix}use_default_act"]`).on('change', e => {
            var $this = $(e.currentTarget);
            var use_default = $this.is(':checked');
            var $components = $this.parents('.modal:first').find('input, textarea, select').not($this)
                .not(`[name="${rewardPopupPrefix}title"], [name="${rewardPopupPrefix}subtitle"]`);
            if (!use_default) {
                $components.removeClass('disabled').prop('disabled', false);
                return;
            }
            $components.addClass('disabled').prop('disabled', true);
            $components.filter('textarea, select, input[type=number], input[type=text]').val('').trigger('change');
            $components.filter('input[type=checkbox], input[type=radio]').prop('checked', false).trigger('change');
        });
        $(`[name="${rewardPopupPrefix}mechanism"]`).on('change', e => {
            var $this = $(e.currentTarget);
            var $desc = $this.parents('.form-group:first').find('.description');
            $this.val() === 'daily_limit'
                ? $desc.addClass('d-block').show()
                : $desc.removeClass('d-block').hide();
        });

        window.getOutletReward = (module, is_default = false) => {
            var $tbl = $(`[data-challenge="${module}"]`).find('.tbl_challenge_outlet').DataTable();
            var payloads = [];
            $tbl.rows().every(index => {
                var data = $tbl.row(index).data();
                var payload = {
                    id: data.id,
                    reward_details: data.reward_details,
                    setting_details: data.setting_details,
                };

                if (is_default && data.default) {
                    payloads.push(payload);
                    return false;
                }
                if (!is_default && !data.default) {
                    payloads.push(payload);
                }
            });

            return is_default ? payloads[0] : payloads;
        };

        $(document).on('onDataChangesSaved', () => {
            isDataSaved = true;
        });

        {{-- disabled download if there is unsaved changes --}}
        $('[data-challenge] a[data-route]').on('click', e => {
            if (!isDataSaved) {
                makeToast('bg-warning', 'Please save the changes before generate the report!');
                return;
            }
            window.open($(e.currentTarget).data('route'), '_blank', 'noopener');
        });
    });
</script>
@endpush @endonce