<?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_Faqs
 * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
 * @license     https://www.mageplaza.com/LICENSE.txt
 */

/** @var CategoryView| TagView $block */
use Mageplaza\Faqs\Block\Category\View as CategoryView;
use Mageplaza\Faqs\Block\Tag\View as TagView;
use Mageplaza\Faqs\Model\Config\Source\IconType;

$categories        = $block->getCategoryCollection();
$tags              = $block->getTagCollection();
$currentCategoryId = $block->getCategory();
$currentTagId      = $block->getTag();
$helperData        = $block->getHelperData();
?>
<div id="mpfaqs-list-container" class="mpfaqs-list mpfaqs">
    <div id="ln_overlay" class="ln_overlay">
        <div class="loader">
            <img src="<?= $block->escapeUrl($block->getViewFileUrl('images/loader-1.gif')) ?>" alt="Loading...">
        </div>
    </div>
    <div class="section grey lighten-5 row">
        <?php if ($categories->getData()) : ?>
            <?php foreach ($categories as $category) :
                if ($category->getQuestionNum() != '0'
                && ($currentCategoryId) ? (int) $category->getId() === (int) $currentCategoryId->getId() : true
                    && !$currentTagId) : ?>
                    <div class="mpfaqs-list__block col m<?= /** @noEscape */ ($block->helperData->isFaqsHomePage()) ?
                        12/$block->getCategoryColumns() : '12'; ?> s12">
                        <div class="mpfaqs-list__block__category">
                            <h4>
                                <a href="<?= $block->escapeUrl($category->getUrl()) ?>">
                                    <?php if ((int) $category->getIconType() === IconType::FONT_AWESOME) : ?>
                                        <i class="<?= $block->escapeHtmlAttr($category->getIcon()) ?>"
                                           aria-hidden="true">
                                        </i>
                                    <?php else : ?>
                                        <?php
                                        $iconUrl    = $helperData->getFileUrl($category->getIconCustomPath());
                                        $iconWidth  = $category->getIconCustomWidth() ? : '50';
                                        $iconHeight = $category->getIconCustomHeight() ? : '20';
                                        ?>
                                        <?php if ($iconUrl !== '') : ?>
                                            <img alt="" src="<?= $block->escapeUrl($iconUrl) ?>"
                                                 width="<?= $block->escapeHtmlAttr($iconWidth . 'px') ?>"
                                                <?= $iconHeight ?
                                                    'height="' . $block->escapeHtmlAttr($iconHeight) . 'px"' : '' ?>>
                                        <?php else : ?>
                                            <i class="<?= $block->escapeHtmlAttr($category->getIcon()) ?>"
                                               aria-hidden="true">
                                            </i>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                    <?= $block->escapeHtml($category->getName()) ?>
                                    <span class="grey-text text-darken-1">
                                        (<?= $block->escapeHtml($category->getQuestionNum()) ?>)
                                    </span>
                                </a>
                            </h4>
                            <div class="header-description grey-text">
                                <span>
                                    <i class="far fa-eye"></i>
                                    <?= /** @noEscape */ $category->getViews() ?> <?= $block->escapeHtml(__("views")) ?>
                                </span>
                                <span>
                                    <i class="far fa-calendar-alt"></i>&nbsp
                                    <?= /** @noEscape */ $block->getDateFormat($category->getCreatedAt(), "F j, Y") ?>
                                </span>
                            </div>
                            <hr>
                        </div>
                        <ul class="mpfaqs-list__block__question collapsible">
                            <?php foreach ($articles = $block->getArticleByCategory($category->getId()) as $article) : ?>
                                <li class="mpfaqs-item">
                                    <div class="collapsible-header in-active"
                                         data-id="<?= $block->escapeHtmlAttr($category->getId() . '-' . $article->getId()) ?>">
                                        <span>
                                            <?php if ($block->isCollapsible()) : ?>
                                                <?php if ((int) $article->getIconType() === IconType::FONT_AWESOME) : ?>
                                                    <i class="<?= $block->escapeHtmlAttr($article->getIcon()) ?>"
                                                       aria-hidden="true">
                                                    </i>
                                                <?php else : ?>
                                                    <?php
                                                    $iconUrl    = $helperData->getFileUrl($article->getIconCustomPath());
                                                    $iconWidth  = $article->getIconCustomWidth() ? : '50';
                                                    $iconHeight = $article->getIconCustomHeight() ? : '20';
                                                    ?>
                                                    <?php if ($iconUrl !== '') : ?>
                                                        <img src="<?= $block->escapeUrl($iconUrl) ?>"
                                                             width="<?= $block->escapeHtmlAttr($iconWidth . 'px') ?>"
                                                        <?= $iconHeight ? 'height="' . $block->escapeHtmlAttr($iconHeight) .
                                                            'px"' : '' ?>>
                                                    <?php else : ?>
                                                        <i class="<?= $block->escapeHtmlAttr($article->getIcon()) ?>"
                                                           aria-hidden="true">
                                                        </i>
                                                    <?php endif; ?>
                                                <?php endif; ?>
                                                <?= $block->escapeHtml($article->getName()) ?>
                                            <?php else : ?>
                                                <a href="<?= /** @noEscape */ $article->getUrl() ?>">
                                                    <?php if ((int) $article->getIconType() === IconType::FONT_AWESOME) : ?>
                                                        <i class="<?= $block->escapeHtmlAttr($article->getIcon()) ?>"
                                                           aria-hidden="true">
                                                    </i>
                                                    <?php else : ?>
                                                        <?php
                                                        $iconUrl    = $helperData->getFileUrl($article->getIconCustomPath());
                                                        $iconWidth  = $article->getIconCustomWidth() ? : '50';
                                                        $iconHeight = $article->getIconCustomHeight() ? : '20';
                                                        ?>
                                                        <?php if ($iconUrl !== '') : ?>
                                                            <img src="<?= $block->escapeUrl($iconUrl) ?>"
                                                                 width="<?= $block->escapeHtmlAttr($iconWidth . 'px') ?>"
                                                                 <?= $iconHeight ? 'height="' . $block->escapeHtmlAttr($iconHeight) . 'px"' : '' ?>>
                                                        <?php else : ?>
                                                            <i class="<?= $block->escapeHtmlAttr($article->getIcon()) ?>"
                                                               aria-hidden="true">
                                                        </i>
                                                        <?php endif; ?>
                                                    <?php endif; ?>
                                                    <?= $block->escapeHtml($article->getName()) ?>
                                                </a>
                                            <?php endif; ?>
                                        </span>
                                    </div>
                                    <div id="mpfaqs-list__block__question__content--<?= $block->escapeHtmlAttr($category->getId() . '-' . $article->getId()) ?>"
                                         class="collapsible-body">
                                        <?php if ($article->getShortAnswer()) : ?>
                                            <?php if ($block->helperData->isEnabledDetailPage()) : ?>
                                                <p><?= $block->escapeHtml($block->helperData->getPageFilter($article->getShortAnswer())) ?>
                                                    <br>
                                                    <a href="<?= $block->escapeUrl($article->getUrl()) ?>"><?= $block->escapeHtml(__("Read more")) ?></a>
                                                </p>
                                            <?php else : ?>
                                                <p><?= $block->escapeHtml($block->helperData->getPageFilter($article->getArticleContent())) ?></p>
                                            <?php endif; ?>
                                        <?php else : ?>
                                            <p><?= $block->escapeHtml(__('There is no answer for this question.')) ?></p>
                                        <?php endif; ?>
                                    </div>
                                </li>
                            <?php endforeach; ?>
                            <div class="view-all-faq"><i class="fas fa-angle-double-down"></i>
                                <a class="load-more"> <?= $block->escapeHtml(__("View all")) ?></a>
                            </div>
                        </ul>
                    </div>
                <?php endif;
            endforeach; ?>
        <?php else : ?>
            <div><?= $block->escapeHtml(__("There is no FAQ match with your search.")) ?></div>
        <?php endif; ?>
        <?php if ($tags->getData()) : ?>
            <?php foreach ($tags as $tag) :
                if ($tag->getQuestionNum() != '0'
                && ($currentTagId) ? $tag->getId() == $currentTagId->getId() : true
                    && $block->getRequest()->getFullActionName() === 'mpfaqs_tag_view') : ?>
                    <div class="mpfaqs-list__block col m<?= /** @noEscape */ ($block->helperData->isFaqsHomePage()) ?
                        12/$block->getCategoryColumns() : '12'; ?> s12">
                        <div class="mpfaqs-list__block__category">
                            <h4>
                                <a href="<?= /** @noEscape */ $tag->getUrl(); ?>">
                                    <?= $block->escapeHtml($tag->getName()) ?>
                                    <span class="grey-text text-darken-1">
                                        (<?= $block->escapeHtml($tag->getQuestionNum()) ?>)
                                    </span>
                                </a>
                            </h4>
                            <div class="header-description grey-text">
                                <span>
                                    <i class="far fa-calendar-alt"></i>&nbsp
                                    <?= /** @noEscape */ $block->getDateFormat($tag->getCreatedAt(), "F j, Y") ?>
                                </span>
                            </div>
                            <hr>
                        </div>
                        <ul class="mpfaqs-list__block__question collapsible">
                            <?php foreach ($articles = $block->getArticleByTag($tag->getId()) as $article) : ?>
                                <li class="mpfaqs-item">
                                    <div class="collapsible-header in-active"
                                         data-id="<?= $block->escapeHtmlAttr($tag->getId() . '-' . $article->getId()) ?>">
                                        <span>
                                            <?php if ($block->isCollapsible()) : ?>
                                                <?php if ((int) $article->getIconType() === IconType::FONT_AWESOME) : ?>
                                                    <i class="<?= $block->escapeHtmlAttr($article->getIcon()) ?>"
                                                       aria-hidden="true">
                                                    </i>
                                                <?php else : ?>
                                                    <?php
                                                    $iconUrl    = $helperData->getFileUrl($article->getIconCustomPath());
                                                    $iconWidth  = $article->getIconCustomWidth() ? : '50';
                                                    $iconHeight = $article->getIconCustomHeight() ? : '20';
                                                    ?>
                                                    <?php if ($iconUrl !== '') : ?>
                                                        <img src="<?= $block->escapeUrl($iconUrl) ?>"
                                                             width="<?= $block->escapeHtmlAttr($iconWidth . 'px') ?>"
                                                        <?= $iconHeight ? 'height="' . $block->escapeHtmlAttr($iconHeight) .
                                                            'px"' : '' ?>>
                                                    <?php else : ?>
                                                        <i class="<?= $block->escapeHtmlAttr($article->getIcon()) ?>"
                                                           aria-hidden="true">
                                                        </i>
                                                    <?php endif; ?>
                                                <?php endif; ?>
                                                <?= $block->escapeHtml($article->getName()) ?>
                                            <?php else : ?>
                                                <a href="<?= /** @noEscape */ $article->getUrl() ?>">
                                                    <?php if ((int) $article->getIconType() === IconType::FONT_AWESOME) : ?>
                                                        <i class="<?= $block->escapeHtmlAttr($article->getIcon()) ?>"
                                                           aria-hidden="true">
                                                    </i>
                                                    <?php else : ?>
                                                        <?php
                                                        $iconUrl    = $helperData->getFileUrl($article->getIconCustomPath());
                                                        $iconWidth  = $article->getIconCustomWidth() ? : '50';
                                                        $iconHeight = $article->getIconCustomHeight() ? : '20';
                                                        ?>
                                                        <?php if ($iconUrl !== '') : ?>
                                                            <img src="<?= $block->escapeUrl($iconUrl) ?>"
                                                                 width="<?= $block->escapeHtmlAttr($iconWidth . 'px') ?>"
                                                                <?= $iconHeight ? 'height="' . $block->escapeHtmlAttr($iconHeight) . 'px"' : '' ?>>
                                                        <?php else : ?>
                                                            <i class="<?= $block->escapeHtmlAttr($article->getIcon()) ?>"
                                                               aria-hidden="true">
                                                        </i>
                                                        <?php endif; ?>
                                                    <?php endif; ?>
                                                    <?= $block->escapeHtml($article->getName()) ?>
                                                </a>
                                            <?php endif; ?>
                                        </span>
                                    </div>
                                    <div id="mpfaqs-list__block__question__content--<?= $block->escapeHtmlAttr($tag->getId() . '-' . $article->getId()) ?>"
                                         class="collapsible-body">
                                        <?php if ($article->getShortAnswer()) : ?>
                                            <?php if ($block->helperData->isEnabledDetailPage()) : ?>
                                                <p><?= $block->escapeHtml($block->helperData->getPageFilter($article->getShortAnswer())) ?>
                                                    <br>
                                                    <a href="<?= $block->escapeUrl($article->getUrl()) ?>"><?= $block->escapeHtml(__("Read more")) ?></a>
                                                </p>
                                            <?php else : ?>
                                                <p><?= $block->escapeHtml($block->helperData->getPageFilter($article->getArticleContent())) ?></p>
                                            <?php endif; ?>
                                        <?php else : ?>
                                            <p><?= $block->escapeHtml(__('There is no answer for this question.')) ?></p>
                                        <?php endif; ?>
                                    </div>
                                </li>
                            <?php endforeach; ?>
                            <div class="view-all-faq"><i class="fas fa-angle-double-down"></i>
                                <a class="load-more"> <?= $block->escapeHtml(__("View all")) ?></a>
                            </div>
                        </ul>
                    </div>
                <?php endif;
            endforeach; ?>
        <?php endif; ?>
    </div>
    <br />
    <?php if ($tags->getData() && !$currentCategoryId && !$currentTagId) : ?>
        <h4><?= $block->escapeHtml(__('Tags'))?></h4>
        <div class="section lighten-5 row">
            <?php foreach ($tags as $tag) : ?>
                <div class="m2 s12">
                    <a class="label label-default tags-list" href="<?= $block->escapeUrl($tag->getUrl()) ?>">
                        <?= $block->escapeHtml($tag->getName()) ?>
                        <span class="grey-text text-darken-1">
                        (<?= $block->escapeHtml($tag->getQuestionNum()) ?>)
                    </span>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
    <script type="text/javascript">
        require(['jquery'], function ($) {
            var faqCount,
                hiddenFaqItem,
                visibleFaqItem,
                limitCount      = '<?= /** @noEscape */ $block->getLimit(); ?>',
                isCollapsible   = '<?= /** @noEscape */ $block->isCollapsible()?>';

            $('.mpfaqs-list__block').each(function () {
                var el = this;

                faqCount = $(el).find('.mpfaqs-list__block__question li.mpfaqs-item').length;
                $(el).find('.mpfaqs-list__block__question li.mpfaqs-item').slice(0, limitCount).show();
                if (faqCount <= limitCount) {
                    $(el).find('.view-all-faq').hide();
                } else {
                    $(el).find('.view-all-faq a').on('click', function () {
                        hiddenFaqItem = $(el).find('.mpfaqs-list__block__question li.mpfaqs-item:hidden');
                        visibleFaqItem = $(el).find('.mpfaqs-list__block__question li.mpfaqs-item');

                        if ($(this).hasClass("load-more")) {
                            hiddenFaqItem.slideDown('fast');
                            $(this).parent().find('i').removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
                            $(this).removeClass('load-more').addClass('back-to-top');
                            $(this).html('<a> <?= $block->escapeHtml(__("Collapse")) ?></a>');
                        } else {
                            visibleFaqItem.slice(limitCount, visibleFaqItem.length).slideUp('fast');
                            $(this).parent().find('i').removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
                            $(this).removeClass('back-to-top').addClass('load-more');
                            $(this).html('<a> <?= $block->escapeHtml(__("View all")) ?></a>');
                        }
                    });
                }
            });
            if (isCollapsible) {
                //collapsible
                $('.mpfaqs-list__block__question li .collapsible-header').each(function () {
                    $(this).on('click', function () {
                        if ($(this).hasClass('in-active')) {
                            $(this).removeClass('in-active').addClass('active');
                            $('#mpfaqs-list__block__question__content--' + $(this).attr('data-id')).slideDown('fast');
                        } else {
                            $(this).removeClass('active').addClass('in-active');
                            $('#mpfaqs-list__block__question__content--' + $(this).attr('data-id')).slideUp('fast');
                        }
                    });
                });
            }
        });
    </script>
</div>
