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

/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>
<tr>
<td colspan="2">
<label for="gallery"><?= $block->escapeHtml(__('Images')) ?></label>
<table id="gallery" class="gallery" border="0" cellspacing="3" cellpadding="0">
<thead id="gallery_thead" class="gallery">
    <tr class="gallery">
        <td class="gallery" valign="middle" align="center"><?= $block->escapeHtml(__('Big Image')) ?></td>
        <td class="gallery" valign="middle" align="center"><?= $block->escapeHtml(__('Thumbnail')) ?></td>
        <td class="gallery" valign="middle" align="center"><?= $block->escapeHtml(__('Sort Order')) ?></td>
        <td class="gallery" valign="middle" align="center"><?= $block->escapeHtml(__('Delete')) ?></td>
    </tr>
</thead>

<tfoot class="gallery">
<tr class="gallery">
<td class="gallery v-middle a-left"colspan="5"><?= $block->getAddButtonHtml() ?></td>
</tr>
</tfoot>

<tbody class="gallery">

<?php $i = 0; if ($block->getValues() !== null): ?>
    <?php foreach ($block->getValues() as $image): $i++; ?>
        <?php $trId = $block->getElement()->getHtmlId() . '_tr_' . $block->escapeHtmlAttr($image->getValueId()); ?>
        <tr id="<?= /* @noEscape */ $trId ?>" class="gallery">
        <?php foreach ($block->getValues()->getAttributeBackend()->getImageTypes() as $type): ?>
            <?php $typeId = $block->getElement()->getHtmlId() . '_image_' . $block->escapeHtmlAttr($type);
            $imgId =  $typeId . '_' . $block->escapeHtmlAttr($image->getValueId()); ?>
            <td class="gallery" align="center" id="<?= /* @noEscape */ $typeId ?>">
            <a href="<?= $block->escapeUrl($image->setType($type)->getSourceUrl()) ?>"
               id = <?= /* @noEscape */ 'a_' . $imgId ?>
               target="_blank"
            <img id="<?= /* @noEscape */ $imgId ?>"
                 src="<?= $block->escapeUrl($image->setType($type)->getSourceUrl()) ?>?<?= /* @noEscape */ time() ?>"
                 alt="<?= $block->escapeHtmlAttr($image->getValue()) ?>"
                 title="<?= $block->escapeHtmlAttr($image->getValue()) ?>"
                 height="25"
                 class="small-image-preview v-middle"/>
            </a><br/>
                <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
                    'onclick',
                    "imagePreview('<?= $imgId ?>');event.preventDefault()",
                    '#a_' . $imgId
                ) ?>
            <input type="file"
                   name="<?= $block->escapeHtmlAttr($block->getElement()->getName())
                    ?>_<?= $block->escapeHtmlAttr($type) ?>[<?= $block->escapeHtmlAttr($image->getValueId()) ?>]"
                   size="1">
            </td>
            <?= /* @noEscape */ $secureRenderer->renderStyleAsTag('vertical-align:bottom;', 'td#' . $typeId) ?>
        <?php endforeach; ?>
        <td class="gallery" align="center" id="<?= /* @noEscape */ $trId . '_td_input' ?>">
            <input type="input"
                   name="<?= $block->escapeHtmlAttr($block->getElement()->getParentName())
                    ?>[position][<?= $block->escapeHtmlAttr($image->getValueId()) ?>]"
                   value="<?= $block->escapeHtmlAttr($image->getPosition()) ?>"
                   id="<?= $block->getElement()->getHtmlId()
                    ?>_position_<?= $block->escapeHtmlAttr($image->getValueId()) ?>"
                   size="3"/>
        </td>
            <?= /* @noEscape */ $secureRenderer->renderStyleAsTag('vertical-align:bottom;', $trId . '_td_input') ?>
        <td class="gallery" align="center" id="<?= /* @noEscape */ $trId . '_td_delete' ?>">
            <?= $block->getDeleteButtonHtml($image->getValueId()) ?>
            <input type="hidden"
                   name="<?= $block->escapeHtmlAttr($block->getElement()->getParentName())
                    ?>[delete][<?= $block->escapeHtmlAttr($image->getValueId()) ?>]"
                   id="<?= $block->getElement()->getHtmlId()
                    ?>_delete_<?= $block->escapeHtmlAttr($image->getValueId()) ?>"/>
        </td>
            <?= /* @noEscape */ $secureRenderer->renderStyleAsTag('vertical-align:bottom;', $trId . '_td_delete') ?>
        </tr>
    <?php endforeach; ?>
<?php endif; ?>

<?php if ($i == 0): ?>
    <?php $scriptString = <<<script
document.getElementById("gallery_thead").style.visibility="hidden";
script;
    ?>
    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>
<?php endif; ?>

</tbody></table>

<?php
/** @var \Magento\Framework\Json\Helper\Data $jsonHelper */
$jsonHelper = $block->getData('jsonHelper');

$scriptString = <<<script
require([
    'prototype'
], function () {
id = 0;
num_of_images = {$i};

window.addNewImage = function()
{

    document.getElementById("gallery_thead").style.visibility="visible";

    id--;
    num_of_images++;
script;

    $elementName = $block->escapeHtmlAttr($block->getElement()->getName());
    $parentName = $block->escapeJs($block->getElement()->getParentName());
    $deleteButton = /* @noEscape */ $jsonHelper->jsonEncode($block->getDeleteButtonHtml("this"));
    $elementNameDel = $block->escapeJs($block->getElement()->getName());
    $scriptString .= <<<script
    new_file_input = '<input type="file" name="{$elementName}_%j%[%id%]" size="1">';

    // Sort order input
    var new_row_input = document.createElement( 'input' );
    new_row_input.type = 'text';
    new_row_input.name = '{$parentName}[position]['+id+']';
    new_row_input.size = '3';
    new_row_input.value = '0';

    // Delete button
    new_row_button = {$deleteButton};

    table = document.getElementById( "gallery" );

    // no of rows in the table:
    noOfRows = table.rows.length;

    // no of columns in the pre-last row:
    noOfCols = table.rows[noOfRows-2].cells.length;

    // insert row at pre-last:
    var x=table.insertRow(noOfRows-1);

    // insert cells in row.
    for (var j = 0; j < noOfCols; j++) {

        newCell = x.insertCell(j);
        newCell.align = "center";
        newCell.valign = "middle";

        if (j==2) {
            newCell.appendChild( new_row_input );
        } else if (j==3) {
            newCell.innerHTML = new_row_button;
        } else {
            newCell.innerHTML = new_file_input.replace(/%j%/g, j).replace(/%id%/g, id);
        }

    }

}

window.deleteImage = function(image)
{
    num_of_images--;
    if (num_of_images<=0) {
        document.getElementById("gallery_thead").style.visibility="hidden";
    }
    if (image>0) {
        document.getElementById('{$elementNameDel}_delete_'+image).value=image;
        document.getElementById('{$elementNameDel}_tr_'+image).style.display='none';
    } else {
        image.parentNode.parentNode.parentNode.removeChild( image.parentNode.parentNode );
    }
}
});
script;
?>
    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>
    </td>
</tr>
