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

$categoriesArray = iterator_to_array($viewModel->getHomeCategories());
$firstFiveCategories = array_slice($categoriesArray, 0, 5);
$row1Categories = array_slice($firstFiveCategories, 0, 3);
$row2Categories = array_slice($firstFiveCategories, 3, 2);

// Get escaper
$escaper = $block->getEscaper();
if (!$escaper) {
    $escaper = \Magento\Framework\App\ObjectManager::getInstance()->get(\Magento\Framework\Escaper::class);
}
?>

<?php if ($categories->getSize()): ?>
    <div class="px-3 2xl:container 3xl:max-w-screen-2xl">
        <h2 class="text-xl lg:text-3xl font-bold font-sen text-black py-4">
            <?= $escaper->escapeHtml($heading) ?>
        </h2>
        <div class="md:hidden">
            <div class="swiper mySwipercat ">
                <div class="swiper-wrapper items-center">

                    <?php foreach ($categories as $category):
                        print_r($category->getMobileImage())?>
                        <div class="swiper-slide">
                            <a href="<?= $category->getUrl(); ?>" class="block relative">

                                <?php

                                $mediaUrl = ''; // default empty
                                $mobileImage = $category->getMobileImage();
                                if ($mobileImage) {
                                    $mediaUrl = $block->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA)
                                        . 'catalog/category/' . ltrim($mobileImage, '/');
                                }
                                ?>

                                <?php if ($mediaUrl): ?>
                                    <img src="<?= $mediaUrl ?>" alt="<?= $escaper->escapeHtml($category->getName()); ?>" />
                                <?php endif; ?>
                                <div class="py-2 absolute bottom-4 w-full">
                                    <h3
                                        class="text-2xl font-semibold px-6 underline capitalize text-white"><?= $block->escapeHtml($category->getName()); ?></h3>
                                </div>
                            </a>
                        </div>
                    <?php endforeach; ?>

                </div>
                <!-- Arrows -->
                <button type="button" data-next=""
                        class="swiper-button-next-banyo z-10 absolute top-1/2  right-4 shrink-0 p-2.5 rounded-full transition bg-white text-primary shadow disabled:opacity-30 hover:shadow-primary/30 focus:shadow-primary/30"
                        aria-label="Go to Next Slide">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                         stroke="currentColor" width="24" height="24" role="img">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        <title>arrow-right</title></svg>
                </button>
                <button type="button" data-prev=""
                        class="swiper-button-prev-banyo z-10 absolute top-1/2 left-4 shrink-0 p-2.5 rounded-full transition bg-white text-primary shadow disabled:opacity-30 hover:shadow-primary/30 focus:shadow-primary/30"
                        aria-label="Go to Previous Slide">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                         stroke="currentColor" width="24" height="24" role="img">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        <title>arrow-left</title></svg>
                </button>

                <!-- Pagination Dots -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--        Desktop-->
        <div class="hidden lg:block">
            <div class="row-1 flex justify-between items-center mb-4 gap-3">
                <?php foreach ($row1Categories as $category): ?>
                    <a href="<?= $category->getUrl(); ?>" class="block relative">
                        <?php if ($category->getImageUrl()): ?>
                            <img src="<?= $category->getImageUrl(); ?>"
                                 alt="<?= $block->escapeHtml($category->getName()); ?>" class="rounded-lg"/>
                        <?php endif; ?>
                        <div class="py-2 text-center absolute bottom-4 w-full">
                            <h3 class="text-2xl font-semibold flex justify-center capitalize text-white font-sen"><?= $block->escapeHtml($category->getName()); ?></h3>
                        </div>
                    </a>
                <?php endforeach; ?>
            </div>
            <div class="row-2 flex justify-between items-center gap-3">
                <?php foreach ($row2Categories as $category): ?>
                    <a href="<?= $category->getUrl(); ?>" class="block relative">
                        <?php if ($category->getImageUrl()): ?>
                            <img src="<?= $category->getImageUrl(); ?>"
                                 alt="<?= $block->escapeHtml($category->getName()); ?>" class="rounded-lg"/>
                        <?php endif; ?>
                        <div class="py-2 text-center absolute bottom-4 w-full">
                            <div
                                class="text-2xl font-semibold flex justify-center capitalize text-white font-sen"><?= $block->escapeHtml($category->getName()); ?></div>
                        </div>
                    </a>
                <?php endforeach; ?>
            </div>

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

<script>
    document.addEventListener('DOMContentLoaded', function () {
        new Swiper('.mySwipercat', {
            loop: true,
            autoplay: {
                delay: 20000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-button-next-banyo',
                prevEl: '.swiper-button-prev-banyo',
            },
        });
    });
</script>
