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

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

$tooltip = $block->getTooltip();
$permissions = $block->getPermissions();
$premium = $block->getPremiumModel();
$settings = $block->getSettings();
$entityType = $block->getEntityType();
$tooltipCategory = $block->getTooltipCategory();
?>

<?= /* @noEscape */ $block->getChildHtml('wtai.keyword.invalid.image.popup') ?>
<div class="wtai-keywords" data-bind="scope: 'wtaiKeywords'">
    
    <div class="wtai-step1-content">
        <div class="wtai-col-1">
            <div class="wtai-thumbnail">
                <img data-bind="attr: { src: getThumbnail() }">
            </div>
        </div>
        <div class="wtai-col-2 wtai-not-started" data-bind="visible: isOptimizationNotStarted">
            <div class="wtai-keywords-main">
                <div class="wtai-title">
                    <span class="wtai-title-text"><?= $block->escapeHtml(__('Add keywords')) ?></span>
                    <span class="wtai-keywords-count" data-bind="text: keywordsCount">(0/0)</span>
                    <span class="wtai-notes">(optional)</span>
                    <div class="wtai-keywords-help-container">
                        <div class="admin__field-tooltip wtai-small">
                            <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">
                                    <?php if ($entityType === 'Product'): ?>
                                        <?= /* @noEscape */ $tooltip->getTooltip('wtai.add.keywords') ?>
                                    <?php else: ?>
                                        <?= /* @noEscape */ $tooltipCategory->getTooltipCategory('wtai.add.keywords.category') ?>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wtai-negative-keywords-link">
                        <?= $block->getChildBlock('wtai.pro.badge.wtai.keywords')->toHtml() ?>
                        <a href="https://platform.writetext.ai/keyword/negative-keywords"
                            target="_blank"
                            data-bind="css: { 'wtai-disabled': !hasProAccess() }"
                        >
                            <?= $block->escapeHtml(__('Review negative keywords')) ?>
                        </a>
                    </div>
                </div>
                <div class="wtai-keyword-input">
                    <div class="wtai-keyword-items">
                        <div class="wtai-keyword-items-wrapper" data-bind="foreach: selectedKeywords">
                            <div class="wtai-keyword-item-group">
                                <span class="wtai-keyword-item" data-bind="html: $data"></span>
                                <span class="wtai-keyword-item-remove" data-bind="
                                    click: function(){ $parent.removeKeyword($data) }
                                "></span>
                            </div>
                        </div>
                        <div class="wtai-keyword-input-wrapper">
                            <input type="text"
                                class="admin__control-text wtai-disabled tooltip-toggle"
                                placeholder="<?= $block->escapeHtml(__('Type a keyword...')) ?>"
                                data-bind="visible: disableInputKeyword"
                                disabled
                            />
                            <span class="tooltip-content" data-bind="
                                visible: disableInputKeyword,
                                text: maxKeywordsError
                            "></span>
                            <input type="text"
                                class="admin__control-text"
                                placeholder="<?= $block->escapeHtml(__('Type a keyword...')) ?>"
                                data-bind="
                                    hidden: disableInputKeyword,
                                    event: { 
                                        keyup: inputKeyword,
                                        paste: onPaste
                                    },
                                    value: newKeyword
                                "
                            />
                        </div>
                    </div>
                    <div class="wtai-input-keywords-error" data-bind="visible: manualKeywordInputError() !== ''">
                        <span data-bind="text: manualKeywordInputError"></span>
                    </div>
                </div>
                <div class="wtai-comments">
                    <span class="wtai-comments-text" data-bind="text: getKeywordInputNote()"></span>
                    <span class="wtai-char-count" data-bind="text: getKeywordLength()"></span>
                </div>
            </div>
            <div class="wtai-bottom-contents">
                <div class="wtai-search-intent-container">
                    <div class="wtai-field">
                        <div class="wtai-fieldset-title">
                            <?= $block->escapeHtml(__('Search intent')) ?>
                        </div>
                        <div class="wtai-search-intent-help-container">
                            <div class="admin__field-tooltip wtai-small">
                                <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">
                                        <?php
                                        switch ($entityType) {
                                            case 'Category':
                                                echo $tooltip->getTooltip('wtai.category.intent');
                                                break;
                                            case 'Product':
                                                echo $tooltip->getTooltip('wtai.intent');
                                                break;
                                            default:
                                                echo $tooltip->getTooltip('wtai.intent');
                                                break;
                                        }
                                        ?>
                                    </div>
                                </div>
                            </div>
                        </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': searchIntentSelected().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.hasProAccess() ? $parent.getTooltipTextSearchIntent($data) : ''
                                }
                                ">
                                <!-- Educational Tooltip Component -->
                                <div class="wtai-educational-tooltip-container" id="wtai-educational-tooltip">
                                    <div class="wtai-educational-tooltip" data-bind="visible: $parent.headsupVisibility[$data]">
                                        <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($data), 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' && '<?= $block->escapeJs($entityType) ?>' === 'Product') 
                                            || ($data === 'commercial' && '<?= $block->escapeJs($entityType) ?>' === 'Category')) {
                                            $parent.acknowledgeHeadsUp($data)
                                        } else {
                                            $parent.showEducationalTooltipForIntent($data) 
                                        }
                                    },
                                    css: { 
                                        'wtai-selected': $parent.isIntentSelected($data),
                                        'wtai-disabled': !$parent.hasProAccess(),
                                        'wtai-disabled-pro': !$parent.hasProAccess()
                                    },
                                    i18n: $data
                                ">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wtai-actions">
                    <?= $block->getChildBlock('wtai.pro.badge.wtai.keywords')->toHtml() ?>
                    <button type="button"
                        class="action-primary"
                        data-bind="
                            click: startAIpoweredKeywordAnallysis,
                            enable: hasProAccess() && enableStartAIpowered()
                        "
                    >
                        <?= $block->escapeHtml(__('Start AI-powered keyword analysis')) ?>
                    </button>
                </div>
            </div>
            <div class="wtai-step1-bottom-text wtai-auto-generate" data-bind="visible: showAutoGenerate,
                css: {'wtai-disable': enableAutoGenerate() === false || !hasProAccess()}">
                <input type="checkbox"
                    class="admin__control-checkbox"
                    id="wtaiAutoGenerate"
                    data-bind="
                        checked: autoGenerate
                    "
                />
                <label class="admin__field-label" for="wtaiAutoGenerate">
                    <?= $block->escapeHtml(__('Automatically generate text when keyword analysis is done')) ?>
                </label>
            </div>
            <div class=" wtai-auto-rewrite" data-bind="visible: showAutoRewrite,
                css: {'wtai-disable': enableAutoRewrite() === false || !hasProAccess()}">
                <input type="checkbox"
                    class="admin__control-checkbox"
                    id="wtaiAutoRewrite"
                    data-bind="
                        checked: autoRewrite
                    "
                />
                <label class="admin__field-label" for="wtaiAutoRewrite">
                    <?= $block->escapeHtml(__('Automatically rewrite text when keyword analysis is done')) ?>
                </label>
            </div>
            <div class="wtai-step1-bottom-text">
                <p class="wtai-step1-bottom-text wtai-failed-text" data-bind="
                    visible: showFailedText() && hasProAccess()
                ">
                    <?= $block->escapeHtml(__(
                        "The previous keyword analysis processing failed, you can restart to try again."
                    )) ?>
                </p>
            </div>
        </div>
        <div class="wtai-col-2 wtai-started" data-bind="visible: isOptimizationStarted">
            <div class="wtai-keywords-main">
                <div class="wtai-title">
                    <span class="wtai-title-text"><?= $block->escapeHtml(__('Currently optimized for:')) ?></span>
                    <div class="wtai-keywords-help-container">
                        <div class="admin__field-tooltip wtai-small">
                            <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 */ $tooltip->getTooltip('wtai.currently.optimizing.keywords') ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wtai-negative-keywords-link">
                        <?= $block->getChildBlock('wtai.pro.badge.wtai.keywords')->toHtml() ?>
                        <a href="https://platform.writetext.ai/keyword/negative-keywords"
                            target="_blank"
                            data-bind="css: { 'wtai-disabled': !hasProAccess() }"
                        >
                            <?= $block->escapeHtml(__('Review negative keywords')) ?>
                        </a>
                    </div>
                </div>
                <div class="wtai-keyword-list" data-bind="if: optimizingKeywords().length === 0">
                    <div class="wtai-keyword-item">
                        <span  class="wtai-keyword-text">
                            <?= $block->escapeHtml(__('No keywords')) ?>
                        </span>
                    </div>
                </div>

                <div class="wtai-keyword-list" data-bind="foreach: optimizingKeywords">
                    <div class="wtai-keyword-item">
                        <span class="wtai-keyword-text" data-bind="text: $data"></span>
                        <span class="wtai-keyword-percentage"></span>
                    </div>
                </div>
            </div>
            <div class="wtai-bottom-contents">
                <div class="wtai-search-intent-container">
                    <div class="wtai-field">
                        <div class="wtai-fieldset-title">
                            <?= $block->escapeHtml(__('Search intent')) ?>
                        </div>
                        <div class="wtai-search-intent-help-container">
                            <div class="admin__field-tooltip wtai-small">
                                <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">
                                        <?php
                                        switch ($entityType) {
                                            case 'Category':
                                                echo /* @noEscape */ $tooltip->getTooltip('wtai.category.intent');
                                                break;
                                            case 'Product':
                                                echo /* @noEscape */ $tooltip->getTooltip('wtai.intent');
                                                break;
                                            default:
                                                echo /* @noEscape */ $tooltip->getTooltip('wtai.intent');
                                                break;
                                        }
                                        ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wtai-field wtai-disabled">
                        <div class="wtai-search-intent-options" data-bind="
                            foreach: searchIntents,
                            css: { 'wtai-one-item-selected': optimizingIntent().length === 1 }
                        ">
                            <div class="wtai-intent-item-container"
                                data-bind="css: { 'wtai-selected': $parent.optimizingIntent().includes($data) }">
                                <span class="wtai-search-intent-option" data-bind="
                                    css: { 
                                        'wtai-selected': $parent.optimizingIntent().includes($data),
                                        'wtai-disabled-pro': !$parent.hasProAccess()
                                    },
                                    i18n: $data
                                ">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wtai-actions">
                    <a href="#" class="wtai-refresh wtai-link-style-button" data-bind="
                        css: {'wtai-disabled': dsiableRestart},
                        click: restartAIpoweredKeywordAnallysis,
                        text: getRestartOptText()
                    ">
                        <?= $block->escapeHtml(__('Restart AI-powered keyword analysis')) ?>
                    </a>
                    <?= $block->getChildBlock('wtai.pro.badge.wtai.keywords')->toHtml() ?>
                    <button type="button"
                        class="action-primary"
                        data-bind="
                            click: function() { openModal(true) },
                            disable: disableSeePipeline,
                            css: {'wtai-loading': seeCurrentPipelineLoading}
                        "
                    >
                        <span class="wtai-button-text"><?= $block->escapeHtml(__('See current pipeline')) ?><span>
                    </button>
                </div>
            </div>
            <div class="wtai-step1-bottom-text">
                <p class="wtai-inprogress-text" data-bind="
                        visible: showPendingText
                    ">
                    <span data-bind="visible: !isKoRefreshing()">
                        <?= $block->escapeHtml(__("Keyword optimization currently in progress")) ?>
                    </span>
                    <span data-bind="visible: isKoRefreshing">
                        <?= $block->escapeHtml(__("Keyword optimization currently refreshing")) ?>
                    </span>
                </p>
            </div>
            <div class="wtai-step1-bottom-text">
                    <!-- placeholder to replicate the height of error message -->
            </div>
        </div>
    </div>
</div>
<div class="wtai-keyword-analysis">
    <?= /* @noEscape */ $block->getChildHtml('wtai.keyword.analysis') ?>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiKeywords": {
                        "component": "<?= $block->escapeJs($block->getJsComponent()) ?>",
                        "rules": <?= /* @noEscape */ json_encode($settings->getSettings('rules')) ?>,
                        "saveUserSettingsUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/settings/save')
                        ) ?>",
                        "saveKeywordsUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/manualKeywords_save')
                        ) ?>",
                        "deleteOptimizationUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_delete')
                        ) ?>",
                        "updateOptimizationUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_update')
                        ) ?>",
                        "getOptimizationUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_get')
                        ) ?>",
                        "entityType": "<?= $block->escapeJs($entityType) ?>",
                        "uploadUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_upload')
                        ) ?>",
                        "newThumbnailUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_newThumbnail')
                        ) ?>",
                        "audienceGetUrl": "<?= $block->escapeJs($block->getUrl('wtai/edit/audience_get')) ?>",
                        "audienceGetUrlCategories": "<?= $block->escapeJs($block->getUrl('wtai/categories/edit_audience_get')) ?>"
                    }
                }
            }
        }
    }
</script>