@extends('layouts.app')

@section('title', 'Detail Router Mikrotik')

@section('content')
<div class="container-fluid">
    <div class="corporate-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-router text-info me-2"></i>
                    Detail Router: {{ $mikrotik->name }}
                </h1>
                <p class="text-muted small mb-0">Informasi lengkap dan monitoring router Mikrotik</p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ route('mikrotiks.edit', $mikrotik) }}" class="btn btn-warning btn-sm me-2">
                    <i class="fas fa-edit me-1"></i>
                    Edit
                </a>
                <a href="{{ route('mikrotiks.index') }}" class="btn btn-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i>
                    Kembali
                </a>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <!-- Router Information -->
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Informasi Router
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Nama Router:</strong></td>
                                    <td>{{ $mikrotik->name }}</td>
                                </tr>
                                <tr>
                                    <td><strong>IP Address:</strong></td>
                                    <td><code>{{ $mikrotik->host }}</code></td>
                                </tr>
                                <tr>
                                    <td><strong>Username:</strong></td>
                                    <td>{{ $mikrotik->username }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Port API:</strong></td>
                                    <td><span class="badge bg-info">{{ $mikrotik->api_port }}</span></td>
                                </tr>
                                <tr>
                                    <td><strong>Port SSH:</strong></td>
                                    <td><span class="badge bg-secondary">{{ $mikrotik->ssh_port }}</span></td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Lokasi:</strong></td>
                                    <td>{{ $mikrotik->location ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>
                                        <span class="badge {{ $mikrotik->getStatusBadgeClass() }} status-badge" 
                                              data-id="{{ $mikrotik->id }}">
                                            <i class="{{ $mikrotik->getStatusIcon() }}"></i>
                                            {{ ucfirst($mikrotik->status) }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Router Aktif:</strong></td>
                                    <td>
                                        <span class="badge {{ $mikrotik->is_active ? 'bg-success' : 'bg-danger' }}">
                                            {{ $mikrotik->is_active ? 'Aktif' : 'Nonaktif' }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Auto Backup:</strong></td>
                                    <td>
                                        <span class="badge {{ $mikrotik->auto_backup ? 'bg-success' : 'bg-secondary' }}">
                                            {{ $mikrotik->auto_backup ? 'Aktif' : 'Nonaktif' }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Koneksi Terakhir:</strong></td>
                                    <td>
                                        @if($mikrotik->last_connected)
                                            <span class="text-success">
                                                {{ $mikrotik->last_connected->format('d M Y, H:i') }}
                                                <br><small class="text-muted">{{ $mikrotik->last_connected->diffForHumans() }}</small>
                                            </span>
                                        @else
                                            <span class="text-muted">Belum pernah terhubung</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    @if($mikrotik->description)
                        <div class="mt-3">
                            <strong>Deskripsi:</strong>
                            <p class="text-muted mt-2">{{ $mikrotik->description }}</p>
                        </div>
                    @endif

                    @if($mikrotik->backup_path)
                        <div class="mt-3">
                            <strong>Path Backup:</strong>
                            <code class="d-block mt-2">{{ $mikrotik->backup_path }}</code>
                        </div>
                    @endif
                </div>
            </div>

            <!-- System Information -->
            @if($mikrotik->system_info)
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-microchip me-2"></i>
                            Informasi Sistem
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($mikrotik->system_info as $key => $value)
                                <div class="col-md-6 mb-2">
                                    <strong>{{ ucwords(str_replace('_', ' ', $key)) }}:</strong>
                                    <span class="text-muted">{{ $value }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            <!-- Resource Information -->
            <div class="card mb-4" id="resourceCard">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-tachometer-alt me-2"></i>
                        Resource Usage
                        <span class="badge bg-info ms-2" id="monitoringStatus" style="display: none;">REAL-TIME</span>
                    </h5>
                    <div class="d-flex gap-2 align-items-center">
                        <small class="text-muted">
                            Last: <span id="lastRefreshTime">-</span> | 
                            Status: <span id="refreshStatus">-</span>
                        </small>
                        <button type="button" class="btn btn-sm btn-success" id="realTimeToggle" onclick="startRealTimeMonitoring()">
                            <i class="fas fa-play me-1"></i>
                            Start Real-time
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="refreshResourceInfo({{ $mikrotik->id }})">
                            <i class="fas fa-sync-alt me-1"></i>
                            Refresh
                        </button>
                    </div>
                </div>
                <div class="card-body" id="resourceContent">
                    @if($mikrotik->system_info && isset($mikrotik->system_info['cpu_usage']))
                        <div class="row">
                            <!-- CPU Usage -->
                            <div class="col-lg-6 col-md-12 mb-4">
                                <div class="resource-item">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h6 class="mb-0">
                                            <i class="fas fa-microchip text-primary me-2"></i>
                                            CPU Usage
                                        </h6>
                                        <span class="badge bg-primary">{{ $mikrotik->system_info['cpu_usage'] ?? '0%' }}</span>
                                    </div>
                                    <div class="progress mb-2" style="height: 8px;">
                                        @php
                                            $cpuUsage = (int) str_replace('%', '', $mikrotik->system_info['cpu_usage'] ?? '0');
                                        @endphp
                                        <div class="progress-bar {{ $cpuUsage > 80 ? 'bg-danger' : ($cpuUsage > 60 ? 'bg-warning' : 'bg-success') }}" 
                                             role="progressbar" style="width: {{ $cpuUsage }}%" 
                                             aria-valuenow="{{ $cpuUsage }}" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <div class="row small text-muted">
                                        <div class="col-6">
                                            <strong>CPU Count:</strong> {{ $mikrotik->system_info['cpu_count'] ?? '1' }}
                                        </div>
                                        <div class="col-6">
                                            <strong>Frequency:</strong> {{ $mikrotik->system_info['cpu_frequency'] ?? 'Unknown' }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Memory Usage -->
                            <div class="col-lg-6 col-md-12 mb-4">
                                <div class="resource-item">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h6 class="mb-0">
                                            <i class="fas fa-memory text-info me-2"></i>
                                            Memory Usage
                                        </h6>
                                        <span class="badge bg-info">{{ $mikrotik->system_info['memory_usage'] ?? '0%' }}</span>
                                    </div>
                                    <div class="progress mb-2" style="height: 8px;">
                                        @php
                                            $memUsage = (int) str_replace('%', '', $mikrotik->system_info['memory_usage'] ?? '0');
                                        @endphp
                                        <div class="progress-bar {{ $memUsage > 80 ? 'bg-danger' : ($memUsage > 60 ? 'bg-warning' : 'bg-info') }}" 
                                             role="progressbar" style="width: {{ $memUsage }}%" 
                                             aria-valuenow="{{ $memUsage }}" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <div class="row small text-muted">
                                        <div class="col-6">
                                            <strong>Total:</strong> {{ $mikrotik->system_info['memory_total'] ?? 'Unknown' }}
                                        </div>
                                        <div class="col-6">
                                            <strong>Free:</strong> {{ $mikrotik->system_info['memory_free'] ?? 'Unknown' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Additional System Info -->
                        <div class="row">
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="stat-mini-card">
                                    <div class="stat-icon">
                                        <i class="fas fa-clock text-success"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="stat-value">{{ $mikrotik->system_info['uptime'] ?? 'Unknown' }}</div>
                                        <div class="stat-label">Uptime</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="stat-mini-card">
                                    <div class="stat-icon">
                                        <i class="fas fa-server text-warning"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="stat-value">{{ $mikrotik->system_info['board_name'] ?? 'Unknown' }}</div>
                                        <div class="stat-label">Board</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="stat-mini-card">
                                    <div class="stat-icon">
                                        <i class="fas fa-code-branch text-info"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="stat-value">{{ $mikrotik->system_info['version'] ?? 'Unknown' }}</div>
                                        <div class="stat-label">RouterOS</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="stat-mini-card">
                                    <div class="stat-icon">
                                        <i class="fas fa-microchip text-primary"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="stat-value">{{ $mikrotik->system_info['architecture'] ?? 'Unknown' }}</div>
                                        <div class="stat-label">Architecture</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-exclamation-circle fa-2x text-muted mb-3"></i>
                            <h5 class="text-muted">Resource Information Tidak Tersedia</h5>
                            <p class="text-muted">Refresh system info untuk mendapatkan data resource terbaru</p>
                            <button type="button" class="btn btn-primary" onclick="refreshResourceInfo({{ $mikrotik->id }})">
                                <i class="fas fa-sync-alt me-1"></i>
                                Refresh Resource Info
                            </button>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Interfaces -->
            @if($mikrotik->interfaces)
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-ethernet me-2"></i>
                            Interface
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>Interface</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Speed</th>
                                        <th>MTU</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($mikrotik->interfaces as $interface)
                                        <tr>
                                            <td><strong>{{ $interface['name'] ?? 'N/A' }}</strong></td>
                                            <td>{{ $interface['type'] ?? 'N/A' }}</td>
                                            <td>
                                                <span class="badge {{ ($interface['status'] ?? '') === 'up' ? 'bg-success' : 'bg-danger' }}">
                                                    {{ $interface['status'] ?? 'unknown' }}
                                                </span>
                                            </td>
                                            <td>{{ $interface['speed'] ?? 'N/A' }}</td>
                                            <td>{{ $interface['mtu'] ?? 'N/A' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Actions & Quick Info -->
        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-bolt me-2"></i>
                        Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-success btn-sm" onclick="testConnection({{ $mikrotik->id }})">
                            <i class="fas fa-plug me-1"></i>
                            Test Koneksi
                        </button>
                        
                        <button type="button" class="btn btn-info btn-sm" onclick="refreshSystemInfo({{ $mikrotik->id }})">
                            <i class="fas fa-sync-alt me-1"></i>
                            Refresh System Info
                        </button>
                        
                        <button type="button" class="btn btn-primary btn-sm" onclick="refreshInterfaces({{ $mikrotik->id }})">
                            <i class="fas fa-ethernet me-1"></i>
                            Refresh Interfaces
                        </button>
                        
                        <div class="dropdown">
                            <button class="btn btn-warning btn-sm dropdown-toggle w-100" type="button" data-bs-toggle="dropdown">
                                <i class="fas fa-cog me-1"></i>
                                Update Status
                            </button>
                            <ul class="dropdown-menu w-100">
                                <li><a class="dropdown-item" href="#" onclick="updateStatus({{ $mikrotik->id }}, 'online')">
                                    <i class="fas fa-circle text-success me-2"></i>Online
                                </a></li>
                                <li><a class="dropdown-item" href="#" onclick="updateStatus({{ $mikrotik->id }}, 'offline')">
                                    <i class="fas fa-circle text-secondary me-2"></i>Offline
                                </a></li>
                                <li><a class="dropdown-item" href="#" onclick="updateStatus({{ $mikrotik->id }}, 'maintenance')">
                                    <i class="fas fa-tools text-warning me-2"></i>Maintenance
                                </a></li>
                                <li><a class="dropdown-item" href="#" onclick="updateStatus({{ $mikrotik->id }}, 'error')">
                                    <i class="fas fa-exclamation-triangle text-danger me-2"></i>Error
                                </a></li>
                            </ul>
                        </div>

                        <button type="button" class="btn btn-secondary btn-sm" onclick="toggleActive({{ $mikrotik->id }})">
                            <i class="fas fa-power-off me-1"></i>
                            {{ $mikrotik->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                        </button>

                        @if($mikrotik->auto_backup)
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="backupConfig({{ $mikrotik->id }})">
                                <i class="fas fa-download me-1"></i>
                                Backup Config
                            </button>
                        @endif
                        
                        <button type="button" class="btn btn-outline-warning btn-sm" onclick="rebootRouter({{ $mikrotik->id }})">
                            <i class="fas fa-power-off me-1"></i>
                            Reboot Router
                        </button>
                    </div>
                </div>
            </div>

            <!-- Connection Details -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-network-wired me-2"></i>
                        Detail Koneksi
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Connection URL:</strong>
                        <code class="d-block mt-1">{{ $mikrotik->getConnectionUrl() }}</code>
                    </div>
                    
                    <div class="mb-3">
                        <strong>Winbox:</strong>
                        <code class="d-block mt-1">{{ $mikrotik->host }}:80</code>
                    </div>
                    
                    <div class="mb-3">
                        <strong>SSH:</strong>
                        <code class="d-block mt-1">ssh {{ $mikrotik->username }}@{{ $mikrotik->host }}</code>
                    </div>

                    <div class="alert alert-info alert-sm">
                        <i class="fas fa-info-circle me-1"></i>
                        <small>Gunakan informasi di atas untuk mengakses router secara langsung</small>
                    </div>
                </div>
            </div>

            <!-- Timeline / History -->
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-history me-2"></i>
                        Timeline
                    </h6>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-marker bg-primary"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Router Dibuat</h6>
                                <p class="timeline-text text-muted small">
                                    {{ $mikrotik->created_at->format('d M Y, H:i') }}
                                </p>
                            </div>
                        </div>

                        @if($mikrotik->updated_at != $mikrotik->created_at)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-warning"></div>
                                <div class="timeline-content">
                                    <h6 class="timeline-title">Terakhir Diupdate</h6>
                                    <p class="timeline-text text-muted small">
                                        {{ $mikrotik->updated_at->format('d M Y, H:i') }}
                                    </p>
                                </div>
                            </div>
                        @endif

                        @if($mikrotik->last_connected)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-success"></div>
                                <div class="timeline-content">
                                    <h6 class="timeline-title">Koneksi Terakhir</h6>
                                    <p class="timeline-text text-muted small">
                                        {{ $mikrotik->last_connected->format('d M Y, H:i') }}
                                        <br>{{ $mikrotik->last_connected->diffForHumans() }}
                                    </p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal untuk Loading -->
<div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-3 mb-0" id="loadingText">Processing...</p>
            </div>
        </div>
    </div>
</div>

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    height: 100%;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    top: 5px;
    left: -22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 3px #e9ecef;
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
}

.timeline-text {
    margin-bottom: 0;
}

/* Resource Cards Styling */
.resource-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.resource-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.15);
}

.stat-mini-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    height: 100%;
}

.stat-mini-card:hover {
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 2px;
    line-height: 1.2;
}

.stat-label {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress {
    background-color: #e9ecef;
}

.progress-bar {
    transition: width 0.6s ease;
}

/* Resource alert styling */
.resource-alert {
    border-left: 4px solid #007bff;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0 6px 6px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stat-mini-card {
        flex-direction: column;
        text-align: center;
        padding: 8px;
    }
    
    .stat-icon {
        margin-right: 0;
        margin-bottom: 8px;
        width: 32px;
        height: 32px;
    }
    
    .stat-value {
        font-size: 12px;
    }
    
    .stat-label {
        font-size: 10px;
    }
}
</style>

<script>
function testConnection(routerId) {
    showLoading('Memeriksa koneksi...');
    
    fetch(`/mikrotiks/${routerId}/test-connection`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        hideLoading();
        
        // Update status badge
        const statusBadge = document.querySelector('.status-badge');
        if (statusBadge) {
            statusBadge.className = `badge ${getStatusBadgeClass(data.status)} status-badge`;
            statusBadge.innerHTML = `<i class="${getStatusIcon(data.status)}"></i> ${capitalizeFirst(data.status)}`;
        }
        
        showAlert(data.success ? 'success' : 'danger', data.message);
        
        // Refresh page after 3 seconds
        setTimeout(() => {
            location.reload();
        }, 3000);
    })
    .catch(error => {
        hideLoading();
        console.error('Error:', error);
        showAlert('danger', 'Terjadi kesalahan saat menguji koneksi');
    });
}

function refreshSystemInfo(routerId) {
    showLoading('Mengambil informasi sistem...');
    
    fetch(`/mikrotiks/${routerId}/refresh-system-info`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        hideLoading();
        
        if (data.success) {
            showAlert('success', 'System info berhasil di-refresh');
            // Refresh page after 2 seconds
            setTimeout(() => {
                location.reload();
            }, 2000);
        } else {
            showAlert('danger', data.message);
        }
    })
    .catch(error => {
        hideLoading();
        console.error('Error:', error);
        showAlert('danger', 'Gagal mengambil system info');
    });
}

function updateStatus(routerId, status) {
    showLoading('Mengupdate status...');
    
    fetch(`/mikrotiks/${routerId}/status`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ status: status })
    })
    .then(response => response.json())
    .then(data => {
        hideLoading();
        
        if (data.success) {
            // Update status badge
            const statusBadge = document.querySelector('.status-badge');
            if (statusBadge) {
                statusBadge.className = `badge ${getStatusBadgeClass(status)} status-badge`;
                statusBadge.innerHTML = `<i class="${getStatusIcon(status)}"></i> ${capitalizeFirst(status)}`;
            }
            
            showAlert('success', data.message);
        } else {
            showAlert('danger', 'Gagal mengupdate status');
        }
    })
    .catch(error => {
        hideLoading();
        console.error('Error:', error);
        showAlert('danger', 'Terjadi kesalahan saat mengupdate status');
    });
}

function toggleActive(routerId) {
    showLoading('Mengubah status aktif...');
    
    fetch(`/mikrotiks/${routerId}/toggle`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        hideLoading();
        
        if (data.success) {
            showAlert('success', data.message);
            
            // Refresh page after 2 seconds
            setTimeout(() => {
                location.reload();
            }, 2000);
        }
    })
    .catch(error => {
        hideLoading();
        console.error('Error:', error);
        showAlert('danger', 'Terjadi kesalahan saat mengubah status aktif');
    });
}

function refreshInterfaces(routerId) {
    showLoading('Mengambil data interfaces...');
    
    fetch(`/mikrotiks/${routerId}/interfaces`)
    .then(response => response.json())
    .then(data => {
        hideLoading();
        
        if (data.success) {
            showAlert('success', 'Interfaces berhasil di-refresh');
            // Refresh page after 2 seconds
            setTimeout(() => {
                location.reload();
            }, 2000);
        } else {
            showAlert('warning', data.message);
        }
    })
    .catch(error => {
        hideLoading();
        console.error('Error:', error);
        showAlert('danger', 'Gagal mengambil data interfaces');
    });
}

function backupConfig(routerId) {
    if (confirm('Membuat backup konfigurasi router?')) {
        showLoading('Membuat backup...');
        
        fetch(`/mikrotiks/${routerId}/backup`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            hideLoading();
            
            if (data.success) {
                showAlert('success', data.message);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            hideLoading();
            console.error('Error:', error);
            showAlert('danger', 'Gagal membuat backup konfigurasi');
        });
    }
}

function rebootRouter(routerId) {
    if (confirm('PERINGATAN: Router akan restart dan offline sementara. Lanjutkan?')) {
        showLoading('Mengirim perintah reboot...');
        
        fetch(`/mikrotiks/${routerId}/reboot`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            hideLoading();
            
            if (data.success) {
                showAlert('warning', data.message);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            hideLoading();
            console.error('Error:', error);
            showAlert('danger', 'Gagal melakukan reboot router');
        });
    }
}

// 🚀 REAL-TIME MONITORING VARIABLES (seperti Traffic Monitor)
let autoRefreshInterval = null;
let isRealTimeMonitoring = false;
let errorCount = 0;
const maxErrors = 5;

function refreshResourceInfo(routerId, isAutoRefresh = false) {
    if (!isAutoRefresh) {
        showLoading('Memuat resource information...');
    }
    
    const startTime = performance.now();
    
    fetch(`/mikrotiks/${routerId}/refresh-system-info`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        const responseTime = Math.round(performance.now() - startTime);
        
        if (!isAutoRefresh) {
            hideLoading();
        }
        
        if (data.success) {
            updateResourceCard(data.data);
            updateLastRefreshTime(responseTime);
            errorCount = 0; // Reset error count pada success
            
            if (!isAutoRefresh) {
                showAlert('success', 'Resource information berhasil diperbarui');
            }
        } else {
            errorCount++;
            console.warn(`System info error ${errorCount}/${maxErrors}:`, data.message);
            
            if (errorCount >= maxErrors && isRealTimeMonitoring) {
                stopRealTimeMonitoring();
                showAlert('warning', `Auto-refresh dihentikan setelah ${maxErrors} error berturut-turut`);
            } else if (!isAutoRefresh) {
                showAlert('danger', data.message);
            }
        }
    })
    .catch(error => {
        const responseTime = Math.round(performance.now() - startTime);
        errorCount++;
        
        if (!isAutoRefresh) {
            hideLoading();
        }
        
        console.error(`System info fetch error ${errorCount}/${maxErrors}:`, error);
        
        if (errorCount >= maxErrors && isRealTimeMonitoring) {
            stopRealTimeMonitoring();
            showAlert('warning', `Auto-refresh dihentikan setelah ${maxErrors} error berturut-turut`);
        } else if (!isAutoRefresh) {
            showAlert('danger', 'Gagal memuat resource information');
        }
        
        updateLastRefreshTime(responseTime, true);
    });
}

function updateResourceCard(systemInfo) {
    const resourceContent = document.getElementById('resourceContent');
    
    if (!systemInfo || !systemInfo.cpu_usage) {
        resourceContent.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-exclamation-circle fa-2x text-muted mb-3"></i>
                <h5 class="text-muted">Resource Information Tidak Tersedia</h5>
                <p class="text-muted">Data resource tidak dapat diambil dari router</p>
            </div>
        `;
        return;
    }
    
    const cpuUsage = parseInt(systemInfo.cpu_usage.replace('%', '')) || 0;
    const memUsage = parseInt(systemInfo.memory_usage.replace('%', '')) || 0;
    
    const getCpuClass = (usage) => usage > 80 ? 'bg-danger' : (usage > 60 ? 'bg-warning' : 'bg-success');
    const getMemClass = (usage) => usage > 80 ? 'bg-danger' : (usage > 60 ? 'bg-warning' : 'bg-info');
    
    resourceContent.innerHTML = `
        <div class="row">
            <!-- CPU Usage -->
            <div class="col-lg-6 col-md-12 mb-4">
                <div class="resource-item">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">
                            <i class="fas fa-microchip text-primary me-2"></i>
                            CPU Usage
                        </h6>
                        <span class="badge bg-primary">${systemInfo.cpu_usage || '0%'}</span>
                    </div>
                    <div class="progress mb-2" style="height: 8px;">
                        <div class="progress-bar ${getCpuClass(cpuUsage)}" 
                             role="progressbar" style="width: ${cpuUsage}%" 
                             aria-valuenow="${cpuUsage}" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                    <div class="row small text-muted">
                        <div class="col-6">
                            <strong>CPU Count:</strong> ${systemInfo.cpu_count || '1'}
                        </div>
                        <div class="col-6">
                            <strong>Frequency:</strong> ${systemInfo.cpu_frequency || 'Unknown'}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Memory Usage -->
            <div class="col-lg-6 col-md-12 mb-4">
                <div class="resource-item">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">
                            <i class="fas fa-memory text-info me-2"></i>
                            Memory Usage
                        </h6>
                        <span class="badge bg-info">${systemInfo.memory_usage || '0%'}</span>
                    </div>
                    <div class="progress mb-2" style="height: 8px;">
                        <div class="progress-bar ${getMemClass(memUsage)}" 
                             role="progressbar" style="width: ${memUsage}%" 
                             aria-valuenow="${memUsage}" aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                    <div class="row small text-muted">
                        <div class="col-6">
                            <strong>Total:</strong> ${systemInfo.memory_total || 'Unknown'}
                        </div>
                        <div class="col-6">
                            <strong>Free:</strong> ${systemInfo.memory_free || 'Unknown'}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Additional System Info -->
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-mini-card">
                    <div class="stat-icon">
                        <i class="fas fa-clock text-success"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">${systemInfo.uptime || 'Unknown'}</div>
                        <div class="stat-label">Uptime</div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-mini-card">
                    <div class="stat-icon">
                        <i class="fas fa-server text-warning"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">${systemInfo.board_name || 'Unknown'}</div>
                        <div class="stat-label">Board</div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-mini-card">
                    <div class="stat-icon">
                        <i class="fas fa-code-branch text-info"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">${systemInfo.version || 'Unknown'}</div>
                        <div class="stat-label">RouterOS</div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-mini-card">
                    <div class="stat-icon">
                        <i class="fas fa-microchip text-primary"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">${systemInfo.architecture || 'Unknown'}</div>
                        <div class="stat-label">Architecture</div>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function showLoading(text = 'Processing...') {
    document.getElementById('loadingText').textContent = text;
    const modal = new bootstrap.Modal(document.getElementById('loadingModal'));
    modal.show();
}

function hideLoading() {
    const modal = bootstrap.Modal.getInstance(document.getElementById('loadingModal'));
    if (modal) {
        modal.hide();
    }
}

function getStatusBadgeClass(status) {
    const classes = {
        'online': 'bg-success',
        'offline': 'bg-secondary',
        'error': 'bg-danger',
        'maintenance': 'bg-warning'
    };
    return classes[status] || 'bg-secondary';
}

function getStatusIcon(status) {
    const icons = {
        'online': 'fas fa-circle text-success',
        'offline': 'fas fa-circle text-secondary',
        'error': 'fas fa-exclamation-triangle text-danger',
        'maintenance': 'fas fa-tools text-warning'
    };
    return icons[status] || 'fas fa-circle text-secondary';
}

// 🚀 REAL-TIME MONITORING FUNCTIONS (seperti Traffic Monitor)
function startRealTimeMonitoring() {
    if (isRealTimeMonitoring) return;
    
    isRealTimeMonitoring = true;
    errorCount = 0;
    
    // Update UI
    const toggleBtn = document.getElementById('realTimeToggle');
    const statusBadge = document.getElementById('monitoringStatus');
    
    if (toggleBtn) {
        toggleBtn.innerHTML = '<i class="fas fa-stop me-1"></i>Stop Real-time';
        toggleBtn.className = 'btn btn-sm btn-danger';
        toggleBtn.onclick = stopRealTimeMonitoring;
    }
    
    if (statusBadge) {
        statusBadge.style.display = 'inline-block';
    }
    
    // Start auto refresh every 10 seconds (optimal untuk system info)
    autoRefreshInterval = setInterval(() => {
        const routerId = {{ $mikrotik->id }};
        refreshResourceInfo(routerId, true);
    }, 10000);
    
    // Initial refresh
    refreshResourceInfo({{ $mikrotik->id }}, true);
    
    showAlert('info', 'Real-time monitoring dimulai (refresh setiap 10 detik)');
}

function stopRealTimeMonitoring() {
    isRealTimeMonitoring = false;
    
    if (autoRefreshInterval) {
        clearInterval(autoRefreshInterval);
        autoRefreshInterval = null;
    }
    
    // Update UI
    const toggleBtn = document.getElementById('realTimeToggle');
    const statusBadge = document.getElementById('monitoringStatus');
    
    if (toggleBtn) {
        toggleBtn.innerHTML = '<i class="fas fa-play me-1"></i>Start Real-time';
        toggleBtn.className = 'btn btn-sm btn-success';
        toggleBtn.onclick = startRealTimeMonitoring;
    }
    
    if (statusBadge) {
        statusBadge.style.display = 'none';
    }
    
    showAlert('secondary', 'Real-time monitoring dihentikan');
}

function updateLastRefreshTime(responseTime, isError = false) {
    const timeElement = document.getElementById('lastRefreshTime');
    const statusElement = document.getElementById('refreshStatus');
    
    if (timeElement) {
        const now = new Date();
        const timeString = now.toLocaleTimeString('id-ID');
        timeElement.textContent = timeString;
    }
    
    if (statusElement) {
        if (isError) {
            statusElement.innerHTML = `<span class="text-danger">Error (${responseTime}ms)</span>`;
        } else {
            const statusClass = responseTime > 5000 ? 'text-warning' : 'text-success';
            statusElement.innerHTML = `<span class="${statusClass}">OK (${responseTime}ms)</span>`;
        }
    }
}

function capitalizeFirst(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'danger' ? 'exclamation-circle' : 'info-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    const container = document.querySelector('.container-fluid');
    if (!container) {
        console.error('Container not found');
        return;
    }
    
    // Cari tempat yang tepat untuk menampilkan alert
    let insertTarget = container.querySelector('.corporate-header');
    if (!insertTarget) {
        // Jika tidak ada corporate-header, cari alternatif lain
        insertTarget = container.querySelector('.card-header');
        if (!insertTarget) {
            insertTarget = container.querySelector('.row');
            if (!insertTarget) {
                // Sebagai fallback terakhir, masukkan di awal container
                container.insertAdjacentHTML('afterbegin', alertHtml);
                setTimeout(() => {
                    const alert = container.querySelector('.alert');
                    if (alert) {
                        alert.remove();
                    }
                }, 5000);
                return;
            }
        }
    }
    
    insertTarget.insertAdjacentHTML('afterend', alertHtml);
    
    // Auto hide after 5 seconds
    setTimeout(() => {
        const alert = container.querySelector('.alert');
        if (alert) {
            alert.remove();
        }
    }, 5000);
}
</script>
@endsection