<?php
require_once dirname(__DIR__) . '/config/config.php';
requireLogin();
requireAdmin();

$pdo = getDBConnection();
$success = '';
$error = '';

// Handle actions
if ($_SERVER['REQUEST_METHOD'] === 'POST' && verifyCSRFToken($_POST['csrf_token'] ?? '')) {
    $action = $_POST['action'] ?? '';
    
    // Update single price
    if ($action === 'update_price') {
        $pricingId = intval($_POST['pricing_id'] ?? 0);
        $customPrice = floatval($_POST['custom_price'] ?? 0);
        $status = $_POST['status'] ?? 'active';
        
        try {
            $stmt = $pdo->prepare("UPDATE sms_pricing SET custom_price = ?, status = ?, updated_at = NOW() WHERE id = ?");
            $stmt->execute([$customPrice, $status, $pricingId]);
            $success = 'Price updated successfully!';
        } catch (Exception $e) {
            $error = 'Failed to update: ' . $e->getMessage();
        }
    }
    
    // Bulk update margin
    if ($action === 'bulk_margin') {
        $margin = floatval($_POST['margin'] ?? 20);
        $countryId = $_POST['country_id'] ?? '';
        $serviceId = $_POST['service_id'] ?? '';
        
        try {
            $sql = "UPDATE sms_pricing SET custom_price = api_price * (1 + ? / 100), updated_at = NOW() WHERE 1=1";
            $params = [$margin];
            
            if ($countryId) {
                $sql .= " AND country_id = ?";
                $params[] = $countryId;
            }
            if ($serviceId) {
                $sql .= " AND service_id = ?";
                $params[] = $serviceId;
            }
            
            $stmt = $pdo->prepare($sql);
            $stmt->execute($params);
            $affected = $stmt->rowCount();
            $success = "Applied {$margin}% margin to {$affected} prices!";
        } catch (Exception $e) {
            $error = 'Failed to update: ' . $e->getMessage();
        }
    }
    
    // Toggle country status
    if ($action === 'toggle_country') {
        $id = intval($_POST['id'] ?? 0);
        $status = $_POST['status'] === 'active' ? 'inactive' : 'active';
        $stmt = $pdo->prepare("UPDATE sms_countries SET status = ? WHERE id = ?");
        $stmt->execute([$status, $id]);
        $success = 'Country status updated!';
    }
    
    // Toggle service status
    if ($action === 'toggle_service') {
        $id = intval($_POST['id'] ?? 0);
        $status = $_POST['status'] === 'active' ? 'inactive' : 'active';
        $stmt = $pdo->prepare("UPDATE sms_services SET status = ? WHERE id = ?");
        $stmt->execute([$status, $id]);
        $success = 'Service status updated!';
    }
}

// Get filters
$tab = $_GET['tab'] ?? 'pricing';
$searchCountry = $_GET['country'] ?? '';
$searchService = $_GET['service'] ?? '';
$page = max(1, intval($_GET['page'] ?? 1));
$perPage = 50;
$offset = ($page - 1) * $perPage;

// Get countries and services for dropdowns
$countries = $pdo->query("SELECT * FROM sms_countries ORDER BY name ASC")->fetchAll();
$services = $pdo->query("SELECT * FROM sms_services ORDER BY custom_name ASC")->fetchAll();

// Get pricing data with filters
$where = "1=1";
$params = [];

if ($searchCountry) {
    $where .= " AND p.country_id = ?";
    $params[] = $searchCountry;
}
if ($searchService) {
    $where .= " AND p.service_id = ?";
    $params[] = $searchService;
}

// Count total
$countSql = "SELECT COUNT(*) FROM sms_pricing p WHERE $where";
$stmt = $pdo->prepare($countSql);
$stmt->execute($params);
$totalPricing = $stmt->fetchColumn();
$totalPages = ceil($totalPricing / $perPage);

// Get pricing with joins
$sql = "SELECT p.*, c.name as country_name, c.short_name, s.custom_name as service_name, s.api_name
        FROM sms_pricing p
        LEFT JOIN sms_countries c ON p.country_id = c.id
        LEFT JOIN sms_services s ON p.service_id = s.id
        WHERE $where
        ORDER BY c.name ASC, s.custom_name ASC
        LIMIT $perPage OFFSET $offset";
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$pricing = $stmt->fetchAll();

