<script>
// Función para copiar el contenido y actualizar el dummy
function actualizarDummy(tabContainer) {
    const tabPanes = tabContainer.querySelectorAll('.fb-tabs-four__pane');
    const dummyHeader = tabContainer.querySelector('.fb-tabs-four__header--dummy');

    // Observador de mutación para detectar cambios en las clases
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.target.classList.contains('brx-open')) {
                const tabHeader = mutation.target.querySelector('.fb-tabs-four__header');

                if (tabHeader && dummyHeader) {
                    // Clonar el contenido
                    const clonedContent = tabHeader.cloneNode(true);

                    // Agregar la clase 'fb-next' al dummy antes de pegar el contenido
                    dummyHeader.classList.add('fb-next');

                    // Eliminar el contenido actual del dummy después de 0.3 segundos
                    setTimeout(() => {
                        dummyHeader.innerHTML = '';

                        // Agregar el contenido clonado al dummy
                        dummyHeader.appendChild(clonedContent);

                        // Eliminar la clase 'fb-next' después de un breve retraso (0.5 segundos)
                        setTimeout(() => {
                            dummyHeader.classList.remove('fb-next');
                        }, 200);
                    }, 50);
                }
            }
        });
    });

    // Observar cambios en los paneles
    tabPanes.forEach(tabPane => {
        observer.observe(tabPane, { attributes: true, attributeFilter: ['class'] });
    });
}

// Llamar a la función cuando la página se cargue para cada contenedor
const tabContainers = document.querySelectorAll('.fb-tabs-four');
tabContainers.forEach(tabContainer => {
    window.addEventListener('load', () => {
        actualizarDummy(tabContainer);
    });

    // Llamar a la función una vez al cargar la página
    actualizarDummy(tabContainer);
});

</script>

<script>
// Obtener todos los conjuntos de elementos fb-a11y-tab
const tabSets = document.querySelectorAll('.fb-tabs-four');

// Recorrer cada conjunto de elementos fb-a11y-tab
tabSets.forEach((tabSet) => {
  // Obtener el encabezado y las pestañas del conjunto actual
  const header = tabSet.querySelector('.fb-tabs-four__tab-menu');
  const tabs = tabSet.querySelectorAll('.fb-tabs-four__title');
  const contents = tabSet.querySelectorAll('.fb-tabs-four__pane');

  // Agregar el evento de clic a cada elemento de pestaña del conjunto actual
  
  // Agregar el evento a cada elemento de pestaña del conjunto actual
  
  tabs.forEach((tab, tabIndex) => {
    /*
    tab.addEventListener('mouseover', () => {
      activateTab(tabIndex);
    });
    */
    
    tab.addEventListener('click', () => {
      activateTab(tabIndex);
    });
    
    tab.addEventListener('focus', () => {
      header.addEventListener('keydown', handleTabNavigation);
    });
    tab.setAttribute('aria-controls', `tabpanel-${tabIndex + 1}`);
  });

  // Agregar el evento de enfoque al encabezado del conjunto actual
  header.addEventListener('focus', () => {
    header.addEventListener('keydown', handleTabNavigation);
  });

  // Agregar el evento de enfoque a cada elemento de pestaña del conjunto actual
  tabs.forEach((tab) => {
    tab.addEventListener('focus', () => {
      header.addEventListener('keydown', handleTabNavigation);
    });
  });

  // Agregar el evento de teclado para detectar las teclas "next" y "prev" del conjunto actual
  function handleTabNavigation(event) {
    const activeTabIndex = Array.from(tabs).findIndex((tab) => tab.classList.contains('brx-open'));
    const numTabs = tabs.length;

    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
      event.preventDefault();
      const offset = event.key === 'ArrowDown' ? 1 : -1;
      const nextTabIndex = (activeTabIndex + offset + numTabs) % numTabs;
      activateTab(nextTabIndex);
    } else if (event.key === 'Home') {
      event.preventDefault();
      activateTab(0);
    } else if (event.key === 'End') {
      event.preventDefault();
      activateTab(numTabs - 1);
    } else if (event.key === 'Tab' && !event.shiftKey && activeTabIndex !== -1) {
      const activeContent = tabSet.querySelector('.fb-a11y-tab__content.brx-open');
      if (activeContent) {
        activeContent.focus();
        event.preventDefault();
      }
    }
  }

  // Función para activar una pestaña específica del conjunto actual
  function activateTab(tabIndex) {
    tabs.forEach((tab, index) => {
      const isActive = index === tabIndex;
      tab.classList.toggle('brx-open', isActive);
      tab.setAttribute('aria-selected', isActive);
      
      tab.removeAttribute('tabindex');
      if (isActive) {
        tab.focus();
      } else {
       tab.setAttribute('tabindex', '-1');
      }
    });

    contents.forEach((content, index) => {
      const isActive = index === tabIndex;
      content.classList.toggle('brx-open', isActive);
      if (isActive) {
        content.setAttribute('aria-labelledby', `tab-${tabIndex + 1}`);
      }
    });
  }

  // Activar la primera pestaña y contenido del conjunto actual
  activateTab(0);
});
  
  
// Obtener todos los elementos con la clase "fb-a11y-tab__item"
var elements = document.getElementsByClassName("fb-a11y-tab__item");

// Recorrer los elementos y borrar el enfoque
for (var i = 0; i < elements.length; i++) {
  elements[i].blur();
}

</script>