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

<?php
/**
 * @var WriteTextAI\WriteTextAI\Block\Adminhtml\Grid\FullAutomationPrompt $block
 */
$autoTextOptimizationOptions = $block->getAutomaticTextOptimizationOptions();
$cronJobDisabledAutoTransferMessage = $block->getCronJobDisabledAutoTransferMessage();
$productFields = $block->getProductFields();
?>

<fieldset class="wtai-fieldset wtai-col wtai-col-4">
    <div class="wtai-optimization-settings-container">
        <div class="wtai-field-rows">
            <div class="wtai-search-intent-container">
                <div class="wtai-field">
                    <div class="wtai-fieldset-title">
                        <?= $escaper->escapeHtml(__('Search intent')) ?>
                    </div>
                    <div class="wtai-search-intent-help-container">
                        <div class="admin__field-tooltip wtai-small wtai-bottom">
                            <a class="admin__field-tooltip-action"
                                href="#"
                                data-toggle="dropdown"
                            ></a>
                            <div class="admin__field-tooltip-content" data-target="dropdown">
                                <div class="wtai-content-wrapper">
                                    <?= /* @noEscape */ $block->getTooltip('wtai.intent') ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wtai-negative-keywords-link">
                        <a href="https://platform.writetext.ai/keyword/negative-keywords" target="_blank">
                            <?= $escaper->escapeHtml(__('Review negative keywords')) ?>
                        </a>
                    </div>
                </div>
                <div class="wtai-field">
                    <input type="hidden" name="search_intent" data-bind="value: searchIntentCommadSeparated">
                    <div class="wtai-search-intent-options" data-bind="
                        foreach: searchIntents,
                        css: {'wtai-one-item-selected': searchIntent().length === 1}
                    ">
                        <div class="wtai-intent-item-container"
                            data-bind="css: {
                                'wtai-selected': $parent.isIntentSelected($data),
                                'wtai-navigational': $data === 'navigational',
                                'wtai-informational': $data === 'informational'
                            },
                            attr: {
                                title: $parent.getTooltipTextSearchIntent($data)
                            }">
                            <div class="wtai-intent-item-tooltip wtai-single-item"
                                data-bind="{attr: {id: 'wtai-single-item-' + $data},
                                css: { 'wtai-show': $parent.isSingleSelectedWarningVisible() }}">
                                <span class="wtai-intent-item-tooltip-text">
                                    <?= $escaper->escapeHtml(__("You need at least one search intent")) ?>
                                </span>
                            </div>
                            <!-- Educational Tooltip Component -->
                            <div class="wtai-educational-tooltip-container" id="wtai-educational-tooltip">
                                <div class="wtai-educational-tooltip" data-bind="
                                    visible: $parent.headsupVisibility[$data],
                                    css: {'wtai-offset-right': $parent.isOffsetRight()}
                                ">
                                    <div class="wtai-educational-tooltip-content">
                                        <div class="wtai-educational-tooltip-message" data-bind="
                                            html: $parent.messageHeadsUp
                                        "></div>
                                        <div class="wtai-educational-tooltip-actions">
                                            <button type="button" 
                                                    class="action-primary wtai-educational-tooltip-button" 
                                                    data-bind="
                                                        click: $parent.acknowledgeHeadsUp,
                                                        text: $parent.buttonTextHeadsUp
                                                    ">
                                            </button>
                                        </div>
                                    </div>
                                    <div class="wtai-educational-tooltip-arrow" data-bind="
                                        css: 'wtai-educational-tooltip-arrow-' + $parent.positionHeadsUp()
                                    "></div>
                                </div> 
                            </div>
                            <span class="wtai-search-intent-option" data-bind="
                                click: function () {
                                    if ($data === 'transactional') {
                                        $parent.acknowledgeHeadsUp($data)
                                    } else {
                                        $parent.showEducationalTooltipForIntent($data) 
                                    }
                                },
                                css: { 'wtai-selected': $parent.isIntentSelected($data) },
                                i18n: $data
                            ">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="wtai-divider">
            <div class="wtai-cluster-based-container wtai-flex-container">
                <div class="wtai-field">
                    <div class="wtai-fieldset-title">
                        <?= /* @noEscape */ __(
                            'No. of target keywords per product <i>(cluster-based pipelines)</i>'
                        ) ?>
                    </div>
                </div>
                <div class="wtai-field admin__field row">
                    <div class="wtai-control">
                        <input type="number"
                            class="admin__control-text wtai-cluster-count"
                            name="cluster_count"
                            data-bind="
                                value: clusterCount,
                                event: {
                                    blur: validateMinMax,
                                    keypress: ensureNumerical
                                }, attr: {
                                    min: minClusterCount,
                                    max: maxClusterCount
                                }
                            "
                        />
                        <div class="wtai-error-message"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wtai-tabs-container">
            <div class="product data items wtai-tabs">
                <!-- ko foreach: { data: Object.keys(triggerActions()), as: 'triggerAction' } -->
                    <div class="item title wtai-tab-title" data-role="collapsible">
                        <a class="switch" data-toggle="trigger" data-bind="
                            attr: { href: '#tab_content_' + triggerAction }
                        ">
                            <span data-bind="text: $parent.getTriggerActionName(triggerAction)"></span>
                            <span class="wtai-sub-title" data-bind="
                                text: $parent.formatTriggerActionName(triggerAction),
                                css: { 'wtai-sub-title-changed': $parent.triggerActionChanged[triggerAction] }
                            "></span>
                        </a>
                    </div>
                    <div data-bind="
                        attr: { id: 'tab_content_' + triggerAction }
                    " class="item content wtai-tab-content" data-role="content">
                    <fieldset class="wtai-fieldset wtai-trigger-action">
                            <div class="wtai-fieldset-title"><?= $escaper->escapeHtml(__('Trigger')) ?></div>
                            <div class="wtai-fieldset-subtitle">
                                <?= $escaper->escapeHtml(__('Monitoring for this trigger will only start'
                                    . ' once you transfer the text optimized with the keyword.')) ?>
                            </div>
                            <div class="wtai-field-column wtai-full-width">
                                <input type="radio"
                                    class="admin__control-radio"
                                    required="true"
                                    data-bind="
                                        attr: {
                                            name: 'trigger_action_' + triggerAction,
                                            id: 'wtaiTriggerActionNPosition' + triggerAction,
                                            value: $parent.triggerActionPageIsRankingValue,
                                            checked:
                                                $parent.triggerActions()[
                                                    triggerAction
                                                ]?.trigger_action === $parent.triggerActionPageIsRankingValue
                                        },
                                        event: {
                                            change: function() {
                                                $parent.selectTriggerAction(
                                                    triggerAction,
                                                    $parent.triggerActionPageIsRankingValue
                                                );
                                            }
                                        }
                                    "
                                />
                                <label class="wtai-label admin__field-label" data-bind="
                                    attr: { for: 'wtaiTriggerActionNPosition' + triggerAction }
                                ">
                                    <div class="wtai-label-with-input">
                                        <span>
                                            <?= $escaper->escapeHtml(__('When page is ranking within position 1 -')) ?>
                                        </span>
                                        <div class="wtai-control">
                                            <input type="number"
                                                data-bind="
                                                    event: {
                                                        blur: $parent.validateMinMax,
                                                        keypress: $parent.ensureNumerical
                                                    },
                                                    attr: {
                                                        value: $parent.triggerActions()[
                                                            triggerAction
                                                        ]?.trigger_action_n_position,
                                                        min: $parent.minTriggerActionNPosition,
                                                        max: $parent.maxTriggerActionNPosition,
                                                        name: 'trigger_action_n_position_' + triggerAction,
                                                        class: 'admin__control-text wtai-input-number'
                                                            + ' wtai-trigger-action-n-position-'
                                                            + triggerAction
                                                    },
                                                "
                                            />
                                        </div>
                                        <span><?= $escaper->escapeHtml(__('in the SERP')) ?></span>
                                    </div>
                                </label>
                            </div>
                            <div class="wtai-field-column wtai-full-width">
                                <input type="radio"
                                    class="admin__control-radio"
                                    data-bind="
                                        attr: {
                                            name: 'trigger_action_' + triggerAction,
                                            id: 'wtaiTriggerActionAfterNDays' + triggerAction,
                                            value: $parent.triggerActionAfterNDaysValue,
                                            checked: $parent.triggerActions()[
                                                triggerAction
                                            ]?.trigger_action === $parent.triggerActionAfterNDaysValue
                                        },
                                        event: {
                                            change: function() {
                                                $parent.selectTriggerAction(
                                                    triggerAction,
                                                    $parent.triggerActionAfterNDaysValue
                                                );
                                            }
                                        }
                                    "
                                />
                                <label class="wtai-label admin__field-label" data-bind="
                                    attr: { for: 'wtaiTriggerActionAfterNDays' + triggerAction }
                                ">
                                    <div class="wtai-label-with-input">
                                        <span><?= $escaper->escapeHtml(__('After ')) ?></span>
                                        <div class="wtai-control">
                                            <input type="number"
                                                data-bind="
                                                    event: {
                                                        blur: $parent.validateMinMax,
                                                        keypress: $parent.ensureNumerical
                                                    },
                                                    attr: {
                                                        value: $parent.triggerActions()[
                                                            triggerAction
                                                        ]?.trigger_action_n_days,
                                                        min: $parent.minTriggerActionNDays,
                                                        max: $parent.maxTriggerActionNDays,
                                                        class: 'admin__control-text wtai-input-number'
                                                            + ' wtai-trigger-action-after-n-days-'
                                                            + triggerAction,
                                                        name: 'trigger_action_n_days_' + triggerAction
                                                    }
                                                "
                                            />
                                        </div>
                                        <span><?= $escaper->escapeHtml(__('day/s')) ?></span>
                                    </div>
                                </label>
                            </div>
                            <div class="wtai-field-column wtai-full-width">
                                <input type="radio"
                                    class="admin__control-radio"
                                    data-bind="
                                        attr: {
                                            name: 'trigger_action_' + triggerAction,
                                            id: 'wtaiTriggerActionNone' + triggerAction,
                                            value: $parent.triggerActionNoneValue,
                                            checked: $parent.triggerActions()[
                                                triggerAction
                                            ]?.trigger_action === $parent.triggerActionNoneValue
                                        },
                                        event: {
                                            change: function() {
                                                $parent.selectTriggerAction(
                                                    triggerAction,
                                                    $parent.triggerActionNoneValue
                                                );
                                            }
                                        }
                                    "
                                />
                                <label class="wtai-label admin__field-label" data-bind="
                                    attr: { for: 'wtaiTriggerActionNone' + triggerAction }
                                ">
                                    <?= $escaper->escapeHtml(__('None')) ?>
                                </label>
                            </div>
                            <div class="wtai-error-message"></div>
                        </fieldset>
                    </div>
                <!-- /ko -->
            </div>
        </div>
        <div class="wtai-field-rows">
            <div class="wtai-field wtai-field-auto-text-opt">
                <div class="wtai-fieldset-title">
                    <?= $escaper->escapeHtml(__('Automatic text optimization in the pipeline')) ?>
                </div>
                <div class="wtai-fieldset-subtitle">
                    <?= $escaper->escapeHtml(__('When trigger is met in the pipeline...')) ?>
                </div>
                <!-- ko foreach: automaticTextOptimizationOptions -->
                    <div class="wtai-field admin__scope-old">
                        <input type="radio"
                            class="input-radio"
                            name="automatic_text_optimization"
                            data-bind="
                                checked: $parent.autoTextOptimizationSelected,
                                attr: {
                                    id: 'wtaiAutoTextOpt' + $data.value,
                                    value: $data.value
                                }
                            "
                        />
                        <label class="wtai-label admin__field-label" data-bind="
                            attr: { for: 'wtaiAutoTextOpt' + $data.value }
                        ">
                            <span data-bind="text: $data.label"></span>
                            <!-- <span class="wtai-auto-transfer-cron-not-available"
                                data-bind="visible: $data.value === 'auto_rewrite_and_transfer'
                                    && !$parent.isCronAvailable()"
                                title="<?= $escaper->escapeHtml($cronJobDisabledAutoTransferMessage) ?>"
                            ></span> -->
                        </label>
                    </div>
                <!-- /ko -->
            </div>
        </div>
        <div class="wtai-field-rows">
            <div class="wtai-field wtai-field-product-texts">
                <div class="wtai-fieldset-title">
                    <?= $escaper->escapeHtml(__('Automatically generate with updated keywords')) ?>
                </div>
                <div class="wtai-fieldset-subtitle">
                    <?= $escaper->escapeHtml(__(
                        'Only text types previously generated in WriteText.ai will be updated; '
                        . 'otherwise it will be skipped.'
                    )) ?>
                </div>
                <div class="wtai-fieldset-row">
                    <input type="checkbox"
                        class="admin__control-checkbox"
                        data-bind="checked: allProductFieldsSelected"
                        id="wtaiAllProductFields"
                    />
                    <label class="wtai-label admin__field-label wtai-strong" for="wtaiAllProductFields">
                        <?= $escaper->escapeHtml(__('Select all')) ?>
                    </label>
                </div>
                <?php $productFieldsCnt = 0;?>
                <div class="wtai-field-columns">
                    <?php foreach ($productFields as $productField): ?>
                        <div class="wtai-field-column">
                            <input type="checkbox"
                                class="admin__control-checkbox"
                                value="<?= $escaper->escapeHtmlAttr($productField['value']) ?>"
                                name="product_texts[]"
                                data-bind="checked: productFields"
                                id="wtaiProductFields<?= $escaper->escapeHtmlAttr($productFieldsCnt) ?>"
                            />
                            <label class="wtai-label admin__field-label"
                                for="wtaiProductFields<?= $escaper->escapeHtmlAttr($productFieldsCnt) ?>"
                            >
                                <?= $escaper->escapeHtml($productField['label']) ?>
                            </label>
                        </div>
                        <?php $productFieldsCnt++;?>
                    <?php endforeach; ?>
                </div>
                <div class="wtai-error-message"></div>
            </div>
        </div>
    </div>
</fieldset>