@once('style')
    <style>
        .table-config {
            min-width: 700px;
        }

        .table-config td {
            vertical-align: middle;
        }

        .select2-results__option[aria-disabled="true"] {
            cursor: not-allowed;
            pointer-events: all !important;
            color: #cdcdcd;
        }
    </style>
@endonce

@php
    $mapping_only = $mapping_only ?? false;
@endphp

<div class="container-fluid {{ ($hideable ?? null) ? 'd-none' : ''}}">
    <label for="">Validation Rules</label>
    <table class="table table-bordered table-hover table-responsive table-config" data-mapping_only="{{ $mapping_only ? 1 : 0 }}" data-type="{{ $config_type ?? '' }}">
        <tbody>
            <tr class="text-center">
                <th></th>
                @if (!$mapping_only)
                    <th colspan="3">Business Logic Confidence <span class="text-danger">*</span></th>
                    <th colspan="3">OCR Confidence</th>
                @else
                <th colspan="3">OCR Confidence <span class="text-danger">*</span></th>
                @endif
            </tr>

            @if (!$mapping_only)
                <tr>
                    <th class="col-1"></th>
                    <th class="col-1">Operator</th>
                    <th class="col-2">Ratio</th>
                    <th class="col-2">Approval Type</th>
                    <th class="col-1">Logical Operator</th>
                    <th class="col-2">Operator</th>
                    <th class="col-2">Ratio</th>
                </tr>
            @else
                <tr>
                    <th class="col-2"></th>
                    <th class="col-2">Operator</th>
                    <th class="col-4">Ratio</th>
                    <th class="col-4">Approval Type</th>
                </tr>
            @endif
        </tbody>
    </table>

</div>

