<?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());
$firstFourCategories = array_slice($categoriesArray, 0, 4);
$firstCat  = $firstFourCategories[0] ?? null;
$secondCat = $firstFourCategories[1] ?? null;
$thirdCat  = $firstFourCategories[2] ?? null;
$fourthCat = $firstFourCategories[3] ?? null;
// 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 py-2">
        <div class="hidden lg:block pt-2">
            <!-- left section -->
           <div class="flex gap-6">
               <div>
                   <a href="<?= $firstCat->getUrl(); ?>" class="block relative">
                       <?php if ($firstCat->getImageUrl()): ?>
                           <img src="<?= $firstCat->getImageUrl(); ?>"
                                alt="<?= $block->escapeHtml($firstCat->getName()); ?>" />
                       <?php endif; ?>
                       <div class="py-2 absolute bottom-4 w-full">
                           <h3
                               class="text-2xl font-semibold px-6 capitalize text-white font-sen"><?= $block->escapeHtml($firstCat->getName()); ?></h3>
                           <svg width="56" height="2" viewBox="0 0 56 2" class="mx-6" fill="none" xmlns="http://www.w3.org/2000/svg">
                               <g clip-path="url(#clip0_9281_34612)">
                                   <path d="M0 1H56" stroke="white" stroke-width="2"/>
                               </g>
                               <defs>
                                   <clipPath id="clip0_9281_34612">
                                       <rect width="56" height="2" fill="white"/>
                                   </clipPath>
                               </defs>
                           </svg>
                       </div>
                   </a>
               </div>
               <!-- right section-->
               <div class="flex flex-col gap-6">
                   <!-- two image top -->
                   <div class="flex gap-6">
                       <div>
                           <a href="<?= $secondCat->getUrl(); ?>" class="block relative">
                               <?php if ($secondCat->getImageUrl()): ?>
                                   <img src="<?= $secondCat->getImageUrl(); ?>"
                                        alt="<?= $block->escapeHtml($secondCat->getName()); ?>" />
                               <?php endif; ?>
                               <div class="py-2 absolute bottom-4 w-full">
                                   <h3
                                       class="text-2xl font-semibold px-6  capitalize text-white font-sen"><?= $block->escapeHtml($secondCat->getName()); ?></h3>
                                   <svg width="56" height="2" viewBox="0 0 56 2" class="mx-6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                       <g clip-path="url(#clip0_9281_34612)">
                                           <path d="M0 1H56" stroke="white" stroke-width="2"/>
                                       </g>
                                       <defs>
                                           <clipPath id="clip0_9281_34612">
                                               <rect width="56" height="2" fill="white"/>
                                           </clipPath>
                                       </defs>
                                   </svg>
                               </div>
                           </a>
                       </div>

                       <div>
                           <a href="<?= $thirdCat->getUrl(); ?>" class="block relative">
                               <?php if ($thirdCat->getImageUrl()): ?>
                                   <img src="<?= $thirdCat->getImageUrl(); ?>"
                                        alt="<?= $block->escapeHtml($thirdCat->getName()); ?>" />
                               <?php endif; ?>
                               <div class="py-2 absolute bottom-4 w-full">
                                   <h3
                                       class="text-2xl font-semibold px-6 capitalize text-white font-sen"><?= $block->escapeHtml($thirdCat->getName()); ?></h3>
                                   <svg width="56" height="2" viewBox="0 0 56 2" class="mx-6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                       <g clip-path="url(#clip0_9281_34612)">
                                           <path d="M0 1H56" stroke="white" stroke-width="2"/>
                                       </g>
                                       <defs>
                                           <clipPath id="clip0_9281_34612">
                                               <rect width="56" height="2" fill="white"/>
                                           </clipPath>
                                       </defs>
                                   </svg>
                               </div>
                           </a>
                       </div>

                   </div>
                   <!-- bottom image  -->
                   <div>
                       <a href="<?= $fourthCat->getUrl(); ?>" class="block relative">
                           <?php if ($fourthCat->getImageUrl()): ?>
                               <img src="<?= $fourthCat->getImageUrl(); ?>"
                                    alt="<?= $block->escapeHtml($fourthCat->getName()); ?>" />
                           <?php endif; ?>
                           <div class="py-2 absolute bottom-4 w-full">
                               <h3
                                   class="text-2xl font-semibold px-6 capitalize text-white font-sen"><?= $block->escapeHtml($fourthCat->getName()); ?></h3>
                               <svg width="56" height="2" viewBox="0 0 56 2" class="mx-6" fill="none" xmlns="http://www.w3.org/2000/svg">
                                   <g clip-path="url(#clip0_9281_34612)">
                                       <path d="M0 1H56" stroke="white" stroke-width="2"/>
                                   </g>
                                   <defs>
                                       <clipPath id="clip0_9281_34612">
                                           <rect width="56" height="2" fill="white"/>
                                       </clipPath>
                                   </defs>
                               </svg>
                           </div>
                       </a>
                   </div>
               </div>
           </div>
        </div>

        <!--  Mobile View-->

        <div class="md:hidden ">
            <div  class="grid grid-cols-2 gap-3">

                <?php foreach ($categories as $category): ?>
                    <div>
                        <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=" absolute bottom-4 w-full">
                                <h3 class="text-base font-semibold px-3 capitalize text-white">
                                    <?= $block->escapeHtml($category->getName()); ?>
                                </h3>
                                <svg width="56" height="2" viewBox="0 0 56 2" class="px-3" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_9281_34612)">
                                        <path d="M0 1H56" stroke="white" stroke-width="2"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_9281_34612">
                                            <rect width="56" height="2" fill="white"/>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?></div>
        </div>
    </div>
<?php endif; ?>

