<div class="container-fluid py-4 px-4">
    
    <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom bg-white p-3 rounded-3 shadow-sm">
        <div>
            <h2 class="h4 text-dark fw-bold m-0"><i class="fa-solid fa-handshake text-primary me-2"></i>Suppliers Registry</h2>
            <p class="text-muted small m-0 mt-1">Unified ledger of all corporate and individual procurement providers.</p>
        </div>
        <a href="inventory/addSupplier.php" class="btn btn-primary px-4 fw-bold shadow-sm">
            <i class="fa-solid fa-user-plus me-2"></i> Add Supplier
        </a>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card border-0 p-3 shadow-sm d-flex flex-row justify-content-between align-items-center bg-white" style="border-radius:12px;">
                <div><span class="text-uppercase text-muted small fw-bold">Total Partners</span><h3 class="m-0 fw-bold text-dark mt-1" id="kpi_total">0</h3></div>
                <div class="bg-primary-subtle text-primary p-3 rounded-3"><i class="fa-solid fa-users fs-4"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 p-3 shadow-sm d-flex flex-row justify-content-between align-items-center bg-white" style="border-radius:12px;">
                <div><span class="text-uppercase text-muted small fw-bold">Organizations</span><h3 class="m-0 fw-bold text-info mt-1" id="kpi_companies">0</h3></div>
                <div class="bg-info-subtle text-info p-3 rounded-3"><i class="fa-solid fa-building fs-4"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 p-3 shadow-sm d-flex flex-row justify-content-between align-items-center bg-white" style="border-radius:12px;">
                <div><span class="text-uppercase text-muted small fw-bold">Individuals</span><h3 class="m-0 fw-bold text-warning mt-1" id="kpi_individuals">0</h3></div>
                <div class="bg-warning-subtle text-warning p-3 rounded-3"><i class="fa-solid fa-user-tie fs-4"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 p-3 shadow-sm d-flex flex-row justify-content-between align-items-center bg-white" style="border-radius:12px;">
                <div><span class="text-uppercase text-muted small fw-bold">Active Standing</span><h3 class="m-0 fw-bold text-success mt-1" id="kpi_active">0</h3></div>
                <div class="bg-success-subtle text-success p-3 rounded-3"><i class="fa-solid fa-circle-check fs-4"></i></div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle m-0 table-hover">
                    <thead style="background-color: #0f172a; color: #ffffff; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;">
                        <tr>
                            <th class="py-3 px-4" style="width: 50px;">#</th>
                            <th>Partner Identity / Code</th>
                            <th>Classification</th>
                            <th>Procurement Roles</th>
                            <th>Contact Log</th>
                            <th class="text-center" style="width: 120px;">Status</th>
                            <th class="text-center" style="width: 120px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="suppliers_grid_container">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="<?php echo BASE_URL; ?>application/assets/js/supplierManagement.js"></script>