<?php
/**
 * Copyright 2014 Adobe
 * All Rights Reserved.
 */
?>
<?php /* @var $block \Magento\Catalog\Block\Product\View\Options\Type\Text */ ?>
<?php
$_option = $block->getOption();
$class = ($_option->getIsRequire()) ? ' required' : '';
?>

<div class="field<?php if ($_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_AREA) {
    echo ' textarea';
} ?><?= /* @noEscape */ $class ?>">
    <label class="label" for="options_<?= $block->escapeHtmlAttr($_option->getId()) ?>_text">
        <span><?= $block->escapeHtml($_option->getTitle()) ?></span>
        <?= /* @noEscape */ $block->getFormattedPrice() ?>
    </label>

    <div class="control">
        <?php if ($_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_FIELD) :?>
            <?php $_textValidate = null;
            if ($_option->getIsRequire()) {
                $_textValidate['required'] = true;
            }
            if ($_option->getMaxCharacters()) {
                $_textValidate['maxlength'] = $_option->getMaxCharacters();
            }
            $_textValidate['validate-no-utf8mb4-characters'] = true;
            ?>
            <input type="text"
                   id="options_<?= $block->escapeHtmlAttr($_option->getId()) ?>_text"
                   class="input-text product-custom-option"
                <?php if (!empty($_textValidate)) {?>
                    data-validate="<?= $block->escapeHtml(json_encode($_textValidate)) ?>"
                <?php } ?>
                   name="options[<?= $block->escapeHtmlAttr($_option->getId()) ?>]"
                   data-selector="options[<?= $block->escapeHtmlAttr($_option->getId()) ?>]"
                   value="<?= $block->escapeHtml($block->getDefaultValue()) ?>"/>
        <?php elseif ($_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_AREA) :?>
            <?php $_textAreaValidate = null;
            if ($_option->getIsRequire()) {
                $_textAreaValidate['required'] = true;
            }
            if ($_option->getMaxCharacters()) {
                $_textAreaValidate['maxlength'] = $_option->getMaxCharacters();
            }
            $_textAreaValidate['validate-no-utf8mb4-characters'] = true;
            ?>
            <textarea id="options_<?= $block->escapeHtmlAttr($_option->getId()) ?>_text"
                      class="product-custom-option"
                    <?php if (!empty($_textAreaValidate)) {?>
                        data-validate="<?= $block->escapeHtml(json_encode($_textAreaValidate)) ?>"
                    <?php } ?>
                      name="options[<?= $block->escapeHtmlAttr($_option->getId()) ?>]"
                      data-selector="options[<?= $block->escapeHtmlAttr($_option->getId()) ?>]"
                      rows="5"
                      cols="25"><?= $block->escapeHtml($block->getDefaultValue()) ?></textarea>
        <?php endif; ?>
        <?php if ($_option->getMaxCharacters()) :?>
            <p class="note note_<?= $block->escapeHtmlAttr($_option->getId()) ?>">
                <?= $block->escapeHtml(__('Maximum %1 characters', $_option->getMaxCharacters())) ?>
                <span class="character-counter no-display"></span>
            </p>
        <?php endif; ?>
    </div>
    <?php if ($_option->getMaxCharacters()) :?>
        <script type="text/x-magento-init">
        {
            "[data-selector='options[<?= $block->escapeJs($_option->getId()) ?>]']": {
                "Magento_Catalog/js/product/remaining-characters": {
                    "maxLength":  "<?= (int)$_option->getMaxCharacters() ?>",
                    "noteSelector": ".note_<?= $block->escapeJs($_option->getId()) ?>",
                    "counterSelector": ".note_<?= $block->escapeJs($_option->getId()) ?> .character-counter"
                }
            }
        }
    </script>
    <?php endif; ?>
</div>
