<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php /* @var $block \Magento\Catalog\Block\Product\View\Options\Type\File */ ?>
<?php $_option = $block->getOption(); ?>
<?php $_fileInfo = $block->getFileInfo(); ?>
<?php $_fileExists = $_fileInfo->hasData() ? true : false; ?>
<?php $_fileName = 'options_' . (int)$_option->getId() . '_file'; ?>
<?php $_fieldNameAction = $_fileName . '_action'; ?>
<?php $_fieldValueAction = $_fileExists ? 'save_old' : 'save_new'; ?>
<?php $_fileNamed = $_fileName . '_name'; ?>
<?php $_rand = rand(); ?>

<script>
require(['prototype'], function(){

//<![CDATA[
    opFile<?= /* @noEscape */ $_rand ?> = {
        initializeFile: function(inputBox) {
            this.inputFile = inputBox.select('input[name="<?= /* @noEscape */ $_fileName ?>"]')[0];
            this.inputFileAction = inputBox.select('input[name="<?= /* @noEscape */ $_fieldNameAction ?>"]')[0];
            this.fileNameBox = inputBox.up('dd').select('.<?= /* @noEscape */ $_fileNamed ?>')[0];
        },

        toggleFileChange: function(inputBox) {
            this.initializeFile(inputBox);
            inputBox.toggle();
            this.fileChangeFlag = this.fileChangeFlag ? false : true;
            if (!this.fileDeleteFlag) {
                if (this.fileChangeFlag) {
                     this.inputFileAction.value = 'save_new';
                     this.inputFile.disabled = false;
                 } else {
                     this.inputFileAction.value = 'save_old';
                     this.inputFile.disabled = true;
                 }
            }
        },

        toggleFileDelete: function(fileDeleteFlag, inputBox) {
            this.initializeFile(inputBox);
            this.fileDeleteFlag = fileDeleteFlag.checked ? true : false;
            if (this.fileDeleteFlag) {
                this.inputFileAction.value = '';
                this.inputFile.disabled = true;
                this.fileNameBox.setStyle({'text-decoration': 'line-through'});
            } else {
                this.inputFileAction.value = this.fileChangeFlag ? 'save_new' : 'save_old';
                this.inputFile.disabled = (this.fileChangeFlag == 'save_old');
                this.fileNameBox.setStyle({'text-decoration': 'none'});
            }
        }
    };
//]]>

});
</script>

<div class="admin__field <?= $_option->getIsRequire() ? ' required _required' : '' ?>">
    <label class="admin__field-label label">
        <span>
            <?= $block->escapeHtml($_option->getTitle()) ?>
            <?= /* @noEscape */ $block->getFormattedPrice() ?>
        </span>
    </label>
    <div class="admin__field-control control">
        <?php if ($_fileExists) :?>
            <span class="<?= /* @noEscape */ $_fileNamed ?>"><?= $block->escapeHtml($_fileInfo->getTitle()) ?></span>
            <a href="javascript:void(0)" class="label" onclick="opFile<?= /* @noEscape */ $_rand ?>.toggleFileChange($(this).next('.input-box'))">
                <?= $block->escapeHtml(__('Change')) ?>
            </a>&nbsp;
            <?php if (!$_option->getIsRequire()) :?>
                <input type="checkbox" onclick="opFile<?= /* @noEscape */ $_rand ?>.toggleFileDelete($(this), $(this).next('.input-box'))" price="<?= $block->escapeHtmlAttr($block->getCurrencyPrice($_option->getPrice(true))) ?>"/>
                <span class="label"><?= $block->escapeHtml(__('Delete')) ?></span>
            <?php endif; ?>
        <?php endif; ?>
        <div class="input-box" <?= $_fileExists ? 'style="display:none"' : '' ?>>
            <!-- ToDo UI: add appropriate file class when z-index issue in ui dialog will be resolved  -->
            <input type="file" name="<?= /* @noEscape */ $_fileName ?>" class="product-custom-option<?= $_option->getIsRequire() ? ' required-entry' : '' ?>" price="<?= $block->escapeHtmlAttr($block->getCurrencyPrice($_option->getPrice(true))) ?>" <?= $_fileExists ? 'disabled="disabled"' : '' ?>/>
            <input type="hidden" name="<?= /* @noEscape */ $_fieldNameAction ?>" value="<?= /* @noEscape */ $_fieldValueAction ?>" />

            <?php if ($_option->getFileExtension()) :?>
                <div class="admin__field-note">
                    <span><?= $block->escapeHtml(__('Compatible file extensions to upload')) ?>: <strong><?= $block->escapeHtml($_option->getFileExtension()) ?></strong></span>
                </div>
            <?php endif; ?>

            <?php if ($_option->getImageSizeX() > 0) :?>
                <div class="admin__field-note">
                    <span><?= $block->escapeHtml(__('Maximum image width')) ?>: <strong><?= (int)$_option->getImageSizeX() ?> <?= $block->escapeHtml(__('px.')) ?></strong></span>
                </div>
            <?php endif; ?>

            <?php if ($_option->getImageSizeY() > 0) :?>
                <div class="admin__field-note">
                    <span><?= $block->escapeHtml(__('Maximum image height')) ?>: <strong><?= (int)$_option->getImageSizeY() ?> <?= $block->escapeHtml(__('px.')) ?></strong></span>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>
