<?php
/**
 * Mageplaza
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Mageplaza.com license that is
 * available through the world-wide-web at this URL:
 * https://www.mageplaza.com/LICENSE.txt
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this extension to newer
 * version in the future.
 *
 * @category    Mageplaza
 * @package     Mageplaza_Blog
 * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
 * @license     https://www.mageplaza.com/LICENSE.txt
 */

/** @var \Mageplaza\Blog\Block\Sidebar\Search $block */
?>
<style>
    .sidebar.sidebar-main:before {
        content: unset;
    }
</style>
<div class="mpblog-search">
    <div class="field search">
        <label class="label" for="mpblog-search-box" data-role="minisearch-label">
            <span><?= __('Search'); ?></span>
        </label>
        <div class="control">
            <input id="mpblog-search-box"
                   type="text"
                   name="query"
                   value="<?= $this->getRequest()->getParam('query') ?>"
                   placeholder="<?= __('Search blogs here...'); ?>"
                   class="input-text"
                   role="combobox"
                   aria-haspopup="false"
                   aria-autocomplete="both"
            />
        </div>
    </div>
    <div class="actions">
        <button type="submit" title="<?= __('Search') ?>" class="action search">
            <i class="fa fa-search" aria-hidden="true" style="font-size: 16px;margin-top: 5px;"></i>
        </button>
    </div>
</div>
<script>
    require(['jquery', 'mpDevbridgeAutocomplete'], function ($) {
        var visibleImage = <?= $block->getSidebarConfig('search/show_image'); ?>;
        $('#mpblog-search-box').autocomplete({
            lookup: <?= $block->getSearchBlogData();?>,
            lookupLimit: <?= $block->getSidebarConfig('search/search_limit') ?: 10; ?>,
            maxHeight: 2000,
            minChars: <?= $block->getSidebarConfig('search/min_chars') ?: 1; ?>,
            autoSelectFirst: true,
            showNoSuggestionNotice: true,
            triggerSelectOnValidInput: false,
            onSelect: function (suggestion) {
                window.location.href = suggestion.url;
            },
            formatResult: function (suggestion, currentValue) {
                var additionClass = '';
                var html = "<div class='mpblog-suggestion'>";
                if (visibleImage) {
                    html += "<div class='mpblog-suggestion-left'><img class='img-responsive' src='" + suggestion.image + "' /></div>";
                    additionClass = 'image-visible';
                }
                html += "<div class='mpblog-suggestion-right " + additionClass + "'>" +
                    "<div class='mpblog-product-line mpblog-product-name'>" + suggestion.value + "</div>" +
                    "<div class='mpblog-product-des'><p class='mpblog-short-des'>" + suggestion.desc + "</p></div></div></div>";

                return html;
            }
        });
    });
</script>
