document.addEventListener("DOMContentLoaded", () => {
    const tabButtons = document.querySelectorAll(".sport-plugin-tab-btn");
    const tabPanels = document.querySelectorAll(".sport-plugin-tab-panel");

    // Get the active tab from the URL parameters (default to tab1)
    const urlParams = new URLSearchParams(window.location.search);
    const activeTab = urlParams.get('tab') || 'sport-plugin-tab1';

    // Set the active tab from the URL
    document.querySelector(`#${activeTab}`).classList.add("active");
    document.querySelector(`[data-tab="${activeTab}"]`).classList.add("active");

    tabButtons.forEach(button => {
        button.addEventListener("click", () => {
            // Remove active class from all buttons and panels
            tabButtons.forEach(btn => btn.classList.remove("active"));
            tabPanels.forEach(panel => panel.classList.remove("active"));

            // Add active class to clicked button and corresponding panel
            button.classList.add("active");
            const tabId = button.getAttribute("data-tab");
            document.getElementById(tabId).classList.add("active");

            // Update the URL parameter for the active tab
            const newUrl = new URL(window.location);
            newUrl.searchParams.set('tab', tabId);
            window.history.pushState({}, '', newUrl);
        });
    });
});