<?php
/**
 * Copyright © MageMe. All rights reserved.
 * See LICENSE for license terms, or https://mageme.com/license.
 */
/**
 * Hyva theme override of progress stepper.
 * Sized to match Luma's 36px circles + connector lines + 15px title font for
 * cross-theme visual parity. The Tailwind utilities here compile through
 * the Hyva theme's tailwind pipeline (auto-discovered via Hyva_CompatModuleFallback).
 *
 * Reactive to client-side panel switches in form.phtml: each <li> binds its
 * circle/title/connector classes to `$store.withdrawal.step`. When the SPA
 * is not present (Steps 1a/1b — no Alpine store registered), bindings fall
 * back to `serverStep`, which mirrors the layout's `active_step` argument.
 *
 * @var \MageMe\EUWithdrawal\Block\Withdraw\ProgressStepper $block
 * @var \Magento\Framework\Escaper $escaper
 */
$steps      = $block->getSteps();
$total      = count($steps);
$serverStep = $block->getActiveStep();
$colsClass = match ($total) {
    1 => 'grid-cols-1',
    2 => 'grid-cols-2',
    3 => 'grid-cols-3',
    4 => 'grid-cols-4',
    5 => 'grid-cols-5',
    6 => 'grid-cols-6',
    7 => 'grid-cols-7',
    8 => 'grid-cols-8',
    9 => 'grid-cols-9',
    10 => 'grid-cols-10',
    11 => 'grid-cols-11',
    12 => 'grid-cols-12',
    default => 'grid-cols-4',
};
?>
<nav x-data="{ serverStep: <?= (int) $serverStep ?>, active() { return (this.$store.withdrawal && this.$store.withdrawal.step) || this.serverStep; } }"
     class="max-w-6xl mx-auto px-4 pt-8 pb-4 max-sm:pt-4 max-sm:pb-3"
     aria-label="<?= $escaper->escapeHtmlAttr(__('Withdrawal progress')) ?>">
    <ol class="grid gap-4 <?= $escaper->escapeHtmlAttr($colsClass) ?>">
        <?php foreach ($steps as $idx => $s): ?>
            <?php
            $n      = (int) $s['number'];
            $isLast = ($idx === $total - 1);
            ?>
            <li class="relative flex flex-col items-center text-center px-2">
                <?php if (!$isLast): ?>
                    <span class="absolute top-[18px] left-1/2 w-full h-[2px] z-0 max-sm:top-[14px]"
                          :class="active() > <?= (int) $n ?> ? 'bg-primary' : 'bg-gray-300'"
                          aria-hidden="true"></span>
                <?php endif; ?>
                <span class="relative z-10 inline-flex h-9 w-9 items-center justify-center rounded-full text-[15px] font-semibold mb-2.5 max-sm:h-7 max-sm:w-7 max-sm:text-[12px] max-sm:mb-1.5"
                      :class="active() >= <?= (int) $n ?> ? 'bg-primary text-white' : 'bg-gray-200 text-gray-500'"
                      aria-hidden="true">
                    <template x-if="active() > <?= (int) $n ?>">
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 13 9 17 19 7"/></svg>
                    </template>
                    <template x-if="active() <= <?= (int) $n ?>">
                        <span><?= (int) $n ?></span>
                    </template>
                </span>
                <span class="block text-[15px] font-semibold leading-tight max-sm:text-[11px]"
                      :class="active() === <?= (int) $n ?> ? 'text-primary' : 'text-gray-500'"><?= $escaper->escapeHtml(__($s['title'])) ?></span>
                <span class="mt-1 block text-[13px] text-gray-500 leading-snug max-sm:hidden"><?= $escaper->escapeHtml(__($s['subtitle'])) ?></span>
            </li>
        <?php endforeach; ?>
    </ol>
</nav>
