Akacja 2025

<?php
global $product;

if (!$product || !is_a($product, 'WC_Product')) {
    $product = function_exists('wc_get_product') ? wc_get_product(get_the_ID()) : null;
}

$current_product_id = $product ? (int) $product->get_id() : (int) get_the_ID();

$mbox_product_map = [
    120 => [
        1 => 2798,
        2 => 2803,
        3 => 2805,
        4 => 2806,
        5 => 3662,
    ],
    240 => [
        1 => 2807,
        2 => 2808,
        3 => 2809,
        4 => 2810,
        5 => 3665,
    ],
];

$current_capacity = 120;
$current_modules = 3;

foreach ($mbox_product_map as $capacity => $modules) {
    foreach ($modules as $module_count => $product_id) {
        if ((int) $product_id === $current_product_id) {
            $current_capacity = (int) $capacity;
            $current_modules = (int) $module_count;
            break 2;
        }
    }
}

$switcher_unique_id = 'mbox-mobile-switcher-' . $current_product_id . '-' . wp_rand(1000, 9999);
?>

<div class="mbox-mobile-product-switcher" data-mbox-mobile-product-switcher>
    <div class="mbox-mobile-product-switcher__bar">

        <button
            type="button"
            class="mbox-mobile-product-switcher__trigger"
            data-mbox-mobile-trigger="capacity"
            aria-expanded="false"
            aria-controls="<?php echo esc_attr($switcher_unique_id); ?>-capacity"
        >
            <span class="mbox-mobile-product-switcher__text">
                <small>Zmień</small>
                <span>pojemność</span>
            </span>
            <strong><?php echo esc_html($current_capacity); ?> l</strong>
        </button>

        <button
            type="button"
            class="mbox-mobile-product-switcher__trigger"
            data-mbox-mobile-trigger="modules"
            aria-expanded="false"
            aria-controls="<?php echo esc_attr($switcher_unique_id); ?>-modules"
        >
            <span class="mbox-mobile-product-switcher__text">
                <small>Zmień</small>
                <span>moduły</span>
            </span>
            <strong><?php echo esc_html($current_modules); ?></strong>
        </button>

    </div>

    <div
        id="<?php echo esc_attr($switcher_unique_id); ?>-capacity"
        class="mbox-mobile-product-switcher__cloud mbox-mobile-product-switcher__cloud--capacity"
        data-mbox-mobile-panel="capacity"
    >
        <div class="mbox-mobile-product-switcher__cloud-inner mbox-mobile-product-switcher__cloud-inner--capacity">
            <?php foreach ([120, 240] as $capacity) : ?>
                <?php
                $target_product_id = $mbox_product_map[$capacity][$current_modules] ?? 0;
                $target_url = $target_product_id ? get_permalink($target_product_id) : '#';
                $is_active = ((int) $capacity === (int) $current_capacity);
                ?>
                <a
                    href="<?php echo esc_url($target_url); ?>"
                    class="mbox-mobile-product-switcher__choice mbox-mobile-product-switcher__choice--capacity <?php echo $is_active ? 'is-active' : ''; ?>"
                    <?php echo $is_active ? 'aria-current="page"' : ''; ?>
                >
                    <?php echo esc_html($capacity); ?> l
                </a>
            <?php endforeach; ?>
        </div>
    </div>

    <div
        id="<?php echo esc_attr($switcher_unique_id); ?>-modules"
        class="mbox-mobile-product-switcher__cloud mbox-mobile-product-switcher__cloud--modules"
        data-mbox-mobile-panel="modules"
    >
        <div class="mbox-mobile-product-switcher__cloud-inner mbox-mobile-product-switcher__cloud-inner--modules">
            <?php foreach ([1, 2, 3, 4, 5] as $module_count) : ?>
                <?php
                $target_product_id = $mbox_product_map[$current_capacity][$module_count] ?? 0;
                $target_url = $target_product_id ? get_permalink($target_product_id) : '#';
                $is_active = ((int) $module_count === (int) $current_modules);
                ?>
                <a
                    href="<?php echo esc_url($target_url); ?>"
                    class="mbox-mobile-product-switcher__choice mbox-mobile-product-switcher__choice--module <?php echo $is_active ? 'is-active' : ''; ?>"
                    <?php echo $is_active ? 'aria-current="page"' : ''; ?>
                >
                    <?php echo esc_html($module_count); ?>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</div>

