@* ── FILTER BAR ── *@
<div class="inv-filters">
    <div class="inv-search-box">
        <i class="fas fa-hashtag"></i>
        <input type="text" id="ris-srchRISNo" placeholder="RIS Number..." />
    </div>
    <div class="inv-search-box">
        <i class="fas fa-box"></i>
        <input type="text" id="ris-srchItemName" placeholder="Item Name..." />
    </div>
    <div class="inv-search-box">
        <i class="fas fa-user"></i>
        <input type="text" id="ris-srchIssuedTo" placeholder="Issued To..." />
    </div>

    @* ── Discipline dropdown ── *@
    <div class="inv-department-wrap" id="ris-disciplineWrap">
        <div class="inv-dep-trigger">
            <span class="inv-dep-left">
                <i class="fas fa-tools"></i>
                <span class="inv-dep-lbl">All Disciplines</span>
            </span>
            <i class="fas fa-chevron-down inv-dep-caret"></i>
        </div>
        <div class="inv-dep-dropdown">
            <div class="inv-dep-searchbox">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="Search discipline..." autocomplete="off" />
            </div>
            <div class="inv-dep-list">
                <div class="inv-dep-opt active" data-value="">
                    <i class="fas fa-th-large"></i> All Disciplines
                </div>
            </div>
        </div>
    </div>

    @* ── Status filter ── *@
    <div class="inv-department-wrap" id="ris-statusWrap" style="max-width:160px">
        <div class="inv-dep-trigger">
            <span class="inv-dep-left">
                <i class="fas fa-circle-dot"></i>
                <span class="inv-dep-lbl">All Status</span>
            </span>
            <i class="fas fa-chevron-down inv-dep-caret"></i>
        </div>
        <div class="inv-dep-dropdown">
            <div class="inv-dep-searchbox">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="Search status..." autocomplete="off" />
            </div>
            <div class="inv-dep-list">
                <div class="inv-dep-opt active" data-value="">
                    <i class="fas fa-th-large"></i> All Status
                </div>
            </div>
        </div>
    </div>

    <div class="inv-filter-right">
        <span class="inv-pgsz-lbl">Show</span>
        <select class="inv-pgsz-sel" id="ris-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="inv-result-count" id="ris-resultCount">0 results</span>
    </div>
</div>

@* ── CARD GRID ── *@
<div class="ris-grid" id="ris-grid">
    <div class="inv-state">
        <div class="inv-spinner"></div>
        <p>Loading…</p>
    </div>
</div>

@* ── PAGINATION ── *@
<div class="inv-pagination">
    <span class="inv-pg-info" id="ris-pageInfo"></span>
    <div class="inv-pg-btns" id="ris-pageButtons"></div>
</div>

