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

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis

/** @var $block \Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\Options\Option */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>
<?= $block->getTemplatesHtml() ?>
<script id="custom-option-base-template" type="text/x-magento-template">
    <div class="fieldset-wrapper admin__collapsible-block-wrapper opened" id="option_<%- data.id %>">
        <div class="fieldset-wrapper-title">
            <strong
                class="admin__collapsible-title"
                data-toggle="collapse"
                data-target="#<%- data.id %>-content">
                <span id="option_<%- data.id %>_header_title"><%- data.title %></span>
            </strong>
            <div class="actions">
                <button type="button"
                        title="<?= $block->escapeHtmlAttr(__('Delete Custom Option')) ?>"
                        class="action-delete"
                        id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_delete">
                    <span><?= $block->escapeHtml(__('Delete Custom Option')) ?></span>
                </button>
            </div>
            <div id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_move"
                 data-role="draggable-handle"
                 class="draggable-handle"
                 title="<?= $block->escapeHtmlAttr(__('Sort Custom Options')) ?>"></div>
        </div>
        <div class="fieldset-wrapper-content in collapse" id="<%- data.id %>-content">
            <fieldset class="fieldset">
                <fieldset class="fieldset-alt" id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>">
                    <input id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_is_delete"
                           name="<?= /* @noEscape */ $block->getFieldName() ?>[<%- data.id %>][is_delete]"
                           type="hidden"
                           value=""/>
                    <input id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_previous_type"
                           name="<?= /* @noEscape */ $block->getFieldName() ?>[<%- data.id %>][previous_type]"
                           type="hidden"
                           value="<%- data.type %>"/>
                    <input id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_previous_group"
                           name="<?= /* @noEscape */ $block->getFieldName() ?>[<%- data.id %>][previous_group]"
                           type="hidden"
                           value=""/>
                    <input id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_id"
                           name="<?= /* @noEscape */ $block->getFieldName() ?>[<%- data.id %>][id]"
                           type="hidden"
                           value="<%- data.id %>"/>
                    <input id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_option_id"
                           name="<?= /* @noEscape */ $block->getFieldName() ?>[<%- data.id %>][option_id]"
                           type="hidden"
                           value="<%- data.option_id %>"/>
                    <input name="<?= /* @noEscape */ $block->getFieldName() ?>[<%- data.id %>][sort_order]"
                           type="hidden"
                           value="<%- data.sort_order %>"/>

                    <div class="field field-option-title required">
                        <label class="label" for="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_title">
                            <?= $block->escapeHtml(__('Option Title')) ?>
                        </label>
                        <div class="control">
                            <input id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_title"
                                   name="<?= /* @noEscape */ $block->getFieldName() ?>[<%- data.id %>][title]"
                                   class="required-entry input-text"
                                   type="text"
                                   value="<%- data.title %>"
                                   data-store-label="<%- data.title %>"
                                   <% if (typeof data.scopeTitleDisabled != 'undefined' &&
                                          data.scopeTitleDisabled != null) { %> disabled="disabled" <% } %>
                                   >
                            <%- data.checkboxScopeTitle %>
                        </div>
                    </div>

                    <div class="field field-option-input-type required">
                        <label class="label" for="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_title">
                            <?= $block->escapeHtml(__('Input Type')) ?>
                        </label>
                        <div class="control opt-type">
                            <?= $block->getTypeSelectHtml() ?>
                        </div>
                    </div>

                    <div class="field field-option-req">
                        <div class="control">
                            <input id="<?= /* @noEscape */ $block->getFieldId() ?>_<%- data.id %>_required"
                                   class="is-required"
                                   type="checkbox"
                                   checked="checked"/>
                            <label for="field-option-req">
                                <?= $block->escapeHtml(__('Required')) ?>
                            </label>
                            <span id="span_<?= /* @noEscape */ $block->getFieldId() ?>">
                                <?= $block->getRequireSelectHtml() ?>
                            </span>
                        </div>
                    </div>
                    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
                        "display:none",
                        "span_#" . /* @noEscape */ $block->getFieldId()
                    ) ?>
                </fieldset>
            </fieldset>
        </div>
    </div>
</script>

<div id="import-container"></div>
<?= /* @noEscape */ $secureRenderer->renderStyleAsTag("display: none;", 'div#import-container') ?>
<?php if (!$block->isReadonly()):?>
<div><input type="hidden" name="affect_product_custom_options" value="1"/></div>
<?php endif; ?>
<?php
/** @var \Magento\Framework\Json\Helper\Data $jsonHelper */
$jsonHelper = $block->getData('jsonHelper');

$customOptions = /* @noEscape */ $jsonHelper->jsonEncode(
    [
        'fieldId' => $block->getFieldId(),
        'productGridUrl' => $block->escapeJs($block->getProductGridUrl()),
        'formKey' => $block->getFormKey(),
        'customOptionsUrl' => $block->escapeJs($block->getCustomOptionsUrl()),
        'isReadonly' => (bool) $block->isReadonly(),
        'itemCount' => (int) $block->getItemCount(),
        'currentProductId' => (int) $block->getCurrentProductId(),
    ]
);

$scriptString = <<<script
require([
    "jquery",
    "Magento_Catalog/js/custom-options"
], function(jQuery){

jQuery(function ($) {
    var fieldSet = $('[data-block=product-custom-options]');
    fieldSet.customOptions({$customOptions});
    //adding data to templates
script;
/** @var $_value \Magento\Framework\DataObject */
foreach ($block->getOptionValues() as $_value):
    $scriptString .= " fieldSet.customOptions('addOption', " . /* @noEscape */ $_value->toJson() . ');' . PHP_EOL;
endforeach;
$scriptString .= <<<script
});

});
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
