<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var SecureHtmlRenderer $secureRenderer */

use Magento\Framework\View\Helper\SecureHtmlRenderer;

?>

<?php
$_htmlId = $block->getHtmlId() ? $block->getHtmlId() : '_' . uniqid();
$_colspan = $block->isAddAfter() ? 2 : 1;
?>

<div class="design_theme_ua_regexp" id="grid<?= $block->escapeHtmlAttr($_htmlId) ?>">
    <div class="admin__control-table-wrapper">
        <table class="admin__control-table" id="<?= $block->escapeHtmlAttr($block->getElement()->getId()) ?>"
        aria-describedby="Recurring processing model configuration table">
            <thead>
            <tr>
                <?php foreach ($block->getColumns() as $columnName => $column): ?>
                    <th><?= $block->escapeHtml($column['label']) ?></th>
                <?php endforeach; ?>
            </tr>
            </thead>
            <tbody id="addRow<?= $block->escapeHtmlAttr($_htmlId) ?>"></tbody>
        </table>
    </div>

    <input type="hidden" name="<?= $block->escapeHtmlAttr($block->getElement()->getName()) ?>[__empty]" value="" />

    <script>
        require([
            'mage/template',
            'prototype'
        ], function (mageTemplate) {
            // create row creator
            window.arrayRow<?= $block->escapeJs($_htmlId) ?> = {

                // define row prototypeJS template
                template: mageTemplate(
                    '<tr id="<%- _id %>">'
                        <?php foreach ($block->getColumns() as $columnName => $column): ?>
                            + '<td>'
                            + '<?= $block->escapeJs($block->renderCellTemplate($columnName)) ?>'
                            + '</td>'
                        <?php endforeach; ?>
                    + '</tr>'
                ),

                add: function(rowData, insertAfterId) {
                    // generate default template data
                    var templateValues;

                    // Prepare template values
                    if (rowData) {
                        templateValues = rowData;
                    } else {
                        var d = new Date();
                        templateValues = {
                            <?php foreach ($block->getColumns() as $columnName => $column): ?>
                            <?= $block->escapeJs($columnName) ?>: '',
                            'option_extra_attrs': {},
                            <?php endforeach; ?>
                            _id: '_' + d.getTime() + '_' + d.getMilliseconds()
                        }
                    }

                    // Insert new row after specified row or at the bottom
                    if (insertAfterId) {
                        Element.insert($(insertAfterId), {after: this.template(templateValues)});
                    } else {
                        Element.insert($('addRow<?= $block->escapeJs($_htmlId) ?>'), {bottom: this.template(templateValues)});
                    }

                    // Fill controls with data
                    if (rowData) {
                        var rowInputElementNames = Object.keys(rowData.column_values);
                        for (var i = 0; i < rowInputElementNames.length; i++) {
                            if ($(rowInputElementNames[i])) {
                                $(rowInputElementNames[i]).setValue(rowData.column_values[rowInputElementNames[i]]);
                            }
                        }
                    }
                }
            }

            // add existing rows
            <?php foreach ($block->getArrayRows() as $_rowId => $_row): ?>
                arrayRow<?= $block->escapeJs($_htmlId) ?>.add(<?= /* @noEscape */ $_row->toJson() ?>);
            <?php endforeach; ?>

            <?php if ($block->getElement()->getDisabled()): ?>
                toggleValueElements({checked: true}, $('grid<?= $block->escapeJs($_htmlId) ?>').parentNode);
            <?php endif; ?>
        });
    </script>
</div>