@* ── APPROVE CONFIRMATION MODAL ── *@
<div id="ris-approve-modal-overlay" style="display:none;position:fixed;inset:0;
     z-index:1080;background:rgba(0,0,0,.45);
     display:none;align-items:center;justify-content:center;padding:16px">
    <div style="background:var(--card-bg,#fff);border-radius:14px;
                border:1px solid var(--border,#d6eaec);width:100%;max-width:440px;
                overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2)">
        <div style="background:linear-gradient(135deg,#0d5c63,#0e7c86);
                    padding:16px 18px;display:flex;align-items:center;gap:12px">
            <div style="width:38px;height:38px;border-radius:10px;
                        background:rgba(255,255,255,.15);
                        display:flex;align-items:center;justify-content:center">
                <i class="fas fa-check-circle" style="color:#fff;font-size:16px"></i>
            </div>
            <div>
                <div style="font-size:14px;font-weight:600;color:#fff">Approve RIS</div>
                <div id="ris-approve-subtitle"
                     style="font-size:11px;color:rgba(255,255,255,.65);margin-top:2px">
                    Loading…
                </div>
            </div>
        </div>
        <div style="padding:20px 18px">
            <div id="ris-approve-detail"
                 style="background:var(--teal-pale,#e6f7f8);border:1px solid var(--border,#d6eaec);
                        border-radius:10px;padding:14px 16px;margin-bottom:16px;
                        display:grid;grid-template-columns:1fr 1fr;gap:10px">
            </div>
            <p style="font-size:13px;color:var(--text-dark,#1a2e35);line-height:1.6">
                Approving this slip will confirm the issuance and update the inventory.
                <strong>This action cannot be undone.</strong>
            </p>
        </div>
        <div style="padding:12px 18px;border-top:1px solid var(--border,#d6eaec);
                    background:var(--bg-page,#f0f6f7);
                    display:flex;align-items:center;justify-content:flex-end;gap:8px">
            <button id="ris-approve-cancel-btn" class="tm-btn-cancel">Cancel</button>
            <button id="ris-approve-confirm-btn"
                    style="padding:8px 20px;border-radius:8px;border:none;
                           background:#0e7c86;color:#fff;font-family:'DM Sans',sans-serif;
                           font-size:.85rem;font-weight:600;cursor:pointer;
                           display:flex;align-items:center;gap:7px">
                <i class="fas fa-check"></i> Approve RIS
            </button>
        </div>
    </div>
</div>

@* ── CANCEL CONFIRMATION MODAL ── *@
<div id="ris-cancel-modal-overlay" style="display:none;position:fixed;inset:0;
     z-index:1080;background:rgba(0,0,0,.45);
     display:none;align-items:center;justify-content:center;padding:16px">
    <div style="background:var(--card-bg,#fff);border-radius:14px;
                border:1px solid var(--border,#d6eaec);width:100%;max-width:440px;
                overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2)">
        <div style="background:linear-gradient(135deg,#7f1d1d,#b91c1c);
                    padding:16px 18px;display:flex;align-items:center;gap:12px">
            <div style="width:38px;height:38px;border-radius:10px;
                        background:rgba(255,255,255,.15);
                        display:flex;align-items:center;justify-content:center">
                <i class="fas fa-ban" style="color:#fff;font-size:16px"></i>
            </div>
            <div>
                <div style="font-size:14px;font-weight:600;color:#fff">Cancel RIS</div>
                <div id="ris-cancel-subtitle"
                     style="font-size:11px;color:rgba(255,255,255,.65);margin-top:2px">
                    Loading…
                </div>
            </div>
        </div>
        <div style="padding:20px 18px">
            <div id="ris-cancel-detail"
                 style="background:#fef2f2;border:1px solid #fecaca;
                        border-radius:10px;padding:14px 16px;margin-bottom:16px;
                        display:grid;grid-template-columns:1fr 1fr;gap:10px">
            </div>
            <div style="display:flex;gap:8px;padding:10px 12px;background:#fef2f2;
                        border:1px solid #fecaca;border-radius:8px;margin-bottom:12px">
                <i class="fas fa-exclamation-triangle"
                   style="color:#dc2626;flex-shrink:0;margin-top:2px"></i>
                <p style="font-size:12px;color:#7f1d1d;line-height:1.6;margin:0">
                    Cancelling this slip will <strong>reverse the inventory deduction</strong>
                    and restore the qty back to on-hand. This cannot be undone.
                </p>
            </div>
            <div class="tm-form-group">
                <label class="tm-label">
                    <i class="fas fa-sticky-note"></i> Reason for cancellation
                    <span class="tm-req">*</span>
                </label>
                <input id="ris-cancel-reason" class="tm-input"
                       type="text" placeholder="Enter reason…" maxlength="500">
            </div>
        </div>
        <div style="padding:12px 18px;border-top:1px solid var(--border,#d6eaec);
                    background:var(--bg-page,#f0f6f7);
                    display:flex;align-items:center;justify-content:flex-end;gap:8px">
            <button id="ris-cancel-dismiss-btn" class="tm-btn-cancel">Dismiss</button>
            <button id="ris-cancel-confirm-btn"
                    style="padding:8px 20px;border-radius:8px;border:none;
                           background:#dc2626;color:#fff;font-family:'DM Sans',sans-serif;
                           font-size:.85rem;font-weight:600;cursor:pointer;
                           display:flex;align-items:center;gap:7px">
                <i class="fas fa-ban"></i> Cancel RIS
            </button>
        </div>
    </div>
</div>

<style>
    /* ── RIS card grid ── */
    .ris-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 16px;
        min-height: 220px;
    }

    @@media (max-width: 768px) {
        .ris-grid {
            grid-template-columns: 1fr;
        }
    }

    @@media (min-width: 769px) and (max-width: 1100px) {
        .ris-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* ── RIS card ── */
    .ris-card {
        background: var(--card-bg, #fff);
        border-radius: var(--radius-lg, 14px);
        box-shadow: var(--shadow-card);
        border: 1px solid var(--border, #d6eaec);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: box-shadow .25s, transform .25s;
    }

        .ris-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-2px);
        }

    /* ── Card header ── */
    .ris-card-hd {
        background: linear-gradient(135deg, var(--teal-dark, #0d5c63), var(--teal-mid, #0e7c86));
        padding: 14px 16px 12px;
        position: relative;
    }

    .ris-card-no {
        font-size: .7rem;
        color: rgba(255,255,255,.6);
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .ris-card-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.25;
        word-break: break-word;
        margin-bottom: 6px;
    }

    .ris-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 11px;
        color: rgba(255,255,255,.65);
    }

        .ris-card-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

    /* ── Status badge positioned top-right ── */
    .ris-status-badge {
        position: absolute;
        top: 12px;
        right: 14px;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 50px;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .ris-status-draft {
        background: rgba(255,255,255,.18);
        color: #fff;
    }

    .ris-status-approved {
        background: #dcfce7;
        color: #166534;
    }

    .ris-status-cancelled {
        background: #fee2e2;
        color: #991b1b;
    }

    /* ── Stats row ── */
    .ris-stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--border, #d6eaec);
        border-bottom: 1px solid var(--border, #d6eaec);
    }

    .ris-stat {
        background: var(--card-bg, #fff);
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ris-stat-lbl {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-muted, #6b8890);
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .ris-stat-lbl i {
            font-size: 11px;
        }

    .ris-stat-val {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-dark, #1a2e35);
        line-height: 1.2;
    }

        .ris-stat-val.teal {
            color: var(--teal-mid, #0e7c86);
        }

        .ris-stat-val.red {
            color: #dc2626;
        }

        .ris-stat-val.amber {
            color: #92400e;
        }

    /* ── Body ── */
    .ris-card-body {
        padding: 12px 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ris-field-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 12px;
    }

    .ris-field-lbl {
        min-width: 80px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-muted, #6b8890);
        padding-top: 1px;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

        .ris-field-lbl i {
            font-size: 11px;
        }

    .ris-field-val {
        color: var(--text-dark, #1a2e35);
        line-height: 1.5;
        word-break: break-word;
    }

    /* ── Discipline chip ── */
    .ris-discipline-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 600;
        background: var(--teal-pale, #e6f7f8);
        color: var(--teal-dark, #0d5c63);
        border: 1px solid var(--border, #d6eaec);
    }

    /* ── Footer ── */
    .ris-card-ft {
        padding: 10px 16px 14px;
        display: flex;
        gap: 8px;
        border-top: 1px solid var(--border, #d6eaec);
    }

    .ris-btn {
        flex: 1;
        padding: 8px 12px;
        border-radius: var(--radius-sm, 8px);
        border: none;
        cursor: pointer;
        font-family: 'DM Sans', sans-serif;
        font-size: .82rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all .2s;
    }

    .ris-btn-approve {
        background: var(--teal-mid, #0e7c86);
        color: #fff;
    }

        .ris-btn-approve:hover {
            background: var(--teal-dark, #0d5c63);
        }

        .ris-btn-approve:disabled {
            opacity: .4;
            cursor: default;
        }

    .ris-btn-cancel {
        background: transparent;
        color: #dc2626;
        border: 1.5px solid #fca5a5;
    }

        .ris-btn-cancel:hover {
            background: #fef2f2;
            border-color: #dc2626;
        }

        .ris-btn-cancel:disabled {
            opacity: .4;
            cursor: default;
        }

    /* ── Approve modal detail field ── */
    .am-field {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .am-lbl {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-muted, #6b8890);
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .am-lbl i {
            font-size: 11px;
        }

    .am-val {
        font-size: 13px;
        font-weight: 600;
        color: var(--teal-dark, #0d5c63);
    }
</style>

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

        // ── State ──────────────────────────────────────────────────────────────
        const s = {
            page: 1, pageSize: 12, totalCount: 0,
            searchRISNo: "", searchItemName: "", searchIssuedTo: "",
            discipline: "", status: "",
            timer: null
        };

        // ── Elements ───────────────────────────────────────────────────────────
        const grid       = document.getElementById("ris-grid");
        const countEl    = document.getElementById("ris-resultCount");
        const pageInfo   = document.getElementById("ris-pageInfo");
        const pageBtns   = document.getElementById("ris-pageButtons");
        const inRISNo    = document.getElementById("ris-srchRISNo");
        const inItem     = document.getElementById("ris-srchItemName");
        const inIssued   = document.getElementById("ris-srchIssuedTo");
        const inSize     = document.getElementById("ris-pageSize");

        const discWrap   = document.getElementById("ris-disciplineWrap");
        const statusWrap = document.getElementById("ris-statusWrap");

        // ── Guard ──────────────────────────────────────────────────────────────
        if (!grid || !discWrap) {
            console.error("RIS tab init failed — missing elements.");
            return;
        }

        // ── Discipline dropdown ────────────────────────────────────────────────
        const discDropdown = H.initSearchDropdown(discWrap, val => {
            s.discipline = val;
            s.page = 1;
            fetchData();
        }, {
            cssPrefix: "inv-dep",
            allLabel:  "All Disciplines",
            allIcon:   "fas fa-th-large",
            itemIcon:  "fas fa-tools"
        });

        // ── Status dropdown (static options) ──────────────────────────────────
        const statusDropdown = H.initSearchDropdown(statusWrap, val => {
            s.status = val;
            s.page = 1;
            fetchData();
        }, {
            cssPrefix: "inv-dep",
            allLabel:  "All Status",
            allIcon:   "fas fa-th-large",
            itemIcon:  "fas fa-circle-dot"
        });
        // Seed static status options immediately
        statusDropdown.setItems(["Draft", "Approved", "Cancelled"]);

        // ── Search inputs ──────────────────────────────────────────────────────
        [inRISNo, inItem, inIssued].forEach(el => {
            if (!el) return;
            el.addEventListener("input", () => {
                clearTimeout(s.timer);
                s.timer = setTimeout(() => {
                    s.searchRISNo    = inRISNo?.value.trim()  ?? "";
                    s.searchItemName = inItem?.value.trim()   ?? "";
                    s.searchIssuedTo = inIssued?.value.trim() ?? "";
                    s.page = 1;
                    fetchData();
                }, 350);
            });
        });

        if (inSize) {
            inSize.addEventListener("change", () => {
                s.pageSize = parseInt(inSize.value, 10);
                s.page = 1;
                fetchData();
            });
        }

        // ── Status value → short code for API ─────────────────────────────────
        function statusToCode(label) {
            return { "Draft": "0", "Approved": "1", "Cancelled": "2" }[label] ?? "";
        }

        // ══════════════════════════════════════════════════════════════════════
        //  FETCH
        // ══════════════════════════════════════════════════════════════════════
        async function fetchData() {
            grid.innerHTML = `<div class="inv-state" style="grid-column:1/-1">
                <div class="inv-spinner"></div><p>Loading…</p></div>`;

            const p = new URLSearchParams({
                searchRISNo:   s.searchRISNo,
                searchItemName: s.searchItemName,
                searchIssuedTo: s.searchIssuedTo,
                discipline:    s.discipline,
                status:        statusToCode(s.status),
                pageNumber:    s.page,
                pageSize:      s.pageSize,
                draw:          Date.now()
            });

            try {
                const res  = await fetch(`/RISMgmt/GetRIS?${p}`);
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                const json = await res.json();

                const data = json.data ?? json;
                    s.totalCount = json.recordsTotal ?? 0;

                if (json.disciplineList?.length)
                    discDropdown.setItems(json.disciplineList.map(d => d.disciplineName));
                renderCards(json.data ?? []);

                H.renderPagination(
                    document.getElementById("ris-pageButtons"),
                    document.getElementById("ris-pageInfo"),
                    s,
                    pg => { s.page = pg; fetchData(); }
                );

                const c = document.getElementById("ris-resultCount");
                if (c) c.textContent =
                    `${s.totalCount.toLocaleString()} result${s.totalCount !== 1 ? "s" : ""}`;

            } catch (err) {
                console.error("GetRIS error:", err);
                grid.innerHTML = `<div class="inv-state" style="grid-column:1/-1">
                    <i class="fas fa-exclamation-triangle" style="color:#ff5c5c"></i>
                    <p>Failed to load data.</p></div>`;
            }
        }

        // ══════════════════════════════════════════════════════════════════════
        //  RENDER CARDS
        // ══════════════════════════════════════════════════════════════════════
        function renderCards(data) {
            const g = document.getElementById("ris-grid");
            if (!data.length) {
                g.innerHTML = `<div class="inv-state" style="grid-column:1/-1">
                    <i class="fas fa-inbox"></i>
                    <p>No RIS records found.</p></div>`;
                return;
            }

            g.innerHTML = data.map(item => buildRISCardHtml(item)).join("");

            // ── Wire Approve buttons ──
            g.querySelectorAll(".btn-ris-approve").forEach(btn =>
                btn.addEventListener("click", () => {
                    const risId = parseInt(btn.dataset.risid, 10);
                    const risNo = btn.dataset.risno;
                    openApproveModal(risId, risNo, btn.dataset);
                })
            );

            // ── Wire Cancel buttons ──
            g.querySelectorAll(".btn-ris-cancel").forEach(btn =>
                btn.addEventListener("click", () => {
                    const risId = parseInt(btn.dataset.risid, 10);
                    const risNo = btn.dataset.risno;
                    openCancelModal(risId, risNo, btn.dataset);
                })
            );
        }

        // ══════════════════════════════════════════════════════════════════════
        //  CARD HTML BUILDER
        // ══════════════════════════════════════════════════════════════════════
        function buildRISCardHtml(item) {
            const risId        = item.risId        ?? item.RISId        ?? 0;
            const risNo        = item.risNo        ?? item.RISNo        ?? "—";
            const itemName     = item.itemName     ?? item.ItemName     ?? "—";
            const itemNo       = item.itemNo       ?? item.ItemNo       ?? "—";
            const issuedTo     = item.issuedTo     ?? item.IssuedTo     ?? "—";
            const discipline   = item.disciplineName ?? item.DisciplineName ?? "—";
            const qtyIssued    = item.qtyIssued    ?? item.QtyIssued    ?? 0;
            const totalReturned= item.totalReturned ?? item.TotalReturned ?? 0;
            const netIssued    = qtyIssued - totalReturned;
            const status       = item.status       ?? item.Status       ?? 0;
            const statusLabel  = item.statusLabel  ?? item.StatusLabel  ?? _statusLabel(status);
            const remarks      = item.remarks      ?? item.Remarks      ?? null;
            const createdDate  = item.createdDate  ?? item.CreatedDate  ?? null;
            const approvedBy   = item.approvedBy   ?? item.ApprovedBy   ?? null;
            const approvedDate = item.approvedDate ?? item.ApprovedDate ?? null;
            const mrsCount     = item.mrsCount     ?? item.MRSCount     ?? 0;

            const isDraft     = status === 0;
            const isApproved  = status === 1;
            const isCancelled = status === 2;

            const statusCls = isDraft ? "ris-status-draft"
                            : isApproved ? "ris-status-approved"
                            : "ris-status-cancelled";

            const statusIcon = isDraft ? "fas fa-clock"
                             : isApproved ? "fas fa-check-circle"
                             : "fas fa-ban";

            return `
            <div class="ris-card">

                <!-- HEAD -->
                <div class="ris-card-hd">
                    <span class="${statusCls} ris-status-badge">
                        <i class="${statusIcon}"></i> ${H.escHtml(statusLabel)}
                    </span>
                    <div class="ris-card-no">RIS NO</div>
                    <div class="ris-card-title">${H.escHtml(risNo)}</div>
                    <div class="ris-card-meta">
                        <span><i class="fas fa-box"></i> ${H.escHtml(itemName)}</span>
                        <span><i class="fas fa-hashtag"></i> #${H.escHtml(String(itemNo))}</span>
                    </div>
                    <div class="ris-card-meta" style="margin-top:4px">
                        <span><i class="fas fa-user"></i> ${H.escHtml(issuedTo)}</span>
                        <span><i class="fas fa-clock"></i> ${_formatDate(createdDate)}</span>
                    </div>
                </div>

                <!-- STATS -->
                <div class="ris-stats-row">
                    <div class="ris-stat">
                        <span class="ris-stat-lbl">
                            <i class="fas fa-cubes"></i> Qty Issued
                        </span>
                        <span class="ris-stat-val teal">${qtyIssued}</span>
                    </div>
                    <div class="ris-stat">
                        <span class="ris-stat-lbl">
                            <i class="fas fa-undo"></i> Returned
                        </span>
                        <span class="ris-stat-val amber">${totalReturned}</span>
                    </div>
                    <div class="ris-stat">
                        <span class="ris-stat-lbl">
                            <i class="fas fa-layer-group"></i> Net Issued
                        </span>
                        <span class="ris-stat-val ${netIssued > 0 ? "red" : ""}">${netIssued}</span>
                    </div>
                </div>

                <!-- BODY -->
                <div class="ris-card-body">
                    <div class="ris-field-row">
                        <span class="ris-field-lbl">
                            <i class="fas fa-tools"></i> Discipline
                        </span>
                        <span class="ris-field-val">
                            <span class="ris-discipline-chip">
                                <i class="fas fa-tools"></i> ${H.escHtml(discipline)}
                            </span>
                        </span>
                    </div>

                    ${mrsCount > 0 ? `
                    <div class="ris-field-row">
                        <span class="ris-field-lbl">
                            <i class="fas fa-file-import"></i> MRS Count
                        </span>
                        <span class="ris-field-val">
                            <span style="background:#E6F1FB;color:#185FA5;padding:2px 8px;
                                         border-radius:50px;font-size:11px;font-weight:600">
                                ${mrsCount} return slip${mrsCount !== 1 ? "s" : ""}
                            </span>
                        </span>
                    </div>` : ""}

                    ${remarks ? `
                    <div class="ris-field-row">
                        <span class="ris-field-lbl">
                            <i class="fas fa-sticky-note"></i> Remarks
                        </span>
                        <span class="ris-field-val" style="color:var(--text-muted,#6b8890)">
                            ${H.escHtml(remarks)}
                        </span>
                    </div>` : ""}

                    ${isApproved && approvedBy ? `
                    <div class="ris-field-row">
                        <span class="ris-field-lbl">
                            <i class="fas fa-user-check"></i> Approved by
                        </span>
                        <span class="ris-field-val">
                            ${H.escHtml(approvedBy)}
                            <span style="color:var(--text-muted,#6b8890);font-size:11px;margin-left:4px">
                                ${_formatDate(approvedDate)}
                            </span>
                        </span>
                    </div>` : ""}
                </div>

                <!-- FOOTER -->
                <div class="ris-card-ft">
                    ${isDraft ? `
                    <button class="ris-btn ris-btn-approve btn-ris-approve"
                            data-risid="${risId}"
                            data-risno="${H.escAttr(risNo)}"
                            data-itemname="${H.escAttr(itemName)}"
                            data-issuedto="${H.escAttr(issuedTo)}"
                            data-discipline="${H.escAttr(discipline)}"
                            data-qtyissued="${qtyIssued}">
                        <i class="fas fa-check-circle"></i> Approve
                    </button>
                    <button class="ris-btn ris-btn-cancel btn-ris-cancel"
                            data-risid="${risId}"
                            data-risno="${H.escAttr(risNo)}"
                            data-itemname="${H.escAttr(itemName)}"
                            data-issuedto="${H.escAttr(issuedTo)}"
                            data-discipline="${H.escAttr(discipline)}"
                            data-qtyissued="${qtyIssued}">
                        <i class="fas fa-ban"></i> Cancel
                    </button>` : `
                    <button class="ris-btn ris-btn-cancel btn-ris-cancel"
                            ${isCancelled ? "disabled" : ""}
                            data-risid="${risId}"
                            data-risno="${H.escAttr(risNo)}"
                            data-itemname="${H.escAttr(itemName)}"
                            data-issuedto="${H.escAttr(issuedTo)}"
                            data-discipline="${H.escAttr(discipline)}"
                            data-qtyissued="${qtyIssued}"
                            style="flex:1">
                        <i class="fas fa-ban"></i>
                        ${isCancelled ? "Cancelled" : "Cancel"}
                    </button>`}
                </div>

            </div>`;
        }

        // ══════════════════════════════════════════════════════════════════════
        //  APPROVE MODAL
        // ══════════════════════════════════════════════════════════════════════
        function openApproveModal(risId, risNo, dataset) {
            const overlay = document.getElementById("ris-approve-modal-overlay");
            document.getElementById("ris-approve-subtitle").textContent =
                `${risNo} — ${dataset.itemname ?? ""}`;

            document.getElementById("ris-approve-detail").innerHTML = `
                <div class="am-field">
                    <span class="am-lbl"><i class="fas fa-hashtag"></i> RIS No</span>
                    <span class="am-val">${H.escHtml(risNo)}</span>
                </div>
                <div class="am-field">
                    <span class="am-lbl"><i class="fas fa-cubes"></i> Qty Issued</span>
                    <span class="am-val">${dataset.qtyissued ?? 0} pcs</span>
                </div>
                <div class="am-field">
                    <span class="am-lbl"><i class="fas fa-box"></i> Item</span>
                    <span class="am-val">${H.escHtml(dataset.itemname ?? "—")}</span>
                </div>
                <div class="am-field">
                    <span class="am-lbl"><i class="fas fa-user"></i> Issued To</span>
                    <span class="am-val">${H.escHtml(dataset.issuedto ?? "—")}</span>
                </div>
                <div class="am-field">
                    <span class="am-lbl"><i class="fas fa-tools"></i> Discipline</span>
                    <span class="am-val">${H.escHtml(dataset.discipline ?? "—")}</span>
                </div>`;

            overlay.style.display = "flex";

            // ── Wire buttons fresh each open ──
            const confirmBtn = document.getElementById("ris-approve-confirm-btn");
            const cancelBtn  = document.getElementById("ris-approve-cancel-btn");

            const closeModal = () => { overlay.style.display = "none"; };

            // Clone to remove stale listeners
            const newConfirm = confirmBtn.cloneNode(true);
            const newCancel  = cancelBtn.cloneNode(true);
            confirmBtn.replaceWith(newConfirm);
            cancelBtn.replaceWith(newCancel);

            newCancel.addEventListener("click", closeModal);
            overlay.addEventListener("click", e => { if (e.target === overlay) closeModal(); });

            newConfirm.addEventListener("click", async () => {
                newConfirm.disabled = true;
                newConfirm.innerHTML = `<i class="fas fa-spinner fa-spin"></i> Approving…`;

                try {
                    const res  = await fetch(`/RISMgmt/ApproveRIS`, {
                        method:  "POST",
                        headers: { "Content-Type": "application/json" },
                        body:    JSON.stringify({ risId })
                    });
                    const json = await res.json();
                    const d    = json.data ?? json;

                    if (!res.ok || !d.success) {
                        showToast("error", d.message ?? "Could not approve RIS.", "Failed", 4000);
                        return;
                    }

                    showToast("success", d.message ?? `RIS ${risNo} approved.`, "Approved!", 3500);
                    closeModal();
                    fetchData();

                } catch (err) {
                    console.error("ApproveRIS error:", err);
                    showToast("error", "Request failed. Please try again.", "Error", 4000);
                } finally {
                    newConfirm.disabled = false;
                    newConfirm.innerHTML = `<i class="fas fa-check"></i> Approve RIS`;
                }
            });
        }

        // ══════════════════════════════════════════════════════════════════════
        //  CANCEL MODAL
        // ══════════════════════════════════════════════════════════════════════
        function openCancelModal(risId, risNo, dataset) {
            const overlay   = document.getElementById("ris-cancel-modal-overlay");
            const reasonEl  = document.getElementById("ris-cancel-reason");
            reasonEl.value  = "";
            reasonEl.classList.remove("error");

            document.getElementById("ris-cancel-subtitle").textContent =
                `${risNo} — ${dataset.itemname ?? ""}`;

            document.getElementById("ris-cancel-detail").innerHTML = `
                <div class="am-field">
                    <span class="am-lbl"><i class="fas fa-hashtag"></i> RIS No</span>
                    <span class="am-val" style="color:#991b1b">${H.escHtml(risNo)}</span>
                </div>
                <div class="am-field">
                    <span class="am-lbl"><i class="fas fa-cubes"></i> Qty Issued</span>
                    <span class="am-val" style="color:#991b1b">${dataset.qtyissued ?? 0} pcs</span>
                </div>
                <div class="am-field">
                    <span class="am-lbl"><i class="fas fa-box"></i> Item</span>
                    <span class="am-val">${H.escHtml(dataset.itemname ?? "—")}</span>
                </div>
                <div class="am-field">
                    <span class="am-lbl"><i class="fas fa-user"></i> Issued To</span>
                    <span class="am-val">${H.escHtml(dataset.issuedto ?? "—")}</span>
                </div>`;

            overlay.style.display = "flex";

            const confirmBtn = document.getElementById("ris-cancel-confirm-btn");
            const dismissBtn = document.getElementById("ris-cancel-dismiss-btn");

            const closeModal = () => { overlay.style.display = "none"; };

            const newConfirm = confirmBtn.cloneNode(true);
            const newDismiss = dismissBtn.cloneNode(true);
            confirmBtn.replaceWith(newConfirm);
            dismissBtn.replaceWith(newDismiss);

            newDismiss.addEventListener("click", closeModal);
            overlay.addEventListener("click", e => { if (e.target === overlay) closeModal(); });

            newConfirm.addEventListener("click", async () => {
                const reason = reasonEl.value.trim();
                if (!reason) {
                    reasonEl.classList.add("error");
                    reasonEl.focus();
                    showToast("warning", "Please enter a reason for cancellation.", "Required", 3000);
                    return;
                }

                newConfirm.disabled = true;
                newConfirm.innerHTML = `<i class="fas fa-spinner fa-spin"></i> Cancelling…`;

                try {
                    const res  = await fetch(`/RISMgmt/CancelRIS`, {
                        method:  "POST",
                        headers: { "Content-Type": "application/json" },
                        body:    JSON.stringify({ risId, reason })
                    });
                    const json = await res.json();
                    const d    = json.data ?? json;

                    if (!res.ok || !d.success) {
                        showToast("error", d.message ?? "Could not cancel RIS.", "Failed", 4000);
                        return;
                    }

                    showToast("success", d.message ?? `RIS ${risNo} cancelled.`, "Cancelled", 3500);
                    closeModal();
                    fetchData();

                } catch (err) {
                    console.error("CancelRIS error:", err);
                    showToast("error", "Request failed. Please try again.", "Error", 4000);
                } finally {
                    newConfirm.disabled = false;
                    newConfirm.innerHTML = `<i class="fas fa-ban"></i> Cancel RIS`;
                }
            });
        }

        // ══════════════════════════════════════════════════════════════════════
        //  HELPERS
        // ══════════════════════════════════════════════════════════════════════
        function _statusLabel(code) {
            return { 0: "Draft", 1: "Approved", 2: "Cancelled" }[code] ?? "Unknown";
        }

        function _formatDate(raw) {
            if (!raw) return "—";
            const d = new Date(raw);
            return isNaN(d) ? raw : d.toLocaleDateString("en-US", {
                month: "short", day: "numeric", year: "numeric"
            });
        }

        // ── Initial load ───────────────────────────────────────────────────────
        fetchData();
    })();
</script>