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

 $serpBlock = 'wtai.serp.popup.ranking';
 $timezone = $block->getParentBlock()->getTimezone();
 $entityType = $block->getParentBlock()->getEntityType();
?>

<div class="wtai-pipelines wtai-custom-pipeline wtai-keyword-ranking-container"
    id="wtaiKeywordRanking"
    data-bind="scope: 'wtaiKeywordRanking'"
>
    <div class="wtai-pipeline" data-bind="visible: !editKeywordRankingVisible(),
        css: {
            'wtai-empty-ranking': rankingKeywords().length <= 0
        }
    ">
        <div class="wtai-actions wtai-pipeline-header-actions"
            data-bind="css: {
                'wtai-hidden-actions': $parent.hidePipelineActions()
            }"
        >
            <button class="wtai-action wtai-edit" data-bind="click: function () { editKeywordRanking() },
            disable: $parent.disableAction">
                <span class="tooltip-toggle"></span>
            </button>
        </div>
        <div class="wtai-topic">
            <?= $block->escapeHtml(__('Keywords you are currently ranking for')) ?>
        </div>
        <ul data-bind="
            foreach: {data: rankingKeywords, as: '$keyword'},
            css: { 'wtai-single-keyword': rankingKeywords().length === 1 }
        ">
            
            <li class="wtai-keyword"
                data-bind="click: function(data, event) { $parents[1].seeMoreData(data, event) },
                css: { 'wtai-has-popup': $keyword.serpItems.length > 0 }">
                <div class="wtai-keyword-title">
                    <span class="wtai-primary-badge" data-bind="
                        visible: $parents[1].isPrimaryKeyword($keyword.keyword)
                    ">
                        <?= $block->escapeHtml(__('Primary')) ?>
                    </span>
                    <span class="wtai-star-badge" data-bind="visible: $keyword.position > 0"></span>
                    <span class="wtai-keyword-title-text" data-bind="text: $keyword.keyword"></span>
                </div>
                <div class="wtai-keyword-data wta-summary-data">
                    <span data-bind="text: $parent.getDifficulty($keyword.difficulty, true)"></span>
                    <span class="wtai-volume">
                        <?= $block->escapeHtml(__("Volume")) ?>
                        <span data-bind="text: $keyword.searchVolume"></span>
                    </span>
                    <button class="wtai-see-more"></button>
                </div>
                <div class="wtai-keyword-more-data">
                    <span class="wtai-keyword-title-text" data-bind="text: $keyword.keyword"></span>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $block->escapeHtml(__("Status")) ?>
                        </span>
                    </div>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $block->escapeHtml(__("Position")) ?>
                        </span>
                        <span class="wtai-data-value" data-bind="text: $keyword.position"></span>
                        </span>
                    </div>
                    <div class="wtai-keyword-data" data-bind="visible: $keyword.serpItems.length > 0">
                        <span class="wtai-data-label">
                            <?= $block->escapeHtml(__("SERP")) ?>
                        </span>
                        <span class="wtai-data-value">
                            <a href="#"
                                class="wtai-data-trigger-serp"
                                data-bind="
                                    click: $parents[1].viewSERP,
                                    clickBubble: false
                            ">View</a>
                        </span>
                        <?= $block->getChildHtml($serpBlock) ?>
                    </div>
                    <div class="wtai-keyword-data" data-bind="hidden: $keyword.serpItems.length > 0">
                        <span class="wtai-data-label">
                            <?= $block->escapeHtml(__("SERP")) ?>
                        </span>
                        <span class="wtai-data-value">
                            <?= $block->escapeHtml(__("Not available")) ?>
                        </span>
                    </div>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $block->escapeHtml(__("Difficulty")) ?>
                        </span>
                        <span class="wtai-data-value" data-bind="text: $parent.getDifficulty($keyword.difficulty)">
                            <?= $block->escapeHtml(__("Not available")) ?>
                        </span>
                    </div>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $block->escapeHtml(__("Search volume")) ?>
                        </span>
                        <span class="wtai-data-value" data-bind="text: $keyword.searchVolume"></span>
                    </div>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $block->escapeHtml(__("Traffic potential")) ?>
                        </span>
                        <span class="wtai-data-value" data-bind="text: $keyword.trafficPotential"></span>
                    </div>
                    <div class="wtai-keyword-data">
                        <span class="wtai-data-label">
                            <?= $block->escapeHtml(__("Intent")) ?>
                        </span>
                        <span class="wtai-data-value" data-bind="text: $keyword.intentDisplay"></span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="wtai-empty-message-wrapper">
            <div class="wtai-empty-message">
                <?= $block->escapeHtml(__("No keywords found. Either this page is not ranking"
                    . " for any keywords yet, or keywords have been removed from this pipeline.")) ?>
            </div>
        </div>
        <div class="wtai-actions wtai-bottom-actions" data-bind="css: {
            'wtai-hidden-actions': $parent.hidePipelineActions()
        }">
            <button class="wtai-action wtai-edit wtai-edit-bottom" data-bind="
                click: function () { editKeywordRanking() },
                disable: $parent.disableAction
            ">
                <span class="tooltip-toggle"></span>
            </button>
        </div>
        <div class="wtai-pipeline-edit-active-mask" data-bind="visible: $parent.editKeywordPipelineVisible"></div>
    </div>
    <?= $block->getChildHtml('wtai.edit.keyword.ranking') ?>
</div>


<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiKeywordRanking": {
                        "component": "WriteTextAI_WriteTextAI/js/edit/keywords/keyword-ranking",
                        "saveEditKeywordRankingUrl":
                            "<?= $block->escapeJs(
                                $block->getUrl('wtai/edit/keywordsOptimization_deleteRankingKeywords')
                            ) ?>",
                        "timezone": "<?= $block->escapeJs($timezone->getTimezone()) ?>",
                        "entityType": "<?= $block->escapeJs($entityType) ?>"
                    }
                }
            }
        }
    }
</script>