NonInventPurchasingSystem/CPRNIMS.WebApps/wwwroot/JsFunctions/Inventory/InventoryTabs.js

(function () {
    'use strict';

    const tabConfig = {
        'Inventory-inv-per-supplier': {
            title: 'inv Per (Supplier)',
            tableId: 1,
            endpoint: '/InventoryMgmt/GetTabbedById'
        },
        'Inventory-inv-per-item': {
            title: 'inv Per (Item)',
            tableId: 2,
            endpoint: '/InventoryMgmt/GetTabbedById'
        },
        'Inventory-suppliers': {
            title: 'Supplier Management',
            tableId: 3,
            endpoint: '/InventoryMgmt/GetTabbedById'
        }
    };

    let currentTab = 'Inventory-inv-per-supplier';
    let isSwitching = false;

    function init() {
        const tabs = document.querySelectorAll('.Inventory-tab-btn');
        tabs.forEach(tab => {
            tab.addEventListener('click', handleTabClick);
        });

        loadTabContent('Inventory-inv-per-supplier');
    }

    function handleTabClick(e) {
        if (isSwitching) return;

        const btn = e.currentTarget;
        const tabId = btn.getAttribute('data-tab');

        if (tabId === currentTab) return;

        switchTab(tabId, btn);
    }

    function switchTab(tabId, btn) {
        if (!tabConfig[tabId]) {
            console.error('Invalid tab ID:', tabId);
            return;
        }

        isSwitching = true;

        document.querySelectorAll('.Inventory-tab-btn').forEach(b => {
            b.classList.remove('active');
        });
        btn.classList.add('active');

        updateTitle(tabConfig[tabId].title);

        loadTabContent(tabId, btn);

        currentTab = tabId;
    }

    function updateTitle(title) {
        const titleEl = document.getElementById('pageTitle');
        if (!titleEl) return;

        titleEl.classList.add('updating');

        setTimeout(() => {
            titleEl.textContent = title;

            void titleEl.offsetWidth;

            titleEl.classList.remove('updating');
        }, 250);
    }

    function loadTabContent(tabId, btn = null) {
        const config = tabConfig[tabId];
        if (!config) {
            console.error('Tab config not found:', tabId);
            isSwitching = false;
            return;
        }

        if (btn) {
            btn.classList.add('loading');
        }
        showContainerLoading(true);

        InventoryTabbedComponent(config.tableId, config.endpoint, function (success) {
            if (btn) {
                btn.classList.remove('loading');
            }
            showContainerLoading(false);
            isSwitching = false;

            if (!success) {
                console.error('Failed to load tab content');
            }
        });
    }

    function showContainerLoading(isLoading) {
        const container = document.getElementById('TabbedContainer');
        if (!container) return;

        if (isLoading) {
            container.style.opacity = '0.5';
            container.style.pointerEvents = 'none';
        } else {
            container.style.opacity = '1';
            container.style.pointerEvents = 'auto';
        }
    }

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

    window.PRTabs = {
        switchTo: function (tabId) {
            const btn = document.querySelector(`.Inventory-tab-btn[data-tab="${tabId}"]`);
            if (btn && !isSwitching) {
                switchTab(tabId, btn);
            }
        },
        reload: function () {
            loadTabContent(currentTab);
        },
        getCurrent: function () {
            return currentTab;
        },
        addTab: function (tabId, config) {
            tabConfig[tabId] = config;
        }
    };

})();

function InventoryTabbedComponent(id, endpoint, callback) {
    $.ajax({
        url: endpoint,
        type: 'GET',
        data: { TableId: id },
        success: function (response) {
            $('#TabbedContainer').html(response);
            
            if (callback) callback(true);
        },
        error: function (xhr, status, error) {
            console.error("Error loading component:", error);
            $('#TabbedContainer').html('<div class="alert alert-danger">Failed to load content. Please try again.</div>');
            if (callback) callback(false);
        }
    });
}