<?php
/**
 * Copyright 2015 Adobe
 * All Rights Reserved.
 */

// phpcs:disable PHPCompatibility.Miscellaneous.RemovedAlternativePHPTags.MaybeASPOpenTagFound
/* @var $block \Magento\ConfigurableProduct\Block\Adminhtml\Product\Steps\Bulk */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
/** @var $viewModel uploadResizeConfigValue */
/** @var \Magento\Framework\Escaper $escaper */

use Magento\ConfigurableProduct\ViewModel\uploadResizeConfigValue;

$viewModel = $block->getViewModel();
?>
<?php
/** @var \Magento\Framework\Json\Helper\Data $jsonHelper */
$jsonHelper = $block->getData('jsonHelper');
$uploadUrl = $block->getUrl('catalog/product_gallery/upload');
?>
<div data-bind="scope: '<?= /* @noEscape */  $block->getComponentName() ?>'" data-role="bulk-step">
    <h2 class="steps-wizard-title"><?= $escaper->escapeHtml(__('Step 3: Bulk Images, Price and Quantity')) ?></h2>
    <div class="steps-wizard-info">
        <?= /* @noEscape */ __(
            'Based on your selections %1 new products will be created. ' .
            'Use this step to customize images and price for your new products.',
            '<span class="new-products-count" data-bind="text:countVariations"></span>'
        ) ?>
    </div>

    <div data-bind="with: sections().images" class="steps-wizard-section">
        <div data-role="section">
            <div class="steps-wizard-section-title">
                <span><?= $escaper->escapeHtml(__('Images')); ?></span>
            </div>

            <ul class="steps-wizard-section-list">
                <li>
                    <div class="admin__field admin__field-option">
                        <input type="radio"
                               id="apply-single-set-radio"
                               class="admin__control-radio"
                               value="single"
                               data-bind="checked:type">
                        <label for="apply-single-set-radio" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Apply single set of images to all SKUs')); ?></span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="admin__field admin__field-option">
                        <input type="radio"
                               id="apply-unique-images-radio"
                               class="admin__control-radio"
                               value="each"
                               data-bind="checked:type">
                        <label for="apply-unique-images-radio" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Apply unique images by attribute to each SKU')) ?></span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="admin__field admin__field-option">
                        <input type="radio"
                               id="skip-images-uploading-radio"
                               class="admin__control-radio"
                               value="none"
                               checked
                               data-bind="checked:type">
                        <label for="skip-images-uploading-radio" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Skip image uploading at this time')) ?></span>
                        </label>
                    </div>
                </li>
            </ul>

            <div data-role="step-gallery-single"
                 class="attribute-image-selector"
                 data-bind="visible: type() == 'single'">
                <div data-role="gallery"
                     class="gallery"
                     data-images="[]"
                     data-types="<?= $escaper->escapeHtmlAttr($jsonHelper->jsonEncode(
                         $block->getImageTypes()
                     )) ?>">
                    <div class="image image-placeholder">
                        <div data-role="uploader" class="uploader">
                            <div class="image-browse">
                                <span><?= $escaper->escapeHtml(__('Browse Files...')) ?></span>
                                <span class="browse-file" data-url="<?= /* @noEscape */ $uploadUrl ?>"></span>
                            </div>
                        </div>
                        <div class="product-image-wrapper">
                            <p class="image-placeholder-text"><?= $escaper->escapeHtml(__(
                                'Browse to find or drag image here'
                            )) ?></p>
                        </div>
                    </div>

                    <?php foreach ($block->getImageTypes() as $typeData): ?>
                        <input name="<?= $escaper->escapeHtml($typeData['name']) ?>"
                               class="image-<?= $escaper->escapeHtml($typeData['code']) ?>"
                               type="hidden"
                               value="<?= $escaper->escapeHtml($typeData['value']) ?>"/>
                    <?php endforeach; ?>

                    <script data-template="uploader" type="text/x-magento-template">
                        <div id="<%- data.id %>" class="file-row">
                            <span class="file-info"><%- data.name %> (<%- data.size %>)</span>
                            <div class="progressbar-container">
                                <div class="progressbar upload-progress"></div>
                            </div>
                            <div class="spinner">
                                <span></span><span></span><span></span><span></span>
                                <span></span><span></span><span></span><span></span>
                            </div>
                        </div>
                        <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
                            "width: 0%;",
                            "div.progressbar-container div.progressbar.upload-progress"
                        ) ?>
                    </script>

                    <script data-template="gallery-content" type="text/x-magento-template">
                        <div class="image item <% if (data.disabled == 1) { %>hidden-for-front<% } %>"
                             data-role="image">
                            <input type="hidden"
                                   name="product[media_gallery][images][<%- data.file_id %>][position]"
                                   value="<%- data.position %>"/>
                            <input type="hidden"
                                   name="product[media_gallery][images][<%- data.file_id %>][file]"
                                   value="<%- data.file %>"/>
                            <input type="hidden"
                                   name="product[media_gallery][images][<%- data.file_id %>][value_id]"
                                   value="<%- data.value_id %>"/>
                            <input type="hidden"
                                   name="product[media_gallery][images][<%- data.file_id %>][label]"
                                   value="<%- data.label %>"/>
                            <input type="hidden"
                                   name="product[media_gallery][images][<%- data.file_id %>][disabled]"
                                   value="<%- data.disabled %>"/>
                            <input type="hidden"
                                   name="product[media_gallery][images][<%- data.file_id %>][removed]"/>
                            <div class="product-image-wrapper">
                                <img class="product-image" data-role="image-element" src="<%- data.url %>"
                                     alt="<%- data.label %>"/>
                                <div class="actions">
                                    <button type="button"
                                            class="action-remove"
                                            data-role="delete-button"
                                            title="<?= $escaper->escapeHtml(__('Remove image')) ?>">
                                        <span><?= $escaper->escapeHtml(__('Remove image')) ?></span>
                                    </button>
                                    <div class="draggable-handle"></div>
                                </div>
                                <div class="image-fade"><span><?= $escaper->escapeHtml(__('Hidden')) ?></span></div>
                            </div>
                            <div class="item-description">
                                <div class="item-title" data-role="img-title"><%- data.label %></div>
                                <div class="item-size">
                                    <span data-role="image-dimens"></span>,
                                    <span data-role="image-size"><%- data.sizeLabel %></span>
                                </div>
                            </div>
                            <ul class="item-roles" data-role="roles-labels">
                                <?php foreach ($block->getMediaAttributes() as $attribute):?>
                                    <li data-role-code="<?= $escaper->escapeHtml($attribute->getAttributeCode()) ?>"
                                        class="item-role item-role-<?=
                                        $escaper->escapeHtml($attribute->getAttributeCode()) ?>">
                                        <?= /* @noEscape */ $attribute->getFrontendLabel() ?>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </script>

                    <script data-template="image" type="text/x-magento-template">
                        <div class="image">
                            <div class="product-image-wrapper">
                                <img class="product-image"
                                     data-role="image-element"
                                     src="<%- data.url %>"
                                     data-position="<%- data.position %>"
                                     alt="<%- data.label %>" />

                                <div class="actions">
                                    <button type="button"
                                            class="action-remove"
                                            data-role="delete-button"
                                            title="<?= $escaper->escapeHtml(__('Remove image')) ?>">
                                        <span><?= $escaper->escapeHtml(__('Remove image')) ?></span>
                                    </button>

                                    <div class="draggable-handle"></div>
                                </div>

                                <div class="image-fade"><span><?= $escaper->escapeHtml(__('Hidden')) ?></span></div>
                            </div>
                            <!--<ul class="item-roles">
                                <li class="item-role item-role-base">Base</li>
                            </ul>-->
                        </div>
                    </script>

                    <script data-role="img-dialog-container-tmpl" type="text/x-magento-template">
                        <div class="image-panel ui-tabs-panel ui-widget-content ui-corner-bottom" data-role="dialog">
                        </div>
                    </script>

                    <script class="dialog-template" type="text/x-magento-template" data-title="Image Options">
                        <div class="image-panel-preview">
                            <img src="<%- data.url %>" alt="<%- data.label %>" />
                        </div>
                        <div class="image-panel-controls">
                            <strong class="image-name"><%- data.label %></strong>

                            <fieldset class="admin__fieldset fieldset-image-panel">
                                <div class="admin__field field-image-description">
                                    <label class="admin__field-label" for="image-description">
                                        <span><?= $escaper->escapeHtml(__('Alt Text')) ?></span>
                                    </label>

                                    <div class="admin__field-control">
                            <textarea data-role="image-description"
                                      rows="3"
                                      class="admin__control-textarea"
                                      name="product[media_gallery][images][<%- data.file_id %>][label]"
                            ><%- data.label %></textarea>
                                    </div>
                                </div>

                                <div class="admin__field field-image-role">
                                    <label class="admin__field-label">
                                        <span><?= $escaper->escapeHtml(__('Role')); ?></span>
                                    </label>
                                    <div class="admin__field-control">
                                        <ul class="multiselect-alt">
                                            <?php
                                            foreach ($block->getMediaAttributes() as $attribute):
                                                ?>
                                                <li class="item">
                                                    <label>
                                                        <input class="image-type"
                                                               data-role="type-selector"
                                                               type="checkbox"
                                                               value="<?=
                                                                $escaper->escapeHtml($attribute->getAttributeCode()) ?>"
                                                        />
                                                        <?= $escaper->escapeHtml($attribute->getFrontendLabel()); ?>
                                                    </label>
                                                </li>
                                            <?php endforeach; ?>
                                        </ul>
                                    </div>
                                </div>

                                <div class="admin__field admin__field-inline field-image-size" data-role="size">
                                    <label class="admin__field-label">
                                        <span><?= $escaper->escapeHtml(__('Image Size')); ?></span>
                                    </label>
                                    <div class="admin__field-value"
                                         data-message="<?= $escaper->escapeHtml(__('{size}'));?>"></div>
                                </div>

                                <div class="admin__field admin__field-inline field-image-resolution"
                                     data-role="resolution">
                                    <label class="admin__field-label">
                                        <span><?= $escaper->escapeHtml(__('Image Resolution')); ?></span>
                                    </label>
                                    <div class="admin__field-value"
                                         data-message="<?= $escaper->escapeHtml(__('{width}^{height} px'));?>"></div>
                                </div>

                                <div class="admin__field field-image-hide">
                                    <div class="admin__field-control">
                                        <div class="admin__field admin__field-option">
                                            <input type="checkbox"
                                                   id="hide-from-product-page"
                                                   data-role="visibility-trigger"
                                                   value="1"
                                                   class="admin__control-checkbox"
                                                   name="product[media_gallery][images][<%- data.file_id %>][disabled]"
                                            <% if (data.disabled == 1) { %>checked="checked"<% } %> />

                                            <label for="hide-from-product-page" class="admin__field-label">
                                                <?= $escaper->escapeHtml(__('Hide from Product Page')); ?>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </script>
                </div>
            </div>

            <div data-role="step-gallery-each" class="attribute-image-selector" data-bind="visible: type() == 'each'">
                <fieldset class="admin__fieldset bulk-attribute-values">
                    <div class="admin__field _required">
                        <label class="admin__field-label" for="apply-images-attributes">
                            <span><?= $escaper->escapeHtml(__('Select attribute')); ?></span>
                        </label>
                        <div class="admin__field-control">
                            <select
                                id="apply-images-attributes"
                                class="admin__control-select"
                                data-bind="
                                options: $parent.attributes,
                                optionsText: 'label',
                                value: attribute,
                                optionsCaption: '<?= $escaper->escapeHtml(__("Select")); ?>'
                                ">
                            </select>
                        </div>
                    </div>
                </fieldset>

                <ul class="items attributes-selector-list" data-bind="if:attribute, visible: attribute">
                    <!-- ko foreach: {data: attribute().chosen, afterRender: $parent.bindGalleries} -->
                    <li class="item" data-bind="attr:{'data-role':'step-gallery-option-' + id}">
                        <label class="attribute-label">
                            <span data-bind="text:label"></span>
                        </label>

                        <div data-role="gallery"
                             class="gallery"
                             data-images="[]"
                             data-types="<?= $escaper->escapeHtmlAttr(
                                 $jsonHelper->jsonEncode($block->getImageTypes())
                             ) ?>">
                            <div class="image image-placeholder">
                                <div data-role="uploader" class="uploader">
                                    <div class="image-browse">
                                        <span><?= $escaper->escapeHtml(__('Browse Files...')); ?></span>
                                        <span class="browse-file" data-url="<?= /* @noEscape */ $uploadUrl ?>"></span>
                                    </div>
                                </div>
                                <div class="product-image-wrapper">
                                    <p class="image-placeholder-text">
                                        <?= $escaper->escapeHtml(__('Browse to find or drag image here')); ?>
                                    </p>
                                </div>
                                <div class="spinner">
                                    <span></span><span></span><span></span><span></span>
                                    <span></span><span></span><span></span><span></span>
                                </div>
                            </div>

                            <?php foreach ($block->getImageTypes() as $typeData): ?>
                                <input name="<?= $escaper->escapeHtml($typeData['name']) ?>"
                                       class="image-<?= $escaper->escapeHtml($typeData['code']) ?>"
                                       type="hidden"
                                       value="<?= $escaper->escapeHtml($typeData['value']) ?>"/>
                            <?php endforeach; ?>

                            <script data-template="uploader" type="text/x-magento-template">
                                <div id="<%- data.id %>" class="file-row">
                                    <span class="file-info"><%- data.name %> (<%- data.size %>)</span>
                                    <div class="progressbar-container">
                                        <div class="progressbar upload-progress"></div>
                                    </div>
                                    <div class="spinner">
                                        <span></span><span></span><span></span><span></span>
                                        <span></span><span></span><span></span><span></span>
                                    </div>
                                </div>
                                <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
                                    "width: 0%;",
                                    "div.progressbar-container div.progressbar.upload-progress"
                                ) ?>
                            </script>

                            <script data-template="gallery-content" type="text/x-magento-template">
                                <div class="image item <% if (data.disabled == 1) { %>hidden-for-front<% } %>"
                                     data-role="image">
                                    <input type="hidden"
                                           name="product[media_gallery][images][<%- data.file_id %>][position]"
                                           value="<%- data.position %>" class="position"/>
                                    <input type="hidden"
                                           name="product[media_gallery][images][<%- data.file_id %>][file]"
                                           value="<%- data.file %>"/>
                                    <input type="hidden"
                                           name="product[media_gallery][images][<%- data.file_id %>][value_id]"
                                           value="<%- data.value_id %>"/>
                                    <input type="hidden"
                                           name="product[media_gallery][images][<%- data.file_id %>][label]"
                                           value="<%- data.label %>"/>
                                    <input type="hidden"
                                           name="product[media_gallery][images][<%- data.file_id %>][disabled]"
                                           value="<%- data.disabled %>"/>
                                    <input type="hidden"
                                           name="product[media_gallery][images][<%- data.file_id %>][removed]"
                                           value=""
                                           class="is-removed"/>
                                    <div class="product-image-wrapper">
                                        <img class="product-image" data-role="image-element" src="<%- data.url %>"
                                             alt="<%- data.label %>"/>
                                        <div class="actions">
                                            <button type="button"
                                                    class="action-remove"
                                                    data-role="delete-button"
                                                    title="<?= $escaper->escapeHtml(__('Remove image')) ?>">
                                                <span><?= $escaper->escapeHtml(__('Remove image')); ?></span>
                                            </button>
                                            <div class="draggable-handle"></div>
                                        </div>
                                        <div class="image-fade"><span><?= $escaper->escapeHtml(__('Hidden')); ?></span>
                                        </div>
                                    </div>
                                    <div class="item-description">
                                        <div class="item-title" data-role="img-title"><%- data.label %></div>
                                        <div class="item-size">
                                            <span data-role="image-dimens"></span>,
                                            <span data-role="image-size"><%- data.sizeLabel %></span>
                                        </div>
                                    </div>
                                    <ul class="item-roles" data-role="roles-labels">
                                        <?php foreach ($block->getMediaAttributes() as $attribute):?>
                                            <li data-role-code="<?= $escaper->escapeHtml($attribute->getAttributeCode())
                                            ?>"
                                                class="item-role item-role-<?=
                                                $escaper->escapeHtml($attribute->getAttributeCode()) ?>">
                                                <?= $escaper->escapeHtml($attribute->getFrontendLabel()) ?>
                                            </li>
                                        <?php endforeach; ?>
                                    </ul>
                                </div>
                            </script>

                            <script data-template="image" type="text/x-magento-template">
                                <div class="image">
                                    <div class="product-image-wrapper">
                                        <img class="product-image"
                                             src="<%- data.url %>"
                                             data-role="image-element"
                                             data-position="<%- data.position %>"
                                             alt="<%- data.label %>" />
                                        <div class="actions">
                                            <button type="button"
                                                    class="action-remove"
                                                    data-role="delete-button"
                                                    title="<?= $escaper->escapeHtml(__('Remove image')) ?>">
                                                <span><?= $escaper->escapeHtml(__('Remove image')) ?></span>
                                            </button>
                                            <div class="draggable-handle"></div>
                                        </div>
                                        <div class="image-fade"><span><?= $escaper->escapeHtml(__('Hidden')) ?></span>
                                        </div>
                                    </div>
                                    <!--<ul class="item-roles">
                                        <li class="item-role item-role-base">Base</li>
                                    </ul>-->
                                </div>
                            </script>

                            <script data-role="img-dialog-container-tmpl" type="text/x-magento-template">
                                <div class="image-panel ui-tabs-panel ui-widget-content ui-corner-bottom"
                                     data-role="dialog">
                                </div>
                            </script>

                            <script class="dialog-template" type="text/x-magento-template" data-title="Image Options">
                                <div class="image-panel-preview">
                                    <img src="<%- data.url %>" alt="<%- data.label %>" />
                                </div>
                                <div class="image-panel-controls">
                                    <strong class="image-name"><%- data.label %></strong>

                                    <fieldset class="admin__fieldset fieldset-image-panel">
                                        <div class="admin__field field-image-description">
                                            <label class="admin__field-label" for="image-description">
                                                <span><?= $escaper->escapeHtml(__('Alt Text'));?></span>
                                            </label>

                                            <div class="admin__field-control">
                                            <textarea data-role="image-description"
                                                      rows="3"
                                                      class="admin__control-textarea"
                                                      name="product[media_gallery][images][<%- data.file_id %>][label]"
                                            ><%- data.label %></textarea>
                                            </div>
                                        </div>

                                        <div class="admin__field field-image-role">
                                            <label class="admin__field-label">
                                                <span><?= $escaper->escapeHtml(__('Role'));?></span>
                                            </label>
                                            <div class="admin__field-control">
                                                <ul class="multiselect-alt">
                                                    <?php foreach ($block->getMediaAttributes() as $attribute):?>
                                                        <li class="item">
                                                            <label>
                                                                <input class="image-type"
                                                                       data-role="type-selector"
                                                                       type="checkbox"
                                                                // @codingStandardsIgnoreLine
                                                                value="<?=
                                                                $escaper->escapeHtmlAttr($attribute->getAttributeCode())
                                                                ?>"
                                                                />
                                                                <?=
                                                                $escaper->escapeHtml($attribute->getFrontendLabel())?>
                                                            </label>
                                                        </li>
                                                    <?php endforeach; ?>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="admin__field admin__field-inline field-image-size" data-role="size">
                                            <label class="admin__field-label">
                                                <span><?= $escaper->escapeHtml(__('Image Size')); ?></span>
                                            </label>
                                            <div class="admin__field-value"
                                                 data-message="<?= $escaper->escapeHtml(__('{size}')); ?>"></div>
                                        </div>

                                        <div class="admin__field admin__field-inline field-image-resolution"
                                             data-role="resolution">
                                            <label class="admin__field-label">
                                                <span><?= $escaper->escapeHtml(__('Image Resolution')); ?></span>
                                            </label>
                                            <div class="admin__field-value"
                                                 data-message="<?= $escaper->escapeHtml(__('{width}^{height} px')); ?>">
                                            </div>
                                        </div>

                                        <div class="admin__field field-image-hide">
                                            <div class="admin__field-control">
                                                <div class="admin__field admin__field-option">
                                                    <input type="checkbox"
                                                           id="hide-from-product-page"
                                                           data-role="visibility-trigger"
                                                           value="1"
                                                           class="admin__control-checkbox"
                                                    // @codingStandardsIgnoreLine
                                                    name="product[media_gallery][images][<%- data.file_id %>][disabled]"
                                                    <% if (data.disabled == 1) { %>checked="checked"<% } %> />

                                                    <label for="hide-from-product-page" class="admin__field-label">
                                                        <?= $escaper->escapeHtml(__('Hide from Product Page')); ?>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                            </script>
                        </div>
                    </li>
                    <!-- /ko -->
                </ul>
            </div>
        </div>
    </div>

    <div data-bind="with: sections().price" class="steps-wizard-section">
        <div data-role="section">
            <div class="steps-wizard-section-title">
                <span><?= $escaper->escapeHtml(__('Price')); ?></span>
            </div>
            <ul class="steps-wizard-section-list">
                <li>
                    <div class="admin__field admin__field-option">
                        <input type="radio"
                               id="apply-single-price-radio"
                               class="admin__control-radio"
                               value="single"
                               data-bind="checked:type" />
                        <label for="apply-single-price-radio"
                               class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Apply single price to all SKUs')); ?></span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="admin__field admin__field-option">
                        <input type="radio"
                               id="apply-unique-prices-radio"
                               class="admin__control-radio"
                               value="each"
                               data-bind="checked:type" />
                        <label for="apply-unique-prices-radio"
                               class="admin__field-label">
                            <span><?=
                                $escaper->escapeHtml(__('Apply unique prices by attribute to each SKU')); ?>
                            </span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="admin__field admin__field-option">
                        <input type="radio"
                               id="skip-pricing-radio"
                               class="admin__control-radio"
                               value="none"
                               checked
                               data-bind="checked:type" />
                        <label for="skip-pricing-radio" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Skip price at this time')); ?></span>
                        </label>
                    </div>
                </li>
            </ul>
            <form data-role="attributes-values-form">
                <fieldset class="admin__fieldset bulk-attribute-values" data-bind="visible: type() == 'single'">
                    <div class="admin__field _required">
                        <label for="apply-single-price-input" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Price')); ?></span>
                        </label>
                        <div class="admin__field-control">
                            <div class="currency-addon">
                                <input class="admin__control-text required-entry validate-zero-or-greater" type="text"
                                       data-bind="value:value, uniqueName: true" id="apply-single-price-input"/>
                                <span class="currency-symbol" data-bind="text:currencySymbol"></span>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>

            <div data-bind="visible: type() == 'each'">
                <fieldset class="admin__fieldset bulk-attribute-values">
                    <div class="admin__field _required">
                        <label for="select-each-price" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Select attribute')); ?></span>
                        </label>
                        <div class="admin__field-control">
                            <select id="select-each-price" class="admin__control-select" data-bind="
                                    options: $parent.attributes,
                                    optionsText: 'label',
                                    value: attribute,
                                    optionsCaption: 'Select'"></select>
                        </div>
                    </div>
                </fieldset>

                <form data-role="attributes-values-form">
                    <fieldset class="admin__fieldset bulk-attribute-values" data-bind="if:attribute">
                        <!-- ko foreach: attribute().chosen -->
                        <div class="admin__field _required">
                            <label data-bind="attr: {for: 'apply-single-price-input-' + $index()}"
                                   class="admin__field-label">
                                <span data-bind="text:label"></span>
                            </label>
                            <div class="admin__field-control">
                                <div class="currency-addon">
                                    <input class="admin__control-text required-entry validate-zero-or-greater"
                                           type="text"
                                           data-bind="value:sections()[$parent.label], uniqueName: true,
                                           attr: {id: 'apply-single-price-input-' + $index()}"/>
                                    <span class="currency-symbol" data-bind="text:$parent.currencySymbol"></span>
                                </div>
                            </div>
                        </div>
                        <!-- /ko -->
                    </fieldset>
                </form>
            </div>
        </div>
    </div>

    <div data-bind="with: sections().quantity" class="steps-wizard-section">
        <div data-role="section">
            <div class="steps-wizard-section-title">
                <span><?= $escaper->escapeHtml(__('Quantity')) ?></span>
            </div>
            <ul class="steps-wizard-section-list">
                <li>
                    <div class="admin__field admin__field-option">
                        <input type="radio"
                               id="apply-single-inventory-radio"
                               class="admin__control-radio"
                               value="single"
                               data-bind="checked: type" />
                        <label for="apply-single-inventory-radio" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Apply single quantity to each SKUs')) ?></span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="admin__field admin__field-option">
                        <input type="radio"
                               id="apply-unique-inventory-radio"
                               class="admin__control-radio"
                               value="each"
                               data-bind="checked: type" />
                        <label for="apply-unique-inventory-radio" class="admin__field-label">
                            <span>
                                <?= $escaper->escapeHtml(__('Apply unique quantity by attribute to each SKU')) ?>
                            </span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="admin__field admin__field-option">
                        <input type="radio"
                               id="skip-inventory-radio"
                               class="admin__control-radio"
                               value="none"
                               checked
                               data-bind="checked: type" />
                        <label for="skip-inventory-radio" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Skip quantity at this time')) ?></span>
                        </label>
                    </div>
                </li>
            </ul>

            <form data-role="attributes-values-form">
                <fieldset class="admin__fieldset bulk-attribute-values" data-bind="visible: type() == 'single'">
                    <div class="admin__field _required">
                        <label for="apply-single-inventory-input" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Quantity')) ?></span>
                        </label>
                        <div class="admin__field-control">
                            <input type="text"
                                   id="apply-single-inventory-input"
                                   class="admin__control-text required-entry validate-zero-or-greater"
                                   data-bind="value: value, uniqueName: true" />
                        </div>
                    </div>
                </fieldset>
            </form>

            <div data-bind="visible: type() == 'each'">
                <fieldset class="admin__fieldset bulk-attribute-values">
                    <div class="admin__field _required">
                        <label for="apply-single-price-input-qty" class="admin__field-label">
                            <span><?= $escaper->escapeHtml(__('Select attribute')) ?></span>
                        </label>
                        <div class="admin__field-control">
                            <select id="apply-single-price-input-qty" class="admin__control-select" data-bind="
                                options: $parent.attributes,
                                optionsText: 'label',
                                value: attribute,
                                optionsCaption: 'Select'"></select>
                        </div>
                    </div>
                </fieldset>
                <form data-role="attributes-values-form">
                    <fieldset class="admin__fieldset bulk-attribute-values" data-bind="if:attribute">
                        <!-- ko foreach: attribute().chosen -->
                        <div class="admin__field _required">
                            <label data-bind="attr: {for: 'apply-qty-input-' + $index()}" class="admin__field-label">
                                <span data-bind="text:label"></span>
                            </label>
                            <div class="admin__field-control">
                                <input id="apply-single-price-input-value"
                                       class="admin__control-text required-entry validate-zero-or-greater" type="text"
                                       data-bind="value:sections()[$parent.label], uniqueName: true,
                                   attr: {id: 'apply-qty-input-' + $index()}"/>
                            </div>
                        </div>
                        <!-- /ko -->
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    </form>
</div>

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "<?= /* @noEscape */  $block->getComponentName() ?>": {
                    "component": "Magento_ConfigurableProduct/js/variations/steps/bulk",
                    "appendTo": "<?= /* @noEscape */  $block->getParentComponentName() ?>",
                    "noImage": "<?= /* @noEscape */  $block->getNoImageUrl() ?>",
                    "variationsComponent": "<?= /* @noEscape */ $block->getData('config/form')
                    ?>.configurableVariations",
                    "isResizeEnabled": <?= /* @noEscape */  $viewModel->isResizeEnabled() ?>,
                    "maxWidth": <?= /* @noEscape */  $viewModel->getMaxWidth() ?>,
                    "maxHeight": <?= /* @noEscape */  $viewModel->getMaxHeight() ?>
                }
            }
        }
    }
}
</script>
