@extends('layouts.app')

@section('title', 'MikroTik Server Details - ISP ERP System')

@section('page-title', 'Server Details')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-server me-2"></i>
                                {{ $mikrotik->name }}
                            </h3>
                            <p class="mb-0 opacity-75">MikroTik Server Details and Status</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('mikrotik.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Servers
                            </a>
                            <a href="{{ route('mikrotik.edit', $mikrotik->id) }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-edit me-2"></i>Edit Server
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Server Information -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <!-- Basic Information Card -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Basic Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Server Name</label>
                            <div class="fw-bold">{{ $mikrotik->name }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Status</label>
                            <div>
                                @if($mikrotik->is_active)
                                    <span class="badge bg-success custom-badge">
                                        <i class="fas fa-check-circle me-1"></i>Active
                                    </span>
                                @else
                                    <span class="badge bg-secondary custom-badge">
                                        <i class="fas fa-times-circle me-1"></i>Inactive
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">IP Address/Hostname</label>
                            <div class="fw-bold">{{ $mikrotik->host }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Port</label>
                            <div class="fw-bold">{{ $mikrotik->port }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Username</label>
                            <div class="fw-bold">{{ $mikrotik->username }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">API Version</label>
                            <div class="fw-bold">{{ $mikrotik->api_version }}</div>
                        </div>
                        @if($mikrotik->description)
                        <div class="col-12 mb-3">
                            <label class="form-label text-muted">Description</label>
                            <div class="fw-bold">{{ $mikrotik->description }}</div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Connection Status Card -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-plug me-2"></i>
                        Connection Status
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Connection String</label>
                            <div class="fw-bold">{{ $mikrotik->host }}:{{ $mikrotik->port }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Last Connection Test</label>
                            <div class="fw-bold" id="lastConnectionTest">Not tested</div>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex">
                        <button class="btn btn-outline-info btn-custom" onclick="testConnection()">
                            <i class="fas fa-plug me-2"></i>Test Connection
                        </button>
                        <button class="btn btn-outline-success btn-custom" onclick="getServerStatus()">
                            <i class="fas fa-chart-line me-2"></i>Get Server Status
                        </button>
                        <button class="btn btn-outline-primary btn-custom" onclick="syncClients()">
                            <i class="fas fa-sync-alt me-2"></i>Sync Clients
                        </button>
                    </div>
                    
                    <div id="connectionResult" class="mt-3" style="display: none;"></div>
                </div>
            </div>

            <!-- Client Information Card -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-users me-2"></i>
                            Client Information
                        </h5>
                        <button class="btn btn-sm btn-outline-primary" onclick="loadClientCounts()" title="Refresh from MikroTik">
                            <i class="fas fa-sync-alt me-1"></i>Refresh
                        </button>
                    </div>
                </div>
                <div class="custom-card-body">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <div class="text-center">
                                <div class="h4 text-primary mb-1" id="totalClients">{{ $totalClients ?? 0 }}</div>
                                <small class="text-muted">Total Clients</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <div class="h4 text-success mb-1" id="onlineClients">{{ $onlineClients ?? 0 }}</div>
                                <small class="text-muted">Online Clients</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <div class="h4 text-warning mb-1" id="offlineClients">{{ $offlineClients ?? 0 }}</div>
                                <small class="text-muted">Offline Clients</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <div class="h4 text-danger mb-1" id="disabledClients">{{ $disabledClients ?? 0 }}</div>
                                <small class="text-muted">Disabled Clients</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Router Visualization Card -->
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-network-wired me-2"></i>
                            Router Ports & Interfaces
                        </h5>
                        <button class="btn btn-sm btn-outline-primary" onclick="loadRouterInterfaces()">
                            <i class="fas fa-sync-alt me-1"></i>Refresh
                        </button>
                    </div>
                </div>
                <div class="custom-card-body">
                    <div id="routerVisualization">
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-network-wired fa-2x mb-2"></i>
                            <div>Loading router interfaces...</div>
                            <small class="text-muted">Please wait or click Refresh button</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Server Statistics Card -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        Server Statistics
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <label class="form-label text-muted">Created</label>
                        <div class="fw-bold">{{ $mikrotik->created_at->format('M d, Y H:i') }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Last Updated</label>
                        <div class="fw-bold">{{ $mikrotik->updated_at->format('M d, Y H:i') }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Days Active</label>
                        <div class="fw-bold">{{ $mikrotik->created_at->diffInDays(now()) }} days</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Connection String</label>
                        <div class="fw-bold text-break">{{ $mikrotik->getConnectionStringAttribute() }}</div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions Card -->
            <div class="custom-card mb-4">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>
                        Quick Actions
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-warning btn-custom" onclick="toggleServerStatus()">
                            <i class="fas fa-toggle-on me-2"></i>
                            @if($mikrotik->is_active)
                                Deactivate Server
                            @else
                                Activate Server
                            @endif
                        </button>
                        <a href="{{ route('mikrotik.edit', $mikrotik->id) }}" class="btn btn-outline-primary btn-custom">
                            <i class="fas fa-edit me-2"></i>Edit Configuration
                        </a>
                        <button class="btn btn-outline-danger btn-custom" onclick="deleteServer()">
                            <i class="fas fa-trash me-2"></i>Delete Server
                        </button>
                    </div>
                </div>
            </div>

            <!-- Server Health Card -->
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-heartbeat me-2"></i>
                        Server Health
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div id="serverHealth">
                        <div class="text-center text-muted">
                            <i class="fas fa-spinner fa-spin fa-2x mb-2"></i>
                            <div>Click "Get Server Status" to check health</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteServerModal" tabindex="-1" aria-labelledby="deleteServerModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title text-danger" id="deleteServerModalLabel">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Confirm Deletion
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>Are you sure you want to delete the server <strong>{{ $mikrotik->name }}</strong>?</p>
            <p class="text-muted">This action cannot be undone and will remove all associated data.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <form id="deleteServerForm" method="POST" style="display: inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Delete Server</button>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Store the route URL
const interfacesRouteUrl = '{{ route("mikrotik.interfaces", $mikrotik->id) }}';
const currentMikrotikId = {{ $mikrotik->id }};

console.log('Interfaces route URL:', interfacesRouteUrl);
console.log('Current server ID:', currentServerId);
</script>
<style>
.router-container {
    background: linear-gradient(to bottom, #2c2c2c 0%, #1a1a1a 100%);
    border: 3px solid #000;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    max-width: 800px;
    margin: 0 auto;
}

.router-header {
    background: #1a1a1a;
    padding: 10px 15px;
    border-bottom: 2px solid #000;
    border-radius: 4px 4px 0 0;
    margin: -20px -20px 15px -20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.router-brand {
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.router-status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.router-status-indicator.online {
    background: #00ff00;
    box-shadow: 0 0 5px #00ff00;
}

.router-status-indicator.offline {
    background: #ff0000;
    box-shadow: 0 0 5px #ff0000;
}

.router-body {
    background: linear-gradient(to bottom, #e8e8e8 0%, #d0d0d0 100%);
    padding: 15px;
    border-radius: 4px;
    min-height: 200px;
}

.router-ports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.port-item {
    background: #1a1a1a;
    border: 2px solid #000;
    border-radius: 4px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.port-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.port-item.up {
    border-color: #27ae60;
    background: linear-gradient(to bottom, #2ecc71 0%, #27ae60 100%);
}

.port-item.down {
    border-color: #7f8c8d;
    background: linear-gradient(to bottom, #95a5a6 0%, #7f8c8d 100%);
}

.port-item.disabled {
    border-color: #e74c3c;
    background: linear-gradient(to bottom, #ec7063 0%, #e74c3c 100%);
    opacity: 0.6;
}

.port-status-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 5px;
    box-shadow: 0 0 3px currentColor;
}

.port-status-light.up {
    background: #00ff00;
    color: #00ff00;
    animation: pulse-green 2s infinite;
}

.port-status-light.down {
    background: #ff0000;
    color: #ff0000;
}

.port-status-light.disabled {
    background: #ff9900;
    color: #ff9900;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.port-label {
    color: white;
    font-size: 10px;
    font-weight: bold;
    margin-top: 3px;
    word-break: break-word;
}

.port-type {
    color: rgba(255,255,255,0.8);
    font-size: 8px;
    margin-top: 2px;
}

.port-stats {
    color: rgba(255,255,255,0.7);
    font-size: 7px;
    margin-top: 3px;
}

.router-info-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin-top: 20px;
}

.interface-details-table {
    font-size: 12px;
}

.interface-details-table th {
    background: #343a40;
    color: white;
    padding: 8px;
    font-weight: 600;
}

.interface-details-table td {
    padding: 8px;
    vertical-align: middle;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
}

.status-badge.up {
    background: #d4edda;
    color: #155724;
}

.status-badge.down {
    background: #f8d7da;
    color: #721c24;
}

.status-badge.disabled {
    background: #fff3cd;
    color: #856404;
}
</style>
<script>
let currentServerId = {{ $mikrotik->id }};

document.addEventListener('DOMContentLoaded', function() {
    setupEventListeners();
});

function setupEventListeners() {
    // Delete form submission
    document.getElementById('deleteServerForm').addEventListener('submit', function(e) {
        e.preventDefault();
        submitDelete();
    });
}

function testConnection() {
    const resultDiv = document.getElementById('connectionResult');
    const lastTestDiv = document.getElementById('lastConnectionTest');
    
    // Show loading state
    resultDiv.innerHTML = `
        <div class="alert alert-info">
            <i class="fas fa-spinner fa-spin me-2"></i>
            Testing connection to {{ $mikrotik->host }}:{{ $mikrotik->port }}...
        </div>
    `;
    resultDiv.style.display = 'block';
    
    // Test connection
    fetch('{{ route("mikrotik.test-connection") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: new FormData()
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    <strong>Success!</strong> ${data.message}
                    <div class="mt-2">
                        <small class="text-muted">
                            Host: ${data.details.host}:${data.details.port}<br>
                            API Version: ${data.details.api_version}
                        </small>
                    </div>
                </div>
            `;
            lastTestDiv.innerHTML = `<span class="text-success">${new Date().toLocaleTimeString()}</span>`;
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Connection Failed!</strong> ${data.message}
                </div>
            `;
            lastTestDiv.innerHTML = `<span class="text-danger">${new Date().toLocaleTimeString()}</span>`;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Error!</strong> Failed to test connection. Please try again.
            </div>
        `;
        lastTestDiv.innerHTML = `<span class="text-danger">${new Date().toLocaleTimeString()}</span>`;
    });
}

function getServerStatus() {
    const healthDiv = document.getElementById('serverHealth');
    
    // Show loading state
    healthDiv.innerHTML = `
        <div class="text-center text-muted">
            <i class="fas fa-spinner fa-spin fa-2x mb-2"></i>
            <div>Checking server status...</div>
        </div>
    `;
    
    // Get server status
    fetch(`{{ route('mikrotik.index') }}/${currentServerId}/status`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const status = data.status;
                healthDiv.innerHTML = `
                    <div class="mb-3">
                        <label class="form-label text-muted">Uptime</label>
                        <div class="fw-bold">${status.uptime}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">CPU Load</label>
                        <div class="fw-bold">${status.cpu_load}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Memory Usage</label>
                        <div class="fw-bold">${status.memory_usage}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Free Memory</label>
                        <div class="fw-bold">${status.free_memory}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Version</label>
                        <div class="fw-bold">${status.version}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Last Seen</label>
                        <div class="fw-bold">${status.last_seen}</div>
                    </div>
                `;
            } else {
                healthDiv.innerHTML = `
                    <div class="text-center text-danger">
                        <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                        <div>Failed to get status</div>
                        <small>${data.message}</small>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            healthDiv.innerHTML = `
                <div class="text-center text-danger">
                    <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                    <div>Error getting status</div>
                    <small>Please try again</small>
                </div>
            `;
        });
}

function syncClients() {
    const resultDiv = document.getElementById('connectionResult');
    
    // Show loading state
    resultDiv.innerHTML = `
        <div class="alert alert-info">
            <i class="fas fa-spinner fa-spin me-2"></i>
            Syncing clients from server...
        </div>
    `;
    resultDiv.style.display = 'block';
    
    // Sync clients
    fetch(`{{ route('mikrotik.index') }}/${currentServerId}/sync-clients`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const result = data.sync_result;
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    <strong>Success!</strong> ${data.message}
                    <div class="mt-2">
                        <small class="text-muted">
                            Total Clients: ${result.total_clients}<br>
                            Online: ${result.online_clients}<br>
                            Offline: ${result.offline_clients}<br>
                            Changes: ${result.changes_made}
                        </small>
                    </div>
                </div>
            `;
            
            // Update client counts
            document.getElementById('totalClients').textContent = result.total_clients;
            document.getElementById('onlineClients').textContent = result.online_clients;
            document.getElementById('offlineClients').textContent = result.offline_clients;
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Sync Failed!</strong> ${data.message}
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Error!</strong> Failed to sync clients. Please try again.
            </div>
        `;
    });
}

function getOnlineClients() {
    const resultDiv = document.getElementById('clientsResult');
    
    // Show loading state
    resultDiv.innerHTML = `
        <div class="text-center text-muted">
            <i class="fas fa-spinner fa-spin fa-2x mb-2"></i>
            <div>Loading online clients...</div>
        </div>
    `;
    resultDiv.style.display = 'block';
    
    // Get online clients
    fetch(`{{ route('mikrotik.index') }}/${currentServerId}/online-clients`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const clients = data.online_clients;
                if (clients.length > 0) {
                    let tableHTML = `
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>IP Address</th>
                                        <th>MAC Address</th>
                                        <th>Uptime</th>
                                        <th>Data In</th>
                                        <th>Data Out</th>
                                    </tr>
                                </thead>
                                <tbody>
                    `;
                    
                    clients.forEach(client => {
                        tableHTML += `
                            <tr>
                                <td>${client.name}</td>
                                <td>${client.ip_address}</td>
                                <td>${client.mac_address}</td>
                                <td>${client.uptime}</td>
                                <td>${client.bytes_in}</td>
                                <td>${client.bytes_out}</td>
                            </tr>
                        `;
                    });
                    
                    tableHTML += `
                                </tbody>
                            </table>
                        </div>
                    `;
                    
                    resultDiv.innerHTML = tableHTML;
                } else {
                    resultDiv.innerHTML = `
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            No online clients found.
                        </div>
                    `;
                }
            } else {
                resultDiv.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Error!</strong> ${data.message}
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Error!</strong> Failed to load clients. Please try again.
                </div>
            `;
        });
}

function toggleServerStatus() {
    if (confirm('Are you sure you want to change the server status?')) {
        const newStatus = {{ $mikrotik->is_active ? 'false' : 'true' }};
        const statusText = {{ $mikrotik->is_active ? '"deactivate"' : '"activate"' }};
        
        // Show loading state
        const button = event.target;
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Updating...';
        button.disabled = true;
        
        // Make API call to toggle status
        fetch(`{{ route('mikrotik.index') }}/${currentServerId}/toggle-status`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                is_active: newStatus
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Reload the page to show updated status
                window.location.reload();
            } else {
                alert('Failed to update server status: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while updating server status');
        })
        .finally(() => {
            button.innerHTML = originalText;
            button.disabled = false;
        });
    }
}

function deleteServer() {
    const modal = new bootstrap.Modal(document.getElementById('deleteServerModal'));
    const form = document.getElementById('deleteServerForm');
    
    form.action = `{{ route('mikrotik.index') }}/${currentServerId}`;
    modal.show();
}

function submitDelete() {
    const form = document.getElementById('deleteServerForm');
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    // Show loading state
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Deleting...';
    submitBtn.disabled = true;
    
    // Submit delete
    fetch(form.action, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: data.message,
                confirmButtonText: 'OK'
            }).then(() => {
                window.location.href = '{{ route("mikrotik.index") }}';
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: data.message,
                confirmButtonText: 'OK'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: 'An unexpected error occurred. Please try again.',
            confirmButtonText: 'OK'
        });
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
}

function loadRouterInterfaces() {
    const routerDiv = document.getElementById('routerVisualization');
    
    if (!routerDiv) {
        console.error('Router visualization div not found');
        return;
    }
    
    // Show loading state
    routerDiv.innerHTML = `
        <div class="text-center text-muted py-5">
            <i class="fas fa-spinner fa-spin fa-2x mb-2"></i>
            <div>Loading router interfaces...</div>
        </div>
    `;
    
    // Use the route URL directly
    const interfacesUrl = interfacesRouteUrl;
    
    console.log('Fetching interfaces from:', interfacesUrl);
    console.log('Current server ID:', currentServerId);
    
    fetch(interfacesUrl, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Response status:', response.status);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('Interfaces data:', data);
        if (data.success && data.interfaces && data.interfaces.length > 0) {
            renderRouterVisualization(data.interfaces);
        } else {
            routerDiv.innerHTML = `
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    ${data.message || 'No interfaces found or failed to load interfaces.'}
                    <br><small>Response: ${JSON.stringify(data)}</small>
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error loading interfaces:', error);
        routerDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Error loading router interfaces:</strong><br>
                ${error.message || 'Unknown error occurred'}
                <br><small>Please check browser console for details.</small>
            </div>
        `;
    });
}

function renderRouterVisualization(interfaces) {
    const routerDiv = document.getElementById('routerVisualization');
    
    // Filter out virtual interfaces (optional - you can adjust this)
    const physicalInterfaces = interfaces.filter(iface => {
        const type = iface.type ? iface.type.toLowerCase() : '';
        return !type.includes('ppp') && !type.includes('bridge') && !type.includes('vlan') && 
               !type.includes('gre') && !type.includes('l2tp') && !type.includes('pptp');
    });
    
    // Use all interfaces if no physical ones found
    const displayInterfaces = physicalInterfaces.length > 0 ? physicalInterfaces : interfaces;
    
    // Count status
    const upCount = displayInterfaces.filter(i => i.running === 'true' && i.disabled !== 'true').length;
    const downCount = displayInterfaces.filter(i => i.running !== 'true' && i.disabled !== 'true').length;
    const disabledCount = displayInterfaces.filter(i => i.disabled === 'true').length;
    
    let html = `
        <div class="router-container">
            <div class="router-header">
                <div>
                    <span class="router-brand">{{ $mikrotik->name }}</span>
                    <span class="router-status-indicator online"></span>
                    <span style="color: white; font-size: 11px;">Online</span>
                </div>
                <div style="color: white; font-size: 11px;">
                    <span style="color: #00ff00;">${upCount} Up</span> | 
                    <span style="color: #ff0000;">${downCount} Down</span> | 
                    <span style="color: #ff9900;">${disabledCount} Disabled</span>
                </div>
            </div>
            <div class="router-body">
                <div class="router-ports-grid">
    `;
    
    displayInterfaces.forEach(iface => {
        const isUp = iface.running === 'true' && iface.disabled !== 'true';
        const isDisabled = iface.disabled === 'true';
        const statusClass = isDisabled ? 'disabled' : (isUp ? 'up' : 'down');
        const statusLightClass = isDisabled ? 'disabled' : (isUp ? 'up' : 'down');
        const statusText = isDisabled ? 'Disabled' : (isUp ? 'Up' : 'Down');
        
        html += `
            <div class="port-item ${statusClass}" onclick="showInterfaceDetails('${iface.name.replace(/'/g, "\\'")}', ${JSON.stringify(iface).replace(/"/g, '&quot;')})" title="${iface.name} - ${statusText}">
                <div class="port-status-light ${statusLightClass}"></div>
                <div class="port-label">${iface.name}</div>
                <div class="port-type">${iface.type || 'Unknown'}</div>
                <div class="port-stats">RX: ${iface.rx_bytes || '0'}</div>
                <div class="port-stats">TX: ${iface.tx_bytes || '0'}</div>
            </div>
        `;
    });
    
    html += `
                </div>
            </div>
        </div>
        
        <div class="router-info-panel">
            <h6 class="mb-3"><i class="fas fa-info-circle me-2"></i>Interface Details</h6>
            <div class="table-responsive">
                <table class="table table-sm interface-details-table">
                    <thead>
                        <tr>
                            <th>Interface</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>RX Bytes</th>
                            <th>TX Bytes</th>
                            <th>RX Packets</th>
                            <th>TX Packets</th>
                        </tr>
                    </thead>
                    <tbody>
    `;
    
    interfaces.forEach(iface => {
        const isUp = iface.running === 'true' && iface.disabled !== 'true';
        const isDisabled = iface.disabled === 'true';
        const statusClass = isDisabled ? 'disabled' : (isUp ? 'up' : 'down');
        const statusText = isDisabled ? 'Disabled' : (isUp ? 'Up' : 'Down');
        
        html += `
            <tr>
                <td><strong>${iface.name}</strong></td>
                <td>${iface.type || 'Unknown'}</td>
                <td><span class="status-badge ${statusClass}">${statusText}</span></td>
                <td>${iface.rx_bytes || '0'}</td>
                <td>${iface.tx_bytes || '0'}</td>
                <td>${iface.rx_packets || '0'}</td>
                <td>${iface.tx_packets || '0'}</td>
            </tr>
        `;
    });
    
    html += `
                    </tbody>
                </table>
            </div>
        </div>
    `;
    
    routerDiv.innerHTML = html;
}

function showInterfaceDetails(name, iface) {
    const isUp = iface.running === 'true' && iface.disabled !== 'true';
    const isDisabled = iface.disabled === 'true';
    const statusText = isDisabled ? 'Disabled' : (isUp ? 'Up' : 'Down');
    
    Swal.fire({
        title: `<strong>${name}</strong>`,
        html: `
            <div class="text-start">
                <p><strong>Type:</strong> ${iface.type || 'Unknown'}</p>
                <p><strong>Status:</strong> <span class="badge ${isDisabled ? 'bg-warning' : (isUp ? 'bg-success' : 'bg-danger')}">${statusText}</span></p>
                <p><strong>Running:</strong> ${iface.running || 'false'}</p>
                <p><strong>Disabled:</strong> ${iface.disabled || 'false'}</p>
                <hr>
                <p><strong>RX Bytes:</strong> ${iface.rx_bytes || '0'}</p>
                <p><strong>TX Bytes:</strong> ${iface.tx_bytes || '0'}</p>
                <p><strong>RX Packets:</strong> ${iface.rx_packets || '0'}</p>
                <p><strong>TX Packets:</strong> ${iface.tx_packets || '0'}</p>
            </div>
        `,
        icon: isDisabled ? 'warning' : (isUp ? 'success' : 'error'),
        confirmButtonText: 'Close'
    });
}

// Load client counts directly from MikroTik
function loadClientCounts() {
    console.log('loadClientCounts function called');
    
    const totalClientsEl = document.getElementById('totalClients');
    const onlineClientsEl = document.getElementById('onlineClients');
    const offlineClientsEl = document.getElementById('offlineClients');
    const disabledClientsEl = document.getElementById('disabledClients');
    
    if (!totalClientsEl || !onlineClientsEl || !offlineClientsEl || !disabledClientsEl) {
        console.error('Client count elements not found!');
        return;
    }
    
    // Build the URL
    const clientCountsUrl = '{{ route("mikrotik.client-counts", $mikrotik->id) }}';
    
    console.log('Loading client counts from MikroTik:', clientCountsUrl);
    console.log('Current server ID:', currentServerId);
    
    // Create AbortController for timeout
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 15000); // 15 second timeout
    
    fetch(clientCountsUrl, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            'X-Requested-With': 'XMLHttpRequest'
        },
        credentials: 'same-origin',
        signal: controller.signal
    })
    .then(response => {
        clearTimeout(timeoutId); // Clear timeout on successful response
        console.log('Client counts response status:', response.status);
        
        if (!response.ok) {
            return response.text().then(text => {
                console.error('Error response:', text);
                throw new Error(`HTTP error! status: ${response.status}`);
            });
        }
        return response.json();
    })
    .then(data => {
        console.log('Client counts data received:', data);
        console.log('Data source:', data.source);
        console.log('Success status:', data.success);
        
        // Always update counts if data is available (whether success=true or false)
        if (data && (data.total_clients !== undefined || data.online_clients !== undefined || data.offline_clients !== undefined)) {
            // Update the counts
            totalClientsEl.textContent = data.total_clients || 0;
            onlineClientsEl.textContent = data.online_clients || 0;
            offlineClientsEl.textContent = data.offline_clients || 0;
            disabledClientsEl.textContent = data.disabled_clients || 0;
            
            console.log('✓ Client counts updated:', {
                total: data.total_clients,
                online: data.online_clients,
                offline: data.offline_clients,
                disabled: data.disabled_clients,
                source: data.source || 'unknown'
            });
            
            // Log data source
            console.log('Checking data source:', data.source, 'Success:', data.success);
            
            if (data.source === 'mikrotik') {
                console.log('✓✓✓ LIVE DATA from MikroTik router!');
            } else {
                // Database data or error
                if (data.error || data.message) {
                    console.log('⚠⚠⚠ MikroTik connection failed:', data.error || data.message);
                } else {
                    console.log('⚠ Database data (MikroTik unavailable)');
                }
            }
        } else {
            console.error('No data received in response');
            totalClientsEl.textContent = '0';
            onlineClientsEl.textContent = '0';
            offlineClientsEl.textContent = '0';
            disabledClientsEl.textContent = '0';
        }
    })
    .catch(error => {
        clearTimeout(timeoutId); // Clear timeout on error
        console.error('Error loading client counts:', error);
        console.error('Error name:', error.name);
        console.error('Error message:', error.message);
        
        let errorMessage = 'Unknown error occurred';
        if (error.name === 'AbortError') {
            errorMessage = 'Request timeout - MikroTik server is taking too long to respond. Showing database data.';
            console.warn('MikroTik server timeout. Showing database data.');
            return; // Don't change the values, keep database values
        } else if (error.message) {
            errorMessage = error.message;
        }
        
        // Keep database values on error (they're already displayed)
        console.error('Could not connect to MikroTik. Showing database data. Error: ' + errorMessage);
    });
}

// Auto-load interfaces, client counts, and server health on page load
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, preparing to load data from MikroTik...');
    console.log('Current server ID:', currentServerId);
    console.log('Available functions:', {
        loadClientCounts: typeof loadClientCounts,
        getServerStatus: typeof getServerStatus,
        loadRouterInterfaces: typeof loadRouterInterfaces
    });
    
    // Load client counts first (directly from MikroTik) - immediate
    // Call immediately without setTimeout to ensure it runs
    console.log('Calling loadClientCounts immediately...');
    if (typeof loadClientCounts === 'function') {
        try {
            loadClientCounts();
        } catch (e) {
            console.error('Error calling loadClientCounts:', e);
            console.error('Error stack:', e.stack);
        }
    } else {
        console.error('loadClientCounts function not found!');
        // Try to call after a delay in case function is defined later
        setTimeout(function() {
            if (typeof loadClientCounts === 'function') {
                console.log('loadClientCounts found after delay, calling now...');
                loadClientCounts();
            } else {
                console.error('loadClientCounts still not found after delay!');
            }
        }, 500);
    }
    
    // Load server health (directly from MikroTik)
    setTimeout(function() {
        console.log('Attempting to load server health...');
        if (typeof getServerStatus === 'function') {
            try {
                getServerStatus();
            } catch (e) {
                console.error('Error calling getServerStatus:', e);
            }
        } else {
            console.error('getServerStatus function not found!');
        }
    }, 500);
    
    // Load router interfaces after a short delay to ensure all scripts are loaded
    setTimeout(function() {
        console.log('Attempting to load router interfaces...');
        if (typeof loadRouterInterfaces === 'function') {
            try {
                loadRouterInterfaces();
            } catch (e) {
                console.error('Error calling loadRouterInterfaces:', e);
            }
        } else {
            console.error('loadRouterInterfaces function not found!');
        }
    }, 1000);
});
</script>
@endsection