<?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 \Mageplaza\Faqs\Block\Article\Product $block */
if ($block->isEnabled()) :
    $articles    = $block->getArticleByProduct();
    $currentDate = $block->getCurrentDate();
    ?>
    <div id="mpfaqs-tab-list-container" class="mpfaqs-tab-list mpfaqs">
        <div class="section lighten-5 row">
            <div class="mpfaqs-tab-list__title">
                <h3>
                    <i class="far fa-question-circle"></i>&nbsp&nbsp <?= /** @noEscape */ __("Frequently Asked Questions and Answers")?>
                </h3>
                <hr>
            </div>

            <div class="mpfaqs-tab-list__block col m12 s12">
                <ul class="mpfaqs-tab-list__block__question collapsible">
                    <?php foreach ($articles as $article) : ?>
                        <li class="mpfaqs-item">
                            <?php if ($block->isShowName()) : ?>
                                <div class="mpfaqs-tab-list__block__question_author">
                                    <strong><i class="far fa-user"></i>
                                        <?= $block->escapeHtml($article->getAuthorName()) ?>
                                        <?= ($block->isShowDate()) ?
                                            '- ' . $block->escapeHtml($block->getTimeAgo($article->getCreatedAt()))
                                            : /** @noEscape */ '' ?>
                                    </strong>
                                </div>
                            <?php endif; ?>
                            <div class="collapsible-header in-active"
                                 data-id="<?= /** @noEscape */ $article->getId()?>">
                                <span>
                                    <?php if ($block->isCollapsible()) : ?>
                                        <i class="far fa-file-alt"></i><?= $block->escapeHtml($article->getName()) ?>
                                    <?php else : ?>
                                        <a href="<?= $block->escapeHtmlAttr($article->getUrl()) ?>">
                                            <i class="far fa-file-alt"></i><?= $block->escapeHtml($article->getName())?>
                                        </a>
                                    <?php endif; ?>
                                </span>
                            </div>

                            <div id="mpfaqs-tab-list__block__question__content--<?= $block->escapeHtml($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->escapeHtmlAttr($article->getUrl()) ?>"><?= $block->escapeHtml(__("Read more")) ?></a>
                                        </p>
                                    <?php else : ?>
                                        <p><?= $block->escapeHtml($block->helperData->getPageFilter(strip_tags($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-tab-all-faq"><i class="fas fa-angle-double-down"></i>
                        <a class="load-more"> <?= $block->escapeHtml(__("View all")) ?></a>
                    </div>
                </ul>
                <?php if ($block->helperData->isShowForm()) : ?>
                    <a id="mpfaqs-add-question"
                       class="waves-effect waves-light btn"><?= $block->escapeHtml(__("add a question")) ?></a>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        require(['jquery', 'mpFaqCollapsible', 'materialize'], function ($, mpFaqCollapsible) {
            var mpSelector    = {
                    listBlock: $('.mpfaqs-tab-list__block'),
                    item: '.mpfaqs-tab-list__block__question li.mpfaqs-item',
                    itemHidden: '.mpfaqs-tab-list__block__question li.mpfaqs-item:hidden',
                    itemHeader: $('.mpfaqs-tab-list__block__question li .collapsible-header'),
                    itemContent: '#mpfaqs-tab-list__block__question__content--',
                    viewAll: '.view-tab-all-faq',
                    viewAllButton: '.view-tab-all-faq a'
                },
                limitCount    = '<?= /** noEscape */ $block->getLimit(); ?>',
                isCollapsible = '<?= /** noEscape */ $block->isCollapsible()?>';

            /** hide-show question form */
            $('#mpfaqs-add-question').on('click', function () {
                $(this).hide();
                $('.mpfaqs-tab-form').show();
            });
            mpFaqCollapsible(mpSelector, limitCount, isCollapsible);
        });
    </script>
<?php endif; ?>
