<?php
/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
?>

<?php
/** @var \WriteTextAI\WriteTextAI\ViewModel\Permissions $permissions */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Premium $premium */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Settings $settings */

$permissions = $block->getPermissions();
$premium = $block->getPremiumModel();
$settings = $block->getSettings();
$rules = $settings->getSettings('rules');
?>

<div class="wtai-wtai-attributes wtai-representatives" data-bind="scope: 'wtaiRepresentatives'">
    <div class="wtai-representative-products">
        <div class="wtai-representative-products-field">
            <div
                class="admin__action-multiselect-wrap action-select-wrap"
                tabindex="0"
                data-bind="
                    attr: {
                        id: uid
                    },
                    css: {
                        _active: listVisible,
                        'admin__action-multiselect-tree': isTree()
                    },
                    event: {
                        focusin: onFocusIn,
                        focusout: onFocusOut,
                        keydown: keydownSwitcher
                    },
                outerClick: outerClick.bind($data)
            ">
                <div
                    class="action-select admin__action-multiselect"
                    data-role="advanced-select"
                    data-bind="
                    css: {_active: listVisible},
                    click: function(data, event) {
                        toggleListVisible(data, event)
                    }
                ">
                    <div class="admin__action-multiselect-text"
                        data-bind="i18n: selectedPlaceholders.defaultPlaceholder"
                    >
                    </div>
                </div>
                <div class="action-menu" data-bind="
                    css: { _active: listVisible },
                    blockLoader: isLoading
                ">
                    <!-- ko if: filterOptions -->
                    <div class="admin__action-multiselect-search-wrap">
                        <input
                            class="admin__control-text admin__action-multiselect-search"
                            data-role="advanced-select-text"
                            type="text"
                            data-bind="
                                event: {
                                    keydown: filterOptionsKeydown
                                },
                                attr: {
                                    id: uid+2,
                                    placeholder: filterPlaceholder
                                },
                                valueUpdate: 'afterkeydown',
                                value: filterInputValue,
                                hasFocus: filterOptionsFocus
                            ">
                        <label
                            class="admin__action-multiselect-search-label"
                            data-action="advanced-select-search"
                            data-bind="attr: {for: uid+2}
                        ">
                        </label>
                        <div if="itemsQuantity"
                            data-bind="text: itemsQuantity"
                            class="admin__action-multiselect-search-count">
                        </div>
                    </div>
                    <!-- /ko -->
                    <!--ko with: options -->
                        <span class="wtai-no-data" data-bind="
                            visible: $data.length === 0,
                            text: $parent.emptyText()
                        "></span>
                    <!--/ko-->
                    <ul class="admin__action-multiselect-menu-inner _root"
                        data-bind="
                            event: {
                                scroll: function(data, event){onScrollDown(data, event)}
                            }
                        ">
                        <!-- ko foreach: { data: options, as: 'option'}  -->
                        <li class="admin__action-multiselect-menu-inner-item _root"
                            data-bind="css: { 
                                _parent: $data.optgroup,
                                'wtai-representatives-tooltip':
                                    $parent.maxOptionsSelected() &&
                                    !$parent.isSelectedValue(option)
                            }"
                            data-role="option-group
                        ">
                            <div class="action-menu-item tooltip-toggle"
                                data-bind="
                                    css: {
                                        _disabled: $parent.maxOptionsSelected() && !$parent.isSelectedValue(option),
                                        _selected: $parent.isSelectedValue(option),
                                        _hover: $parent.isHovered(option, $element),
                                        _expended: $parent.getLevelVisibility($data) &&
                                            $parent.showLevels($data),
                                        _unclickable: $parent.isLabelDecoration($data),
                                        _last: $parent.addLastElement($data),
                                        '_with-checkbox': $parent.showCheckbox
                                    },
                                    click: function(data, event){
                                        $parent.toggleOptionSelected($data, $index(), event);
                                    },
                                    clickBubble: false
                            ">
                                <!-- ko if: $data.optgroup && $parent.showOpenLevelsActionIcon-->
                                <div class="admin__action-multiselect-dropdown"
                                    data-bind="
                                        click: function(event){
                                            $parent.showLevels($data);
                                            $parent.openChildLevel($data, $element, event);
                                        },
                                        clickBubble: false
                                    ">
                                </div>
                                <!-- /ko-->
                                <!--ko if: $parent.showCheckbox-->
                                <input
                                    class="admin__control-checkbox"
                                    type="checkbox"
                                    tabindex="-1"
                                    data-bind="attr: { 'checked': $parent.isSelected(option.value) }">
                                <!-- /ko-->
                                <label class="admin__action-multiselect-label">
                                    <img data-bind="attr: { src: option.image }" />
                                    <span class="option-label" data-bind="html: option.label"></span>
                                    <span class="option-status" data-bind="text: option.status"></span>
                                </label>
                            </div>
                            <!-- ko if: $data.optgroup -->
                            <!-- ko template: {
                                name: $parent.optgroupTmpl,
                                data: {
                                    root: $parent,
                                    current: $data
                                }
                            } -->
                            <!-- /ko -->
                            <!-- /ko-->
                            <span class="tooltip-content" data-bind="
                                visible: $parent.maxOptionsSelected() && !$parent.isSelectedValue(option)
                            ">
                                <?= $escaper->escapeHtml(sprintf(
                                    __("You can only add up to %s products. Please remove an"
                                        . " existing product to add a new one."),
                                    $rules['maxRepresentativeProducts']
                                )); ?>
                            </span>
                        </li>
                        <!-- /ko -->
                    </ul>
                </div>
            </div>
        </div>
        <div class="wtai-empty" data-bind="visible: value().length <= 0">
            <?= $escaper->escapeHtml(__('Your selected product/s will display here.')) ?>
        </div>
        <div class="wtai-selected" data-bind="visible: value().length > 0">
            <ul data-bind="foreach: value">
                <li>
                    <img data-bind="attr: { src: $data.image }" />
                    <span data-bind="html: $data.label"></span>
                    <span class="wtai-option-status" data-bind="text: $data.status"></span>
                    <span class="wtai-action-remove" data-bind="
                        click: function() { $parent.removeOptionSelected($data) }
                    "></span>
                </li>
            </ul>
        </div>
    </div>
    <div class="wtai-other-details"
        data-bind="
            css: {
                'wtai-disabled': !detailsAllowed
            }
        ">
        <div class="wtai-field">
            <input type="checkbox"
                class="admin__control-checkbox"
                name="other_details"
                id="wtaiOtherDetails"
                value="1"
                data-bind="
                    checked: otherDetailsChecked
                "
            />
            <label for="wtaiOtherDetails" class="admin__field-label">
                <?= $escaper->escapeHtml(__('Other details')) ?>
            </label>
            <!-- <?= $block->getChildBlock('wtai.pro.badge.attributes')->toHtml() ?> -->
            <div class="wtai-control">
                <p class="wtai-note"><?= $escaper->escapeHtml(__('Use a comma to separate details.')) ?></p>
                <textarea name="product_details"
                    data-bind="
                        textInput: otherDetails,
                        event: { input: handleInputOtherProductDetails },
                        attr: { maxlength: rules.maxOtherDetailsLength },
                        disable: !detailsAllowed
                    "
                ></textarea>
                <p class="wtai-text-length" data-bind="text: otherDetailsLength"></p>
            </div>
        </div>
        <div class="wtai-product-research-data" data-bind="css: {
            'wtai-is-disabled': !isProductResearchDataAllowed()
        }">
            <span class="wtai-disabled-overlay"
                data-bind="
                    visible: !isProductResearchDataAllowed(),
                    attr: {
                        title: !isProductResearchDataAllowed()
                            ? '<?= $escaper->escapeJs(
                                __('Select at least one representative product to enable product research.')
                            ) ?>'
                            : null
                    }
                "
            ></span>
            <div class="wtai-field">
                <input type="checkbox"
                    class="admin__control-checkbox"
                    name="wtai_product_research_data"
                    id="wtaiProductResearchData"
                    data-bind="checked: productResearchData, disable: !isProductResearchDataAllowed()"
                />
                <label for="wtaiProductResearchData" class="admin__field-label" data-bind="
                    css: {
                        'wtai-product-research-data-disabled': !isProductResearchDataAllowed()
                    },
                    attr: {
                        title: !isProductResearchDataAllowed()
                            ? '<?= $escaper->escapeJs(
                                __('Select at least one representative product to enable product research.')
                            ) ?>'
                            : null
                    }
                ">
                    <span class="wtai-icon-label"></span>
                    <span class="wtai-text-label">
                        <span class="wtai-main-text">
                            <?= $escaper->escapeHtml(__('Product research')) ?>
                        </span>
                        <span class="wtai-sub-text">
                            <?= $escaper->escapeHtml(__('(AI-powered research to improve writing accuracy)')) ?>
                        </span>
                    </span>
                </label>
            </div>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiRepresentatives": {
                        "component": "WriteTextAI_WriteTextAI/js/categories/edit/representative-products",
                        "detailsAllowed":
                            <?= /* @noEscape */ $permissions->isProductDetailsAllowed() ? 'true' : 'false' ?>,
                        "rules": <?= /* @noEscape */ json_encode($rules) ?>,
                        "representativeProductsUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/categories/edit_representativeProducts')
                        ) ?>",
                        "saveUrl":
                            "<?= $escaper->escapeJs($block->getUrl('wtai/settings/representativeproducts')) ?>",
                        "saveSettingsUrl":
                            "<?= $escaper->escapeJs($block->getUrl('wtai/settings/save')) ?>"
                    }
                }
            }
        }
    }
</script>
