<?php
/**
 * @author      Magetop Developer (Hau)
 * @package     Magento Multi Vendor Marketplace
 * @copyright   Copyright (c) Magetop (https://www.magetop.com)
 * @terms       https://www.magetop.com/terms
 * @license     https://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 **/
?>
<div data-bind="scope: '<?= /* @noEscape */  $block->getComponentName()?>'">
    <h2 class="steps-wizard-title"><?php echo $block->escapeHtml(
            __('Step 2: Attribute Values')
        ); ?></h2>
    <div class="steps-wizard-info">
        <span><?php echo $block->escapeHtml(
                __('Select values from each attribute to include in this product. Each unique combination of values creates a unigue product SKU.')
            );?></span>
    </div>
    <div data-bind="foreach: attributes, sortableList: attributes">

        <div class="attribute-entity" data-bind="attr:{'data-attribute-title':label}">
            <div class="attribute-entity-top">
                <div class="attribute-entity-title-block">
                    <span class="draggable-handle"
                          data-role="draggable"
                          title="<?= $block->escapeHtml(__('Sort Variations')) ?>">
                    </span>
                    <div class="attribute-entity-title" data-bind="text: label"></div>
                    <div class="attribute-options-block">
                        (<span class="attribute-length" data-bind="text: $data.options().length"></span>
                        <?php echo $block->escapeHtml(
                            __('Options')
                        ); ?>)
                    </div>
                </div>

                <div class="attribute-entity-actions">
                    <button type="button"
                            class="action-select-all action-tertiary"
                            data-bind="click: $parent.selectAllAttributes"
                            title="<?= $block->escapeHtml(__('Select All')) ?>">
                        <span><?php echo $block->escapeHtml(
                                __('Select All')
                            ); ?></span>
                    </button>
                    <button type="button"
                            class="action-deselect-all action-tertiary"
                            data-bind="click: $parent.deSelectAllAttributes"
                            title="<?= $block->escapeHtml(__('Deselect All')) ?>">
                        <span><?php echo $block->escapeHtml(
                                __('Deselect All')
                            ); ?></span>
                    </button>
                    <button type="button"
                            class="action-remove-all action-tertiary"
                            data-bind="click: $parent.removeAttribute.bind($parent)"
                            title="<?= $block->escapeHtml(__('Remove Attribute')) ?>">
                        <span><?php echo $block->escapeHtml(
                                __('Remove Attribute')
                            ); ?></span>
                    </button>
                </div>
            </div>

            <fieldset class="magetop__fieldset magetop__fieldset-options">
                <ul class="attribute-options" data-bind="foreach: options">
                    <li class="attribute-option" data-bind="attr:{'data-attribute-option-title':label}">
                        <div class="magetop__field magetop__field-option">
                            <input
                                type="checkbox"
                                class="magetop__control-checkbox"
                                data-bind="checkedValue: id, checked: $parent.chosenOptions, attr:{id:id}" />
                            <label data-bind="text: label, visible: label, attr:{for:id}"
                                   class="magetop__field-label"></label>
                        </div>
                        <div class="magetop__field magetop__field-create-new" data-bind="visible: !label">
                            <div class="magetop__field-control">
                                <input class="magetop__control-text"
                                       name="label"
                                       data-bind="value: label, valueUpdate: 'keyup'"
                                       type="text" />
                            </div>
                            <button type="button"
                                    class="action-save"
                                    title="<?= $block->escapeHtml(__('Save Option')) ?>"
                                    data-action="save"
                                    data-bind="click: $parents[1].saveOption.bind($parent)">
                                <span><?php echo $block->escapeHtml(
                                        __('Save Option')
                                    ); ?></span>
                            </button>
                            <button type="button"
                                    class="action-remove"
                                    title="<?= $block->escapeHtml(__('Remove Option')) ?>"
                                    data-action="remove"
                                    data-bind="click: $parents[1].removeOption.bind($parent)">
                                <span><?php echo $block->escapeHtml(
                                        __('Remove Option')
                                    ); ?></span>
                            </button>
                        </div>
                    </li>
                </ul>
            </fieldset>
            <button class="action-create-new action-tertiary"
                    type="button"
                    data-action="addOption"
                    data-bind="click: $parent.createOption">
                <span><?php echo $block->escapeHtml(
                        __('Create New Value')
                    ); ?></span>
            </button>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "variation-steps-wizard_step2": {
                        "component": "Magetop_Marketplace/js/variations/steps/attributes_values",
                        "appendTo": "<?= /* @noEscape */  $block->getParentComponentName()?>",
                        "optionsUrl": "<?= /* @noEscape */  $block->getUrl('marketplace/product_configurable/getAttributes')?>",
                        "createOptionsUrl": "<?= /* @noEscape */  $block->getUrl('marketplace/product_configurable/createOptions')?>"
                    }
                }
            }
        }
    }
</script>
