<?php
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../classes/MikroTik.php';
requireRole('super_admin');
$pageTitle = 'PPPoE Status';

$success = '';
$error = '';
$pppoeData = null;

// Handle actions (suspend/restore/kick/delete)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && verifyCsrf($_POST['csrf_token'] ?? '')) {
    $action = $_POST['action'] ?? '';
    $username = trim($_POST['username'] ?? '');
    
    if (!empty($username) && $action !== 'add_user') {
        $mt = new MikroTik();
        
        switch ($action) {
            case 'suspend':
                $result = $mt->suspendCustomer($username);
                if ($result['success']) {
                    $success = "✅ User <strong>$username</strong> berhasil di-suspend.";
                } else {
                    $error = "❌ Gagal suspend: " . htmlspecialchars($result['error']);
                }
                break;
                
            case 'restore':
                $result = $mt->restoreCustomer($username);
                if ($result['success']) {
                    $success = "✅ User <strong>$username</strong> berhasil di-restore.";
                } else {
                    $error = "❌ Gagal restore: " . htmlspecialchars($result['error']);
                }
                break;
                
            case 'kick':
                $result = $mt->kickUser($username);
                if ($result['killed'] > 0) {
                    $success = "✅ User <strong>$username</strong> berhasil di-kick ({$result['killed']} koneksi diputus).";
                } else {
                    $error = "❌ Gagal kick: " . htmlspecialchars($result['error'] ?: 'Tidak ada koneksi aktif');
                }
                break;
                
            case 'delete':
                $result = $mt->removeSecret($username);
                if ($result['success']) {
                    $success = "✅ User <strong>$username</strong> berhasil dihapus.";
                } else {
                    $error = "❌ Gagal hapus: " . htmlspecialchars($result['error']);
                }
                break;
        }
    }
}

// Handle add new user
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'add_user' && verifyCsrf($_POST['csrf_token'] ?? '')) {
    $newUsername = trim($_POST['new_username'] ?? '');
    $newPassword = $_POST['new_password'] ?? '';
    $newProfile = trim($_POST['new_profile'] ?? 'default');
    $newComment = trim($_POST['new_comment'] ?? '');
    
    if (!empty($newUsername) && !empty($newPassword)) {
        $mt = new MikroTik();
        $result = $mt->addSecret($newUsername, $newPassword, $newProfile, 'pppoe', $newComment);
        
        if ($result['success']) {
            $success = "✅ User <strong>$newUsername</strong> berhasil ditambahkan.";
        } else {
            $error = "❌ Gagal tambah user: " . htmlspecialchars($result['error']);
        }
    } else {
        $error = "❌ Username dan password wajib diisi.";
    }
}

// Load PPPoE status
$mt = new MikroTik();
$pppoeData = $mt->getPPPoEStatus();

// Search filter
$search = trim($_GET['search'] ?? '');
$filter = $_GET['filter'] ?? 'all';

require __DIR__ . '/../includes/header.php';
require __DIR__ . '/../includes/sidebar.php';
?>

<style>
/* ============================================
   PAGE HEADER
   ============================================ */
.page-header {
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #003D7A;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title i {
    font-size: 2rem;
    color: #0066CC;
}

.page-subtitle {
    color: #666;
    font-size: 0.95rem;
    margin: 4px 0 0;
}

/* ============================================
   SUMMARY CARDS
   ============================================ */
.summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 25px;
}

