<?php
/**
 * Maho
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2006-2020 Magento, Inc. (https://magento.com)
 * @copyright   Copyright (c) 2021-2022 The OpenMage Contributors (https://openmage.org)
 * @copyright   Copyright (c) 2024 Maho (https://mahocommerce.com)
 * @license     https://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>

<?php
$_htmlId = $this->getHtmlId() ? $this->getHtmlId() : '_' . uniqid();

$_colspan = 2;
if (!$this->_addAfter) {
    $_colspan -= 1;
}
$_colspan = $_colspan > 1 ? 'colspan="' . $_colspan . '"' : '';
?>

<div class="grid" id="grid<?= $_htmlId ?>">
    <table cellpadding="0" cellspacing="0" class="border">
        <tbody>

            <tr class="headings" id="headings<?= $_htmlId ?>">
<?php foreach ($this->_columns as $columnName => $column):?>
                <th><?= $column['label'] ?></th>
<?php endforeach ?>
                <th <?= $_colspan ?>></th>
            </tr>

            <tr id="addRow<?= $_htmlId ?>">
                <td colspan="<?= count($this->_columns) ?>"></td>
                <td <?= $_colspan ?>>
                    <button style="" onclick="" class="scalable add" type="button" id="addToEndBtn<?= $_htmlId ?>">
                        <span><?= $this->_addButtonLabel ?></span>
                    </button>
                </td>
            </tr>

        </tbody>
    </table>
    <input type="hidden" name="<?= $this->getElement()->getName() ?>[__empty]" value="" />
</div>
<div id="empty<?= $_htmlId ?>">
    <button style="" onclick="" class="scalable add" type="button" id="emptyAddBtn<?= $_htmlId ?>">
        <span><?= $this->_addButtonLabel ?></span>
    </button>
</div>

<script type="text/javascript">
//<![CDATA[
// create row creator
var arrayRow<?= $_htmlId ?> = {
    // define row prototypeJS template
    template : new Template(
        '<tr id="#{_id}">'
<?php foreach ($this->_columns as $columnName => $column):?>
            +'<td>'
                +'<?= Mage::helper('core')->jsQuoteEscape($this->_renderCellTemplate($columnName)) ?>'
            +'<\/td>'
<?php endforeach ?>
<?php if ($this->_addAfter):?>
            +'<td><button onclick="" class="scalable add" type="button" id="addAfterBtn#{_id}"><span><?= Mage::helper('core')->jsQuoteEscape(Mage::helper('adminhtml')->__('Add after')) ?><\/span><\/span><\/span><\/button><\/td>'
<?php endif ?>
            +'<td><button onclick="arrayRow<?= $_htmlId ?>.del(\'#{_id}\')" class="scalable delete" type="button"><span><?= Mage::helper('core')->jsQuoteEscape(Mage::helper('adminhtml')->__('Delete')) ?><\/span><\/span><\/span><\/button><\/td>'
        +'<\/tr>'
    ),

    rowsCount : 0,

    add : function(templateData, insertAfterId)
    {
        // generate default template data
        if ('' == templateData) {
            var d = new Date();
            var templateData = {
<?php foreach ($this->_columns as $columnName => $column):?>
                <?= $columnName ?> : '',
<?php endforeach ?>
                _id : '_' + d.getTime() + '_' + d.getMilliseconds()
            };
        }

        // insert before last row
        if ('' == insertAfterId) {
            Element.insert($('addRow<?= $_htmlId ?>'), {before: this.template.evaluate(templateData)});
        }
        // insert after specified row
        else {
            Element.insert($(insertAfterId), {after: this.template.evaluate(templateData)});
        }

<?php if ($this->_addAfter):?>
        Event.observe('addAfterBtn' + templateData._id, 'click', this.add.bind(this, '', templateData._id));
<?php endif ?>

        this.rowsCount += 1;
    },

    del : function(rowId)
    {
        $(rowId).remove();
        this.rowsCount -= 1;
        if (0 == this.rowsCount) {
            this.showButtonOnly();
        }
    },

    showButtonOnly : function()
    {
        $('grid<?= $_htmlId ?>').hide();
        $('empty<?= $_htmlId ?>').show();
    }
}

// bind add action to "Add" button in last row
Event.observe('addToEndBtn<?= $_htmlId ?>', 'click', arrayRow<?= $_htmlId ?>.add.bind(arrayRow<?= $_htmlId ?>, '', ''));

// add existing rows
<?php
$_addAfterId = "headings{$_htmlId}";
foreach ($this->getArrayRows() as $_rowId => $_row) {
    echo "arrayRow{$_htmlId}.add(" . $_row->toJson() . ", '{$_addAfterId}');\n";
    $_addAfterId = $_rowId;
}
?>

// initialize standalone button
$('empty<?= $_htmlId ?>').hide();
Event.observe('emptyAddBtn<?= $_htmlId ?>', 'click', function () {
    $('grid<?= $_htmlId ?>').show();
    $('empty<?= $_htmlId ?>').hide();
    arrayRow<?= $_htmlId ?>.add('', '');
});

// if no rows, hide grid and show button only
<?php if (!$this->getArrayRows()):?>
arrayRow<?= $_htmlId ?>.showButtonOnly();
<?php endif ?>

// toggle the grid, if element is disabled (depending on scope)
<?php if ($this->getElement()->getDisabled()):?>
toggleValueElements({checked:true}, $('grid<?= $_htmlId ?>').parentNode);
<?php endif ?>
//]]>
</script>