// Get stats
$stats = [
    'countries' => $pdo->query("SELECT COUNT(*) FROM sms_countries")->fetchColumn(),
    'countries_active' => $pdo->query("SELECT COUNT(*) FROM sms_countries WHERE status = 'active'")->fetchColumn(),
    'services' => $pdo->query("SELECT COUNT(*) FROM sms_services")->fetchColumn(),
    'services_active' => $pdo->query("SELECT COUNT(*) FROM sms_services WHERE status = 'active'")->fetchColumn(),
    'pricing' => $pdo->query("SELECT COUNT(*) FROM sms_pricing")->fetchColumn(),
    'pricing_active' => $pdo->query("SELECT COUNT(*) FROM sms_pricing WHERE status = 'active'")->fetchColumn(),
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SMS Services - <?php echo SITE_NAME; ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; background: #0A1628; color: #fff; min-height: 100vh; }
        .sidebar { width: 260px; background: #0F2744; height: 100vh; position: fixed; left: 0; top: 0; z-index: 100; transition: transform 0.3s; overflow-y: auto; }
        .sidebar-header { padding: 1.5rem; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #1E3A5F; }
        .sidebar-header i { font-size: 1.5rem; color: #F5A623; }
        .sidebar-header span { font-weight: 700; color: #F5A623; font-size: 1.25rem; }
        .sidebar-nav { padding: 1rem 0; }
        .nav-link { display: flex; align-items: center; gap: 12px; padding: 0.875rem 1.5rem; color: #E5E7EB; text-decoration: none; border-left: 3px solid transparent; }
        .nav-link:hover, .nav-link.active { background: #1E3A5F; color: #F5A623; border-left-color: #F5A623; }
        .nav-link i { width: 20px; text-align: center; }
        .nav-divider { height: 1px; background: #1E3A5F; margin: 0.75rem 1.5rem; }
        .main { margin-left: 260px; padding: 1.5rem; }
        .header { background: #0F2744; padding: 1rem 1.5rem; margin: -1.5rem -1.5rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
        .header-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.25rem; cursor: pointer; }
        .page-title { font-size: 1.5rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
        .page-title i { color: #F5A623; }
        
        .alert { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
        .alert-success { background: rgba(16,185,129,0.2); color: #10B981; }
        .alert-danger { background: rgba(239,68,68,0.2); color: #EF4444; }
        
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
        .stat-card { background: #0F2744; border-radius: 8px; padding: 1rem; text-align: center; border: 1px solid #1E3A5F; }
        .stat-card .number { font-size: 1.5rem; font-weight: 700; color: #F5A623; }
        .stat-card .label { font-size: 0.8rem; color: #9CA3AF; }
        
        .tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
        .tab { padding: 0.75rem 1.5rem; background: #0F2744; border: 1px solid #1E3A5F; border-radius: 8px; color: #9CA3AF; text-decoration: none; transition: all 0.2s; }
        .tab:hover, .tab.active { background: #F5A623; color: #0A1628; border-color: #F5A623; }
        
        .card { background: #0F2744; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #1E3A5F; }
        .card-title { font-size: 1rem; color: #F5A623; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        
        .filter-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
        .filter-group { flex: 1; min-width: 200px; }
        .filter-group label { display: block; font-size: 0.85rem; color: #9CA3AF; margin-bottom: 0.5rem; }
        .filter-group select, .filter-group input { width: 100%; padding: 0.75rem; background: #1E3A5F; border: 1px solid #2D4A6F; border-radius: 8px; color: #fff; font-size: 0.9rem; }
        .filter-group select:focus, .filter-group input:focus { outline: none; border-color: #F5A623; }
        
        .btn { padding: 0.75rem 1.25rem; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; }
        .btn-gold { background: #F5A623; color: #0A1628; }
        .btn-gold:hover { background: #FFD93D; }
        .btn-blue { background: #3B82F6; color: #fff; }
        .btn-green { background: #10B981; color: #fff; }
        .btn-red { background: #EF4444; color: #fff; }
        .btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
        
        .table-wrap { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; min-width: 800px; }
        th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #1E3A5F; }
        th { background: #1E3A5F; color: #F5A623; font-weight: 600; font-size: 0.85rem; position: sticky; top: 0; }
        tr:hover { background: rgba(245,166,35,0.05); }
        
        .price-input { width: 100px; padding: 0.4rem; background: #0A1628; border: 1px solid #2D4A6F; border-radius: 4px; color: #fff; font-size: 0.9rem; }
        .price-input:focus { outline: none; border-color: #F5A623; }
        
        .status-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
        .status-active { background: rgba(16,185,129,0.2); color: #10B981; }
        .status-inactive { background: rgba(239,68,68,0.2); color: #EF4444; }
        
        .profit { color: #10B981; font-weight: 600; }
        .api-price { color: #9CA3AF; font-size: 0.85rem; }
        
        .pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
        .pagination a { padding: 0.5rem 1rem; background: #0F2744; border: 1px solid #1E3A5F; border-radius: 8px; color: #fff; text-decoration: none; }
        .pagination a:hover, .pagination a.active { background: #F5A623; color: #0A1628; border-color: #F5A623; }
        
        .empty { text-align: center; padding: 3rem; color: #9CA3AF; }
        .empty i { font-size: 3rem; color: #1E3A5F; margin-bottom: 1rem; display: block; }
        
        .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99; display: none; }
        .menu-overlay.active { display: block; }
        
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-260px); }
            .sidebar.active { transform: translateX(0); }
            .main { margin-left: 0; }
            .header-toggle { display: block; }
            .filter-row { flex-direction: column; }
            .filter-group { min-width: 100%; }
        }
    </style>
</head>
<body>
    <div class="menu-overlay" id="menuOverlay" onclick="toggleSidebar()"></div>
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-header"><i class="fas fa-feather-alt"></i><span><?php echo SITE_NAME; ?></span></div>
        <nav class="sidebar-nav">
            <a href="dashboard.php" class="nav-link"><i class="fas fa-home"></i> Dashboard</a>
            <a href="users.php" class="nav-link"><i class="fas fa-users"></i> Users</a>
            <a href="orders.php" class="nav-link"><i class="fas fa-shopping-cart"></i> Orders</a>
            <a href="fund-requests.php" class="nav-link"><i class="fas fa-money-bill"></i> Fund Requests</a>
            <div class="nav-divider"></div>
            <a href="smm-services.php" class="nav-link"><i class="fas fa-rocket"></i> SMM Services</a>
            <a href="sms-services.php" class="nav-link active"><i class="fas fa-sms"></i> SMS Services</a>
            <div class="nav-divider"></div>
            <a href="offers.php" class="nav-link"><i class="fas fa-tags"></i> Offers</a>
            <a href="banners.php" class="nav-link"><i class="fas fa-ad"></i> Banners</a>
            <a href="support.php" class="nav-link"><i class="fas fa-headset"></i> Support</a>
            <div class="nav-divider"></div>
            <a href="settings.php" class="nav-link"><i class="fas fa-cog"></i> Settings</a>
            <a href="<?php echo SITE_URL; ?>/logout.php" class="nav-link"><i class="fas fa-sign-out-alt"></i> Logout</a>
        </nav>
    </aside>
    
    <main class="main">
        <header class="header">
            <button class="header-toggle" onclick="toggleSidebar()"><i class="fas fa-bars"></i></button>
            <span><i class="fas fa-sms"></i> SMS Services</span>
            <span><?php echo htmlspecialchars($_SESSION['name']); ?></span>
        </header>
        
        <h1 class="page-title"><i class="fas fa-sms"></i> SMS Services & Pricing</h1>
        
        <?php if ($success): ?><div class="alert alert-success"><i class="fas fa-check-circle"></i> <?php echo $success; ?></div><?php endif; ?>
        <?php if ($error): ?><div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> <?php echo $error; ?></div><?php endif; ?>
        
        <!-- Stats -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="number"><?php echo $stats['countries_active']; ?>/<?php echo $stats['countries']; ?></div>
                <div class="label">Countries Active</div>
            </div>
            <div class="stat-card">
                <div class="number"><?php echo $stats['services_active']; ?>/<?php echo $stats['services']; ?></div>
                <div class="label">Services Active</div>
            </div>
            <div class="stat-card">
                <div class="number"><?php echo $stats['pricing_active']; ?>/<?php echo $stats['pricing']; ?></div>
                <div class="label">Prices Active</div>
            </div>
        </div>
        
        <!-- Tabs -->
        <div class="tabs">
            <a href="?tab=pricing" class="tab <?php echo $tab === 'pricing' ? 'active' : ''; ?>"><i class="fas fa-dollar-sign"></i> Pricing</a>
            <a href="?tab=countries" class="tab <?php echo $tab === 'countries' ? 'active' : ''; ?>"><i class="fas fa-globe"></i> Countries</a>
            <a href="?tab=services" class="tab <?php echo $tab === 'services' ? 'active' : ''; ?>"><i class="fas fa-list"></i> Services</a>
        </div>
        
        <?php if ($tab === 'pricing'): ?>
        <!-- Bulk Margin Update -->
        <div class="card">
            <h3 class="card-title"><i class="fas fa-percentage"></i> Bulk Update Margin</h3>
            <form method="POST">
                <input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
                <input type="hidden" name="action" value="bulk_margin">
                <div class="filter-row">
                    <div class="filter-group">
                        <label>Country (optional)</label>
                        <select name="country_id">
                            <option value="">All Countries</option>
                            <?php foreach ($countries as $c): ?>
                            <option value="<?php echo $c['id']; ?>"><?php echo htmlspecialchars($c['name']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>Service (optional)</label>
                        <select name="service_id">
                            <option value="">All Services</option>
                            <?php foreach ($services as $s): ?>
                            <option value="<?php echo $s['id']; ?>"><?php echo htmlspecialchars($s['custom_name']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="filter-group" style="max-width:150px;">
                        <label>Margin %</label>
                        <input type="number" name="margin" value="20" min="0" max="500" step="1">
                    </div>
                    <div class="filter-group" style="max-width:150px;">
                        <label>&nbsp;</label>
                        <button type="submit" class="btn btn-gold"><i class="fas fa-sync"></i> Apply</button>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- Filter & Search -->
        <div class="card">
            <h3 class="card-title"><i class="fas fa-search"></i> Filter Pricing</h3>
            <form method="GET">
                <input type="hidden" name="tab" value="pricing">
                <div class="filter-row">
                    <div class="filter-group">
                        <label>Country</label>
                        <select name="country" onchange="this.form.submit()">
                            <option value="">All Countries</option>
                            <?php foreach ($countries as $c): ?>
                            <option value="<?php echo $c['id']; ?>" <?php echo $searchCountry == $c['id'] ? 'selected' : ''; ?>><?php echo htmlspecialchars($c['name']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>Service</label>
                        <select name="service" onchange="this.form.submit()">
                            <option value="">All Services</option>
                            <?php foreach ($services as $s): ?>
                            <option value="<?php echo $s['id']; ?>" <?php echo $searchService == $s['id'] ? 'selected' : ''; ?>><?php echo htmlspecialchars($s['custom_name']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="filter-group" style="max-width:150px;">
                        <label>&nbsp;</label>
                        <a href="?tab=pricing" class="btn btn-blue"><i class="fas fa-times"></i> Clear</a>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- Pricing Table -->
        <div class="card">
            <h3 class="card-title"><i class="fas fa-table"></i> Pricing (<?php echo number_format($totalPricing); ?> total)</h3>
            
            <?php if (empty($pricing)): ?>
            <div class="empty">
                <i class="fas fa-dollar-sign"></i>
                <p>No pricing found. Go to Settings and click "Sync Prices".</p>
            </div>
            <?php else: ?>
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>Country</th>
                            <th>Service</th>
                            <th>API Price</th>
                            <th>Your Price</th>
                            <th>Profit</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($pricing as $p): ?>
                        <tr>
                            <td>
                                <strong><?php echo htmlspecialchars($p['country_name'] ?? 'Unknown'); ?></strong>
                                <?php if ($p['short_name']): ?><br><small style="color:#9CA3AF;"><?php echo htmlspecialchars($p['short_name']); ?></small><?php endif; ?>
                            </td>
                            <td><?php echo htmlspecialchars($p['service_name'] ?? $p['api_name'] ?? 'Unknown'); ?></td>
                            <td class="api-price">$<?php echo number_format($p['api_price'], 4); ?></td>
                            <td>
                                <form method="POST" style="display:inline;" id="form-<?php echo $p['id']; ?>">
                                    <input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
                                    <input type="hidden" name="action" value="update_price">
                                    <input type="hidden" name="pricing_id" value="<?php echo $p['id']; ?>">
                                    <input type="hidden" name="status" value="<?php echo $p['status']; ?>">
                                    <input type="number" name="custom_price" value="<?php echo $p['custom_price']; ?>" step="0.0001" min="0" class="price-input" onchange="document.getElementById('form-<?php echo $p['id']; ?>').submit()">
                                </form>
                            </td>
                            <td class="profit">
                                <?php 
                                $profit = $p['custom_price'] - $p['api_price'];
                                $profitPct = $p['api_price'] > 0 ? (($p['custom_price'] / $p['api_price']) - 1) * 100 : 0;
                                echo '+$' . number_format($profit, 4) . ' (' . number_format($profitPct, 0) . '%)';
                                ?>
                            </td>
                            <td>
                                <span class="status-badge status-<?php echo $p['status']; ?>"><?php echo ucfirst($p['status']); ?></span>
                            </td>
                            <td>
                                <form method="POST" style="display:inline;">
                                    <input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
                                    <input type="hidden" name="action" value="update_price">
                                    <input type="hidden" name="pricing_id" value="<?php echo $p['id']; ?>">
                                    <input type="hidden" name="custom_price" value="<?php echo $p['custom_price']; ?>">
                                    <input type="hidden" name="status" value="<?php echo $p['status'] === 'active' ? 'inactive' : 'active'; ?>">
                                    <button type="submit" class="btn btn-sm <?php echo $p['status'] === 'active' ? 'btn-red' : 'btn-green'; ?>">
                                        <?php echo $p['status'] === 'active' ? 'Disable' : 'Enable'; ?>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <?php if ($totalPages > 1): ?>
            <div class="pagination">
                <?php if ($page > 1): ?>
                <a href="?tab=pricing&country=<?php echo $searchCountry; ?>&service=<?php echo $searchService; ?>&page=<?php echo $page-1; ?>"><i class="fas fa-chevron-left"></i></a>
                <?php endif; ?>
                
                <?php for ($i = max(1, $page-2); $i <= min($totalPages, $page+2); $i++): ?>
                <a href="?tab=pricing&country=<?php echo $searchCountry; ?>&service=<?php echo $searchService; ?>&page=<?php echo $i; ?>" class="<?php echo $i === $page ? 'active' : ''; ?>"><?php echo $i; ?></a>
                <?php endfor; ?>
                
                <?php if ($page < $totalPages): ?>
                <a href="?tab=pricing&country=<?php echo $searchCountry; ?>&service=<?php echo $searchService; ?>&page=<?php echo $page+1; ?>"><i class="fas fa-chevron-right"></i></a>
                <?php endif; ?>
            </div>
            <?php endif; ?>
            <?php endif; ?>
        </div>
        
        <?php elseif ($tab === 'countries'): ?>
        <!-- Countries List -->
        <div class="card">
            <h3 class="card-title"><i class="fas fa-globe"></i> Countries</h3>
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Country</th>
                            <th>Short Name</th>
                            <th>Region</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($countries as $c): ?>
                        <tr>
                            <td><?php echo $c['id']; ?></td>
                            <td><strong><?php echo htmlspecialchars($c['name']); ?></strong></td>
                            <td><?php echo htmlspecialchars($c['short_name'] ?? '-'); ?></td>
                            <td><?php echo htmlspecialchars($c['region'] ?? '-'); ?></td>
                            <td><span class="status-badge status-<?php echo $c['status']; ?>"><?php echo ucfirst($c['status']); ?></span></td>
                            <td>
                                <form method="POST" style="display:inline;">
                                    <input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
                                    <input type="hidden" name="action" value="toggle_country">
                                    <input type="hidden" name="id" value="<?php echo $c['id']; ?>">
                                    <input type="hidden" name="status" value="<?php echo $c['status']; ?>">
                                    <button type="submit" class="btn btn-sm <?php echo $c['status'] === 'active' ? 'btn-red' : 'btn-green'; ?>">
                                        <?php echo $c['status'] === 'active' ? 'Disable' : 'Enable'; ?>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        
        <?php elseif ($tab === 'services'): ?>
        <!-- Services List -->
        <div class="card">
            <h3 class="card-title"><i class="fas fa-list"></i> Services</h3>
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>API ID</th>
                            <th>Service Name</th>
                            <th>API Name</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($services as $s): ?>
                        <tr>
                            <td><?php echo $s['id']; ?></td>
                            <td><?php echo htmlspecialchars($s['api_service_id']); ?></td>
                            <td><strong><?php echo htmlspecialchars($s['custom_name']); ?></strong></td>
                            <td style="color:#9CA3AF;"><?php echo htmlspecialchars($s['api_name']); ?></td>
                            <td><span class="status-badge status-<?php echo $s['status']; ?>"><?php echo ucfirst($s['status']); ?></span></td>
                            <td>
                                <form method="POST" style="display:inline;">
                                    <input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
                                    <input type="hidden" name="action" value="toggle_service">
                                    <input type="hidden" name="id" value="<?php echo $s['id']; ?>">
                                    <input type="hidden" name="status" value="<?php echo $s['status']; ?>">
                                    <button type="submit" class="btn btn-sm <?php echo $s['status'] === 'active' ? 'btn-red' : 'btn-green'; ?>">
                                        <?php echo $s['status'] === 'active' ? 'Disable' : 'Enable'; ?>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <?php endif; ?>
    </main>
    
    <script>function toggleSidebar() { document.getElementById('sidebar').classList.toggle('active'); document.getElementById('menuOverlay').classList.toggle('active'); }</script>
</body>
</html>