<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../classes/MikroTik.php';
requireRole('super_admin');
$pageTitle = 'MikroTik Settings';

$db = db();

// Load current config
$stmt = $db->query("SELECT * FROM mikrotik_config");
$config = [];
while ($row = $stmt->fetch()) {
    $config[$row['setting_key']] = $row['setting_value'];
}

$success = '';
$error = '';
$testResult = null;

// Handle save config
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'save_config') {
    if (verifyCsrf($_POST['csrf_token'] ?? '')) {
        $settings = [
            'host'          => trim($_POST['host']),
            'user'          => trim($_POST['user']),
            'pass'          => $_POST['pass'],
            'port'          => (int)$_POST['port'],
            'timeout'       => (int)$_POST['timeout'],
            'pppoe_service' => trim($_POST['pppoe_service']),
        ];
        
        foreach ($settings as $key => $value) {
            $db->prepare("INSERT INTO mikrotik_config (setting_key, setting_value) VALUES (?, ?) ON DUPLICATE KEY UPDATE setting_value = ?")
               ->execute([$key, $value, $value]);
        }
        
        $success = '✅ Konfigurasi MikroTik berhasil disimpan';
        $config = array_merge($config, $settings);
    }
}

// Handle test connection
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'test_connection') {
    if (verifyCsrf($_POST['csrf_token'] ?? '')) {
        try {
            $mt = new MikroTik();
            $testResult = $mt->testConnection();
            
            if ($testResult['success']) {
                $success = '✅ Koneksi ke MikroTik BERHASIL!';
            } else {
                $error = '❌ Koneksi GAGAL: ' . $testResult['error'];
            }
        } catch (\Throwable $e) {
            $error = '❌ Error: ' . $e->getMessage();
        }
    }
}

// Get connection status (reuse testResult if available)
if (!$testResult) {
    try {
        $mt_status = new MikroTik();
        $testResult = $mt_status->testConnection();
    } catch (\Throwable $e) {
        $testResult = ['success' => false, 'error' => $e->getMessage()];
    }
}

$isConnected = $testResult['success'] ?? false;

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

<style>
/* === PAGE HEADER === */
.page-header {
    margin-bottom: 25px;
}

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

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

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

/* === STATUS CARD === */
.status-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

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

.status-card.connected::before {
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
}

.status-card.disconnected::before {
    background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%);
}

.status-card.unknown::before {
    background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
}

.status-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.status-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    flex-shrink: 0;
    position: relative;
}

.status-card.connected .status-icon-large {
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
    box-shadow: 0 8px 20px rgba(0, 200, 83, 0.3);
}

.status-card.disconnected .status-icon-large {
    background: linear-gradient(135deg, #DC3545 0%, #FF6B7A 100%);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}

.status-card.unknown .status-icon-large {
    background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
    box-shadow: 0 8px 20px rgba(255, 153, 0, 0.3);
}

.status-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: inherit;
    opacity: 0.6;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 0; }
}

.status-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 4px;
}

