<?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"><?= $escaper->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>
                <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="<?= $escaper->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="<?= $escaper->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 class="wtai-keyword-input-disabled-mask" data-bind="visible: !isKeywordAnalysisAllowed"></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-advanced-keyword-optimization-grouping" data-bind="
                css: { 'wtai-no-pro-access': !hasProAccess() }
            ">             
                <div class="wtai-left-side">
                    <div class="wtai-field wtai-upper-portion">
                        <div class="wtai-fieldset-title wtai-grouping-main-title">
                            <?= $escaper->escapeHtml(__('Advanced keyword optimization')) ?>
                            <?= $block->getChildBlock('wtai.pro.badge.wtai.keywords')->toHtml() ?>
                        </div>
                    </div>
                    <div class="wtai-bottom-contents">
                        <div class="wtai-search-intent-container">
                            <div class="wtai-field">
                            </div>
                            <div class="wtai-field">
                                <div class="wtai-fieldset-title">
                                    <?= $escaper->escapeHtml(__('Search intent')) ?>
                                </div>
                                <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) : ''
                                        }
                                        ">
                                        <div class="wtai-intent-item-tooltip wtai-single-item"
                                            data-bind="{attr: {id: 'wtai-single-item-bulk' + $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]
                                            ">
                                                <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' &&
                                                        '<?= $escaper->escapeJs($entityType) ?>' === 'Product'
                                                    ) || ($data === 'commercial' &&
                                                        '<?= $escaper->escapeJs($entityType) ?>' === 'Category'
                                                )) {
                                                    $parent.acknowledgeHeadsUp($data)
                                                } else {
                                                    $parent.showEducationalTooltipForIntent($data) 
                                                }
                                            },
                                            css: { 
                                                'wtai-selected': $parent.isIntentSelected($data),
                                                'wtai-disabled': !$parent.hasProAccess()
                                                    || !$parent.isKeywordAnalysisAllowed,
                                                'wtai-disabled-pro': !$parent.hasProAccess()
                                            },
                                            i18n: $data
                                        ">
                                        </span>
                                    </div>
                                </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
                                                $tooltipContent = '';
                                                switch ($entityType) {
                                                    case 'Category':
                                                        $tooltipContent = $tooltip->getTooltip('wtai.category.intent');
                                                        break;
                                                    case 'Product':
                                                        $tooltipContent = $tooltip->getTooltip('wtai.intent');
                                                        break;
                                                    default:
                                                        $tooltipContent = $tooltip->getTooltip('wtai.intent');
                                                        break;
                                                }
                                                ?>
                                                <?= /* @noEscape */ $tooltipContent ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wtai-step1-bottom-text">
                        <div class="wtai-negative-keywords-link">
                            <a href="https://platform.writetext.ai/keyword/negative-keywords"
                                target="_blank"
                                data-bind="css: { 'wtai-disabled': !hasProAccess() || !isKeywordAnalysisAllowed }"
                            >
                                <?= $escaper->escapeHtml(__('Review negative keywords')) ?>
                            </a>
                        </div>
                    </div>
                </div>
                <?php if ($permissions->isKeywordAnalysisAllowed()): ?>
                    <div class="wtai-right-side">
                        <div class="wtai-actions">
                            <button type="button"
                                class="action-primary"
                                data-bind="
                                    click: startAIpoweredKeywordAnallysis,
                                    enable: hasProAccess() && enableStartAIpowered()
                                "
                            >
                                <?= $escaper->escapeHtml(__('Start AI-powered keyword analysis')) ?>
                            </button>
                        </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">
                                <?= $escaper->escapeHtml(__(
                                    'Automatically generate text when keyword analysis is done'
                                )) ?>
                            </label>
                        </div>
                        <p class="wtai-step1-bottom-text wtai-failed-text" data-bind="
                            visible: showFailedText() && hasProAccess()
                        ">
                            <?= $escaper->escapeHtml(__(
                                "The previous keyword analysis processing failed, you can restart to try again."
                            )) ?>
                        </p>
                    </div>
                <?php endif; ?>
            </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"><?= $escaper->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>
                <div class="wtai-keyword-list" data-bind="if: optimizingKeywords().length === 0">
                    <div class="wtai-keyword-item">
                        <span  class="wtai-keyword-text">
                            <?= $escaper->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-advanced-keyword-optimization-grouping" data-bind="
                css: { 'wtai-no-pro-access': !hasProAccess() }
            ">
                <div class="wtai-left-side">
                    <div class="wtai-field wtai-upper-portion">
                        <div class="wtai-fieldset-title wtai-grouping-main-title">
                            <?= $escaper->escapeHtml(__('Advanced keyword optimization')) ?>
                            <?= $block->getChildBlock('wtai.pro.badge.wtai.keywords')->toHtml() ?>
                        </div>
                    </div>
                    <div class="wtai-bottom-contents">
                        <div class="wtai-search-intent-container">
                            <div class="wtai-field">
                            </div>
                            <div class="wtai-field wtai-disabled">
                                <div class="wtai-fieldset-title">
                                    <?= $escaper->escapeHtml(__('Search intent')) ?>
                                </div>
                                <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 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
                                                $tooltipText = '';
                                                switch ($entityType) {
                                                    case 'Category':
                                                        $tooltipText = $tooltip->getTooltip('wtai.category.intent');
                                                        break;
                                                    case 'Product':
                                                        $tooltipText = $tooltip->getTooltip('wtai.intent');
                                                        break;
                                                    default:
                                                        $tooltipText = $tooltip->getTooltip('wtai.intent');
                                                        break;
                                                }
                                                ?>
                                                <?= /* @noEscape */ $tooltipText ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wtai-step1-bottom-text">
                        <div class="wtai-negative-keywords-link">
                            <a href="https://platform.writetext.ai/keyword/negative-keywords"
                                target="_blank"
                                data-bind="css: { 'wtai-disabled': !hasProAccess() || !isKeywordAnalysisAllowed }"
                            >
                                <?= $escaper->escapeHtml(__('Review negative keywords')) ?>
                            </a>
                        </div>
                    </div>
                </div>
                <?php if ($permissions->isKeywordAnalysisAllowed()): ?>
                    <div class="wtai-right-side">
                        <div class="wtai-actions">
                            <a href="#" class="wtai-refresh wtai-link-style-button" data-bind="
                                css: {'wtai-disabled': dsiableRestart},
                                click: restartAIpoweredKeywordAnallysis,
                                text: getRestartOptText()
                            ">
                                <?= $escaper->escapeHtml(__('Restart AI-powered keyword analysis')) ?>
                            </a>
                            <button type="button"
                                class="action-primary"
                                data-bind="
                                    click: function() { openModal(true) },
                                    disable: disableSeePipeline,
                                    css: {'wtai-loading': seeCurrentPipelineLoading}
                                "
                            >
                                <span class="wtai-button-text">
                                    <?= $escaper->escapeHtml(__('See current pipeline')) ?>
                                </span>
                            </button>
                        </div>
                        <div class="wtai-step1-bottom-text">
                            <p class="wtai-inprogress-text" data-bind="
                                    visible: showPendingText() && !isKoRefreshing(),
                                    css: { 'wtai-no-loader' : !isKoRunning() && !isKoPending() }
                                ">
                                <span data-bind="visible: isKoRunning()">
                                    <?= $escaper->escapeHtml(__("Keyword analysis currently in progress")) ?>
                                </span>
                                <span data-bind="visible: !isKoRunning()">
                                    <span data-bind="visible: isKoPending()">
                                        <?= $escaper->escapeHtml(__("Queued for keyword analysis")) ?>
                                    </span>
                                </span>
                            </p>
                            <p class="wtai-inprogress-text" data-bind="
                                    visible: showPendingText() && isKoRefreshing()
                                ">
                                <?= $escaper->escapeHtml(__("Keyword analysis currently refreshing")) ?>
                            </p>
                        </div>
                    </div>
                <?php endif; ?>
            </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": "<?= $escaper->escapeJs($block->getJsComponent()) ?>",
                        "rules": <?= /* @noEscape */ json_encode($settings->getSettings('rules')) ?>,
                        "saveUserSettingsUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/settings/save')
                        ) ?>",
                        "saveKeywordsUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/edit/manualKeywords_save')
                        ) ?>",
                        "deleteOptimizationUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_delete')
                        ) ?>",
                        "updateOptimizationUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_update')
                        ) ?>",
                        "getOptimizationUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_get')
                        ) ?>",
                        "entityType": "<?= $escaper->escapeJs($entityType) ?>",
                        "uploadUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_upload')
                        ) ?>",
                        "newThumbnailUrl": "<?= $escaper->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_newThumbnail')
                        ) ?>",
                        "audienceGetUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/edit/audience_get')) ?>",
                        "audienceGetUrlCategories":
                            "<?= $escaper->escapeJs($block->getUrl('wtai/categories/edit_audience_get')) ?>",
                        "isKeywordAnalysisAllowed": "<?= $escaper->escapeJs(
                            $permissions->isKeywordAnalysisAllowed()
                        ) ?>"
                    }
                }
            }
        }
    }
</script>