<?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">
        <div class="wtai-field wtai-select-all">
            <input type="checkbox"
                class="admin__control-checkbox"
                id="wtaiAttributeAll" 
                data-bind="
                    checked: selectAllValue,
                    event: {change: selectAllAttributes}
                "
                <?= $permissions->isAttrAllowed() ? '' : 'disabled' ?>
            />
            <label class="admin__field-label" for="wtaiAttributeAll">
                <?= $block->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="
                        attr: { id: $data.attribute, name: $data.attribute },
                        checked: $parent.productAttributesSelected,
                        value: $data.attribute_code,
                        event: { change: $parent.saveThumbnailSelected }
                    "
                    <?= $permissions->isAttrAllowed() ? '' : 'disabled' ?>
                />
                <label class="admin__field-label" data-bind="
                    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">
                            <?= $block->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="
                        attr: { id: $data.attribute, name: $data.attribute },
                        checked: $parent.productAttributesSelected,
                        value: $data.attribute_code,
                        event: { change: $parent.saveProductResearchDataSelected }
                    "
                    <?= $permissions->isAttrAllowed() ? '' : 'disabled' ?>
                />
                <label class="admin__field-label" data-bind="
                    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">
                            <?= $block->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="
                        attr: { id: $data.attribute, name: $data.attribute },
                        checked: $parent.productAttributesSelected,
                        value: $data.attribute_code
                    "
                    <?= $permissions->isAttrAllowed() ? '' : 'disabled' ?>
                />
                <label class="admin__field-label" data-bind="
                    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-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">
                    <?= $block->escapeHtml(__('Other product details')) ?>
                </label>
                <div class="wtai-control">
                    <p class="wtai-note"><?= $block->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>
<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",
                        "productDetailsAllowed":
                            <?= /* @noEscape */ $permissions->isProductDetailsAllowed() ? 'true' : 'false' ?>,
                        "rules": <?= /* @noEscape */ json_encode($settings->getSettings('rules')) ?>,
                        "saveUrl": "<?= $block->escapeJs($block->getUrl('wtai/settings/productattributes')) ?>",
                        "saveSettingsUrl": "<?= $block->escapeJs($block->getUrl('wtai/settings/save')) ?>"
                    }
                }
            }
        }
    }
</script>