.status-card.connected .status-title { color: #00C853; }
.status-card.disconnected .status-title { color: #DC3545; }
.status-card.unknown .status-title { color: #FF9900; }

.status-subtitle {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding-top: 20px;
    border-top: 2px dashed #e8f4f8;
}

.status-item {
    background: #f8fafc;
    padding: 14px 16px;
    border-radius: 12px;
    border-left: 3px solid #0066CC;
}

.status-item-label {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.status-item-value {
    font-size: 1rem;
    font-weight: 700;
    color: #003D7A;
    word-break: break-all;
}

/* === 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;
}

/* === FORM === */
.form-group-modern {
    margin-bottom: 20px;
}

.form-label-modern {
    display: block;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-label-modern i {
    color: #0066CC;
}

.form-control-modern {
    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-modern: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.82rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row-wide {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

/* === BUTTONS === */
.btn-modern {
    padding: 12px 24px;
    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;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

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

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

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

.btn-modern.success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.4);
}

.btn-group-modern {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px dashed #e8f4f8;
}

/* === 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 i {
    font-size: 1.3rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* === CODE BLOCK MODERN === */
.code-block {
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.code-block-header {
    background: #0f172a;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #334155;
}

.code-block-title {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.code-block-dots {
    display: flex;
    gap: 6px;
}

.code-block-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.code-block-dots span:nth-child(1) { background: #ef4444; }
.code-block-dots span:nth-child(2) { background: #f59e0b; }
.code-block-dots span:nth-child(3) { background: #10b981; }

.code-block-content {
    padding: 16px;
    color: #e2e8f0;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

.code-block-content .cmd { color: #60a5fa; }
.code-block-content .param { color: #fbbf24; }
.code-block-content .value { color: #34d399; }

/* === STEP LIST === */
.step-list {
    display: grid;
    gap: 16px;
}

.step-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 4px solid #0066CC;
    transition: all 0.3s ease;
}

.step-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
    min-width: 0;
}

.step-title {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.95rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* === TROUBLE LIST === */
.trouble-list {
    display: grid;
    gap: 10px;
}

.trouble-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 3px solid #FF9900;
}

.trouble-icon {
    color: #FF9900;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.trouble-content {
    flex: 1;
    min-width: 0;
}

.trouble-title {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.88rem;
    margin-bottom: 4px;
    font-family: 'Courier New', monospace;
    background: #fff3cd;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.trouble-desc {
    font-size: 0.82rem;
    color: #555;
    line-height: 1.5;
}

/* === QUICK CHECK === */
.quick-check {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.quick-check-title {
    font-weight: 700;
    color: #003D7A;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-check-list li {
    padding: 6px 0;
    color: #1565c0;
    font-size: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.quick-check-list li i {
    color: #0066CC;
    margin-top: 2px;
    flex-shrink: 0;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .form-row, .form-row-wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 15px;
    }
    
    .page-title {
        font-size: 1.4rem;
    }
    
    .page-title i {
        font-size: 1.6rem;
    }
    
    .status-card {
        padding: 20px;
    }
    
    .status-card-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .status-icon-large {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }
    
    .status-title {
        font-size: 1.2rem;
    }
    
    .status-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .card-header-modern {
        padding: 15px 18px;
        font-size: 1rem;
    }
    
    .card-body-modern {
        padding: 16px;
    }
    
    .btn-modern {
        padding: 11px 18px;
        font-size: 0.9rem;
        flex: 1;
        justify-content: center;
    }
    
    .btn-group-modern {
        flex-direction: column;
    }
    
    .btn-group-modern .btn-modern {
        width: 100%;
    }
    
    .step-item {
        padding: 12px;
    }
    
    .code-block-content {
        font-size: 0.75rem;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 12px;
    }
    
    .page-title {
        font-size: 1.2rem;
        gap: 8px;
    }
    
    .status-card {
        padding: 16px;
    }
    
    .status-icon-large {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
    }
    
    .status-title {
        font-size: 1.1rem;
    }
    
    .status-item {
        padding: 10px 12px;
    }
    
    .status-item-value {
        font-size: 0.9rem;
    }
    
    .card-header-modern {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
    
    .card-body-modern {
        padding: 14px;
    }
    
    .form-control-modern {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
    
    .form-label-modern {
        font-size: 0.85rem;
    }
    
    .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .step-title {
        font-size: 0.88rem;
    }
}
</style>

<div class="main-content">
    <!-- Page Header -->
    <div class="page-header">
        <h2 class="page-title">
            <i class="bi bi-router"></i>
            <span>MikroTik Settings</span>
        </h2>
        <p class="page-subtitle">Konfigurasi koneksi API ke router MikroTik</p>
    </div>

    <?= flashMessage() ?>
    
    <?php if ($success): ?>
        <div class="alert alert-success alert-dismissible fade show">
            <?= $success ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>
    
    <?php if ($error): ?>
        <div class="alert alert-danger alert-dismissible fade show">
            <?= $error ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    <?php endif; ?>

    <!-- Status Connection Card -->
    <div class="status-card <?= $testResult ? ($isConnected ? 'connected' : 'disconnected') : 'unknown' ?>">
        <div class="status-card-header">
            <div class="status-icon-large">
                <?php if ($testResult): ?>
                    <div class="status-pulse"></div>
                <?php endif; ?>
                <i class="bi bi-<?= $testResult ? ($isConnected ? 'wifi' : 'wifi-off') : 'question-circle' ?>"></i>
            </div>
            <div>
                <h3 class="status-title">
                    <?php if ($testResult): ?>
                        <?= $isConnected ? '✅ Connected' : '❌ Disconnected' ?>
                    <?php else: ?>
                        ⚠️ Belum Dicek
                    <?php endif; ?>
                </h3>
                <p class="status-subtitle">
                    <?php if ($testResult): ?>
                        <?= $isConnected 
                            ? 'Koneksi ke MikroTik berhasil dan siap digunakan' 
                            : 'Tidak dapat terhubung ke MikroTik. Periksa konfigurasi.' ?>
                    <?php else: ?>
                        Klik tombol "Test Koneksi" untuk memeriksa koneksi
                    <?php endif; ?>
                </p>
            </div>
        </div>
        
        <div class="status-grid">
            <div class="status-item">
                <div class="status-item-label">🌐 Host</div>
                <div class="status-item-value">
                    <?= htmlspecialchars($config['host'] ?? '-') ?>:<?= htmlspecialchars($config['port'] ?? '-') ?>
                </div>
            </div>
            <?php if ($isConnected): ?>
                <div class="status-item">
                    <div class="status-item-label">🏷️ Identity</div>
                    <div class="status-item-value"><?= htmlspecialchars($testResult['identity'] ?? '-') ?></div>
                </div>
                <div class="status-item">
                    <div class="status-item-label">📦 RouterOS</div>
                    <div class="status-item-value"><?= htmlspecialchars($testResult['version'] ?? '-') ?></div>
                </div>
                <div class="status-item">
                    <div class="status-item-label">🖥️ Board</div>
                    <div class="status-item-value"><?= htmlspecialchars($testResult['board'] ?? '-') ?></div>
                </div>
                <div class="status-item">
                    <div class="status-item-label">⏱️ Uptime</div>
                    <div class="status-item-value"><?= htmlspecialchars($testResult['uptime'] ?? '-') ?></div>
                </div>
            <?php elseif ($testResult): ?>
                <div class="status-item" style="grid-column: 1 / -1; border-left-color: #DC3545;">
                    <div class="status-item-label">⚠️ Error</div>
                    <div class="status-item-value" style="color: #DC3545;">
                        <?= htmlspecialchars($testResult['error'] ?? 'Unknown error') ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <div class="row g-4">
        <!-- Kolom Kiri: Konfigurasi -->
        <div class="col-lg-8">
            <div class="card-modern">
                <div class="card-header-modern primary">
                    <div class="title-left">
                        <i class="bi bi-gear-fill"></i>
                        <span>Konfigurasi Koneksi</span>
                    </div>
                </div>
                <div class="card-body-modern">
                    <form method="POST">
                        <?= csrfField() ?>
                        <input type="hidden" name="action" value="save_config">
                        
                        <div class="form-row-wide">
                            <div class="form-group-modern">
                                <label class="form-label-modern">
                                    <i class="bi bi-hdd-network"></i> IP Address / Hostname *
                                </label>
                                <input type="text" name="host" class="form-control-modern" 
                                       value="<?= htmlspecialchars($config['host'] ?? '192.168.88.1') ?>" 
                                       required placeholder="192.168.88.1">
                                <small class="form-hint">
                                    <i class="bi bi-info-circle"></i> IP address MikroTik atau hostname
                                </small>
                            </div>
                            <div class="form-group-modern">
                                <label class="form-label-modern">
                                    <i class="bi bi-plug"></i> API Port *
                                </label>
                                <input type="number" name="port" class="form-control-modern" 
                                       value="<?= htmlspecialchars($config['port'] ?? 8728) ?>" 
                                       required min="1" max="65535">
                                <small class="form-hint">
                                    <i class="bi bi-info-circle"></i> Default: 8728
                                </small>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-modern">
                                <label class="form-label-modern">
                                    <i class="bi bi-person"></i> Username *
                                </label>
                                <input type="text" name="user" class="form-control-modern" 
                                       value="<?= htmlspecialchars($config['user'] ?? 'admin') ?>" 
                                       required placeholder="admin">
                            </div>
                            <div class="form-group-modern">
                                <label class="form-label-modern">
                                    <i class="bi bi-lock"></i> Password
                                </label>
                                <input type="password" name="pass" class="form-control-modern" 
                                       value="<?= htmlspecialchars($config['pass'] ?? '') ?>" 
                                       placeholder="Kosongkan jika tidak ada">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group-modern">
                                <label class="form-label-modern">
                                    <i class="bi bi-clock"></i> Timeout (detik)
                                </label>
                                <input type="number" name="timeout" class="form-control-modern" 
                                       value="<?= htmlspecialchars($config['timeout'] ?? 3) ?>" 
                                       min="1" max="30">
                                <small class="form-hint">
                                    <i class="bi bi-info-circle"></i> Disarankan 3-5 detik
                                </small>
                            </div>
                            <div class="form-group-modern">
                                <label class="form-label-modern">
                                    <i class="bi bi-broadcast"></i> PPPoE Service Name
                                </label>
                                <input type="text" name="pppoe_service" class="form-control-modern" 
                                       value="<?= htmlspecialchars($config['pppoe_service'] ?? 'pppoe-service') ?>"
                                       placeholder="pppoe-service">
                                <small class="form-hint">
                                    <i class="bi bi-info-circle"></i> Nama service PPPoE di MikroTik
                                </small>
                            </div>
                        </div>
                        
                        <div class="btn-group-modern">
                            <button type="submit" class="btn-modern primary">
                                <i class="bi bi-save-fill"></i>
                                <span>Simpan Konfigurasi</span>
                            </button>
                            <button type="submit" name="action" value="test_connection" class="btn-modern success">
                                <i class="bi bi-plug-fill"></i>
                                <span>Test Koneksi</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Cara Konfigurasi -->
            <div class="card-modern">
                <div class="card-header-modern info">
                    <div class="title-left">
                        <i class="bi bi-book-fill"></i>
                        <span>Cara Konfigurasi MikroTik</span>
                    </div>
                </div>
                <div class="card-body-modern">
                    <div class="step-list">
                        <div class="step-item">
                            <div class="step-number">1</div>
                            <div class="step-content">
                                <div class="step-title">
                                    <i class="bi bi-toggle-on"></i> Enable API di MikroTik
                                </div>
                                <div class="code-block">
                                    <div class="code-block-header">
                                        <div class="code-block-title">
                                            <i class="bi bi-terminal-fill"></i> MikroTik Terminal
                                        </div>
                                        <div class="code-block-dots">
                                            <span></span><span></span><span></span>
                                        </div>
                                    </div>
                                    <pre class="code-block-content"><span class="cmd">/ip service</span>
<span class="cmd">set</span> <span class="param">api</span> <span class="value">disabled=no</span> <span class="param">port</span>=<span class="value">8728</span></pre>
                                </div>
                            </div>
                        </div>
                        
                        <div class="step-item">
                            <div class="step-number">2</div>
                            <div class="step-content">
                                <div class="step-title">
                                    <i class="bi bi-person-plus"></i> Buat User untuk API
                                </div>
                                <div class="code-block">
                                    <div class="code-block-header">
                                        <div class="code-block-title">
                                            <i class="bi bi-terminal-fill"></i> MikroTik Terminal
                                        </div>
                                        <div class="code-block-dots">
                                            <span></span><span></span><span></span>
                                        </div>
                                    </div>
                                    <pre class="code-block-content"><span class="cmd">/user</span>
<span class="cmd">add</span> <span class="param">name</span>=<span class="value">phpapi</span> <span class="param">group</span>=<span class="value">full</span> <span class="param">password</span>=<span class="value">YourPassword</span></pre>
                                </div>
                            </div>
                        </div>
                        
                        <div class="step-item">
                            <div class="step-number">3</div>
                            <div class="step-content">
                                <div class="step-title">
                                    <i class="bi bi-broadcast-pin"></i> Setup PPPoE Server
                                </div>
                                <div class="code-block">
                                    <div class="code-block-header">
                                        <div class="code-block-title">
                                            <i class="bi bi-terminal-fill"></i> MikroTik Terminal
                                        </div>
                                        <div class="code-block-dots">
                                            <span></span><span></span><span></span>
                                        </div>
                                    </div>
                                    <pre class="code-block-content"><span class="cmd">/interface pppoe-server server</span>
<span class="cmd">add</span> <span class="param">interface</span>=<span class="value">ether2</span> <span class="param">service-name</span>=<span class="value">pppoe-service</span> \
    <span class="param">authentication</span>=<span class="value">mschap2,mschap1,chap</span> \
    <span class="param">one-session-per-host</span>=<span class="value">yes</span> <span class="param">default-profile</span>=<span class="value">default</span></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Kolom Kanan: Troubleshooting -->
        <div class="col-lg-4">
            <div class="card-modern">
                <div class="card-header-modern warning">
                    <div class="title-left">
                        <i class="bi bi-tools"></i>
                        <span>Troubleshooting</span>
                    </div>
                </div>
                <div class="card-body-modern">
                    <div class="trouble-list">
                        <div class="trouble-item">
                            <i class="bi bi-exclamation-triangle-fill trouble-icon"></i>
                            <div class="trouble-content">
                                <div class="trouble-title">"Connection refused"</div>
                                <div class="trouble-desc">
                                    API service disabled atau terlalu banyak koneksi aktif di MikroTik.
                                </div>
                            </div>
                        </div>
                        <div class="trouble-item">
                            <i class="bi bi-exclamation-triangle-fill trouble-icon"></i>
                            <div class="trouble-content">
                                <div class="trouble-title">"Login failed"</div>
                                <div class="trouble-desc">
                                    Username/password salah atau user belum dibuat di MikroTik.
                                </div>
                            </div>
                        </div>
                        <div class="trouble-item">
                            <i class="bi bi-exclamation-triangle-fill trouble-icon"></i>
                            <div class="trouble-content">
                                <div class="trouble-title">"Timeout"</div>
                                <div class="trouble-desc">
                                    MikroTik tidak reachable. Naikkan timeout atau cek jaringan.
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="quick-check">
                        <div class="quick-check-title">
                            <i class="bi bi-lightning-fill"></i> Quick Check
                        </div>
                        <ul class="quick-check-list">
                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Pastikan API enabled di MikroTik</span>
                            </li>
                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Cek firewall tidak blocking port 8728</span>
                            </li>
                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>Test ping dari server ke IP MikroTik</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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