@php
    $id = $id ?? uniqid();
@endphp
@section('script')
    @parent
    <script>
        $(((form_id, tpl_row_id) => {
            var $form = $(`#${form_id}`);
            var $TPL = $($(`#${tpl_row_id}`).remove().html());

            {{-- Dom manipulation --}}
            var toParentRow = $btn => {
                $btn = $($btn);
                return ($btn.hasClass('row-data') || $btn.hasClass('row-title')) && $btn.prop('tagName')
                    .toLowerCase() == 'tr' ?
                    $btn :
                    $btn.parents('.row-data:first');
            };
            var cloneRow = $btn => $TPL.clone().insertAfter(toParentRow($btn));
            var removeRow = $btn => toParentRow($btn).remove();
            var removeAllRows = () => {
                $form.find('tr.row-data').remove();
                cloneRow($form.find('tr.row-title'));
            };

            {{-- Data manipulation --}}
            var fillRow = data => {
                var $rows = $form.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);
                }

                $.each(data, (k, v) => {
                    $row.find(`[name="${k}[]"]`).val(v).trigger('change');
                });
                return $row;
            };

            var populateRows = arr => {
                var inits = {};
                var $els = $();
                $.each(arr, (idx, v) => $els.add(fillRow(v)));
                $('tr.row-data').removeAttr('data-populated');
            };

            var generatePayload = () => {
                var pools = [];
                $form.find('.row-data').each(function() {
                    var $row = $(this);
                    var payload = {
                        amount_from: $row.find('[name="amount_from[]"]').val(),
                        amount_to: $row.find('[name="amount_to[]"]').val(),
                        multiplier: $row.find('[name="multiplier[]"]').val(),
                    };

                    {{-- empty set --}}
                    var has_val = false;
                    $.each(payload, (k, v) => {
                        if (has_val = v !== '') {
                            return false;
                        }
                    });
                    has_val && pools.push(payload);
                });

                return {
                    list: pools,
                };
            };

            {{-- event listeners --}}
            $form.on('click', '.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;
            });
            $form.find('.btn.btn-overwrite, .btn.btn-apply').on('click', e => {
                $form.trigger('form_close', {
                    list: generatePayload().list,
                    overwriteAll: $(e.currentTarget).hasClass('btn-overwrite'),
                }).modal('hide');
            });
            $form.on('config_repopulate', (e, payload) => {
                removeAllRows();
                $form.find('.modal-title .item_name').text(payload.rowNum);
                $form.find('.chance-title span').text(payload.chance);
                let m = payload.multipliers;
                Array.isArray(m) && m.length && populateRows(m);
            }).on('config_generation', (e, data) => {
                var res = generatePayload();
                data.list = res.list;
            }).on('change', '[data-min]', function() {
                var $el = $(this);
                var val = $el.val().trim();
                if (val !== '') {
                    val = Number(val);
                    if (isNaN(val)) {
                        val = 0;
                    } else if (val < $el.data('min')) {
                        val = $el.data('min');
                    }
                }
                $el.val(val);
            }).on('change', '[name="amount_to[]"]', function() {
                var $el = $(this);
                var val = $el.val().trim();
                var $el_from = $(this).parents('tr:first').find('[name="amount_from[]"]');
                if (val !== '') {
                    val = Number(val);
                    ($el_from.val() === '' || val < $el_from.val()) &&
                    $el_from.val(val);
                }
            }).on('change', '[name="amount_from[]"]', function() {
                var $el = $(this);
                var val = $el.val().trim();
                var $el_to = $(this).parents('tr:first').find('[name="amount_to[]"]');
                if (val !== '') {
                    val = Number(val);
                    ($el_to.val() !== '' && val > $el_to.val()) &&
                    $el_to.val(val);
                }
                val === '' && $el_to.val() !== '' &&
                    $el.val($el_to.val());
            });
        })('{{ $id }}', 'TPL_ROW_MULTIPLIER'));
    </script>
@endsection

@component('components.utility.template_popup', ['id' => $id, 'custom_dialog_class' => ''])
    @slot('slot_header')
        <label class="modal-title">
            Edit Multiplier <span class="item_name"></span>
        </label>
    @endslot

    <div>
        <label class="chance-title">Chance: <span>...</span></label>
        <table class="table table-bordered table-hover table-responsive">
            <tr class="row-title">
                <th class="col-3"></th>
                <th class="col-3">Amount From <span class="text-danger">*</span></th>
                <th class="col-3">Amount To</th>
                <th class="col-3">Multiplier <span class="text-danger">*</span></th>
            </tr>
        </table>
    </div>

    @slot('slot_footer')
        <div class="w-100">
            <button type="button" class="btn btn-default float-left" data-dismiss="modal">Cancel</button>
            <div class="float-right">
                <button type="button" class="btn btn-info btn-overwrite mr-2">
                    Overwrite Multiplier to All Row
                </button>
                <button type="button" class="btn btn-primary btn-apply float-right">
                    Apply Multiplier
                </button>
            </div>
        </div>
    @endslot
@endcomponent

@once
    <template class="d-none" id="TPL_ROW_MULTIPLIER">
        <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>
                <input name="amount_from[]" type="text" class="form-control mr-1 mb-1" data-min="0"
                    placeholder="Min. from 0" />
            </td>
            <td>
                <input name="amount_to[]" type="text" class="form-control mr-1 mb-1" data-min="0"
                    placeholder="Optional" />
            </td>
            <td>
                <input name="multiplier[]" type="text" class="form-control mr-1 mb-1 text-right" data-min="0"
                    placeholder="Min. from 0" />
            </td>

        </tr>
    </template>
@endonce