@await Html.PartialAsync("PagesView/Inventory/_InventoryStyles")
@await Html.PartialAsync("PagesView/Inventory/_InventoryHelpers")

<div class="inventory-wrapper">
@*   {{-- HEADER --}} *@
<div class="inv-header">
    <div class="inv-header-inner">
        <i class="fas fa-file-invoice inv-header-icon"></i>
        <div>
            <h1>Inventory Management</h1>
            <p>Manage inventory transaction, status, and comparison</p>
        </div>
    </div>
</div>
    @*   {{-- TAB NAV --}}
    {{-- data-tab-id matches the ViewComponent switch:*@
    <div class="inv-tabs" role="tablist">
        <button class="inv-tab-btn active" data-tab-id="1" role="tab">
            <i class="fas fa-user-tag"></i> Inventory
        </button>
        <button class="inv-tab-btn" data-tab-id="2" role="tab">
            <i class="fas fa-file-export"></i>RIS
            </button>
        <button class="inv-tab-btn" data-tab-id="3" role="tab">
            <i class="fas fa-store"></i> MRS
        </button>
        <button class="inv-tab-btn" data-tab-id="4" role="tab">
            <i class="fa-solid fa-list-check"></i> Inventory Reports
        </button>
        <button class="inv-tab-btn" data-tab-id="5" role="tab">
            <i class="fa-solid fa-file-export"></i> RIS Reports
        </button>
        <button class="inv-tab-btn" data-tab-id="6" role="tab">
            <i class="fa-solid fa-arrow-rotate-left"></i> MRS Reports
        </button>
    </div>

<div id="inv-tab-content">
    <div class="inv-tab-loading">
        <div class="inv-spinner"></div>
        <span>Loading…</span>
    </div>
</div>
</div>
<script>
    (function () {
        "use strict";
         // ── Prevent re-initialization on cache restore ──
        if (window.__invTab1Initialized) return;
        window.__invTab1Initialized = true;

        const tabContent = document.getElementById("inv-tab-content");
        const tabBtns    = document.querySelectorAll(".inv-tab-btn");

        // Cache stores the raw HTML string per tab id
        const cache = {};
        let activeTabId = null;

        async function loadTab(tabId) {
            if (activeTabId === tabId) return;
            activeTabId = tabId;

            // Mark active button
            tabBtns.forEach(b => b.classList.toggle("active", b.dataset.tabId === String(tabId)));

            if (cache[tabId]) {
                // ── FIX: inject cached HTML then re-run its <script> blocks ──────
                injectHtml(tabContent, cache[tabId]);
                return;
            }

            tabContent.innerHTML = `<div class="inv-tab-loading">
                <div class="inv-spinner"></div><span>Loading…</span></div>`;

            try {
                const res = await fetch(`/InventoryMgmt/GetInventoryTabPage?id=${tabId}`);
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                const html = await res.text();
                cache[tabId] = html;
                injectHtml(tabContent, html);
          
            } catch (err) {
                console.error("Tab load error:", err);
                tabContent.innerHTML = `
                    <div class="inv-placeholder">
                        <i class="fas fa-exclamation-triangle" style="color:#ff5c5c"></i>
                        <h3>Failed to load</h3>
                        <p>Please try again or refresh the page.</p>
                    </div>`;
            }
        }

        /**
         * Set innerHTML then re-execute every <script> block so IIFEs inside
         * ViewComponent views fire correctly — both on first load AND cache restore.
         */
           function injectHtml(container, html) {
        container.innerHTML = html;
        container.querySelectorAll("script").forEach(oldScript => {
            const newScript = document.createElement("script");
            Array.from(oldScript.attributes).forEach(attr =>
                newScript.setAttribute(attr.name, attr.value));
            newScript.textContent = oldScript.textContent;
            oldScript.replaceWith(newScript);
        });
    }

        // Wire tab clicks
        tabBtns.forEach(btn =>
            btn.addEventListener("click", () => loadTab(parseInt(btn.dataset.tabId, 10)))
        );

        // Auto-load the first tab on page ready
        loadTab(1);
    })();
</script>
@await Html.PartialAsync("PagesView/Inventory/_InventoryTransactModal")