<?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();
?>

<div class="wtai-wtai-attributes" data-bind="scope: 'wtaiAttributes'">
    <!-- <pre data-bind="text: ko.toJSON(productAttributes, null, 2)"></pre> -->
    <div class="wtai-attributes" data-bind="css: { 'wtai-has-child-products': visibleChildProducts().length > 0 }">
        <div class="wtai-field wtai-select-all">
            <input type="checkbox"
                class="admin__control-checkbox"
                id="wtaiAttributeAll" 
                data-bind="
                    checked: selectAllValue,
                    event: { change: selectAllAttributes },
                    enable: attrAllowed
                "
            />
            <label class="admin__field-label" for="wtaiAttributeAll">
                <?= $escaper->escapeHtml(__('Select all')) ?>
            </label>
        </div>
        <!-- ko foreach: productAttributes -->
        <div class="wtai-field">
            <!-- ko if: $data.attribute.toLowerCase() === 'thumbnail' -->
            <div class="wtai-field-column wtai-thumbnail-field-column">
                <input type="checkbox"
                    class="admin__control-checkbox wtai-attribute-checkbox"
                    data-bind="
                        css: { 'wtai-disabled': !$parent.attrAllowed },
                        attr: { id: $data.attribute, name: $data.attribute },
                        checked: $parent.productAttributesSelected,
                        value: $data.attribute_code,
                        event: { change: $parent.saveThumbnailSelected },
                        enable: $parent.attrAllowed
                    "
                />
                <label class="admin__field-label" data-bind="
                    css: { 'wtai-disabled': !$parent.attrAllowed },
                    attr: { for: $data.attribute }
                ">
                    <div class="wtai-image-wrapper"
                        data-bind="click: function() { $parent.preview($data.original_image) }">
                        <img data-bind="attr: { src: $data.details }" />
                    </div>
                    <div class="wtai-text-wrapper">
                        <span data-bind="text: $data.attribute"></span>
                        <p class="wtai-thumbnail-text">
                            <?= $escaper->escapeHtml(__("(Analyze image to generate more relevant text)")) ?>
                        </p>
                    </div>
                </label>
            </div>
            <!-- /ko -->
            <!-- ko if: $data.attribute_code.toLowerCase() === 'wtai_product_research_data' -->
            <div class="wtai-field-column wtai-product-research-data-field-column">
                <input type="checkbox"
                    class="admin__control-checkbox wtai-attribute-checkbox"
                    data-bind="
                        css: { 'wtai-disabled': !$parent.attrAllowed },
                        attr: { id: $data.attribute, name: $data.attribute },
                        checked: $parent.productAttributesSelected,
                        value: $data.attribute_code,
                        event: { change: $parent.saveProductResearchDataSelected },
                        enable: $parent.attrAllowed
                    "
                />
                <label class="admin__field-label" data-bind="
                    css: { 'wtai-disabled': !$parent.attrAllowed },
                    attr: { for: $data.attribute }
                ">
                    <div class="wtai-image-wrapper">
                        <div class="wtai-details"></div>
                    </div>
                    <div class="wtai-text-wrapper">
                        <span data-bind="text: $data.attribute"></span>
                        <p class="wtai-thumbnail-text">
                            <?= $escaper->escapeHtml(__("(AI-powered research to improve writing accuracy)")) ?>
                        </p>
                    </div>
                </label>
            </div>
            <!-- /ko -->
            <!-- ko ifnot: $data.attribute.toLowerCase() === 'thumbnail'
                || $data.attribute_code.toLowerCase() === 'wtai_product_research_data' -->
            <div class="wtai-field-column">
                <input type="checkbox"
                    class="admin__control-checkbox wtai-attribute-checkbox"
                    data-bind="
                        css: { 'wtai-disabled': !$parent.attrAllowed },
                        attr: { id: $data.attribute, name: $data.attribute },
                        checked: $parent.productAttributesSelected,
                        value: $data.attribute_code,
                        enable: $parent.attrAllowed
                    "
                />
                <label class="admin__field-label" data-bind="
                    css: { 'wtai-disabled': !$parent.attrAllowed },
                    attr: { for: $data.attribute },
                    text: $data.attribute
                "></label>
            </div>
            <!-- /ko -->
            <div class="wtai-field-column">
                <!-- ko if: $data.attribute.toLowerCase() === 'thumbnail' -->
                    <div class="wtai-image-wrapper" data-bind="
                        click: function() { $parent.preview($data.original_image) }
                    ">
                        <!-- <img data-bind="attr: { src: $data.details }" /> -->
                        <div class="wtai-details"></div>
                    </div>
                <!-- /ko -->
                <!-- ko ifnot: $data.attribute.toLowerCase() === 'thumbnail' -->
                    <span class="wtai-details" data-bind="html: $data.details"></span>
                <!-- /ko -->
            </div>
        </div>
        <!-- /ko -->
    </div>
    <div class="wtai-attributes-side-columns" data-bind="css: {
        'wtai-has-child-products': visibleChildProducts().length > 0
    }">
        <div class="wtai-attributes-right-components">
            <div class="wtai-other-details" data-bind="css: { 'wtai-disabled': !productDetailsAllowed }">
                <div class="wtai-field">
                    <input type="checkbox"
                        class="admin__control-checkbox"
                        name="other_details"
                        id="wtaiOtherDetails"
                        value="1"
                        data-bind="checked: otherProductDetailsChecked"
                    />
                    <label for="wtaiOtherDetails" class="admin__field-label">
                        <?= $escaper->escapeHtml(__('Other product details')) ?>
                    </label>
                    <div class="wtai-control">
                        <p class="wtai-note"><?= $escaper->escapeHtml(__('Use a comma to separate details.')) ?></p>
                        <textarea name="product_details"
                            data-bind="
                                textInput: otherProductDetails,
                                event: { input: handleInputOtherProductDetails },
                                attr: { maxlength: rules.maxOtherDetailsLength },
                                disable: !productDetailsAllowed
                            "
                        ></textarea>
                        <p class="wtai-text-length" data-bind="text: getOtherProductDetailsLength()"></p>
                    </div>
                </div>
            </div>
            <?= $block->getChildHtml('wtai.additional.prompt') ?>
        </div>
        <div class="wtai-child-product-panel" data-bind="visible: isChildProductListVisible">
            <div class="wtai-child-product-panel-header">
                <div class="wtai-child-product-panel-title">
                    <span data-bind="text: childProductPanelTitle"></span>
                    <div class="wtai-tooltip-wrapper">
                        <div class="admin__field-tooltip wtai-small">
                            <a class="admin__field-tooltip-action" href="#" data-toggle="dropdown"></a>
                            <div class="admin__field-tooltip-content wtai-upper-right" data-target="dropdown">
                                <div class="wtai-content-wrapper" data-bind="text: childProductPanelTooltip"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wtai-child-product-panel-subtitle" data-bind="text: childProductPanelSubtitle"></div>
            </div>
            <div class="wtai-child-product-list wtai-child-product-pool" data-bind="css: {
                'wtai-has-scroll': hasChildProductsScroll
            }">
                <div class="wtai-product-pool-container wtai-loading" data-bind="visible: isLoadingChildProducts">
                    <div class="wtai-spinner"></div>
                    <div class="wtai-loading-text"><?= $escaper->escapeHtml(__('Loading...')) ?></div>
                </div>
                <div class="wtai-product-pool-container wtai-no-data" data-bind="
                    visible: !isLoadingChildProducts() && visibleChildProducts().length === 0,text: noChildProductText
                ">
                </div>
                <div class="wtai-product-pool-container wtai-with-data" data-bind="
                    visible: !isLoadingChildProducts() && visibleChildProducts().length > 0
                ">
                    <ul id="wtaiChildProductList" data-bind="foreach: visibleChildProducts">
                        <li data-bind="event: {
                            mouseenter: $parent.handleChildProductHover,
                            mouseleave: $parent.handleChildProductLeave
                        }">
                            <div class="wtai-not-hovered">
                                <span data-bind="text: $data.name"></span>
                            </div>
                            <div class="wtai-hovered">
                                <div class="wtai-product" data-bind="text: $data.name"></div>
                                <div class="wtai-product-data">
                                    <span class="wtai-product-data-label">
                                        <?= $escaper->escapeHtml(__('SKU')) ?>
                                    </span>
                                    <span class="wtai-product-data-value" data-bind="text: $data.sku"></span>
                                </div>
                                <div class="wtai-product-data">
                                    <span class="wtai-product-data-label">
                                        <?= $escaper->escapeHtml(__('Product ID')) ?>
                                    </span>
                                    <span class="wtai-product-data-value" data-bind="text: $data.id"></span>
                                </div>
                            </div>
                        </li>
                        <!-- ko if: $index() === ($parent.visibleChildProducts().length - 1) -->
                        <span>
                            <button class="wtai-link-style-button wtai-load-more"
                                data-bind="click: $parent.loadMoreChildProducts,
                                    visible: $parent.visibleChildProducts().length < $parent.allChildProducts().length">
                                <?= $escaper->escapeHtml(__('Load more...')) ?>
                            </button>
                        </span>
                        <!-- /ko -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiAttributes": {
                        "component": "WriteTextAI_WriteTextAI/js/edit/attributes",
                        "checkboxSelector": ".wtai-wtai-attributes .wtai-field .wtai-attribute-checkbox",
                        "childProductsUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/edit/childProducts')) ?>",
                        "productDetailsAllowed":
                            <?= /* @noEscape */ $permissions->isProductDetailsAllowed() ? 'true' : 'false' ?>,
                        "rules": <?= /* @noEscape */ json_encode($settings->getSettings('rules')) ?>,
                        "saveUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/settings/productattributes')) ?>",
                        "saveSettingsUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/settings/save')) ?>",
                        "attrAllowed": <?= /* @noEscape */ $permissions->isAttrAllowed() ? 'true' : 'false' ?>
                    }
                }
            }
        }
    }
</script>
