@php
    $inner_class = 'w-100 bg-gray-light shadow-none border overflow-auto';
    $listboxes = $listboxes ?? [];
@endphp

@section('script')
    <script src="{{ mix('js/admin/admin-maint.js') }}"></script>
    <script>
        $(() => {
            var urls = @json($urls);
            var $tplErr = $($('#TPL_ERR_ROW').remove().html());

            {{-- hybrid trigger --}}
            var hybridSel = '.tbl-hybrid-config';
            var $tplHybridTriggerRow = $(
                $('#TPL_ROW_HYBRID_TRIGGER').remove().html()
            );
            var toParentRow = $btn => {
                $btn = $($btn);
                return $btn.hasClass('row-data') && $btn.prop('tagName').toLowerCase() == 'tr' ?
                    $btn :
                    $btn.parents('.row-data:first');
            };
            var removeRow = $btn => toParentRow($btn).remove();
            var cloneRow = $btn => {
                var $row = $tplHybridTriggerRow.clone().insertAfter(
                    toParentRow($btn)
                );
                $row.find('.select2').select2();
                return $row;
            };
            var removeAll = () => {
                var $rows = $(hybridSel).find('tr.row-data');
                if (!$rows.length) {
                    var $last = $(hybridSel).find('tr:last').addClass('row-data');
                    cloneRow($last);
                    $last.removeClass('row-data');
                    return;
                }
                var $row = $rows.last();
                $rows.not($row).remove();
                cloneRow($row);
                removeRow($row)
            };
            var fillRow = data => {
                var $rows = $(hybridSel).find('tr.row-data');
                var $row = $($rows.last());
                if ($rows.length > 1 || $row.data('populated') == 1) {
                    $row = cloneRow($row);
                } else {
                    $row.attr('data-populated', 1);
                }
                $row.find('select').each(function () {
                    $(this).val(
                        data_get(data, $(this).attr('name'))
                    ).trigger('change');
                });
            };
            var generateHybridPayload = () => {
                var pools = [];
                $(`${hybridSel} .row-data`).each(function() {
                    var $row = $(this);
                    var data = {
                        left: {
                            path: $row.find('[name="left.path"]').val(),
                            blank: $row.find('[name="left.blank"]').val(),
                        },
                        cond: $row.find('[name="cond"]').val(),
                        right: {
                            path: $row.find('[name="right.path"]').val(),
                            blank: $row.find('[name="right.blank"]').val(),
                        },
                    };

                    (!data.left.path && !data.right.path) || pools.push(data);
                });
                return pools;
            };
            $(document).on('click', `${hybridSel} .btn.btn-act`, e => {
                e.preventDefault();
                var $btn = $(e.currentTarget);
                var is_delete = $btn.hasClass('btn-outline-danger')
                    || $btn.hasClass('btn-danger');

                if (is_delete) {
                    if (!confirm('Are you sure you want to delete?')) {
                        return false;
                    }
                    var $parent = toParentRow($btn);
                    ($parent.siblings('.row-data').length + $parent.is(':visible')) <= 1 &&
                        cloneRow($btn);
                    removeRow($btn);
                } else {
                    cloneRow($btn, 1);
                }

                return false;
            });

            {{-- populator --}}
            var populateField = (field_name, val, data) => {
                if ($.isPlainObject(val)) {
                    $.each(val, (k, v) => populateField(`${field_name}.${k}`, v, data));
                    return;
                }
                var suffix = Array.isArray(val) ? '[]' : '';
                var $el = $(`[name="${field_name}${suffix}"]`);
                if (!$el.length) {
                    return;
                }
                var tag_name = ($el.prop('tagName') || '').toLowerCase();

                if (field_name === 'item_lines.accepted_items') {
                    val = window.data_get(data, 'options.product');
                }

                if (tag_name === 'select') {
                    var $opts = $();
                    var selects = [];
                    $.each(val, (k, v) => {
                        v = $.isPlainObject(v) ? v : {
                            id: v,
                            value: v,
                        };
                        $opts = $opts.add(
                            $('<option>').val(v.id).text(v.value)
                        );
                        selects.push(v.id);
                    });
                    $el.empty().append($opts).val(selects).trigger('change');
                    return;
                }
                if (tag_name === 'input') {
                    var type = ($el.prop('type') || '').toLowerCase();
                    if (['checkbox', 'radio'].findIndex(v => v === type) !== -1) {
                        if (type === 'checkbox' && $el.length === 1) {
                            $el.prop('checked', !!val);
                        } else {
                            $el.not(
                                $el.filter(`[value="${val}"]`).prop('checked', true)
                            ).prop('checked', false);
                        }
                        $el.filter(':checked').trigger('change');
                    } else {
                        $el.val(val);
                    }
                    return;
                }
                if (tag_name === 'span') {
                    $el.text(val);
                }
            };
            var populateForm = data => {
                if (!data.receipt_uniqueness) {
                    data.receipt_similar_percent = '';
                }
                var exclusions = [
                    'receipt_uniqueness', 'metrics',
                ];
                $.each(data, (k, v) => {
                    exclusions.findIndex(str => str === k) === -1 &&
                        populateField(k, v, data);
                });
                $(document).trigger('config_repopulate', [data.metrics]);

                removeAll();
                data.hybrid_config &&
                    $.each(data.hybrid_config, (k, v) => fillRow(v));

                return Promise.resolve(data);
            };

            var saveData = data => {
                var obj = urls.store;
                return window.doAjaxPromise(
                    obj.url, obj.method, data, false, false, false
                ).promise.then(res => {
                    if (!res.success) {
                        return Promise.reject(res);
                    }
                    makeToast('bg-success', res.message || 'Saved');
                    return Promise.resolve(res.data);
                });
            };

            var generatePayload = () => {
                var $form = $('form.srr-config');
                var payload = Object.assign({}, data_payload);
                delete payload.options;
                $form.find('.form-control, .custom-control-input').each(function() {
                    var $el = $(this);
                    var field_name = $el.attr('name');
                    if (field_name.substr(-2) === '[]') {
                        field_name = field_name.substr(0, field_name.length - 2);
                    }
                    var last = payload;
                    var paths = field_name.split('.');
                    for (var idx = 0, max = paths.length - 1; idx <= max; idx++) {
                        if ((!max && max === idx) || (max && idx && max === idx)) {
                            if (!Object.hasOwnProperty.call(last, paths[max])) {
                                break;
                            }
                            var input_type = ($el.prop('tagName') || '').toLowerCase() ===
                                'input' ?
                                ($el.prop('type') || '').toLowerCase() :
                                null;

                            last[paths[max]] = input_type && ['radio', 'checkbox']
                                .findIndex(v => v === input_type) !==
                                -1 ?
                                $el.is(':checked') + 0 :
                                $el.val();

                            if (typeof last[paths[max]] === 'string') {
                                last[paths[max]] = last[paths[max]].trim();
                            }
                            break;
                        }
                        if (!Object.hasOwnProperty.call(last, paths[idx])) {
                            break;
                        }
                        last = last[paths[idx]];
                    }
                });
                payload.receipt_uniqueness = (payload.receipt_similar_percent !== '') + 0;
                payload.metrics = generateMetric();
                payload.service_type = $('[name=service_type]:checked').val();
                payload.hybrid_config = generateHybridPayload();

                return Promise.resolve(payload);
            };

            var generateMetric = () => {
                var data = {};
                $(document).trigger('config_generation', data);
                var count = 0;
                data.elems && $.each(data.metrics, (tk, v) => {
                    var $elem = data.elems[count];
                    var k = count;
                    $elem.find('[name="bl_operator"]').attr('data-path', `metrics.${k}.operator`);
                    $elem.find('[name="bl_num_min"]').attr('data-path', `metrics.${k}.nums.min`);
                    $elem.find('[name="bl_num_max"]').attr('data-path', `metrics.${k}.nums.max`);
                    v.approval_type && $elem.find('[name="approval_type"]').attr('data-path', `metrics.${k}.approval_type`);

                    var have_item = false;
                    $.each(v.ocr_metrics, (ik, iv) => {
                        $elem = data.elems[count];
                        $elem.find('[name="cl_operator"]').attr('data-path', `metrics.${k}.ocr_metrics.${ik}.operator`);
                        $elem.find('[name="cl_num_min"]').attr('data-path', `metrics.${k}.ocr_metrics.${ik}.nums.min`);
                        $elem.find('[name="cl_num_max"]').attr('data-path', `metrics.${k}.ocr_metrics.${ik}.nums.max`);
                        $elem.find('[name="approval_type"]').attr('data-path', `metrics.${k}.ocr_metrics.${ik}.approval_type`);
                        $elem.find('[name="cl_logical"]').attr('data-path', `metrics.${k}.ocr_metrics.${ik}.is_and_condition`);
                        have_item = true;
                        count++;
                    });
                    !have_item && count++;
                });
                return data.metrics;
            };

            var errorHandler = err => {
                var msg = 'Something went wrong';
                var showErr = (msgs, param_name = null, param_label = null) => {
                    msgs = Array.isArray(msgs) ? msgs : [msgs];
                    var news = {};
                    $.each(msgs, (idx, msg) => {
                        if (param_name && param_label) {
                            msg = msg.replace(param_name, param_label)
                                .replace(param_name.replaceAll('_',  ' '), param_label);
                        }
                        makeToast('bg-danger', msg);
                        news[idx] = msg;
                    });
                    return news;
                };
                if (typeof err !== 'object') {
                    showErr(msg);
                    return;
                }
                showErr(err.error_msg || err.message || msg);
                
                var rand = Math.random();
                var renderErr = (k, v, $parent = null) => {
                    var $input = $parent ? $parent.find(`[name="${k}"]`) : $(`[name="${k}"]`);

                    var inner_label = null;
                    var have_max = false;
                    var is_metric = k.indexOf('metrics.') !== -1;
                    if (is_metric) {
                        $input = $parent ? $parent.find(`[data-path="${k}"]`) : $(`[data-path="${k}"]`);
                        var td_idx = $input.parents('td:first').index();
                        var $iparent = $input.parents('table:first');
                        inner_label = $iparent.find(`tr:eq(1) th:eq(${td_idx})`).text();
                        if (inner_label && k.indexOf('nums.max') !== -1) {
                            inner_label = 'Max ' + inner_label;
                            $input.parents('td:first')
                                .find(`.invalid-feedback:not([data-rand="${rand}"])`)
                                .filter('[data-rand]')
                                .remove();
                        }
                        if (inner_label && $iparent.length) {
                            var grp = $iparent.parents('.card:first').find('.card-header:first .card-title:first').text();
                            if (grp) {
                                grp = grp.trim();
                                inner_label = `[${grp}] ${inner_label}`;
                            }
                        }
                    }

                    if (!$input.length) {
                        showErr(v);
                        return;
                    }
                    var $parent = $input.parents('.form-group:first');
                    var txt_lbl = $parent.find('label .form-label').text();
                    v = showErr(v, k, inner_label ?? txt_lbl);
                    var $err = $parent.find('.invalid-feedback')
                        .removeClass('d-none')
                        .addClass('d-inline-block');
                    if (!$err.length) {
                        $err = $tplErr.clone();
                        $err.insertAfter($input);
                    }
                    $err.attr('data-rand', rand).text(v[0]);
                    $input.addClass('is-invalid');
                };
                $.each(err.errors, (k, v) => {
                    if (k.indexOf('metrics.') !== 0) {
                        renderErr(k, v);
                        return;
                    }
                    var splits = k.split('.');
                    var path = [splits.shift(), splits.shift()].join('.');
                    var obj = data_get(submission, path);
                    if (!obj) {
                        return;
                    }
                    var $tbl = $(`table.table-config[data-type="${obj.type}"]`);
                    renderErr(k, v, $tbl);
                });

                $.each(err.error_arr, (k, v) => showErr(v));
            };

            $('[name="service_type"]').on('change', function (e) {
                var val = $(e.currentTarget).val();
                var $cards = $('form.srr-config .card[data-engine]');
                $cards.not(
                    $cards.filter(`[data-engine="${val}"]`).removeClass('d-none')
                ).addClass('d-none');
            });

            {{-- init --}}
            var data_payload = @json($data);
            var is_process = false;
            var submission = null;
            populateForm(data_payload);
            $('.btn.page-submit-btn').on('click', (e) => {
                if (is_process) {
                    return;
                }
                is_process = true;
                setButtonToLoading(e.currentTarget);
                $('.invalid-feedback').removeClass('d-inline-block').addClass('d-none').text('');
                $('input, select').removeClass('is-invalid');
                Promise.all([])
                    .then(() => generatePayload())
                    .then(data => saveData(submission = data))
                    .then(data => populateForm(data))
                    .then(data => data_payload = data)
                    .catch(err => {
                        errorHandler(err);
                        console.error(err);
                    })
                    .finally(() => {
                        resetLoadingButton();
                        is_process = false;
                    });
            });
            $('.wrap-collapse .btn').on('click', function () {
                var $el = $(this);
                $el.parents('.card-body:first')
                    .find('.card [data-card-widget="collapse"]')
                    .each(function () {
                        $(this).CardWidget(
                            $el.data('collapse') ? 'collapse' : 'expand'
                        );
                    });
                return false;
            });
        });
    </script>
