<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Marketplace
 * @author    Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
?>
<div data-bind="scope: 'variation-steps-wizard_step3'" data-role="bulk-step">
    <h2 class="steps-wizard-title"><?= /* @noEscape */  __('Step 3: Bulk Images, Price, and Quantity') ?></h2>
    <div class="steps-wizard-info">
        <?= /* @noEscape */ __('Based on your selections <span class="new-products-count" data-bind="text:countVariations"></span>
        new products will be created. Use this step to customize images and price for your new products.') ?>
    </div>

    <div data-bind="with: sections().images" class="steps-wizard-section">
        <div data-role="section">
        <div class="steps-wizard-section-title">
            <span><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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="<?= /* @noEscape */ $block->escapeHtml(
                     $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonEncode($block->getAttributeImageTypes())
                 ) ?>"
                >
                <div class="image image-placeholder">
                    <div data-role="uploader" class="uploader">
                        <div class="image-browse">
                            <span><?= /* @noEscape */  __('Browse Files...') ?></span>
                            <input type="file"
                                   id=""
                                   name="image"
                                   class="admin__control-file"
                                   multiple="multiple"
                                   data-url="<?= $block->escapeUrl($block->getUrl('marketplace/product_gallery/upload', ['_secure' => $this->getRequest()->isSecure()])) ?>" />
                        </div>
                    </div>
                    <p class="image-placeholder-text"><?= /* @noEscape */  __('Browse to find or drag image here') ?></p>
                </div>

                <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" style="width: 0%;"></div>
                        </div>
                        <div class="spinner">
                            <span></span><span></span><span></span><span></span>
                            <span></span><span></span><span></span><span></span>
                        </div>
                    </div>
                </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]"/>
                        <img class="product-image" src="<%- data.url %>" alt="<%- data.label %>"/>
                        <button type="button"
                                class="action-remove action-delete"
                                data-role="delete-button"
                                title="<?= $block->escapeHtml(__('Remove image')) ?>">
                            <span><?= /* @noEscape */  __('Remove image') ?></span>
                        </button>
                        <div class="draggable-handle"></div>
                        <div class="image-label" title="<?= $block->escapeHtml(__('Edit role')) ?>"></div>
                        <div class="image-fade"><span><?= /* @noEscape */  __('Hidden') ?></span></div>
                    </div>
                </script>

                <script data-template="image" type="text/x-magento-template">
                    <div class="image">
                        <img
                            class="product-image"
                            src="<%- data.url %>"
                            data-position="<%- data.position %>"
                            alt="<%- data.label %>" />
                        <button type="button"
                                class="action-remove"
                                data-role="delete-button"
                                title="<?= $block->escapeHtml(__('Remove image')) ?>">
                            <span><?= /* @noEscape */  __('Remove image') ?></span>
                        </button>
                        <div class="draggable-handle"></div>
                        <div class="image-label" title="<?= $block->escapeHtml(__('Edit role')) ?>"></div>
                        <div class="image-fade"><span><?= /* @noEscape */  __('Hidden') ?></span></div>
                    </div>
                </script>

                <script class="dialog-template" type="text/x-magento-template" data-title="Image Options">
                    <div class="image-panel admin__scope-old" data-role="dialog">
                        <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="field field-image-description">
                                    <label class="field field-image-description">
                                        <span><?= /* @noEscape */  __('Alt Text') ?></span>
                                    </label>
                                    <div class="control">
                                        <textarea id="image-description"
                                                  class="admin__control-textarea"
                                                  rows="3"
                                                  name="product[media_gallery][images][<%- data.file_id %>][label]"
                                            ><%- data.label %></textarea>
                                    </div>
                                </div>

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

                                <div class="field field-image-hide">
                                    <label class="label">
                                        <input type="checkbox"
                                               data-role="visibility-trigger"
                                               value="1"
                                               name="product[media_gallery][images][<%- data.file_id %>][disabled]"
                                        <% if (data.disabled == 1) { %>checked="checked"<% } %> />
                                        <span><?= /* @noEscape */  __('Hide from Product Page') ?></span>
                                    </label>
                                </div>
                            </fieldset>
                        </div>
                    </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><?= /* @noEscape */  __('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: '<?= /* @noEscape */  __("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="<?= /* @noEscape */ $block->escapeHtml(
                             $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonEncode($block->getAttributeImageTypes())
                         ) ?>"
                        >
                        <div class="image image-placeholder">
                            <div data-role="uploader" class="uploader">
                                <div class="image-browse">
                                    <span><?= /* @noEscape */ __('Browse Files...') ?></span>
                                    <input type="file" name="image" multiple="multiple"
                                           data-url="<?= $block->escapeUrl($block->getUrl('marketplace/product_gallery/upload', ['_secure' => $this->getRequest()->isSecure()])) ?>" />
                                </div>
                            </div>
                            <p class="image-placeholder-text"><?= /* @noEscape */  __('Browse to find or drag image here') ?></p>
                            <div class="spinner">
                               <span></span><span></span><span></span><span></span>
                               <span></span><span></span><span></span><span></span>
                            </div>
                        </div>
                        <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" style="width: 0%;"></div>
                                </div>
                                <div class="spinner">
                                    <span></span><span></span><span></span><span></span>
                                    <span></span><span></span><span></span><span></span>
                                </div>
                            </div>
                        </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"/>
                                <img class="product-image" src="<%- data.url %>" alt="<%- data.label %>"/>

                                <button type="button"
                                        class="action-remove"
                                        data-role="delete-button"
                                        title="<?= $block->escapeHtml(__('Remove image')) ?>">
                                    <span><?= /* @noEscape */  __('Remove image') ?></span>
                                </button>
                                <div class="draggable-handle"></div>
                                <div class="image-label" title="<?= $block->escapeHtml(__('Edit role')) ?>"></div>
                                <div class="image-fade"><span><?= /* @noEscape */  __('Hidden') ?></span></div>
                            </div>
                        </script>

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

                                <button type="button"
                                        class="action-remove"
                                        data-role="delete-button"
                                        title="<?= $block->escapeHtml(__('Remove image')) ?>">
                                    <span><?= /* @noEscape */  __('Remove image') ?></span>
                                </button>
                                <div class="draggable-handle"></div>
                                <div class="image-label" title="<?= $block->escapeHtml(__('Edit role')) ?>"></div>
                                <div class="image-fade"><span><?= /* @noEscape */  __('Hidden') ?></span></div>
                            </div>
                        </script>

                        <script class="dialog-template" type="text/x-magento-template" data-title="Image Options">
                            <div class="image-panel admin__scope-old" data-role="dialog">
                                <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="field field-image-description">
                                            <label class="label" for="image-description">
                                                <span><?= /* @noEscape */  __('Alt Text') ?></span>
                                            </label>
                                            <div class="control">
                                                <textarea
                                                    id="image-description"
                                                    rows="3"
                                                    name="product[media_gallery][images][<%- data.file_id %>][label]"><%- data.label %></textarea>
                                            </div>
                                        </div>

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

                                        <div class="field field-image-hide">
                                            <label class="label">
                                                <input type="checkbox"
                                                       data-role="visibility-trigger"
                                                       value="1"
                                                       name="product[media_gallery][images][<%- data.file_id %>][disabled]"
                                                       <% if (data.disabled == 1) { %>checked="checked"<% } %> />
                                                <span><?= /* @noEscape */  __('Hide from Product Page') ?></span>
                                            </label>
                                        </div>
                                    </fieldset>
                                </div>
                            </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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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><?= /* @noEscape */  __('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": {
                "variation-steps-wizard_step3": {
                    "component": "Webkul_Marketplace/js/variations/steps/bulk",
                    "appendTo": "variation-steps-wizard",
                    "noImage": "<?= /* @noEscape */  $block->getPlaceholderImageUrl() ?>",
                    "variationsComponent": "configurableVariations"
                }
            }
        }
    }
}
</script>