.mbox-mobile-product-switcher,
.mbox-mobile-product-switcher * {
    box-sizing: border-box;
}

.mbox-mobile-product-switcher {
    --mbox-green: #8ABD68;
    --mbox-dark: #2D3135;
    --mbox-muted: #687064;
    --mbox-soft: #f6f7f5;
    --mbox-border: rgba(0, 0, 0, 0.08);
    --mbox-gold: #C5A059;

    display: block;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 14px;
    position: relative;
    z-index: 80;

    font-family: "Inter", system-ui, sans-serif;
    color: var(--mbox-dark);
}

/* GŁÓWNY PASEK */

.mbox-mobile-product-switcher__bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    width: 100%;
    padding: 6px;

    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 8px;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.055),
        0 2px 6px rgba(0, 0, 0, 0.025);
}

/* PRZYCISK OTWIERAJĄCY */

.mbox-mobile-product-switcher__trigger {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;

    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 6px 8px 6px 12px;

    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 8px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 7px rgba(0, 0, 0, 0.035);

    color: var(--mbox-dark);
    cursor: pointer;
    text-align: left;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.mbox-mobile-product-switcher__trigger:hover {
    border-color: rgba(138, 189, 104, 0.42);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.mbox-mobile-product-switcher__trigger[aria-expanded="true"] {
    border-color: rgba(138, 189, 104, 0.85);
    background: rgba(138, 189, 104, 0.08);

    box-shadow:
        0 8px 18px rgba(138, 189, 104, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    transform: translateY(-1px);
}

/* TEKST W PRZYCISKU */

.mbox-mobile-product-switcher__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.05;
}

.mbox-mobile-product-switcher__text small {
    display: block;
    margin: 0 0 3px;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    color: rgba(45, 49, 53, 0.42);
}

.mbox-mobile-product-switcher__text span {
    display: block;

    font-size: 13px;
    line-height: 1.05;
    font-weight: 600;

    color: var(--mbox-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AKTUALNA WARTOŚĆ W PRZYCISKU */

.mbox-mobile-product-switcher__trigger strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 52px;
    height: 32px;
    padding: 0 10px;

    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    font-family: "Oswald", "Inter", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    color: #071321;
    white-space: nowrap;
}

.mbox-mobile-product-switcher__trigger[aria-expanded="true"] strong {
    background: var(--mbox-green);
    border-color: var(--mbox-green);
    color: #ffffff;

    box-shadow:
        0 6px 14px rgba(138, 189, 104, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* PANEL ROZWIJANY — ZAMIANA CHMURKI NA CZYSTY KAFEL */

.mbox-mobile-product-switcher__cloud {
    position: absolute;
    top: calc(100% + 8px);

    padding: 8px;
    border-radius: 8px;

    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.12),
        0 4px 10px rgba(0, 0, 0, 0.045);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-6px);
    filter: none;

    transition:
        opacity 0.22s ease,
        transform 0.24s ease,
        visibility 0.22s ease;

    z-index: 120;
}

/* Usunięcie narośli/półkola */
.mbox-mobile-product-switcher__cloud::before,
.mbox-mobile-product-switcher__cloud::after {
    display: none;
    content: none;
}

.mbox-mobile-product-switcher__cloud.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

/* PANEL POJEMNOŚCI */

.mbox-mobile-product-switcher__cloud--capacity {
    left: 0;
    width: min(250px, 72vw);
    transform-origin: 0% 0%;
}

/* PANEL MODUŁÓW */

.mbox-mobile-product-switcher__cloud--modules {
    right: 0;
    width: min(100%, 430px);
    transform-origin: 100% 0%;
}

/* OTWIERANIE DO GÓRY */

.mbox-mobile-product-switcher[data-open-direction="up"] .mbox-mobile-product-switcher__cloud {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateY(6px);
}

.mbox-mobile-product-switcher[data-open-direction="up"] .mbox-mobile-product-switcher__cloud.is-open {
    transform: translateY(0);
}

/* WNĘTRZE PANELI */

.mbox-mobile-product-switcher__cloud-inner {
    display: flex;
    align-items: center;
    width: 100%;
}

.mbox-mobile-product-switcher__cloud-inner--capacity {
    justify-content: center;
    gap: 8px;
}

.mbox-mobile-product-switcher__cloud-inner--modules {
    justify-content: space-between;
    gap: 8px;
}

/* OPCJE WYBORU */

.mbox-mobile-product-switcher__choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;

    color: var(--mbox-dark);
    text-decoration: none;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.mbox-mobile-product-switcher__choice:hover {
    transform: translateY(-1px);
    border-color: rgba(138, 189, 104, 0.55);
    background: rgba(138, 189, 104, 0.06);

    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.mbox-mobile-product-switcher__choice.is-active {
    background: var(--mbox-green);
    border-color: var(--mbox-green);
    color: #ffffff;

    box-shadow:
        0 8px 16px rgba(138, 189, 104, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);

    pointer-events: none;
}

/* OPCJE POJEMNOŚCI */

.mbox-mobile-product-switcher__choice--capacity {
    min-width: 72px;
    height: 40px;
    padding: 0 14px;

    font-family: "Oswald", "Inter", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1;
    font-weight: 500;
}

/* OPCJE MODUŁÓW */

.mbox-mobile-product-switcher__choice--module {
    width: 44px;
    height: 40px;

    font-family: "Oswald", "Inter", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1;
    font-weight: 500;
}

/* MAŁE TELEFONY */

@media (max-width: 390px) {
    .mbox-mobile-product-switcher__bar {
        gap: 6px;
        padding: 5px;
    }

    .mbox-mobile-product-switcher__trigger {
        height: 46px;
        padding: 6px 7px 6px 9px;
        gap: 6px;
    }

    .mbox-mobile-product-switcher__text small {
        font-size: 8px;
    }

    .mbox-mobile-product-switcher__text span {
        font-size: 12px;
    }

    .mbox-mobile-product-switcher__trigger strong {
        min-width: 48px;
        height: 31px;
        padding: 0 8px;
        font-size: 16px;
    }

    .mbox-mobile-product-switcher__cloud--capacity {
        width: min(238px, 76vw);
    }

    .mbox-mobile-product-switcher__choice--capacity {
        min-width: 66px;
        height: 38px;
        font-size: 16px;
    }

    .mbox-mobile-product-switcher__choice--module {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .mbox-mobile-product-switcher__cloud-inner--modules {
        gap: 6px;
    }
}

(function () {
    function closeSwitcher(root) {
        var triggers = root.querySelectorAll('[data-mbox-mobile-trigger]');
        var panels = root.querySelectorAll('[data-mbox-mobile-panel]');

        triggers.forEach(function (trigger) {
            trigger.setAttribute('aria-expanded', 'false');
        });

        panels.forEach(function (panel) {
            panel.classList.remove('is-open');
        });
    }

    function initSwitcher(root) {
        if (!root || root.dataset.mboxMobileProductReady === 'true') {
            return;
        }

        root.dataset.mboxMobileProductReady = 'true';

        var triggers = root.querySelectorAll('[data-mbox-mobile-trigger]');

        triggers.forEach(function (trigger) {
            trigger.addEventListener('click', function (event) {
                event.preventDefault();

                var target = trigger.getAttribute('data-mbox-mobile-trigger');
                var panel = root.querySelector('[data-mbox-mobile-panel="' + target + '"]');

                if (!panel) {
                    return;
                }

                var alreadyOpen = panel.classList.contains('is-open');

                closeSwitcher(root);

                if (alreadyOpen) {
                    return;
                }

                var rect = root.getBoundingClientRect();
                var spaceBelow = window.innerHeight - rect.bottom;
                var neededSpace = panel.scrollHeight + 24;

                if (spaceBelow < neededSpace) {
                    root.setAttribute('data-open-direction', 'up');
                } else {
                    root.setAttribute('data-open-direction', 'down');
                }

                trigger.setAttribute('aria-expanded', 'true');
                panel.classList.add('is-open');
            });
        });
    }

    function initAll() {
        document.querySelectorAll('[data-mbox-mobile-product-switcher]').forEach(initSwitcher);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initAll);
    } else {
        initAll();
    }

    document.addEventListener('click', function (event) {
        document.querySelectorAll('[data-mbox-mobile-product-switcher]').forEach(function (root) {
            if (!root.contains(event.target)) {
                closeSwitcher(root);
            }
        });
    });

    document.addEventListener('keydown', function (event) {
        if (event.key !== 'Escape') {
            return;
        }

        document.querySelectorAll('[data-mbox-mobile-product-switcher]').forEach(closeSwitcher);
    });

    window.addEventListener('resize', function () {
        document.querySelectorAll('[data-mbox-mobile-product-switcher]').forEach(closeSwitcher);
    });
})();