{{-- Shared tab navigation + persistence for staff model forms --}}
<script>
    (function () {
        document.querySelectorAll('form[data-tabbed-form]').forEach(function (form) {
            var tabs   = Array.prototype.slice.call(form.querySelectorAll('[data-tab-btn]'));
            var panels = Array.prototype.slice.call(form.querySelectorAll('[data-tab-panel]'));
            var hidden = form.querySelector('[data-active-tab]');
            var key    = form.getAttribute('data-storage-key') || 'staff-tabbed-form';
            if (!tabs.length || !panels.length) return;

            var ids = tabs.map(function (b) { return b.getAttribute('data-tab-btn'); });

            function activate(name, opts) {
                opts = opts || {};
                if (ids.indexOf(name) === -1) name = ids[0];
                tabs.forEach(function (b) {
                    var on = b.getAttribute('data-tab-btn') === name;
                    b.classList.toggle('staff-tab-active', on);
                    b.setAttribute('aria-selected', on ? 'true' : 'false');
                });
                panels.forEach(function (p) {
                    p.classList.toggle('hidden', p.getAttribute('data-tab-panel') !== name);
                });
                if (hidden) hidden.value = name;
                try { sessionStorage.setItem(key, name); } catch (e) {}
                if (opts.scroll !== false) {
                    var anchor = form.closest('section') || form;
                    if (anchor && typeof anchor.scrollIntoView === 'function') {
                        anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                }
                refreshNav(name);
            }

            function refreshNav(name) {
                var idx = ids.indexOf(name);
                form.querySelectorAll('[data-form-nav="prev"]').forEach(function (b) { b.disabled = (idx <= 0); });
                form.querySelectorAll('[data-form-nav="next"]').forEach(function (b) { b.disabled = (idx >= ids.length - 1); });
            }

            tabs.forEach(function (b) {
                b.addEventListener('click', function () { activate(b.getAttribute('data-tab-btn')); });
            });

            form.querySelectorAll('[data-form-nav]').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var dir = btn.getAttribute('data-form-nav');
                    var current = hidden ? hidden.value : ids[0];
                    var idx = ids.indexOf(current);
                    if (dir === 'next' && idx < ids.length - 1) activate(ids[idx + 1]);
                    else if (dir === 'prev' && idx > 0) activate(ids[idx - 1]);
                });
            });

            var initial = null;

            // 1. If validation errors came back, jump to the first tab containing an invalid field.
            try {
                var raw = form.getAttribute('data-error-fields');
                var errFields = raw ? JSON.parse(raw) : [];
                if (errFields && errFields.length) {
                    for (var i = 0; i < panels.length; i++) {
                        var p = panels[i];
                        var match = errFields.some(function (f) {
                            return p.querySelector('[name="' + f + '"], [name^="' + f + '["]');
                        });
                        if (match) { initial = p.getAttribute('data-tab-panel'); break; }
                    }
                }
            } catch (e) {}

            // 2. Otherwise restore last active tab from this browser session.
            if (!initial) {
                try { initial = sessionStorage.getItem(key); } catch (e) {}
            }

            // 3. Fallback to the first tab.
            activate(initial || ids[0], { scroll: false });
        });
    })();
</script>