<?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_AjaxLayer
 * @copyright   Copyright (c) Mageplaza (http://www.mageplaza.com/)
 * @license     https://www.mageplaza.com/LICENSE.txt
 */
?>
<?php if ($block->canShowBlock()) : ?>
    <?php
    $helper = $this->helper(\Mageplaza\AjaxLayer\Helper\Data::class);
    $filters = $block->getFilters();
    $layerConfig = $helper->getLayerConfiguration($filters);
    $filtered = count($block->getLayer()->getState()->getFilters());
    ?>
    <div class="block filter" id="layered-filter-block"
         data-mage-init='{"collapsible":{"openedState": "active", "collapsible": true, "active": false, "collateral": { "openedState": "filter-active", "element": "body" } }}'>
        <div id="ln_overlay" class="ln_overlay">
            <div class="loader">
                <img src="<?= /** @noEscape */ $block->getViewFileUrl('images/loader-1.gif') ?>" alt="Loading...">
            </div>
        </div>
        <div class="block-title filter-title" data-count="<?= /** @noEscape */ $filtered ?>">
            <strong data-role="title"><?= /** @noEscape */ __('Shop By') ?></strong>
        </div>
        <div class="block-content filter-content">
            <?= /** @noEscape */ $block->getChildHtml('state') ?>
            <?php if ($block->getLayer()->getState()->getFilters()) : ?>
                <div class="block-actions filter-actions">
                    <a href="<?= /** @noEscape */ $block->getClearUrl() ?>" class="action clear filter-clear">
                        <span><?= /** @noEscape */ __('Clear All') ?></span>
                    </a>
                </div>
            <?php endif; ?>
            <?php $wrapOptions = false; ?>
            <?php foreach ($filters as $key => $filter) : ?>
                <?php if ($filter->getItemsCount()) : ?>
                    <?php if (!$wrapOptions) : ?>
                        <strong role="heading" aria-level="2" class="block-subtitle filter-subtitle">
                            <?= /** @noEscape */ __('Shopping Options') ?>
                        </strong>
                        <div class="filter-options" id="narrow-by-list" data-role="content">
                        <?php $wrapOptions = true;
                    endif; ?>
                    <?php $_class = $filter->getRequestVar() == 'cat' || $filter->getRequestVar() == 'size' || $filter->getRequestVar() == 'color' || $filter->getRequestVar() == 'price' ? 'active':'';?>
                    <div data-role="ln_collapsible" class="filter-options-item <?php echo $_class;?>"
                         attribute="<?= /** @noEscape */ $filter->getRequestVar() ?>">
                        <div data-role="ln_title" class="filter-options-title"><?= /** @noEscape */ __($filter->getName()) ?><span class="toggle"></span></div>
                        <div data-role="ln_content" class="filter-options-content">
                            <?= /** @noEscape */ $block->getChildBlock('renderer')->setFilter($filter)->render($filter); ?>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
            <?php if ($wrapOptions) : ?>
                </div>
            <?php else : ?>
            <script>
                require([
                    'jquery'
                ], function ($) {
                    $('#layered-filter-block').addClass('filter-no-options');
                });
            </script>
            <?php endif; ?>
            <?php if ($helper->ajaxEnabled()) : ?>
            <script type="text/x-magento-init">
                {
                     ".block-content.filter-content":{
                         "mpAjax": <?= /** @noEscape */ $layerConfig ?>
                     }
                }
            </script>
            <?php endif; ?>
        </div>
    </div>
<?php endif; ?>
