@await Html.PartialAsync("PagesView/Canvass/_CanvassStyles")
@await Html.PartialAsync("PagesView/Canvass/_CanvassHelpers")

<div class="canvass-wrapper">

  @*   {{-- HEADER --}} *@
    <div class="cv-header">
        <div class="cv-header-inner">
            <i class="fas fa-file-invoice cv-header-icon"></i>
            <div>
                <h1>Canvass Management</h1>
                <p>Manage purchase canvass requests by supplier, status, and comparison</p>
            </div>
        </div>
    </div>

  @*   {{-- TAB NAV --}}
    {{-- data-tab-id matches the ViewComponent switch:
    1=ForTagging, 2=ForCanvass, 3=ForApproval, 4=Completed --}} *@
    <div class="cv-tabs" role="tablist">
        <button class="cv-tab-btn active" data-tab-id="1" role="tab">
            <i class="fas fa-user-tag"></i> For Tagging
        </button>
        <button class="cv-tab-btn" data-tab-id="2" role="tab">
            <i class="fas fa-store"></i> For Canvass
        </button>
        <button class="cv-tab-btn" data-tab-id="3" role="tab">
            <i class="fas fa-clock"></i> For Approval
        </button>
        <button class="cv-tab-btn" data-tab-id="4" role="tab">
            <i class="fas fa-check-circle"></i> Completed
        </button>
    </div>

   @*  {{-- DYNAMIC TAB CONTENT — loaded via AJAX --}} *@
    <div id="cv-tab-content">
        <div class="cv-tab-loading">
            <div class="cv-spinner"></div>
            <span>Loading…</span>
        </div>
    </div>

</div>

<input hidden id="supplierId" />
@await Html.PartialAsync("PagesView/Canvass/_CanvassScript")
<script>
    (function () {
        "use strict";

        const tabContent = document.getElementById("cv-tab-content");
        const tabBtns    = document.querySelectorAll(".cv-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="cv-tab-loading">
                <div class="cv-spinner"></div><span>Loading…</span></div>`;

            try {
                const res = await fetch(`/CanvassMgmt/GetCanvassingTabPage?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="cv-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");
                // Copy attributes (type, src, etc.) if any
                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>