NonInventPurchasingSystem/CPRNIMS.WebApps/Views/Components/CanvassMgmt/CanvassingTabPage/ForCanvass.cshtml

@* {{-- FILTER BAR --}} *@
<div class="cv-filters">
    <div class="cv-search-box">
        <i class="fas fa-hashtag"></i>
        <input type="text" id="fc-srchItemNo" placeholder="Item Number..." />
    </div>
    <div class="cv-search-box">
        <i class="fas fa-box"></i>
        <input type="text" id="fc-srchItemName" placeholder="Item Name..." />
    </div>
    <div class="cv-search-box">
        <i class="fas fa-file-alt"></i>
        <input type="text" id="fc-srchPRNo" placeholder="PR Number..." />
    </div>

@*     {{-- Supplier dropdown --}} *@
    <div class="cv-supplier-wrap" id="fc-supplierWrap">
        <div class="cv-sup-trigger">
            <span class="cv-sup-left">
                <i class="fas fa-store"></i>
                <span class="cv-sup-lbl">All Suppliers</span>
            </span>
            <i class="fas fa-chevron-down cv-sup-caret"></i>
        </div>
        <div class="cv-sup-dropdown">
            <div class="cv-sup-searchbox">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="Search supplier..." autocomplete="off" />
            </div>
            <div class="cv-sup-list">
                <div class="cv-sup-opt active" data-value="">
                    <i class="fas fa-th-large"></i> All Suppliers
                </div>
            </div>
        </div>
    </div>

    <div class="cv-filter-right">
        <span class="cv-pgsz-lbl">Show</span>
        <select class="cv-pgsz-sel" id="fc-pageSize">
            <option value="6">6 per page</option>
            <option value="12" selected>12 per page</option>
            <option value="24">24 per page</option>
            <option value="48">48 per page</option>
        </select>
        <span class="cv-result-count" id="fc-resultCount">0 results</span>
    </div>
</div>

@* {{-- CARD GRID --}} *@
<div class="cv-grid" id="fc-grid">
    <div class="cv-state" style="grid-column:1/-1">
        <div class="cv-spinner"></div><p>Loading…</p>
    </div>
</div>

@* {{-- PAGINATION --}} *@
<div class="cv-pagination">
    <span class="cv-pg-info" id="fc-pageInfo"></span>
    <div class="cv-pg-btns" id="fc-pageButtons"></div>
</div>

<script>
(function () {
    "use strict";
    const H = window.CanvassHelpers;

    const s = { page: 1, pageSize: 12, totalCount: 0, supplier: "", searchPR: "", searchItem: "", searchName: "", timer: null };

    const grid     = document.getElementById("fc-grid");
    const countEl  = document.getElementById("fc-resultCount");
    const pageInfo = document.getElementById("fc-pageInfo");
    const pageBtns = document.getElementById("fc-pageButtons");
    const inItemNo = document.getElementById("fc-srchItemNo");
    const inName   = document.getElementById("fc-srchItemName");
    const inPR     = document.getElementById("fc-srchPRNo");
    const inSize   = document.getElementById("fc-pageSize");

    const sup = H.initSupplierDropdown(
        document.getElementById("fc-supplierWrap"),
        val => { s.supplier = val; s.page = 1; fetchData(); }
    );

    [inItemNo, inName, inPR].forEach(el =>
        el.addEventListener("input", () => {
            clearTimeout(s.timer);
            s.timer = setTimeout(() => {
                s.searchItem = inItemNo.value.trim();
                s.searchName = inName.value.trim();
                s.searchPR   = inPR.value.trim();
                s.page = 1; fetchData();
            }, 350);
        })
    );
    inSize.addEventListener("change", () => { s.pageSize = parseInt(inSize.value,10); s.page=1; fetchData(); });

    async function fetchData() {
        grid.innerHTML = `<div class="cv-state" style="grid-column:1/-1"><div class="cv-spinner"></div><p>Loading…</p></div>`;
        const p = new URLSearchParams({ searchPRNo: s.searchPR, searchItemNo: s.searchItem, searchItemName: s.searchName, searchSupplier: s.supplier, pageNumber: s.page, pageSize: s.pageSize, draw: Date.now() });
        try {
            const res  = await fetch(`/CanvassMgmt/GetCanvassPerSupplier?${p}`);
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            const json = await res.json();
            s.totalCount = json.recordsTotal ?? 0;

            sup.setItems(json.supplierList);

            renderCards(json.data ?? []);
            H.renderPagination(pageBtns, pageInfo, s, pg => { s.page=pg; fetchData(); });
            countEl.textContent = `${s.totalCount.toLocaleString()} result${s.totalCount !== 1 ? "s" : ""}`;
        } catch (err) {
            console.error(err);
            grid.innerHTML = `<div class="cv-state" style="grid-column:1/-1"><i class="fas fa-exclamation-triangle" style="color:#ff5c5c"></i><p>Failed to load data.</p></div>`;
        }
    }

    function renderCards(data) {
        if (!data.length) {
            grid.innerHTML = `<div class="cv-state" style="grid-column:1/-1"><i class="fas fa-inbox"></i><p>No records found.</p></div>`;
            return;
        }
                    //  <button class="cv-btn cv-btn-primary btn-canvass" data-id="${i.supplierId}">
                    //     <i class="fas fa-eye"></i> View Canvass
                    // </button>
        grid.innerHTML = data.map(item =>
            H.buildCardHtml(item, i => `
       
                <button class="cv-btn cv-btn-outline btn-email" data-id="${i.supplierId}">
                    <i class="fas fa-paper-plane"></i> Send Email
                </button>`)
        ).join("");

        grid.querySelectorAll(".btn-canvass").forEach(b =>
            b.addEventListener("click", () => openCanvass(b.dataset.id)));
        grid.querySelectorAll(".btn-email").forEach(b =>
            b.addEventListener("click", () => sendEmail(b.dataset.id)));
    }

    function openCanvass(id) {
        document.getElementById("supplierId").value = id;
        // e.g. $('#canvassModal').modal('show');
        console.log("Open canvass:", id);
    }
    function sendEmail(id) {
        console.log("Send email:", id);
    }

    fetchData();
})();
</script>