@once
    <template class="d-none" id="TPL_ROW_DATA">
        <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>
            <td>
                <div class="input-group">
                    <select name="bl_operator" class="filter-input form-control select2 select2bs4 filter-opt">
                        @foreach (data_get($listboxes ?? [], 'operator', []) as $key => $value)
                            <option value="{{ $key }}" {{ in_array($key, ['<=', '<']) ? 'disabled' : '' }}>
                                {{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </td>
            <td>
                <input name="bl_num_min" type="number" min="0" max="1" class="form-control mr-1 mb-1" placeholder="0 - 1" />
                <input name="bl_num_max" type="number" min="0" max="1" placeholder="0 - 1"
                    class="form-control mr-1 mb-1 d-none" />
            </td>
            <td>
                <div class="input-group">
                    <select name="approval_type" class="filter-input form-control select2 select2bs4 filter-opt">
                        @foreach (data_get($listboxes ?? [], 'approval_type', []) as $key => $value)
                            <option value="{{ $key }}" {{ $key === 'approve' ? 'selected' : '' }}>
                                {{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </td>
            <td data-mapping_only="0">
                <select name="cl_logical" class="filter-input form-control select2 select2bs4">
                    @foreach ([1 => 'AND', 0 => 'OR'] as $key => $value)
                        <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </td>
            <td data-mapping_only="0">
                <div class="input-group">
                    <select name="cl_operator" class="filter-input form-control select2 select2bs4">
                        @foreach (data_get($listboxes ?? [], 'operator', []) as $key => $value)
                            <option value="{{ $key }}" {{ in_array($key, ['<=', '<']) ? 'disabled' : '' }}>
                                {{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </td>
            <td data-mapping_only="0">
                <input name="cl_num_min" type="number" min="0" max="1" class="form-control mr-1 mb-1" placeholder="0 - 1" />
                <input name="cl_num_max" type="number" min="0" max="1" placeholder="0 - 1"
                    class="form-control mr-1 mb-1 d-none" />
            </td>

        </tr>
    </template>
@endonce

@once
    @push('script')
        <script>
            $(((win, doc, sel) => {
                var $TPL = $(
                    $(doc).find('#TPL_ROW_DATA').remove().html()
                );
                var bf_field_sel = $.map(
                    ['bl_operator', 'bl_num_min', 'bl_num_max', 'approval_type'],
                    (v, k) => {
                        return `[name="${v}"]`;
                    }).join(',');


                {{-- Dom manipulation --}}
                var toParentRow = $btn => {
                    $btn = $($btn);
                    return $btn.hasClass('row-data') && $btn.prop('tagName').toLowerCase() == 'tr' ?
                        $btn :
                        $btn.parents('.row-data:first');
                };

                var cloneRow = ($btn, bring_forward = false) => {
                    var $rows = toParentRow($btn);
                    var $new = $TPL.clone();

                    if ($rows.parents(`${sel}:first`).data('mapping_only') == 1) {
                        $new.find('td[data-mapping_only="0"]').addClass('d-none');
                    }

                    $new.insertAfter($rows);

                    bring_forward && $new.find(bf_field_sel).each(function() {
                        var $el = $(this);
                        var $target = $rows.find("[name='" + $el.prop('name') + "']");
                        $el.val($target.val()).trigger('change');
                    });

                    return $new;
                };

                var removeRow = $btn => {
                    return toParentRow($btn).remove();
                };

                {{-- Data manipulation --}}
                var fillRow = (data, type) => {
                    // if (type=='store_name.name') {debugger}
                    var $wrap = $(`${sel}[data-type="${type}"]:first`);
                    if (!$wrap.length) {
                        return $();
                    }
                    var $rows = $wrap.find('tr.row-data');
                    var $row = $($rows.first());
                    if ($rows.length > 1 || $row.data('populated') == 1) {
                        $row = cloneRow($row);
                    } else {
                        $row.attr('data-populated', 1);
                    }

                    data.nums = data.nums || {};
                    $.each({
                        approval_type: data.approval_type,
                        bl_operator: data.operator,
                        bl_num_min: data.nums.min,
                        bl_num_max: data.nums.max,
                    }, (k, v) => {
                        $row.find(`[name="${k}"]`).val(v).trigger('change');
                    });

                    $pool = $().add($row);
                    var num = 0;
                    $.each(data.ocr_metrics, (idx, set) => {
                        if (num) {
                            $row = cloneRow($row, 1);
                            $pool.add($row);
                        }
                        set.nums = set.nums || {};
                        $.each({
                            approval_type: set.approval_type,
                            cl_logical: set.is_and_condition ? 1 : 0,
                            cl_operator: set.operator,
                            cl_num_min: set.nums.min,
                            cl_num_max: set.nums.max,
                        }, (k, v) => {
                            $row.find(`[name="${k}"]`).val(v).trigger('change');
                        });
                        ++num;
                    });
                    return $pool;
                };

                var removeAll = (type) => {
                    var $wrap = $(`${sel}[data-type="${type}"]:first`);
                    var $rows = $wrap.find('tr.row-data');
                    var $row = $rows.first();
                    $rows.not($row).remove();
                    cloneRow($row);
                    removeRow($row)
                };

                var populateRows = arr => {
                    var inits = {};
                    var $els = $();
                    $.each(arr, (idx, v) => {
                        if (!Object.hasOwnProperty.call(inits, v.type)) {
                            removeAll(v.type);
                            inits[v.type] = 1;
                        }
                        $els.add(fillRow(v, v.type));
                    });
                    $('tr.row-data').removeAttr('data-populated');
                };

                var generatePayload = () => {
                    var pools = {};
                    $(`${sel} .row-data`).each(function() {
                        var $row = $(this);
                        var $tbl = $row.parents(`${sel}:first`);
                        var payload = {
                            operator: $row.find('[name="bl_operator"]').val(),
                            nums: {
                                min: $row.find('[name="bl_num_min"]').val(),
                                max: $row.find('[name="bl_num_max"]').val(),
                            },
                            type: $tbl.data('type'),
                            ocr_metrics: [],
                        };
                        var metric = {
                            operator: $row.find('[name="cl_operator"]').val(),
                            nums: {
                                min: $row.find('[name="cl_num_min"]').val(),
                                max: $row.find('[name="cl_num_max"]').val(),
                            },
                            approval_type: $row.find('[name="approval_type"]').val(),
                            is_and_condition: $row.find('[name="cl_logical"]').val(),
                        };

                        {{-- empty set --}}
                        var has_val = false;
                        $.each([
                            metric.nums.min, metric.nums.max,
                            payload.nums.min, payload.nums.max,
                        ], (k, v) => {
                            has_val = v !== '';
                            if (has_val) {
                                return false;
                            }
                        });
                        if (!has_val) {
                            return;
                        }

                        {{-- set init --}}
                        pools[payload.type] = pools[payload.type] || [];

                        {{-- look existing --}}
                        var exist = pools[payload.type].find(
                            v => v.payload.operator === payload.operator &&
                            v.payload.nums.min === payload.nums.min &&
                            v.payload.nums.max === payload.nums.max
                        );
                        if (exist) {
                            exist = exist.payload;
                        } else {
                            pools[payload.type].push({payload: payload, row: $row});
                            exist = payload;
                        }
                        exist.ocr_metrics.push({payload: metric, row: $row});
                    });

                    {{-- loop to follow the standard format --}}
                    var arr = [];
                    
                    $rows = [];
                    $.each(pools, (k, sets) => {
                        $.each(sets, (idx, set) => {
                            var $row = set.row;
                            var set = set.payload;
                            var first = set.ocr_metrics[0];
                            if (set.ocr_metrics.length === 1 && first.payload.nums.min === '' && first.payload
                                .nums.max === '') {
                                set.approval_type = first.payload.approval_type;
                                set.ocr_metrics = [];
                                $rows.push($row);
                            } else {
                                var ms = [];
                                $.each(set.ocr_metrics, (bk, bv) => {
                                    ms.push(bv.payload);
                                    $rows.push(bv.row);
                                });
                                set.ocr_metrics = ms;
                            }
                            arr.push(set);
                        });
                    });

                    return {
                        metrics: arr,
                        elems: $rows,
                    };
                };

                {{-- init --}}
                $(sel).each(function() {
                    var $new = $TPL.clone();
                    var $tbl = $(this);
                    if ($tbl.data('mapping_only') == 1) {
                        $new.find('td[data-mapping_only="0"]').addClass('d-none');
                    }
                    $new.insertAfter(
                        $tbl.find('tr:last')
                    );
                });

                {{-- event listeners --}}
                $(doc).on('click', `${sel} .btn.btn-act`, function(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;
                }).on('change', `${sel} [name="approval_type"]`, function() {
                    var $el = $(this);
                    var $parent = toParentRow($el);
                    $opts = $parent.find("option[value='<='], option[value='<']");

                    if ($el.val() === 'review') {
                        $opts.removeAttr('disabled');
                        return;
                    }
                    $opts.attr('disabled', true);
                    $opts.filter(":selected").length &&
                        $parent.find('select[name*="operator"]').each(function() {
                            var $sel = $(this);
                            !$sel.val() && $sel.val('>=').trigger('change');
                        });
                }).on('change', `${sel} select[name*="operator"]`, function() {
                    var $el = $(this);
                    var prefix = $el.prop('name').split('_')[0];
                    var $target = toParentRow($el).find(`[name="${prefix}_num_max"]`).removeClass('d-none');
                    $el.val() === 'between' ? $target.show() : $target.val('').hide();
                }).on('config_repopulate', (e, data) => {
                    populateRows(data);
                }).on('config_generation', (e, data) => {
                    var res = generatePayload();
                    data.metrics = res.metrics;
                    data.elems = res.elems;
                });
            })(window, document, 'table.table-config'));
        </script>
    @endpush
@endonce