<?php
/** @var \Magento\Framework\View\Element\Template $block */

?>
<div x-data="{ tab: 'payment', openItem: null, mobileOpen: null }" class="3xl:max-w-screen-2xl mx-auto 3xl:container my-4 lg:my-8 px-3">

    <!-- DESKTOP TABS (Hidden on mobile) -->
    <div class="hidden md:flex flex-wrap gap-3 border-b mb-4">
        <template x-for="t in ['payment', 'Order Info', 'Delivery Information', 'Promotion', 'Returns']">
            <button
                @click="tab = t.toLowerCase(); openItem = null"
                :class="tab === t.toLowerCase() ? 'border-b-2 border-primary-darker text-primary-banyo' : 'text-black'"
                class="px-3 py-2 text-base lg:text-xl font-semibold font-inter"
                x-text="t"
            ></button>
        </template>
    </div>

    <!-- MOBILE ACCORDION (Hidden on desktop) -->
    <div class="md:hidden space-y-2">
        <template x-for="(t, idx) in ['payment', 'Order Info', 'Delivery Information', 'Promotion', 'Returns']" :key="idx">
            <div class="border rounded-md">
                <button
                    @click="mobileOpen === t.toLowerCase() ? mobileOpen = null : mobileOpen = t.toLowerCase()"
                    class="w-full flex justify-between items-center px-4 py-3 font-semibold text-left text-primary-banyo"
                >
                    <span x-text="t"></span>
                    <span x-show="mobileOpen !== t.toLowerCase()" aria-hidden="true">
                        <!-- Plus SVG -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                          <path d="M11 0V22M0 11H22" stroke="#2A2A2A" stroke-width="2"/>
                        </svg>
                    </span>
                    <span x-show="mobileOpen === t.toLowerCase()" aria-hidden="true">
                        <!-- Minus SVG -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="2" viewBox="0 0 22 2" fill="none">
                          <path d="M0 1H22" stroke="#2A2A2A" stroke-width="2"/>
                        </svg>
                    </span>
                </button>

                <div x-show="mobileOpen === t.toLowerCase()" x-collapse class="px-4 pb-4 text-sm">
                    <template x-if="t.toLowerCase() === 'payment'">
                        <div><?= $block->getChildHtml('payment.page') ?></div>
                    </template>
                    <template x-if="t.toLowerCase() === 'order info'">
                        <div><?= $block->getChildHtml('order-info.page') ?></div>
                    </template>
                    <template x-if="t.toLowerCase() === 'delivery information'">
                        <div><?= $block->getChildHtml('del-info.page') ?></div>
                    </template>
                    <template x-if="t.toLowerCase() === 'promotion'">
                        <div><?= $block->getChildHtml('promotion.page') ?></div>
                    </template>
                    <template x-if="t.toLowerCase() === 'returns'">
                        <div><?= $block->getChildHtml('return.page') ?></div>
                    </template>
                </div>
            </div>
        </template>
    </div>

    <!-- DESKTOP CONTENT -->
    <div class="border rounded-md hidden md:block mt-4">
        <template x-if="tab === 'payment'">
            <div><?= $block->getChildHtml('payment.page') ?></div>
        </template>
        <template x-if="tab === 'returns'">
            <div><?= $block->getChildHtml('return.page') ?></div>
        </template>
        <template x-if="tab === 'order info'">
            <div><?= $block->getChildHtml('order-info.page') ?></div>
        </template>
        <template x-if="tab === 'delivery information'">
            <div><?= $block->getChildHtml('del-info.page') ?></div>
        </template>
        <template x-if="tab === 'promotion'">
            <div><?= $block->getChildHtml('promotion.page') ?></div>
        </template>
    </div>
</div>

