<?php
$page_title = 'Enterprise APIs';
require_once __DIR__ . '/header.php';
?>

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit', sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-code" style="color:#6366f1; margin-right:10px;"></i>Enterprise API Gateway</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Manage API keys, monitor usage, and integrate with ERP/CRM systems.</p>
    </div>
    <button style="background:#2563eb; color:#fff; border:none; padding:10px 20px; border-radius:8px; font-weight:600; cursor:pointer;"><i class="fas fa-key" style="margin-right:8px;"></i> Generate New Key</button>
</div>

<div class="grid-3" style="margin-bottom:24px;">
    <div class="card" style="margin-bottom:0; display:flex; align-items:center; gap:15px;">
        <div style="width:45px; height:45px; border-radius:10px; background:#dcfce7; color:#10b981; display:flex; align-items:center; justify-content:center; font-size:1.3rem;"><i class="fas fa-plug"></i></div>
        <div>
            <div style="color:#64748b; font-size:0.8rem; font-weight:600;">ACTIVE APIS</div>
            <div style="color:#0f172a; font-size:1.4rem; font-weight:700;">9</div>
        </div>
    </div>
    <div class="card" style="margin-bottom:0; display:flex; align-items:center; gap:15px;">
        <div style="width:45px; height:45px; border-radius:10px; background:#dbeafe; color:#2563eb; display:flex; align-items:center; justify-content:center; font-size:1.3rem;"><i class="fas fa-exchange-alt"></i></div>
        <div>
            <div style="color:#64748b; font-size:0.8rem; font-weight:600;">TODAY'S REQUESTS</div>
            <div style="color:#0f172a; font-size:1.4rem; font-weight:700;">14,280</div>
        </div>
    </div>
    <div class="card" style="margin-bottom:0; display:flex; align-items:center; gap:15px;">
        <div style="width:45px; height:45px; border-radius:10px; background:#fef3c7; color:#d97706; display:flex; align-items:center; justify-content:center; font-size:1.3rem;"><i class="fas fa-tachometer-alt"></i></div>
        <div>
            <div style="color:#64748b; font-size:0.8rem; font-weight:600;">AVG LATENCY</div>
            <div style="color:#0f172a; font-size:1.4rem; font-weight:700;">42ms</div>
        </div>
    </div>
</div>

<div class="card">
    <h3 style="margin:0 0 20px; font-size:1.15rem; color:#0f172a;">API Services</h3>
    <table style="width:100%; border-collapse:collapse; font-size:0.9rem;">
        <thead>
            <tr style="background:#f8fafc; text-align:left;">
                <th style="padding:12px; border-bottom:1px solid #e2e8f0;">Service</th>
                <th style="padding:12px; border-bottom:1px solid #e2e8f0;">Endpoint</th>
                <th style="padding:12px; border-bottom:1px solid #e2e8f0;">Status</th>
                <th style="padding:12px; border-bottom:1px solid #e2e8f0;">Uptime</th>
                <th style="padding:12px; border-bottom:1px solid #e2e8f0;">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; font-weight:500;"><i class="fas fa-database" style="color:#3b82f6; margin-right:6px;"></i> ERP API</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; font-family:monospace; font-size:0.8rem; color:#64748b;">/api/v2/erp</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9;"><span style="background:#dcfce7; color:#166534; padding:2px 8px; border-radius:10px; font-size:0.75rem;">Active</span></td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; color:#10b981; font-weight:bold;">99.98%</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9;"><a href="#" style="color:#2563eb; font-size:0.85rem;">Docs</a></td>
            </tr>
            <tr>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; font-weight:500;"><i class="fas fa-users" style="color:#10b981; margin-right:6px;"></i> CRM API</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; font-family:monospace; font-size:0.8rem; color:#64748b;">/api/v2/crm</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9;"><span style="background:#dcfce7; color:#166534; padding:2px 8px; border-radius:10px; font-size:0.75rem;">Active</span></td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; color:#10b981; font-weight:bold;">99.95%</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9;"><a href="#" style="color:#2563eb; font-size:0.85rem;">Docs</a></td>
            </tr>
            <tr>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; font-weight:500;"><i class="fas fa-credit-card" style="color:#8b5cf6; margin-right:6px;"></i> Payment API</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; font-family:monospace; font-size:0.8rem; color:#64748b;">/api/v2/payments</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9;"><span style="background:#dcfce7; color:#166534; padding:2px 8px; border-radius:10px; font-size:0.75rem;">Active</span></td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; color:#10b981; font-weight:bold;">99.99%</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9;"><a href="#" style="color:#2563eb; font-size:0.85rem;">Docs</a></td>
            </tr>
            <tr>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; font-weight:500;"><i class="fas fa-truck" style="color:#f59e0b; margin-right:6px;"></i> Logistics API</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; font-family:monospace; font-size:0.8rem; color:#64748b;">/api/v2/logistics</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9;"><span style="background:#dcfce7; color:#166534; padding:2px 8px; border-radius:10px; font-size:0.75rem;">Active</span></td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9; color:#10b981; font-weight:bold;">99.90%</td>
                <td style="padding:12px; border-bottom:1px solid #f1f5f9;"><a href="#" style="color:#2563eb; font-size:0.85rem;">Docs</a></td>
            </tr>
            <tr>
                <td style="padding:12px; font-weight:500;"><i class="fas fa-bell" style="color:#ef4444; margin-right:6px;"></i> Notification API</td>
                <td style="padding:12px; font-family:monospace; font-size:0.8rem; color:#64748b;">/api/v2/notify</td>
                <td style="padding:12px;"><span style="background:#fef3c7; color:#b45309; padding:2px 8px; border-radius:10px; font-size:0.75rem;">Degraded</span></td>
                <td style="padding:12px; color:#d97706; font-weight:bold;">98.50%</td>
                <td style="padding:12px;"><a href="#" style="color:#2563eb; font-size:0.85rem;">Docs</a></td>
            </tr>
        </tbody>
    </table>
</div>

<?php require_once __DIR__ . '/../includes/footer.php'; ?>
