<?php
/** @var \Banyo\CustomHomePage\ViewModel\CategorySlider $viewModel */
$viewModel = $block->getData('viewModel');
$categories = $viewModel->getHomeCategories();
$heading = $viewModel->getConfigValue("banyo_theme/shop_by_category/shop_by_category_title_text");

?>


<?php if ($categories->getSize()): ?>
    <div class="hidden lg:block px-3 2xl:container 3xl:max-w-screen-2xl">
        <h2 class="text-3xl font-bold font-inter text-black text-center py-4">
            <?= $escaper->escapeHtml($heading)?>
        </h2>
        <div class="gap-7 grid lg:grid-cols-5 mx-auto">
            <?php foreach ($categories as $category): ?>
                <div class="bg-white rounded-lg overflow-hidden shadow-md mb-4">
                    <a href="<?= $category->getUrl(); ?>" class="block">
                        <?php if ($category->getImageUrl()): ?>
                            <img src="<?= $category->getImageUrl(); ?>"
                                 alt="<?= $block->escapeHtml($category->getName()); ?>"/>
                        <?php endif; ?>
                        <div class="py-2 text-center">
                            <h3 class="text-base font-semibold"><?= $block->escapeHtml($category->getName()); ?></h3>
                        </div>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
<?php endif; ?>


<!-- Mobile Category-->
<section class="mb-4  py-3 px-3 cat-slider-homepage lg:hidden">
    <div class="flex flex-col gap-y-2.5" x-data="{ open: false }">
        <div class="flex justify-between items-center">
            <h2 class="text-xl font-semibold font-inter uppercase text-black">
                Shop By Category
            </h2>
            <div class="text-red font-semibold text-base font-sen cursor-pointer" @click="open = ! open">
                <span x-text="open ? 'Show Less' : 'Show All'"></span>
            </div>
        </div>
        <div class="flex  items-center gap-3 transition-all duration-300 ease-in-out"
             x-show="true"
             :class="open ? 'flex-wrap' : 'overflow-auto'">
            <?php if ($categories->getSize()): ?>
                <?php foreach ($categories as $category): ?>
                    <?php
                    $categoryUrl = $category->getUrl();;
                    ?>
                    <div class="flex flex-col bg-primary-50 px-2.5 py-2.5 rounded-[15px]">
                        <a href="<?= $categoryUrl; ?>" class="flex justify-center items-center gap-2.5">

                            <div class="svg-slide-mobile">
                                <?= $category->getData('shop_by_category_svg_code'); ?>
                            </div>

                            <div class="text-black text-xs font-sen uppercase">
                                <?= $category->getName() ?>
                            </div>
                        </a>
                    </div>

                <?php endforeach; ?>
            <?php endif; ?>
        </div>

    </div>
</section>
