<?php
/**
 * Mageplaza
 * Blog Category Widget Template
 */

use Mageplaza\Blog\Block\Category\Widget;
use Magento\Framework\Escaper;

/** @var Widget $block */
/** @var Escaper $escaper */
$tree = $block->getTree();
$categoriesArray = $block->convertTreeToArray($tree);
?>

<?php if ($tree): ?>
    <div class="p-3 border-b-2 mb-3">
        <h3 class="text-2xl font-inter font-bold text-primary-darker mb-3">
            Categories
        </h3>
        <div class="blog-menu space-y-4 mb-3">
            <?php $secondLevelCategories = $categoriesArray[0]['children'] ?? []; ?>

            <?php foreach ($secondLevelCategories as $secondLevel): ?>
                <?php
                $hasChildren = !empty($secondLevel['children']);
                $xDataAttr = $hasChildren ? 'x-data=\'{ open: false }\'' : '';
                ?>
                <div class="border-b-2 border-primary-darker pb-2 second-level" <?= $xDataAttr ?>>
                    <div class="flex items-center justify-between ">
                        <a href="<?= $escaper->escapeUrl($secondLevel['url']) ?>"
                           class="text-lg font-medium text-black  block">
                            <?= $escaper->escapeHtml($secondLevel['name']) ?>
                        </a>
                        <?php if ($hasChildren): ?>
                            <button @click="open = !open"
                                    class="mr-2  focus:outline-none"
                                    type="button">
                                <svg x-show="!open" class="w-6 h-6 text-primary-darker" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path d="M5 12h14M12 5v14" stroke-width="2" stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                </svg>
                                <svg x-show="open" class="w-6 h-6 text-primary-darker" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path d="M5 12h14" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </button>
                        <?php endif; ?>
                    </div>

                    <?php if ($hasChildren): ?>
                        <div x-show="open"
                             x-transition
                             class="ml-3 mt-1 list-disc text-base text-gray-600 font-medium">
                            <?php foreach ($secondLevel['children'] as $thirdLevel): ?>
                                <div>
                                    <a href="<?= $escaper->escapeUrl($thirdLevel['url']) ?>"
                                       class="">
                                        <?= $escaper->escapeHtml($thirdLevel['name']) ?>
                                    </a>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
<?php endif; ?>
