<?php
/**
 * MagePrince
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the mageprince.com license that is
 * available through the world-wide-web at this URL:
 * https://mageprince.com/end-user-license-agreement
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this extension to newer
 * version in the future.
 *
 * @category    MagePrince
 * @package     Mageprince_Faq
 * @copyright   Copyright (c) MagePrince (https://mageprince.com/)
 * @license     https://mageprince.com/end-user-license-agreement
 */
?>
<?php
/**
 * @var $block \Mageprince\Faq\Block\Index\Index
 */
use Mageprince\Faq\Model\Config\DefaultConfig;
?>
<?php if ($block->isEnable()): ?>
    <?php $faqGroupCollection = $block->getFaqGroupCollection(); ?>
    <?php if ($faqGroupCollection->getSize()): ?>
        <?php $pageType = $block->getPageTypeAction(); ?>
        <div
            x-data="{
                tab: '<?= strtolower($faqGroupCollection->getFirstItem()->getGroupName()); ?>',
                openItem: null,
                mobileOpen: null
            }"
            class="3xl:max-w-screen-2xl mx-auto 3xl:container my-4 lg:my-8 px-3"
        >
            <!-- DESKTOP TABS -->
            <div class="hidden md:flex flex-wrap gap-3 border-b mb-4">
                <?php foreach ($faqGroupCollection as $group): ?>
                    <?php $groupName = $block->escapeHtml($group->getGroupName()); ?>
                    <button
                        @click="tab = '<?= strtolower($groupName); ?>'; openItem = null"
                        :class="tab === '<?= strtolower($groupName); ?>' ? 'border-b-2 border-primary-darker text-primary-banyo' : 'text-black'"
                        class="px-3 py-2 text-base lg:text-xl font-semibold font-inter"
                    >
                        <?= $groupName ?>
                    </button>
                <?php endforeach; ?>
            </div>

            <!-- MOBILE ACCORDION -->
            <div class="md:hidden space-y-2">
                <?php foreach ($faqGroupCollection as $group): ?>
                    <?php
                    $groupName = $block->escapeHtml($group->getGroupName());
                    $faqCollection = $block->getFaqCollection($group->getId());
                    ?>
                    <div class="border rounded-md">
                        <button
                            @click="mobileOpen === '<?= strtolower($groupName); ?>' ? mobileOpen = null : mobileOpen = '<?= strtolower($groupName); ?>'"
                            class="w-full flex justify-between items-center px-4 py-3 font-semibold text-left text-primary-banyo"
                        >
                            <span><?= $groupName ?></span>
                            <span x-show="mobileOpen !== '<?= strtolower($groupName); ?>'" aria-hidden="true">
                                <!-- Plus Icon -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none">
                                    <path d="M11 0V22M0 11H22" stroke="#2A2A2A" stroke-width="2"/>
                                </svg>
                            </span>
                            <span x-show="mobileOpen === '<?= strtolower($groupName); ?>'" aria-hidden="true">
                                <!-- Minus Icon -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="2" fill="none">
                                    <path d="M0 1H22" stroke="#2A2A2A" stroke-width="2"/>
                                </svg>
                            </span>
                        </button>
                        <div x-show="mobileOpen === '<?= strtolower($groupName); ?>'" x-collapse class="px-4 pb-4 text-sm space-y-3">
                            <?php if ($faqCollection->getSize()): ?>
                                <?php foreach ($faqCollection as $faq): ?>
                                    <div x-data="{ open: false }" class="border rounded">
                                        <button @click="open = !open" class="w-full text-left px-3 py-2 bg-gray-100 font-medium">
                                            <?= $block->escapeHtml(__($faq->getTitle())) ?>

                                        </button>
                                        <div x-show="open" x-collapse class="px-3 py-2 bg-white text-gray-700">
                                            <?= /* @noEscape */ $block->filterOutputHtml($faq->getContent()); ?>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <p class="text-gray-500"><?= __('No FAQs in this group.') ?></p>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <!-- DESKTOP CONTENT -->
            <div class="border rounded-md hidden md:block mt-4">
                <?php foreach ($faqGroupCollection as $group): ?>
                    <?php
                    $groupName = $block->escapeHtml($group->getGroupName());
                    $faqCollection = $block->getFaqCollection($group->getId());
                    ?>
                    <div x-show="tab === '<?= strtolower($groupName); ?>'" x-cloak class=" space-y-3">
                        <?php if ($faqCollection->getSize()): ?>
                            <?php foreach ($faqCollection as $faq): ?>
                                <div x-data="{ open: false }" class="border rounded">
                                    <button
                                        @click="open = !open"
                                        class="flex justify-between items-center w-full px-3 py-2 bg-gray-100 font-medium text-left"
                                    >
                                        <span class="flex-1 text-black text-sm lg:text-xl font-semibold font-inter"><?= $block->escapeHtml(__($faq->getTitle())) ?></span>

                                        <span x-show="!open" x-cloak>
        <!-- Plus Icon -->
        <svg class="w-5 h-5 min-w-[1.25rem]" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 4v16M4 12h16" />
        </svg>
    </span>
                                        <span x-show="open" x-cloak>
        <!-- Minus Icon -->
        <svg class="w-5 h-5 min-w-[1.25rem]" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M4 12h16" />
        </svg>
    </span>
                                    </button>
                                    <div x-show="open" x-collapse class="bg-white p-4 text-sm text-gray-700 font-inter">
                                        <?= /* @noEscape */ $block->filterOutputHtml($faq->getContent()); ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <p class="text-gray-500"><?= __('No FAQs in this group.') ?></p>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>
<?php endif; ?>


