<?php
use Magento\Framework\View\Element\Template;
use Magento\Framework\Escaper;
use Banyo\CustomHomePage\ViewModel\StoreContent;

/** @var Template $block */
/** @var Escaper $escaper */
/** @var StoreContent $viewModel */
$viewModel = $block->getData('viewModel');
$tabs = $viewModel->getTabs();
?>

<div x-data="{ activeTab: 'tab-1', openAccordion: '' }" class="3xl:max-w-screen-2xl mx-auto 2xl:container my-4 lg:my-8 px-3">
    <div class="flex flex-col  bg-white shadow-md">

       <div class="hidden md:block ">
           <!-- Tabs Navigation for Desktop -->
           <div class="grid grid-cols-6 bg-primary-50 shadow-md">
               <?php foreach ($tabs as $tab): ?>
                   <div @click="activeTab = '<?= $escaper->escapeHtmlAttr($tab['id']) ?>'"
                        :class="{'border-b-2 border-blue-500 bg-primary-darker text-white': activeTab === '<?= $escaper->escapeHtmlAttr($tab['id']) ?>'}"
                        class="h-16 cursor-pointer flex justify-center items-center text-sm lg:text-base text-black hover:text-white hover:bg-primary-darker transition-all duration-300">
                       <?= $tab['title'] ?>
                   </div>
               <?php endforeach; ?>
           </div>

           <!-- Tabs Content for Desktop -->
               <div class="w-full mt-4">
                   <?php foreach ($tabs as $tab): ?>
                       <div x-show="activeTab === '<?= $escaper->escapeHtmlAttr($tab['id']) ?>'" class="tab-content p-4">
                           <?php if ($viewModel->blockExists($tab['block_id'])): ?>
                               <?= $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($tab['block_id'])->toHtml() ?>
                           <?php else: ?>
                               <p>Content for <?= $escaper->escapeHtml($tab['title']) ?></p>
                           <?php endif; ?>
                       </div>
                   <?php endforeach; ?>
               </div>
       </div>

        <!-- Accordion for Mobile -->
        <div class="md:hidden w-ful">
            <?php foreach ($tabs as $tab): ?>
                <div class="accordion-item border-b">
                    <div @click="openAccordion = (openAccordion === '<?= $escaper->escapeHtmlAttr($tab['id']) ?>' ? '' : '<?= $escaper->escapeHtmlAttr($tab['id']) ?>')"
                         :class="{'bg-primary-darker text-white': openAccordion === '<?= $escaper->escapeHtmlAttr($tab['id']) ?>'}"
                         class="cursor-pointer p-4 mb-1 flex justify-between items-center text-sm font-medium  text-black bg-gray-200 transition-all duration-300">
                        <span><?= $escaper->escapeHtml($tab['mobile_title']) ?></span>
                        <span x-show="openAccordion !== '<?= $escaper->escapeHtmlAttr($tab['id']) ?>'" class="open opener">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                              <path d="M0 7H14" stroke="#1C1C1C" stroke-width="2"/>
                              <path d="M7 0L7 14" stroke="#1C1C1C" stroke-width="2"/>
                            </svg>
                        </span>
                        <span x-show="openAccordion === '<?= $escaper->escapeHtmlAttr($tab['id']) ?>'" class="close opener">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="2" viewBox="0 0 14 2" fill="none">
                              <path d="M0 1H14" stroke="white" stroke-width="2"/>
                            </svg>
                        </span>
                    </div>
                    <div x-show="openAccordion === '<?= $escaper->escapeHtmlAttr($tab['id']) ?>'" class="tab-content p-4 text-xs">
                        <?php if ($viewModel->blockExists($tab['block_id'])): ?>
                            <?= $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($tab['block_id'])->toHtml() ?>
                        <?php else: ?>
                            <p>Content for <?= $escaper->escapeHtml($tab['mobile_title']) ?> .</p>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<style>
    .tabulation-form {
        padding: 0;
        font-family: 'Roboto';
    }

    .tabulation-form li:first-child {
        border-top-left-radius: 2px;
    }

    .tabulation-form li:last-child {
        border-top-right-radius: 2px;
        border-right: 0;
    }

    .tabulation-form ul li {
        font-size: 20px;
        line-height: 21.8px;
        font-weight: 500;
        background: #0044721a;
        /* border-right: 2px solid #999999; */
        height: 74px;
        /* width: 231px; */
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1C1C1C;
        font-family: 'roboto';
    }

    .tabulation-form ul .border-blue-500, .tabulation-form .bg-blue-500 {
        background: #004472;
        color: #fff;
        border: 2px solid transparent;
    }

    .tabulation-form .w-full.mt-4 {
        margin: 0;
        max-width: 100%;
        margin-left: 0;
        margin-right: auto;
    }

    .tabulation-form .font-bold {
        font-size: 18px;
        font-weight: 600;
        line-height: 21px;
    }

    .tabulation-form .w-full.mt-4 p {
        font-size: 16px;
        line-height: 19.2px;
        margin: 15px 0;
        color: #1C1C1C;
    }

    .whole {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
        width: 100%;
    }
</style>