@endsection

<form class="form-horizontal srr-config" method="POST" autocomplete="off" enctype="multipart/form-data">
    @csrf

    @component('admin.components.card', ['header' => 'Engine', 'collapse' => true,])
        @php
            $comp = [
                'label' => 'Engine Type',
                'descr' => '',
            ];
        @endphp
        @component('admin.components.form_field', [
            'class' => 'col-sm-12',
            'label' => $comp['label'],
            'required' => data_get($comp, 'req'),
            'description' => data_get($comp, 'descr'),
        ])
            @component('components.smart_receipt.service_type', [
                'id' => 'service_type',
                'disable' => !app()->isLocal() && !auth()->user()->checkPermissionTo(
                    \App\Skale\Entities\PermissionEntity::MANAGE_SMART_RECEIPT_ENGINE
                )
            ])
            @endcomponent
        @endcomponent
    @endcomponent

    @component('admin.components.card', [
        'header' => 'Hybrid Trigger & Cap',
        'class' => 'd-none',
        'card_attrs' => 'data-engine="hybrid"',
        'collapse' => true,
    ])
        <div class="col-12">
            @php
                $id = 'hybrid.usage_cap';
                $comp = [
                    'label' => 'Nums. of Usage Cap',
                    'descr' => 'Curr Usage: <span name="hybrid.usage_curr">...</span>',
                ];
            @endphp
            @component('admin.components.form_field', [
                'class' => 'col-sm-6',
                'label' => $comp['label'],
                'required' => data_get($comp, 'req'),
                'description' => data_get($comp, 'descr'),
            ])
                <input name="{{$id}}" id="{{$id}}" type="number" min="1" class="form-control"/>
            @endcomponent
        </div>

        <div class="col-12">
            <div class="container-fluid w-100 overflow-auto">
                <label for="">Trigger Rules</label>
                <table class="table table-bordered table-hover table-responsive tbl-hybrid-config" style="min-width: 800px;">
                    <tbody>
                        <tr>
                            <th class="col-1" style="min-width: 100px;"></th>
                            <th class="col-2">Label</th>
                            <th class="col-2">Value</th>
                            <th class="col-1">Logical Operator</th>
                            <th class="col-2">Label</th>
                            <th class="col-2">Value</th>
                        </tr>
                    </tbody>
                </table>   
            </div>
        </div>

        <template class="d-none" id="TPL_ROW_HYBRID_TRIGGER">
            <tr class="row-data">
                <td class="text-center">
                    <button class="btn btn-outline-primary btn-sm mr-1 mb-1 btn-act">
                        <i class="fas fa-plus"></i>
                    </button>
                    <button class="btn btn-outline-danger btn-sm mr-1 mb-1 btn-act">
                        <i class="fas fa-minus"></i>
                    </button>
                </td>

                @foreach(['left', 'right'] as $main_key)
                    <td>
                        <div class="input-group">
                            <select name="{{$main_key}}.path" class="filter-input form-control select2 select2bs4 filter-opt">
                                <option value="">&nbsp;</option>
                                @foreach ([
                                    'store_name.store.name.value' => 'Store',
                                    'outlet.merchant.name.value' => 'Outlet Name',
                                    'outlet.merchant.address.value' => 'Outlet Address',
                                    'trans_date.result.value' => 'Transaction Date',
                                    // 'trans_time.result.value' => 'Transaction Time',
                                    'payment_total.result.value' => 'Bill Amount',
                                    'payment_mode.result.value' => 'Payment Mode',
                                    'item_line' => 'Item Lines',
                                ] as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </td>
                    <td>
                        <select name="{{$main_key}}.blank" class="filter-input form-control select2 select2bs4">
                            @foreach ([1 => 'Is Empty', 0 => 'Is Not Empty'] as $key => $value)
                                <option value="{{ $key }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </td>

                    @if($loop->last) @continue @endif
                    <td>
                        <select name="cond" class="filter-input form-control select2 select2bs4">
                            @foreach (['AND', 'OR'] as $value)
                                <option value="{{ $value }}">{{ $value }}</option>
                            @endforeach
                        </select>
                    </td>
                @endforeach
            </tr>
        </template>
    @endcomponent

    @component('admin.components.card', ['header' => 'Criteria Setup', 'collapse' => true,])
        <div class="col-12 mb-1 text-right wrap-collapse">
            <button class="btn btn-outline-secondary mb-2 mr-2" data-collapse="1">Collapse</button>
            <button class="btn btn-outline-secondary mb-2">Expand</button>
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Receipt',
                'class' => $inner_class,
                'collapse' => true,
                'body_row_wrapper' => true,
            ])
                @php
                    $id = 'receipt_similar_percent';
                    $comp = [
                        'label' => 'Similarity of Duplication (%)',
                        'descr' => implode('<br>', ['How similar the receipt should classify as duplicate.', 'Leave it as empty to disabled the duplication validation.', 'Any number between 1 and 100.']),
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <input name="{{ $id }}" id="{{ $id }}" placeholder="{{ data_get($comp, 'placeholder') }}"
                        type="number" min="1" class="form-control" />
                @endcomponent

                @php
                    $id = 'confidence_decimal';
                    $comp = [
                        'label' => 'Rounding decimal of confidence score',
                        'descr' => 'Any digit between 0 and 12',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <input name="{{ $id }}" id="{{ $id }}" placeholder="{{ data_get($comp, 'placeholder') }}"
                        type="number" min="0" max="12" class="form-control" />
                @endcomponent

            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Store',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'store_name.name',
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Outlet',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'outlet.merchant.name',
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Transaction Date',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @php
                    $id = 'date_separator_as_day_month';
                    $comp = [
                        'label' => 'Having format with DD/MM/YYYY?',
                        'descr' => 'Tick this if there is at least one receipt having the format',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => '',
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" id="{{ $id }}" name="{{ $id }}">
                        <label for="{{ $id }}" class="custom-control-label">{{ $comp['label'] }}</label>
                    </div>
                @endcomponent

                @php
                    $id = 'accepted_days';
                    $comp = [
                        'label' => 'Minimum accepted receipt days',
                        'descr' => 'Leave it as empty to accept receipts within the campaign period.'
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <input name="{{ $id }}" id="{{ $id }}" placeholder="{{ data_get($comp, 'placeholder') }}"
                           type="number" min="0" class="form-control" />
                @endcomponent
                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'trans_date',
                    'mapping_only' => true,
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Transaction Time',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'trans_time',
                    'mapping_only' => true,
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12 d-none">
            @component('admin.components.card', [
                'header' => 'Bill Reference',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'bill_number',
                    'mapping_only' => true,
                    'hideable' => true,
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12 d-none">
            @component('admin.components.card', [
                'header' => 'Order Reference',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
            ])
                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'order_number',
                    'mapping_only' => true,
                    'body_row_wrapper' => true,
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Bill Amount',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @php
                    $id = 'min_bill_amount';
                    $comp = [
                        'label' => 'Minimum accepted bill amount',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <input name="{{ $id }}" id="{{ $id }}" placeholder="{{ data_get($comp, 'placeholder') }}"
                        type="number" min="0" class="form-control" />
                @endcomponent

                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'payment_total',
                    'mapping_only' => true,
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Payment Mode',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @php
                    $id = 'payment_modes.extracts';
                    $comp = [
                        'label' => 'Custom Payment Name(s) Extraction',
                        'placeholder' => '',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-6 col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <div class="input-group">
                        <select id="{{ $id }}" name="{{ $id }}[]"
                            class="filter-input form-control select2 select2bs4" multiple="multiple"
                            data-placeholder="{{ data_get($comp, 'placeholder') }}" data-tags="true">
                        </select>
                    </div>
                @endcomponent

                @php
                    $id = 'payment_modes.accepts';
                    $comp = [
                        'label' => 'Accepted Payment Name(s)',
                        'placeholder' => '',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-6 col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <div class="input-group">
                        <select id="{{ $id }}" name="{{ $id }}[]"
                            class="filter-input form-control select2 select2bs4" multiple="multiple"
                            data-placeholder="{{ data_get($comp, 'placeholder') }}" data-tags="true">
                        </select>
                    </div>
                @endcomponent

                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'payment_mode',
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Item Lines (Accumulation)',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @php
                    $id = 'item_lines.min_item';
                    $comp = [
                        'label' => 'Min of accepted line item(s)',
                        'descr' => 'Only product(s) found from the record are counted',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <input name="{{ $id }}" id="{{ $id }}" placeholder="{{ data_get($comp, 'placeholder') }}"
                        type="number" min="0" class="form-control" />
                @endcomponent

                @php
                    $id = 'item_lines.min_eligible_amount';
                    $comp = [
                        'label' => 'Min of accepted line amount',
                        'descr' => 'Only product(s) found from the record are counted',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <input name="{{ $id }}" id="{{ $id }}" placeholder="{{ data_get($comp, 'placeholder') }}"
                        type="number" min="0" class="form-control" />
                @endcomponent

                @php
                    $id = 'item_lines.accepted_items';
                    $comp = [
                        'label' => 'Accepted Product(s)',
                        'placeholder' => '',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-6 col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <div class="input-group">
                        <select id="{{ $id }}" name="{{ $id }}[]"
                            class="filter-input form-control select2 select2bs4" multiple="multiple"
                            data-placeholder="{{ data_get($comp, 'placeholder') }}"
                            data-ajax-url="{{ route('admin.select2.ajax.get_data', ['type' => 'products']) }}"
                            data-normalSearch="true">
                        </select>
                    </div>
                @endcomponent

                @php
                    $id = 'item_lines.is_all_must_present';
                    $comp = [
                        'label' => 'Must buy all accepted product(s)?',
                        'descr' => 'Tick this if all the accepted product(s) must appear in the receipt',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => '',
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" id="{{ $id }}" name="{{ $id }}">
                        <label for="{{ $id }}" class="custom-control-label">{{ $comp['label'] }}</label>
                    </div>
                @endcomponent

            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Product Name (Row Level)',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'product.name',
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Product Qty (Row Level)',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @php
                    $id = 'item_lines.row.min_qty';
                    $comp = [
                        'label' => 'Min of accepted qty',
                        'descr' => 'Only product(s) found from the record are validated',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <input name="{{ $id }}" id="{{ $id }}" placeholder="{{ data_get($comp, 'placeholder') }}"
                        type="number" min="0" class="form-control" />
                @endcomponent

                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'product.qty',
                    'mapping_only' => true,
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12 d-none">
            @component('admin.components.card', [
                'header' => 'Product Unit Price (Row Level)',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @php
                    $id = 'item_lines.row.min_unit_price';
                    $comp = [
                        'label' => 'Min of accepted unit price',
                        'descr' => 'Only product(s) found from the record are validated',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <input name="{{ $id }}" id="{{ $id }}" placeholder="{{ data_get($comp, 'placeholder') }}"
                        type="number" min="0" class="form-control" />
                @endcomponent

                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'product.unit_price',
                    'mapping_only' => true,
                ])
                @endcomponent
            @endcomponent
        </div>

        <div class="col-12">
            @component('admin.components.card', [
                'header' => 'Product Amount (Row Level)',
                'class' => $inner_class,
                'collapse' => true,
                'collapse_expand' => false,
                'body_row_wrapper' => true,
            ])
                @php
                    $id = 'item_lines.row.min_line_amount';
                    $comp = [
                        'label' => 'Min of accepted amount',
                        'descr' => 'Only product(s) found from the record are validated',
                    ];
                @endphp
                @component('admin.components.form_field', [
                    'class' => 'col-sm-6',
                    'label' => $comp['label'],
                    'required' => data_get($comp, 'req'),
                    'description' => data_get($comp, 'descr'),
                ])
                    <input name="{{ $id }}" id="{{ $id }}" placeholder="{{ data_get($comp, 'placeholder') }}"
                        type="number" min="0" class="form-control" />
                @endcomponent

                @component('admin.setting.components.srr_metric_config_tbl', [
                    'listboxes' => $listboxes,
                    'config_type' => 'product.line_amount',
                    'mapping_only' => true,
                ])
                @endcomponent
            @endcomponent
        </div>
    @endcomponent
    
    @component('admin.components.card', ['header' => 'Tester Setup', 'collapse' => true,])
        @php
            $id = 'tester.usage_cap';
            $comp = [
                'label' => 'Nums. of Usage Cap',
                'descr' => 'Curr Usage: <span name="tester.usage_curr">...</span>',
            ];
        @endphp
        @component('admin.components.form_field', [
            'class' => 'col-sm-6',
            'label' => $comp['label'],
            'required' => data_get($comp, 'req'),
            'description' => data_get($comp, 'descr'),
        ])
            <input name="{{$id}}" id="{{$id}}" type="number" min="1" class="form-control"/>
        @endcomponent

        @php
            $id = 'tester.auth';
            $comp = [
                'label' => 'Private Accessible',
                'descr' => '',
            ];
        @endphp
        @component('admin.components.form_field', [
            'class' => 'col-sm-6 d-flex align-items-center',
            'label' => '',
            'required' => data_get($comp, 'req'),
            'description' => data_get($comp, 'descr'),
        ])
            <div class="custom-control custom-switch mr-4">
                <input type="checkbox" class="custom-control-input" id="{{ $id }}" name="{{ $id }}">
                <label class="custom-control-label" for="{{ $id }}">{{ $comp['label']  }}</label>
            </div>
        @endcomponent
    @endcomponent
</form>

<template class="d-none" id="TPL_ERR_ROW">
    @component('admin.components.form_error_msg', ['hasError' => 1])
    @endcomponent
</template>

@if (app()->isLocal() && config('app.debug'))
    @component('admin.components.card', [
        'header' => 'Debug',
        'class' => $inner_class,
        'collapse' => true,
    ])
        <div style="z-index: 0">
            {!! dump($data ?? [], $listboxes, $urls ?? [], json_encode(data_get($data, 'metrics', []))) !!}
        </div>
    @endcomponent
@endif

@section('style')
    @parent
    <style>
        form.srr-config .card-body.row {
            margin-left: 0;
            margin-right: 0;
            padding-left: 0.7rem;
            padding-right: 0.7rem;
        }
    </style>
@endsection