<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis
?>
<?php
/** @var $block \Magento\Framework\View\Element\Template */
/** @var $helper \Magento\Search\Helper\Data */
/** @var $configProvider \Magento\Search\ViewModel\ConfigProvider */
$helper = $this->helper(\Magento\Search\Helper\Data::class);
$configProvider = $block->getData('configProvider');
$helperInstantSearch = $this->helper('MGS\InstantSearch\Helper\Data');
$getUrlForm = $helper->getResultUrl();
$getSuggestUrl = $helper->getSuggestUrl();
if($helperInstantSearch->getSearchResultsPage() == 0) {
    $getUrlForm = $helperInstantSearch->getResultUrlForm();
    $getSuggestUrl = $helperInstantSearch->getSuggestUrl();
}
?>
<div class="search-form">
    <div class="block block-search">
        <button class="search-close" onclick="showHideFormSearch()"><i class="pe-7s-close"></i></button>
        <div class="block block-content">
            <form class="form minisearch " id="search_mini_form"
                  action="<?= $block->escapeUrl($getUrlForm) ?>" method="get">
                <div class="field search">
                    <label class="label" for="search" data-role="minisearch-label">
                        <span><?= $block->escapeHtml(__('Search')) ?></span>
                    </label>
                    <div class="control">
                        <input id="search"
                            <?php if ($configProvider->isSuggestionsAllowed()):?>
                                data-mage-init='{"quickSearch":{
                                    "formSelector":"#search_mini_form",
                                    "url":"<?= $block->escapeUrl($getSuggestUrl)?>",
                                    "destinationSelector":"#search_autocomplete",
                                    "minSearchLength":"<?= $block->escapeHtml($helper->getMinQueryLength()) ?>"}
                               }'
                            <?php endif;?>
                               type="text"
                               name="<?= $block->escapeHtmlAttr($helper->getQueryParamName()) ?>"
                               value="<?= /* @noEscape */ $helper->getEscapedQueryText() ?>"
                               placeholder="<?= $block->escapeHtmlAttr(__('Search for...')) ?>"
                               class="input-text"
                               maxlength="<?= $block->escapeHtmlAttr($helper->getMaxQueryLength()) ?>"
                               role="combobox"
                               aria-haspopup="false"
                               aria-autocomplete="both"
                               autocomplete="off"
                               aria-expanded="false"/>
                        <div id="search_autocomplete" class="search-autocomplete"></div>
                        <?= $block->getChildHtml() ?>
                    </div>
                </div>
                <div class="actions">
                    <button type="submit"
                            title="<?= $block->escapeHtml(__('Search')) ?>"
                            class="action search"
                            aria-label="Search"
                    ><span><?= $block->escapeHtml(__('Search')) ?></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="actions-search">
        <button class="action-search" onclick="showHideFormSearch()"><i class="pe-7s-search"></i></button>
    </div>
</div>

<script type="text/javascript">
    function showHideFormSearch(){
        require([
            'jquery'
        ], function(jQuery){
            (function($) {
                if($('.search-form').hasClass('not-full')){
                    $('html').toggleClass('search-not-full');
                }
                $('html').toggleClass('search-open');
                $('.page-wrapper .block-search').toggleClass('active');
                setTimeout(focusSearchField, 500);
            })(jQuery);
        });
    }

    function focusSearchField(){
        require([
            'jquery'
        ], function(jQuery){
            (function($) {
                $('#search_mini_form input#search').focus();
            })(jQuery);
        });
    }
</script>