.summary-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.summary-card.primary::before { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.summary-card.success::before { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.summary-card.secondary::before { background: linear-gradient(135deg, #607D8B 0%, #90A4AE 100%); }
.summary-card.danger::before { background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%); }

.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.summary-card-title {
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.summary-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.summary-card.primary .summary-card-icon { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.summary-card.success .summary-card-icon { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.summary-card.secondary .summary-card-icon { background: linear-gradient(135deg, #607D8B 0%, #90A4AE 100%); }
.summary-card.danger .summary-card-icon { background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%); }

.summary-card-value {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.summary-card.primary .summary-card-value { color: #0066CC; }
.summary-card.success .summary-card-value { color: #00C853; }
.summary-card.secondary .summary-card-value { color: #607D8B; }
.summary-card.danger .summary-card-value { color: #DC3545; }

.summary-card-footer {
    font-size: 0.8rem;
    color: #999;
}

/* ============================================
   STATUS INDICATOR
   ============================================ */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.status-dot.online {
    background: #00C853;
    box-shadow: 0 0 8px rgba(0, 200, 83, 0.6);
    animation: pulse-online 2s infinite;
}

.status-dot.offline {
    background: #90A4AE;
}

@keyframes pulse-online {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 200, 83, 0.6); }
    50% { box-shadow: 0 0 16px rgba(0, 200, 83, 1); }
}

/* ============================================
   CARD MODERN
   ============================================ */
.card-modern {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
    border: none;
}

.card-header-modern {
    color: white;
    padding: 18px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-header-modern.primary { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.card-header-modern.success { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.card-header-modern.warning { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.card-header-modern.danger { background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%); }
.card-header-modern.info { background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%); }

.card-header-modern .title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body-modern {
    padding: 24px;
}

/* ============================================
   FILTER FORM
   ============================================ */
.filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 12px;
    align-items: end;
}

.form-group-modern {
    margin-bottom: 0;
}

.form-label-modern {
    display: block;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.form-control-modern,
.form-select-modern {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e8f4f8;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    font-family: inherit;
}

.form-control-modern:focus,
.form-select-modern:focus {
    outline: none;
    border-color: #0066CC;
    background: white;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-modern {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
}

.btn-modern.primary {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-modern.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4);
}

.btn-modern.success {
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
}

.btn-modern.outline {
    background: white;
    color: #666;
    border: 2px solid #e8f4f8;
}

.btn-modern.outline:hover {
    background: #f8fafc;
    border-color: #0066CC;
    color: #0066CC;
}

.btn-add {
    padding: 12px 24px;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
}

/* ============================================
   TABLE MODERN
   ============================================ */
.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.table-modern thead {
    background: #f8fafc;
}

.table-modern th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    color: #003D7A;
    border-bottom: 2px solid #e8f4f8;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-modern td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.table-modern tbody tr {
    transition: all 0.2s ease;
}

.table-modern tbody tr:hover {
    background: #f8fafc;
}

.table-modern tbody tr:last-child td {
    border-bottom: none;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-modern {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: white;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.user-avatar-modern.online { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.user-avatar-modern.offline { background: linear-gradient(135deg, #607D8B 0%, #90A4AE 100%); }
.user-avatar-modern.disabled { background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%); }

.user-name {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.9rem;
    margin: 0;
}

.user-sub {
    font-size: 0.75rem;
    color: #999;
    margin-top: 2px;
}

/* ============================================
   BADGE MODERN
   ============================================ */
.badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-modern.online {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #a3cfbb;
}

.badge-modern.offline {
    background: #e9ecef;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.badge-modern.disabled {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f1aeb5;
}

.badge-modern.profile {
    background: #cfe2ff;
    color: #084298;
    border: 1px solid #b6d4fe;
    text-transform: none;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.action-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-action {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.btn-action.kick {
    background: #fff3cd;
    color: #856404;
}

.btn-action.kick:hover {
    background: #FF9900;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}

.btn-action.suspend {
    background: #f8d7da;
    color: #842029;
}

.btn-action.suspend:hover {
    background: #DC3545;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-action.restore {
    background: #d1e7dd;
    color: #0f5132;
}

.btn-action.restore:hover {
    background: #00C853;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3);
}

.btn-action.delete {
    background: #ffe5e5;
    color: #842029;
}

.btn-action.delete:hover {
    background: #b02a37;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(176, 42, 55, 0.3);
}

/* ============================================
   MOBILE CARD VIEW
   ============================================ */
.mobile-cards {
    display: none;
}

.mobile-card {
    background: white;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
}

.mobile-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e8f4f8;
}

.mobile-card-info {
    flex: 1;
    min-width: 0;
}

.mobile-card-name {
    font-weight: 700;
    color: #003D7A;
    font-size: 1rem;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.mobile-card-body {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
}

.mobile-card-row .label {
    color: #999;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    min-width: 70px;
}

.mobile-card-row .value {
    color: #333;
    font-weight: 600;
    text-align: right;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.mobile-card-footer {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed #e8f4f8;
    flex-wrap: wrap;
}

.mobile-card-footer .btn-action {
    flex: 1;
    min-width: 60px;
    height: 38px;
    font-size: 0.85rem;
    gap: 4px;
    justify-content: center;
    padding: 0 8px;
}

.mobile-card-footer .btn-action span {
    font-weight: 600;
    font-size: 0.78rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    text-align: center;
    padding: 50px 20px;
}

.empty-state-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ccc;
}

.empty-state-title {
    color: #666;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 1rem;
}

.empty-state-subtitle {
    color: #999;
    font-size: 0.85rem;
    margin: 0;
}

/* ============================================
   ALERT MODERN
   ============================================ */
.alert-modern {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    border: 2px solid;
}

.alert-modern.success {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #2e7d32;
}

.alert-modern.danger {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #c62828;
}

.alert-modern.warning {
    background: #fff8e1;
    border-color: #ffe082;
    color: #f57c00;
}

.alert-modern i {
    font-size: 1.3rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ============================================
   MODAL MODERN
   ============================================ */
.modal-modern .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-modern .modal-header {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    padding: 18px 24px;
    border: none;
}

.modal-modern .modal-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.modal-modern .modal-body {
    padding: 24px;
}

.modal-modern .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    background: #f8fafc;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.form-group-modal {
    margin-bottom: 18px;
}

.form-label-modal {
    display: block;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control-modal {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e8f4f8;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    font-family: inherit;
}

.form-control-modal:focus {
    outline: none;
    border-color: #0066CC;
    background: white;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #999;
}

.btn-modal {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-modal.secondary {
    background: white;
    color: #666;
    border: 2px solid #e8f4f8;
}

.btn-modal.secondary:hover {
    background: #f8fafc;
}

.btn-modal.primary {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-modal.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .filter-form {
        grid-template-columns: 1fr 1fr;
    }
    
    .filter-form .form-group-modern:first-child,
    .filter-form .form-group-modern:nth-child(2) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-title {
        font-size: 1.4rem;
    }
    
    .page-title i {
        font-size: 1.6rem;
    }
    
    .btn-add {
        width: 100%;
        justify-content: center;
    }
    
    .summary-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .summary-card {
        padding: 14px;
    }
    
    .summary-card-value {
        font-size: 1.5rem;
    }
    
    .summary-card-title {
        font-size: 0.75rem;
    }
    
    .summary-card-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    
    /* Hide table view on mobile, show card view */
    .desktop-table {
        display: none;
    }
    
    .mobile-cards {
        display: block;
    }
    
    .card-header-modern {
        padding: 15px 18px;
        font-size: 1rem;
    }
    
    .card-body-modern {
        padding: 16px;
    }
    
    .filter-form {
        grid-template-columns: 1fr;
    }
    
    .filter-form .form-group-modern {
        grid-column: 1 / -1;
    }
    
    .alert-modern {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
    
    .modal-modern .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    
    .modal-modern .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.2rem;
        gap: 8px;
    }
    
    .summary-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .summary-card {
        padding: 12px;
    }
    
    .summary-card-value {
        font-size: 1.25rem;
    }
    
    .summary-card-footer {
        font-size: 0.7rem;
    }
    
    .card-header-modern {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
    
    .card-body-modern {
        padding: 14px;
    }
    
    .mobile-card {
        padding: 14px;
    }
    
    .mobile-card-name {
        font-size: 0.95rem;
    }
    
    .mobile-card-row {
        font-size: 0.8rem;
    }
    
    .mobile-card-footer .btn-action {
        font-size: 0.78rem;
        height: 36px;
    }
}
</style>

<div class="main-content">
    <!-- ============================================
         CONTENT WRAPPER
         ============================================ -->
    <div class="content-wrapper">
        <!-- Page Header -->
        <div class="page-header">
            <div>
                <h2 class="page-title">
                    <i class="bi bi-ethernet"></i>
                    <span>PPPoE Status</span>
                </h2>
                <p class="page-subtitle">Monitoring dan manajemen user PPPoE MikroTik</p>
            </div>
            <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addUserModal">
                <i class="bi bi-person-plus-fill"></i>
                <span>Tambah User</span>
            </button>
        </div>

        <?= flashMessage() ?>
        
        <?php if ($success): ?>
            <div class="alert-modern success">
                <i class="bi bi-check-circle-fill"></i>
                <div><?= $success ?></div>
            </div>
        <?php endif; ?>
        
        <?php if ($error): ?>
            <div class="alert-modern danger">
                <i class="bi bi-exclamation-circle-fill"></i>
                <div><?= $error ?></div>
            </div>
        <?php endif; ?>

        <?php if (!$pppoeData['success']): ?>
            <div class="alert-modern danger">
                <i class="bi bi-exclamation-triangle-fill"></i>
                <div>
                    <strong>Gagal mengambil data PPPoE:</strong><br>
                    <?= htmlspecialchars($pppoeData['error']) ?>
                </div>
            </div>
        <?php else: ?>
            
            <!-- Summary Cards -->
            <div class="summary-row">
                <div class="summary-card primary">
                    <div class="summary-card-header">
                        <h6 class="summary-card-title">
                            <i class="bi bi-people-fill"></i> Total Users
                        </h6>
                        <div class="summary-card-icon">
                            <i class="bi bi-people"></i>
                        </div>
                    </div>
                    <div class="summary-card-value"><?= $pppoeData['total_secrets'] ?></div>
                    <div class="summary-card-footer">👥 Seluruh user PPPoE</div>
                </div>
                <div class="summary-card success">
                    <div class="summary-card-header">
                        <h6 class="summary-card-title">
                            <i class="bi bi-wifi"></i> Online
                        </h6>
                        <div class="summary-card-icon">
                            <i class="bi bi-wifi"></i>
                        </div>
                    </div>
                    <div class="summary-card-value"><?= $pppoeData['total_online'] ?></div>
                    <div class="summary-card-footer">🟢 Sedang terhubung</div>
                </div>
                <div class="summary-card secondary">
                    <div class="summary-card-header">
                        <h6 class="summary-card-title">
                            <i class="bi bi-wifi-off"></i> Offline
                        </h6>
                        <div class="summary-card-icon">
                            <i class="bi bi-wifi-off"></i>
                        </div>
                    </div>
                    <div class="summary-card-value"><?= $pppoeData['total_offline'] ?></div>
                    <div class="summary-card-footer">⚪ Tidak terhubung</div>
                </div>
                <div class="summary-card danger">
                    <div class="summary-card-header">
                        <h6 class="summary-card-title">
                            <i class="bi bi-pause-circle-fill"></i> Disabled
                        </h6>
                        <div class="summary-card-icon">
                            <i class="bi bi-pause-circle"></i>
                        </div>
                    </div>
                    <div class="summary-card-value"><?= $pppoeData['total_disabled'] ?></div>
                    <div class="summary-card-footer">🔴 User di-suspend</div>
                </div>
            </div>

            <!-- Filter & Search -->
            <div class="card-modern">
                <div class="card-header-modern primary">
                    <div class="title-left">
                        <i class="bi bi-funnel-fill"></i>
                        <span>Filter & Search</span>
                    </div>
                </div>
                <div class="card-body-modern">
                    <form method="GET" class="filter-form">
                        <div class="form-group-modern">
                            <label class="form-label-modern">
                                <i class="bi bi-search"></i> Cari Username
                            </label>
                            <input type="text" name="search" class="form-control-modern" 
                                   value="<?= htmlspecialchars($search) ?>" placeholder="Ketik username...">
                        </div>
                        <div class="form-group-modern">
                            <label class="form-label-modern">
                                <i class="bi bi-funnel"></i> Filter Status
                            </label>
                            <select name="filter" class="form-select-modern">
                                <option value="all" <?= $filter === 'all' ? 'selected' : '' ?>>📋 Semua</option>
                                <option value="online" <?= $filter === 'online' ? 'selected' : '' ?>>🟢 Online</option>
                                <option value="offline" <?= $filter === 'offline' ? 'selected' : '' ?>>⚪ Offline</option>
                                <option value="disabled" <?= $filter === 'disabled' ? 'selected' : '' ?>>🔴 Disabled</option>
                            </select>
                        </div>
                        <button type="submit" class="btn-modern primary">
                            <i class="bi bi-search"></i>
                            <span>Filter</span>
                        </button>
                        <a href="mikrotik_status.php" class="btn-modern outline">
                            <i class="bi bi-arrow-counterclockwise"></i>
                            <span>Reset</span>
                        </a>
                    </form>
                </div>
            </div>

            <!-- User Table (Desktop) -->
            <div class="card-modern">
                <div class="card-header-modern info">
                    <div class="title-left">
                        <i class="bi bi-list-ul"></i>
                        <span>Daftar User PPPoE</span>
                    </div>
                    <span class="navbar-badge" style="background: rgba(255,255,255,0.25);">
                        <?= count($pppoeData['online']) + count($pppoeData['offline']) ?> user
                    </span>
                </div>
                
                <?php
                // Gabungkan online & offline, lalu filter
                $allUsers = array_merge($pppoeData['online'], $pppoeData['offline']);
                
                // Apply filter
                if ($filter === 'online') {
                    $allUsers = array_filter($allUsers, fn($u) => $u['status'] === 'online');
                } elseif ($filter === 'offline') {
                    $allUsers = array_filter($allUsers, fn($u) => $u['status'] === 'offline' && !$u['disabled']);
                } elseif ($filter === 'disabled') {
                    $allUsers = array_filter($allUsers, fn($u) => $u['disabled']);
                }
                
                // Apply search
                if (!empty($search)) {
                    $allUsers = array_filter($allUsers, fn($u) => stripos($u['name'], $search) !== false);
                }
                ?>
                
                <?php if (empty($allUsers)): ?>
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="bi bi-inbox"></i>
                        </div>
                        <h5 class="empty-state-title">Tidak ada user yang cocok</h5>
                        <p class="empty-state-subtitle">Coba ubah filter atau kata kunci pencarian</p>
                    </div>
                <?php else: ?>
                    <!-- Desktop Table View -->
                    <div class="desktop-table" style="overflow-x: auto;">
                        <table class="table-modern">
                            <thead>
                                <tr>
                                    <th>Username</th>
                                    <th>Profile</th>
                                    <th>Status</th>
                                    <th>IP Address</th>
                                    <th>Uptime</th>
                                    <th>Comment</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($allUsers as $user): ?>
                                    <?php
                                        $avatarClass = $user['disabled'] ? 'disabled' : ($user['status'] === 'online' ? 'online' : 'offline');
                                    ?>
                                    <tr>
                                        <td>
                                            <div class="user-cell">
                                                <div class="user-avatar-modern <?= $avatarClass ?>">
                                                    <?= strtoupper(substr($user['name'], 0, 1)) ?>
                                                </div>
                                                <div>
                                                    <div class="user-name">
                                                        <?= htmlspecialchars($user['name']) ?>
                                                        <?php if ($user['disabled']): ?>
                                                            <span class="badge-modern disabled" style="margin-left: 4px;">Disabled</span>
                                                        <?php endif; ?>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge-modern profile">
                                                <i class="bi bi-person-badge"></i>
                                                <?= htmlspecialchars($user['profile']) ?>
                                            </span>
                                        </td>
                                        <td>
                                            <?php if ($user['status'] === 'online'): ?>
                                                <span class="badge-modern online">
                                                    <span class="status-dot online"></span> Online
                                                </span>
                                            <?php else: ?>
                                                <span class="badge-modern offline">
                                                    <span class="status-dot offline"></span> Offline
                                                </span>
                                            <?php endif; ?>
                                        </td>
                                        <td>
                                            <code style="background: #f8fafc; padding: 3px 8px; border-radius: 6px; font-size: 0.82rem;">
                                                <?= htmlspecialchars($user['address'] ?? '-') ?>
                                            </code>
                                        </td>
                                        <td>
                                            <div style="font-size: 0.85rem; font-weight: 600; color: #003D7A;">
                                                <?= htmlspecialchars($user['uptime'] ?? '-') ?>
                                            </div>
                                        </td>
                                        <td>
                                            <small style="color: #666;">
                                                <?= htmlspecialchars($user['comment'] ?: '-') ?>
                                            </small>
                                        </td>
                                        <td>
                                            <div class="action-buttons" style="justify-content: center;">
                                                <?php if ($user['status'] === 'online'): ?>
                                                    <form method="POST" style="display: inline;" onsubmit="return confirm('Kick user <?= htmlspecialchars($user['name']) ?>?')">
                                                        <?= csrfField() ?>
                                                        <input type="hidden" name="action" value="kick">
                                                        <input type="hidden" name="username" value="<?= htmlspecialchars($user['name']) ?>">
                                                        <button type="submit" class="btn-action kick" title="Kick">
                                                            <i class="bi bi-lightning-fill"></i>
                                                        </button>
                                                    </form>
                                                <?php endif; ?>
                                                
                                                <?php if ($user['disabled']): ?>
                                                    <form method="POST" style="display: inline;">
                                                        <?= csrfField() ?>
                                                        <input type="hidden" name="action" value="restore">
                                                        <input type="hidden" name="username" value="<?= htmlspecialchars($user['name']) ?>">
                                                        <button type="submit" class="btn-action restore" title="Restore">
                                                            <i class="bi bi-play-fill"></i>
                                                        </button>
                                                    </form>
                                                <?php else: ?>
                                                    <form method="POST" style="display: inline;" onsubmit="return confirm('Suspend user <?= htmlspecialchars($user['name']) ?>?')">
                                                        <?= csrfField() ?>
                                                        <input type="hidden" name="action" value="suspend">
                                                        <input type="hidden" name="username" value="<?= htmlspecialchars($user['name']) ?>">
                                                        <button type="submit" class="btn-action suspend" title="Suspend">
                                                            <i class="bi bi-pause-fill"></i>
                                                        </button>
                                                    </form>
                                                <?php endif; ?>
                                                
                                                <form method="POST" style="display: inline;" onsubmit="return confirm('HAPUS user <?= htmlspecialchars($user['name']) ?>? Tindakan ini tidak bisa dibatalkan!')">
                                                    <?= csrfField() ?>
                                                    <input type="hidden" name="action" value="delete">
                                                    <input type="hidden" name="username" value="<?= htmlspecialchars($user['name']) ?>">
                                                    <button type="submit" class="btn-action delete" title="Hapus">
                                                        <i class="bi bi-trash-fill"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Mobile Card View -->
                    <div class="mobile-cards" style="padding: 16px;">
                        <?php foreach ($allUsers as $user): ?>
                            <?php
                                $avatarClass = $user['disabled'] ? 'disabled' : ($user['status'] === 'online' ? 'online' : 'offline');
                            ?>
                            <div class="mobile-card">
                                <div class="mobile-card-header">
                                    <div class="user-avatar-modern <?= $avatarClass ?>">
                                        <?= strtoupper(substr($user['name'], 0, 1)) ?>
                                    </div>
                                    <div class="mobile-card-info">
                                        <h5 class="mobile-card-name"><?= htmlspecialchars($user['name']) ?></h5>
                                        <div class="mobile-card-meta">
                                            <span class="badge-modern profile">
                                                <i class="bi bi-person-badge"></i>
                                                <?= htmlspecialchars($user['profile']) ?>
                                            </span>
                                            <?php if ($user['status'] === 'online'): ?>
                                                <span class="badge-modern online">
                                                    <span class="status-dot online"></span> Online
                                                </span>
                                            <?php else: ?>
                                                <span class="badge-modern offline">
                                                    <span class="status-dot offline"></span> Offline
                                                </span>
                                            <?php endif; ?>
                                            <?php if ($user['disabled']): ?>
                                                <span class="badge-modern disabled">Disabled</span>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mobile-card-body">
                                    <?php if (!empty($user['address']) && $user['address'] !== '-'): ?>
                                        <div class="mobile-card-row">
                                            <span class="label">IP Address</span>
                                            <span class="value">
                                                <code style="background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem;">
                                                    <?= htmlspecialchars($user['address']) ?>
                                                </code>
                                            </span>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <?php if (!empty($user['uptime']) && $user['uptime'] !== '-'): ?>
                                        <div class="mobile-card-row">
                                            <span class="label">Uptime</span>
                                            <span class="value" style="color: #0066CC; font-weight: 700;">
                                                ⏱️ <?= htmlspecialchars($user['uptime']) ?>
                                            </span>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <?php if (!empty($user['comment'])): ?>
                                        <div class="mobile-card-row">
                                            <span class="label">Comment</span>
                                            <span class="value" style="font-size: 0.82rem; color: #666;">
                                                💬 <?= htmlspecialchars($user['comment']) ?>
                                            </span>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                
                                <div class="mobile-card-footer">
                                    <?php if ($user['status'] === 'online'): ?>
                                        <form method="POST" style="flex: 1; display: flex;" onsubmit="return confirm('Kick user <?= htmlspecialchars($user['name']) ?>?')">
                                            <?= csrfField() ?>
                                            <input type="hidden" name="action" value="kick">
                                            <input type="hidden" name="username" value="<?= htmlspecialchars($user['name']) ?>">
                                            <button type="submit" class="btn-action kick" style="flex: 1;">
                                                <i class="bi bi-lightning-fill"></i>
                                                <span>Kick</span>
                                            </button>
                                        </form>
                                    <?php endif; ?>
                                    
                                    <?php if ($user['disabled']): ?>
                                        <form method="POST" style="flex: 1; display: flex;">
                                            <?= csrfField() ?>
                                            <input type="hidden" name="action" value="restore">
                                            <input type="hidden" name="username" value="<?= htmlspecialchars($user['name']) ?>">
                                            <button type="submit" class="btn-action restore" style="flex: 1;">
                                                <i class="bi bi-play-fill"></i>
                                                <span>Restore</span>
                                            </button>
                                        </form>
                                    <?php else: ?>
                                        <form method="POST" style="flex: 1; display: flex;" onsubmit="return confirm('Suspend user <?= htmlspecialchars($user['name']) ?>?')">
                                            <?= csrfField() ?>
                                            <input type="hidden" name="action" value="suspend">
                                            <input type="hidden" name="username" value="<?= htmlspecialchars($user['name']) ?>">
                                            <button type="submit" class="btn-action suspend" style="flex: 1;">
                                                <i class="bi bi-pause-fill"></i>
                                                <span>Suspend</span>
                                            </button>
                                        </form>
                                    <?php endif; ?>
                                    
                                    <form method="POST" style="flex: 1; display: flex;" onsubmit="return confirm('HAPUS user <?= htmlspecialchars($user['name']) ?>?')">
                                        <?= csrfField() ?>
                                        <input type="hidden" name="action" value="delete">
                                        <input type="hidden" name="username" value="<?= htmlspecialchars($user['name']) ?>">
                                        <button type="submit" class="btn-action delete" style="flex: 1;">
                                            <i class="bi bi-trash-fill"></i>
                                            <span>Hapus</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
            
        <?php endif; ?>
    </div>
    <!-- End Content Wrapper -->
</div>

<!-- Add User Modal -->
<div class="modal fade modal-modern" id="addUserModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST">
            <?= csrfField() ?>
            <input type="hidden" name="action" value="add_user">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-person-plus-fill"></i>
                        Tambah User PPPoE
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group-modal">
                        <label class="form-label-modal">
                            <i class="bi bi-person"></i> Username *
                        </label>
                        <input type="text" name="new_username" class="form-control-modal" required
                               placeholder="Username PPPoE">
                    </div>
                    <div class="form-group-modal">
                        <label class="form-label-modal">
                            <i class="bi bi-lock"></i> Password *
                        </label>
                        <input type="text" name="new_password" class="form-control-modal" required
                               placeholder="Password user">
                    </div>
                    <div class="form-group-modal">
                        <label class="form-label-modal">
                            <i class="bi bi-person-badge"></i> Profile
                        </label>
                        <input type="text" name="new_profile" class="form-control-modal" value="default" 
                               placeholder="default">
                        <small class="form-hint">Nama profile di MikroTik (contoh: default, 10Mbps, 20Mbps)</small>
                    </div>
                    <div class="form-group-modal">
                        <label class="form-label-modal">
                            <i class="bi bi-chat-left-text"></i> Comment
                        </label>
                        <input type="text" name="new_comment" class="form-control-modal" 
                               placeholder="Opsional - catatan untuk user ini">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-modal secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn-modal primary">
                        <i class="bi bi-save-fill"></i> Simpan User
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    if (sidebar && overlay) {
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
        document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
    }
}
</script>

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