<style>
    /* Scoped strictly to this injected view */
    .list-prod-wrapper { width: 100%; padding: 20px 0; font-family: 'Inter', sans-serif;}
    .kpi-card { border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; transition: box-shadow 0.2s; }
    .kpi-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); }
    .setup-btn { font-size: 0.8rem; font-weight: 700; border-radius: 8px; text-transform: uppercase; padding: 0.55rem 1rem; border: 1px solid #e2e8f0; background: #ffffff; color: #475569; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s; text-decoration: none !important; }
    .setup-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; text-decoration: none !important; }
    
    .master-table th { background-color: #0f172a; color: #ffffff; font-size: 0.72rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; padding: 1.1rem 1rem; border: none; }
    .master-table td { font-size: 0.85rem; padding: 1rem; color: #334155; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
    .expand-row { cursor: pointer; transition: background-color 0.15s; }
    .expand-row:hover { background-color: #f8fafc !important; }
    .detail-drawer { background-color: #fafafa; border-left: 4px solid #3b82f6; }
    .transition-all { transition: transform 0.2s ease; }
</style>

<!-- BULLETPROOF SPA EXECUTION TRIGGER -->
<img src="x" onerror="if(typeof window.initListProducts === 'function') window.initListProducts(); this.remove();" style="display:none;">

<div class="list-prod-wrapper">
    
    <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom bg-white p-4 rounded-4 shadow-sm">
        <div>
            <h2 class="h4 text-dark fw-bold m-0"><i class="fa-solid fa-boxes-stacked text-primary me-2"></i>Central Product Pool</h2>
            <p class="text-muted small m-0 mt-1">Comprehensive view of all clinical generic definitions and commercial brand variants.</p>
        </div>
        <a href="product/addNewProduct.php" data-title="Add New Product" data-category="Pharmacy" class="btn btn-primary px-4 fw-bold shadow-sm rounded-pill"><i class="fa-solid fa-plus-circle me-2"></i>Add New Product</a>
    </div>

    <!-- KPIs -->
    <div class="row g-3 mb-4">
        <div class="col-md col-sm-6">
            <div class="kpi-card p-3 shadow-sm d-flex align-items-center justify-content-between">
                <div>
                    <span class="text-uppercase text-muted d-block small fw-bold">Total Products</span>
                    <h3 class="m-0 fw-bold text-dark mt-1" id="kpi_total_items">0</h3>
                </div>
                <div class="bg-primary-subtle text-primary p-3 rounded-3"><i class="fa-solid fa-database fs-5"></i></div>
            </div>
        </div>
        <div class="col-md col-sm-6">
            <div class="kpi-card p-3 shadow-sm d-flex align-items-center justify-content-between">
                <div>
                    <span class="text-uppercase text-muted d-block small fw-bold">Active Records</span>
                    <h3 class="m-0 fw-bold text-success mt-1" id="kpi_active_items">0</h3>
                </div>
                <div class="bg-success-subtle text-success p-3 rounded-3"><i class="fa-solid fa-circle-check fs-5"></i></div>
            </div>
        </div>
        <div class="col-md col-sm-6">
            <div class="kpi-card p-3 shadow-sm d-flex align-items-center justify-content-between">
                <div>
                    <span class="text-uppercase text-muted d-block small fw-bold">NHIS Covered</span>
                    <h3 class="m-0 fw-bold text-warning mt-1" id="kpi_nhis_profiles">0</h3>
                </div>
                <div class="bg-warning-subtle text-warning p-3 rounded-3"><i class="fa-solid fa-file-prescription fs-5"></i></div>
            </div>
        </div>
        <div class="col-md col-sm-6">
            <div class="kpi-card p-3 shadow-sm d-flex align-items-center justify-content-between">
                <div>
                    <span class="text-uppercase text-muted d-block small fw-bold">Total Brands</span>
                    <h3 class="m-0 fw-bold text-info mt-1" id="kpi_brand_variants">0</h3>
                </div>
                <div class="bg-info-subtle text-info p-3 rounded-3"><i class="fa-solid fa-tags fs-5"></i></div>
            </div>
        </div>
    </div>

    <!-- DICTIONARY SHORTCUTS ROUTED TO THE UNIFIED ATTRIBUTE ENGINE -->
    <div class="card border-0 shadow-sm mb-4 rounded-4">
        <div class="card-header bg-white py-3 border-0">
            <span class="text-uppercase fw-bold text-secondary small"><i class="fa-solid fa-sliders me-2"></i>Dependent Schema & Dictionary Setup Shortcuts</span>
        </div>
        <div class="card-body pt-0 pb-3 d-flex flex-wrap gap-2">
            <a href="product/manageProductAttributes.php" data-title="Attribute Management" data-category="Pharmacy" class="setup-btn"><i class="fa-solid fa-tag text-primary"></i> Brands</a>
            <a href="product/manageProductAttributes.php" data-title="Attribute Management" data-category="Pharmacy" class="setup-btn"><i class="fa-solid fa-industry text-primary"></i> Manufacturers</a>
            <a href="product/manageProductAttributes.php" data-title="Attribute Management" data-category="Pharmacy" class="setup-btn"><i class="fa-solid fa-layer-group text-primary"></i> Product Types</a>
            <a href="product/manageProductAttributes.php" data-title="Attribute Management" data-category="Pharmacy" class="setup-btn"><i class="fa-solid fa-folder-tree text-primary"></i> Item Categories</a>
            <a href="product/manageProductAttributes.php" data-title="Attribute Management" data-category="Pharmacy" class="setup-btn"><i class="fa-solid fa-box-archive text-primary"></i> Base Unit</a>
            <a href="product/manageProductAttributes.php" data-title="Attribute Management" data-category="Pharmacy" class="setup-btn"><i class="fa-solid fa-dna text-primary"></i> Therapeutic Class</a>
            <a href="product/manageProductAttributes.php" data-title="Attribute Management" data-category="Pharmacy" class="setup-btn"><i class="fa-solid fa-capsules text-primary"></i> Formulation</a>
            <a href="product/manageProductAttributes.php" data-title="Attribute Management" data-category="Pharmacy" class="setup-btn"><i class="fa-solid fa-weight-scale text-primary"></i> Strength Unit</a>
            <a href="product/manageProductAttributes.php" data-title="Attribute Management" data-category="Pharmacy" class="setup-btn"><i class="fa-solid fa-gavel text-primary"></i> Prescribing Level</a>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle m-0 master-table">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 4%;">View</th>
                            <th class="text-center" style="width: 4%;">#</th>
                            <th style="width: 10%;">System ID</th>
                            <th style="width: 28%;">Clinical Specification / Generic</th>
                            <th style="width: 22%;">Commercial Brand Variant Details</th>
                            <th style="width: 10%;">NHIS Tariff</th>
                            <th style="width: 8%;">NHIS Copay</th>
                            <th class="text-center" style="width: 6%;">Status</th>
                            <th class="text-center" style="width: 12%;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="catalog_grid_container">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- CUSTOM APP MODALS (REPLACES NATIVE BROWSER ALERTS) -->
<div class="modal fade" id="appResponseModal" tabindex="-1" style="z-index: 1070;" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px;">
            <div class="modal-body p-4 text-center">
                <i id="appResIcon" class="fa-solid fa-circle-check text-success fa-4x mb-3"></i>
                <h5 class="fw-bold text-dark" id="appResTitle">Success</h5>
                <p class="text-muted small" id="appResMsg"></p>
                <button type="button" id="appResBtn" class="btn btn-success fw-bold px-4 mt-2" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="appConfirmModal" tabindex="-1" style="z-index: 1070;" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px;">
            <div class="modal-body p-4 text-center">
                <i class="fa-solid fa-triangle-exclamation text-warning fa-4x mb-3"></i>
                <h5 class="fw-bold text-dark" id="appConfTitle">Confirm Action</h5>
                <p class="text-muted small" id="appConfMsg"></p>
                <div class="d-flex justify-content-center gap-2 mt-4">
                    <button type="button" class="btn btn-light fw-bold border" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger fw-bold px-4 shadow-sm" id="btnAppConfirm">Yes, Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>