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

<?php
/** @var \WriteTextAI\WriteTextAI\ViewModel\Timezone $timezone */
$timezone = $block->getTimezone();
?>

<div class="wtai-keyword-ranking-history" data-bind="scope: 'wtaiKeywordRankingHistory'">
    <div class="wtai-control">
        <label class="wtai-label"><?= $escaper->escapeHtml(__('Ranking history')) ?></label>
        <div style="display: none;" data-bind="foreach: rankingHistoryDates">

            <div data-bind="attr: { class: 'wtai-tooltip-content wtai-' + $data }">
                <div class="tooltip-content">
                    <div class="wtai-date" data-bind="text: $data"></div>
                    <ul data-bind="
                        attr: { class: 'wtai-' + $data },
                        foreach: { data: $parent.rankingHistory()[$data], as: '$timeslot' }
                    ">
                        <li class="wtai-snapshot-time" data-bind="
                            attr: { 'data-id': $timeslot.id },
                            text: $timeslot.time"></li>
                    </ul>
                </div>
            </div>
        </div>
        <input type="text"
            class="admin__control-text wtai-calendar wtai-calendar-snapshot"
            placeholder="<?= $escaper->escapeHtmlAttr(__('Select date')) ?>"
            data-bind="afterRender: initCalendar, value: historySelectedDatetime"
            readonly
        />
    </div>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiKeywordRankingHistory": {
                        "component": "<?= $escaper->escapeJs($block->getJsComponent()) ?>",
                        "entityType": "<?= $escaper->escapeJs($block->getEntityType()) ?>",
                        "getSnapshotUrl": "<?= /* @noEscape */ $block->getUrl('wtai/edit/snapshots_get') ?>",
                        "timezone": "<?= $escaper->escapeJs($timezone->getTimezone()) ?>"
                    }
                }
            }
        }
    }
</script>