@extends('layouts.app')

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

@section('page-title', 'MikroTik Server Management')

@push('styles')
<style>
.custom-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.connection-status-badge {
    transition: all 0.3s ease;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Compact Design */
.compact-stats .custom-card-body {
    padding: 0.75rem !important;
}

.compact-stats h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
}

.compact-stats p {
    font-size: 0.8rem !important;
    margin-bottom: 0 !important;
}

.compact-header {
    margin-bottom: 1rem !important;
}

.compact-header .custom-card-header {
    padding: 0.75rem 1rem !important;
}

.compact-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

/* Table Styles */
.table th {
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa !important;
}

.table td {
    vertical-align: middle;
    font-size: 0.875rem;
}

.table th:first-child,
.table td:first-child {
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.table tbody tr:hover {
    background-color: #f8f9fa;
}

.btn-group .btn {
    margin: 0 1px;
}

.badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

.table-responsive {
    border-radius: 0.375rem;
}

.clickable-badge {
    transition: all 0.3s ease;
}

.clickable-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Button spacing - Minimal spacing */
.button-group-spacing .btn {
    margin-right: 5px !important;
}

.button-group-spacing .btn:last-child {
    margin-right: 0 !important;
}

/* Alternative spacing method */
.header-buttons {
    gap: 5px !important;
}

/* Force spacing with important */
.header-buttons > * {
    margin-right: 5px !important;
}

.header-buttons > *:last-child {
    margin-right: 0 !important;
}

/* Additional spacing for buttons specifically */
.header-buttons .btn {
    margin-right: 5px !important;
}

.header-buttons .btn:last-child {
    margin-right: 0 !important;
}

/* Mobile responsive buttons */
@media (max-width: 768px) {
    .header-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100%;
    }
    
    .header-buttons .btn {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .header-buttons .btn:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 576px) {
    .compact-header .custom-card-header {
        padding: 0.5rem !important;
    }
    
    .compact-header h4 {
        font-size: 1.1rem !important;
    }
    
    .compact-header p {
        font-size: 0.75rem !important;
    }
    
    /* Mobile table responsive */
    .table-responsive {
        font-size: 0.8rem;
    }
    
    .table th,
    .table td {
        padding: 0.25rem !important;
        font-size: 0.75rem !important;
    }
    
    .btn-group .btn {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.7rem !important;
    }
    
    .badge {
        font-size: 0.6rem !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    /* Hide some columns on mobile */
    .table th:nth-child(3),
    .table td:nth-child(3),
    .table th:nth-child(4),
    .table td:nth-child(4),
    .table th:nth-child(9),
    .table td:nth-child(9) {
        display: none;
    }
    
    /* Mobile statistics cards */
    .compact-stats .custom-card-body {
        padding: 0.5rem !important;
    }
    
    .compact-stats h2 {
        font-size: 1.2rem !important;
    }
    
    .compact-stats p {
        font-size: 0.7rem !important;
    }
    
    .compact-stats .fa-2x {
        font-size: 1.2rem !important;
    }
    
    .compact-stats .me-3 {
        margin-right: 0.5rem !important;
    }
}
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row compact-header">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-1">
                                <i class="fas fa-server me-2"></i>
                                MikroTik Server Management
                            </h4>
                            <p class="mb-0 opacity-75 small">Manage MikroTik routers and monitor network connections</p>
                        </div>
                        <div class="d-flex button-group-spacing header-buttons" style="gap: 5px !important;">
                            <a href="{{ route('mikrotik.create') }}" class="btn btn-primary compact-btn" style="margin-right: 5px !important;">
                                <i class="fas fa-plus me-1"></i>Add Server
                            </a>
                            <button class="btn btn-info compact-btn" onclick="refreshAllServerStatus()" id="refreshBtn" style="margin-right: 5px !important;">
                                <i class="fas fa-sync-alt me-1"></i>Refresh
                            </button>
                            <button class="btn btn-success compact-btn" onclick="syncAllServers()" style="margin-right: 5px !important;">
                                <i class="fas fa-sync-alt me-1"></i>Sync
                            </button>
                            <button class="btn btn-warning compact-btn" onclick="refreshOnlineClients()" id="refreshOnlineBtn" style="margin-right: 0 !important;">
                                <i class="fas fa-users me-1"></i>Refresh Online Clients
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-3">
        <div class="col-lg-3 col-md-6 mb-2">
            <div class="custom-card h-100 compact-stats">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center">
                        <i class="fas fa-server text-primary fa-2x me-3"></i>
                        <div>
                            <h2 class="mb-0 text-primary">{{ $servers->count() }}</h2>
                            <p class="mb-0 text-muted">Total Servers</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-2">
            <div class="custom-card h-100 compact-stats">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center">
                        <i class="fas fa-power-off text-success fa-2x me-3"></i>
                        <div>
                            <h2 class="mb-0 text-success">{{ $servers->where('is_active', true)->count() }}</h2>
                            <p class="mb-0 text-muted">Active Servers</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-2">
            <div class="custom-card h-100 compact-stats">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center">
                        <i class="fas fa-pause-circle text-warning fa-2x me-3"></i>
                        <div>
                            <h2 class="mb-0 text-warning">{{ $servers->where('is_active', false)->count() }}</h2>
                            <p class="mb-0 text-muted">Inactive Servers</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-2">
            <div class="custom-card h-100 compact-stats">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center">
                        <i class="fas fa-code text-info fa-2x me-3"></i>
                        <div>
                            <h2 class="mb-0 text-info">{{ $servers->unique('api_version')->count() }}</h2>
                            <p class="mb-0 text-muted">API Versions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Servers Table -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body p-0">
                    @if($servers->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th width="60">#</th>
                                        <th><i class="fas fa-router me-1"></i>Server Name</th>
                                        <th><i class="fas fa-network-wired me-1"></i>ISP Name</th>
                                        <th><i class="fas fa-building me-1"></i>Branch Name</th>
                                        <th><i class="fas fa-globe me-1"></i>IP Address</th>
                                        <th><i class="fas fa-plug me-1"></i>Port</th>
                                        <th><i class="fas fa-wifi me-1"></i>Connection</th>
                                        <th><i class="fas fa-power-off me-1"></i>Status</th>
                                        <th><i class="fas fa-clock me-1"></i>Created</th>
                                        <th><i class="fas fa-users me-1"></i>Online Clients</th>
                                        <th><i class="fas fa-cog me-1"></i>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($servers as $index => $server)
                                        <tr data-server-id="{{ $server->id }}">
                                            <td>
                                                <span class="badge bg-light text-dark">{{ $index + 1 }}</span>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-server text-primary me-2"></i>
                                                    <div>
                                                        <div class="fw-bold">{{ $server->name }}</div>
                                                        @if($server->notes)
                                                            <small class="text-muted">{{ Str::limit($server->notes, 30) }}</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                @if($server->isp)
                                                    <div class="d-flex align-items-center">
                                                        <i class="fas fa-network-wired text-success me-2"></i>
                                                        <div>
                                                            <div class="fw-bold text-success">{{ $server->isp->name }}</div>
                                                            <small class="text-muted">{{ $server->isp->code }}</small>
                                                        </div>
                                                    </div>
                                                @else
                                                    <span class="text-muted">
                                                        <i class="fas fa-times-circle me-1"></i>No ISP
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($server->branch)
                                                    <div class="d-flex align-items-center">
                                                        <i class="fas fa-building text-info me-2"></i>
                                                        <div>
                                                            <div class="fw-bold text-info">{{ $server->branch->name }}</div>
                                                            <small class="text-muted">{{ $server->branch->code }}</small>
                                                        </div>
                                                    </div>
                                                @else
                                                    <span class="text-muted">
                                                        <i class="fas fa-times-circle me-1"></i>No Branch
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="fw-bold" data-host="{{ $server->host }}">{{ $server->host }}</span>
                                            </td>
                                            <td>
                                                <span class="badge bg-info" data-port="{{ $server->port }}">{{ $server->port }}</span>
                                            </td>
                                            <td>
                                                @if(isset($server->connection_status))
                                                    @switch($server->connection_status)
                                                        @case('online')
                                                            <span class="badge bg-success connection-status-badge">
                                                                <i class="fas fa-wifi me-1"></i>Online
                                                            </span>
                                                            @break
                                                        @case('offline')
                                                            <span class="badge bg-warning connection-status-badge">
                                                                <i class="fas fa-exclamation-triangle me-1"></i>Offline
                                                            </span>
                                                            @break
                                                        @case('unreachable')
                                                            <span class="badge bg-secondary connection-status-badge">
                                                                <i class="fas fa-times-circle me-1"></i>Unreachable
                                                            </span>
                                                            @break
                                                        @case('error')
                                                            <span class="badge bg-danger connection-status-badge">
                                                                <i class="fas fa-exclamation-circle me-1"></i>Error
                                                            </span>
                                                            @break
                                                        @case('inactive')
                                                            <span class="badge bg-dark connection-status-badge">
                                                                <i class="fas fa-pause-circle me-1"></i>Inactive
                                                            </span>
                                                            @break
                                                        @default
                                                            <span class="badge bg-info connection-status-badge">
                                                                <i class="fas fa-question-circle me-1"></i>Unknown
                                                            </span>
                                                    @endswitch
                                                @else
                                                    @if($server->status === 'online')
                                                        <span class="badge bg-success connection-status-badge">
                                                            <i class="fas fa-wifi me-1"></i>Online
                                                        </span>
                                                    @else
                                                        <span class="badge bg-danger connection-status-badge">
                                                            <i class="fas fa-wifi me-1"></i>Offline
                                                        </span>
                                                    @endif
                                                @endif
                                            </td>
                                            <td>
                                                @if($server->is_enabled)
                                                    <span class="badge bg-primary">
                                                        <i class="fas fa-check me-1"></i>Enabled
                                                    </span>
                                                @else
                                                    <span class="badge bg-warning">
                                                        <i class="fas fa-ban me-1"></i>Disabled
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <small>{{ $server->created_at->diffForHumans() }}</small>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <span class="badge bg-success me-2 clickable-badge" 
                                                          onclick="showOnlineClientsDetails({{ $server->id }}, '{{ $server->name }}')" 
                                                          style="cursor: pointer;" 
                                                          title="Click to view online clients details">
                                                        <i class="fas fa-wifi me-1"></i>{{ $server->online_clients }}
                                                    </span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <button class="btn btn-sm btn-outline-info" onclick="testConnection({{ $server->id }})" 
                                                            title="Test Connection">
                                                        <i class="fas fa-plug"></i>
                                                    </button>
                                                    <button class="btn btn-sm btn-outline-warning" onclick="toggleServerStatus({{ $server->id }})" 
                                                            title="Toggle Status">
                                                        @if($server->is_enabled)
                                                            <i class="fas fa-ban"></i>
                                                        @else
                                                            <i class="fas fa-check"></i>
                                                        @endif
                                                    </button>
                                                    <a href="{{ route('mikrotik.show', $server->id) }}" class="btn btn-sm btn-outline-primary" 
                                                       title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('mikrotik.edit', $server->id) }}" class="btn btn-sm btn-outline-secondary" 
                                                       title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button class="btn btn-sm btn-outline-danger" onclick="deleteServer({{ $server->id }})" 
                                                            title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="text-muted mb-3">
                                <i class="fas fa-server fa-3x"></i>
                            </div>
                            <h5 class="text-muted">No MikroTik servers found</h5>
                            <p class="text-muted">Start by adding your first MikroTik server.</p>
                            <a href="{{ route('mikrotik.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i>Add Server
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Server Modal -->
<div class="modal fade" id="addServerModal" tabindex="-1" aria-labelledby="addServerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addServerModalLabel">
                    <i class="fas fa-plus-circle me-2"></i>
                    Add New MikroTik Server
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addServerForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="serverName" class="form-label">
                                <i class="fas fa-tag me-1"></i>
                                Server Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control custom-form-control" id="serverName" name="name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="serverIp" class="form-label">
                                <i class="fas fa-network-wired me-1"></i>
                                IP Address <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control custom-form-control" id="serverIp" name="ip_address" required>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="serverPort" class="form-label">
                                <i class="fas fa-plug me-1"></i>
                                Port <span class="text-danger">*</span>
                            </label>
                            <input type="number" class="form-control custom-form-control" id="serverPort" name="port" value="8728" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="serverUsername" class="form-label">
                                <i class="fas fa-user me-1"></i>
                                Username <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control custom-form-control" id="serverUsername" name="username" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="serverPassword" class="form-label">
                            <i class="fas fa-lock me-1"></i>
                            Password <span class="text-danger">*</span>
                        </label>
                        <input type="password" class="form-control custom-form-control" id="serverPassword" name="password" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="serverDescription" class="form-label">
                            <i class="fas fa-align-left me-1"></i>
                            Description
                        </label>
                        <textarea class="form-control custom-form-control" id="serverDescription" name="description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-custom">
                        <i class="fas fa-save me-2"></i>Save Server
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>




@endsection

@section('scripts')
<script>
let currentServerId = null;

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

function setupEventListeners() {
    // Add server form submission
    document.getElementById('addServerForm').addEventListener('submit', function(e) {
        e.preventDefault();
        saveServer();
    });
}

function saveServer() {
    const formData = new FormData(document.getElementById('addServerForm'));
    
    fetch('{{ route("mikrotik.store") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Server added successfully');
            location.reload();
        } else {
            alert('Error adding server: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error adding server');
    });
}

function testConnection(serverId) {
    // Show loading state
    const button = event.target.closest('.dropdown-item');
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Testing...';
    
    fetch(`/mikrotik/${serverId}/test-connection`, {
        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: 'Connection Successful!',
                    html: `
                        <div class="text-start">
                            <strong>Host:</strong> ${data.details.host}:${data.details.port}<br>
                            <strong>API:</strong> ${data.details.api_version}<br>
                            ${data.details.identity ? '<strong>Identity:</strong> ' + data.details.identity : ''}
                        </div>
                    `,
                    confirmButtonText: 'OK'
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Connection Failed!',
                    text: data.message,
                    confirmButtonText: 'OK'
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'Failed to test connection. Please try again.',
                confirmButtonText: 'OK'
            });
        })
        .finally(() => {
            button.innerHTML = originalText;
        });
}

function syncServer(serverId) {
    // Show loading state
    const button = event.target.closest('.dropdown-item') || event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Syncing...';
    
    fetch(`{{ route('mikrotik.index') }}/${serverId}/sync`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Server synced successfully!');
                location.reload();
            } else {
                alert('Sync failed: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error syncing server');
        })
        .finally(() => {
            button.innerHTML = originalText;
        });
}

function toggleServerStatus(serverId) {
    Swal.fire({
        title: 'Toggle Server Status',
        text: "Are you sure you want to change the server status?",
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, toggle it!'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch(`/mikrotik/${serverId}/toggle-status`, {
                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('Success!', data.message, 'success');
                    location.reload();
                } else {
                    Swal.fire('Error!', data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire('Error!', 'Failed to toggle server status', 'error');
            });
        }
    });
}

function refreshAllServerStatus() {
    const refreshBtn = document.getElementById('refreshBtn');
    const originalText = refreshBtn.innerHTML;
    
    // Show loading state
    refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Refreshing...';
    refreshBtn.disabled = true;
    
    // Get all server IDs
    const serverRows = document.querySelectorAll('tr[data-server-id]');
    const serverIds = Array.from(serverRows).map(row => row.getAttribute('data-server-id'));
    
    if (serverIds.length === 0) {
        Swal.fire('Info', 'No servers found to refresh', 'info');
        refreshBtn.innerHTML = originalText;
        refreshBtn.disabled = false;
        return;
    }
    
    // Test connection for each server
    let completed = 0;
    let successCount = 0;
    let errorCount = 0;
    
    serverIds.forEach(serverId => {
        fetch(`/mikrotik/${serverId}/test-connection`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            completed++;
            
            if (data.success) {
                successCount++;
                // Update server card status
                updateServerCardStatus(serverId, 'online');
            } else {
                errorCount++;
                // Update server card status
                updateServerCardStatus(serverId, 'offline');
            }
            
            // Check if all requests completed
            if (completed === serverIds.length) {
                refreshBtn.innerHTML = originalText;
                refreshBtn.disabled = false;
                
                Swal.fire({
                    title: 'Status Refresh Complete!',
                    html: `
                        <div class="text-start">
                            <p><i class="fas fa-check-circle text-success"></i> Online: ${successCount}</p>
                            <p><i class="fas fa-times-circle text-danger"></i> Offline: ${errorCount}</p>
                            <p><i class="fas fa-server"></i> Total: ${serverIds.length}</p>
                        </div>
                    `,
                    icon: 'success',
                    confirmButtonText: 'OK'
                });
            }
        })
        .catch(error => {
            console.error(`Error testing server ${serverId}:`, error);
            completed++;
            errorCount++;
            updateServerCardStatus(serverId, 'offline');
            
            // Check if all requests completed
            if (completed === serverIds.length) {
                refreshBtn.innerHTML = originalText;
                refreshBtn.disabled = false;
                
                Swal.fire({
                    title: 'Status Refresh Complete!',
                    html: `
                        <div class="text-start">
                            <p><i class="fas fa-check-circle text-success"></i> Online: ${successCount}</p>
                            <p><i class="fas fa-times-circle text-danger"></i> Offline: ${errorCount}</p>
                            <p><i class="fas fa-server"></i> Total: ${serverIds.length}</p>
                        </div>
                    `,
                    icon: 'info',
                    confirmButtonText: 'OK'
                });
            }
        });
    });
}

function updateServerCardStatus(serverId, status) {
    const serverRow = document.querySelector(`tr[data-server-id="${serverId}"]`);
    if (serverRow) {
        const statusBadge = serverRow.querySelector('.connection-status-badge');
        if (statusBadge) {
            if (status === 'online') {
                statusBadge.innerHTML = '<i class="fas fa-wifi me-1"></i>Online';
                statusBadge.className = 'badge bg-success connection-status-badge';
            } else {
                statusBadge.innerHTML = '<i class="fas fa-wifi me-1"></i>Offline';
                statusBadge.className = 'badge bg-danger connection-status-badge';
            }
        }
    }
}

function syncAllServers() {
    Swal.fire({
        title: 'Sync All PPPoE Clients',
        text: 'This will sync all PPPoE clients from all MikroTik servers to the database. Continue?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, sync all!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            // Show loading state
            const syncBtn = event.target;
            const originalText = syncBtn.innerHTML;
            syncBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Syncing...';
            syncBtn.disabled = true;
            
            fetch('{{ route("mikrotik.sync-all-clients") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        title: 'Sync Completed Successfully!',
                        html: `
                            <div class="text-start">
                                <p><strong>Summary:</strong></p>
                                <p><i class="fas fa-server text-primary"></i> Total Servers: ${data.summary.total_servers}</p>
                                <p><i class="fas fa-check-circle text-success"></i> Successful: ${data.summary.successful_servers}</p>
                                <p><i class="fas fa-times-circle text-danger"></i> Failed: ${data.summary.failed_servers}</p>
                                <p><i class="fas fa-user-plus text-info"></i> New Clients: ${data.summary.total_synced}</p>
                                <p><i class="fas fa-user-edit text-warning"></i> Updated Clients: ${data.summary.total_updated}</p>
                                <p><i class="fas fa-exclamation-triangle text-danger"></i> Errors: ${data.summary.total_errors}</p>
                                <hr>
                                <p><small class="text-muted">Sync Time: ${data.sync_time}</small></p>
                            </div>
                        `,
                        icon: 'success',
                        confirmButtonText: 'OK',
                        width: '500px'
                    });
                } else {
                    Swal.fire({
                        title: 'Sync Failed!',
                        text: data.message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error!',
                    text: 'Failed to sync clients. Please try again.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            })
            .finally(() => {
                syncBtn.innerHTML = originalText;
                syncBtn.disabled = false;
            });
        }
    });
}

function refreshOnlineClients() {
    const refreshBtn = document.getElementById('refreshOnlineBtn');
    const originalText = refreshBtn.innerHTML;
    
    // Show loading state
    refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Refreshing...';
    refreshBtn.disabled = true;
    
    fetch('{{ route("mikrotik.refresh-online-clients") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update the online clients count in the table
            data.results.forEach(result => {
                const serverRow = document.querySelector(`tr[data-server-id="${result.server_id}"]`);
                if (serverRow) {
                    const onlineClientsCell = serverRow.querySelector('td:nth-child(7)'); // 7th column
                    if (onlineClientsCell) {
                        onlineClientsCell.innerHTML = `
                            <div class="d-flex align-items-center">
                                <span class="badge bg-success me-2 clickable-badge" 
                                      onclick="showOnlineClientsDetails(${result.server_id}, '${result.server_name}')" 
                                      style="cursor: pointer;" 
                                      title="Click to view online clients details">
                                    <i class="fas fa-wifi me-1"></i>${result.online_count}
                                </span>
                            </div>
                        `;
                    }
                }
            });
            
            Swal.fire({
                title: 'Online Clients Refreshed!',
                html: `
                    <div class="text-start">
                        <p><strong>Refresh Summary:</strong></p>
                        <p><i class="fas fa-clock text-info"></i> Refresh Time: ${data.refresh_time}</p>
                        <p><i class="fas fa-server text-primary"></i> Servers Processed: ${data.results.length}</p>
                        <hr>
                        <div class="mt-2">
                            ${data.results.map(result => `
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span><i class="fas fa-server me-1"></i>${result.server_name}</span>
                                    <span class="badge ${result.success ? 'bg-success' : 'bg-danger'}">
                                        ${result.success ? result.online_count : 'Error'}
                                    </span>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                `,
                icon: 'success',
                confirmButtonText: 'OK',
                width: '500px'
            });
        } else {
            Swal.fire({
                title: 'Refresh Failed!',
                text: data.message,
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            title: 'Error!',
            text: 'Failed to refresh online clients. Please try again.',
            icon: 'error',
            confirmButtonText: 'OK'
        });
    })
    .finally(() => {
        refreshBtn.innerHTML = originalText;
        refreshBtn.disabled = false;
    });
}

function showOnlineClientsDetails(serverId, serverName) {
    // Show loading modal
    Swal.fire({
        title: 'Loading Online Clients...',
        text: `Fetching online clients from ${serverName}`,
        allowOutsideClick: false,
        allowEscapeKey: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
    
    fetch(`/mikrotik/${serverId}/online-clients`, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const clients = data.online_clients;
            
            if (clients.length === 0) {
                Swal.fire({
                    title: 'No Online Clients',
                    html: `
                        <div class="text-center">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No clients are currently online on <strong>${serverName}</strong></p>
                        </div>
                    `,
                    icon: 'info',
                    confirmButtonText: 'OK'
                });
            } else {
                // Create detailed table of online clients
                const clientsTable = `
                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-sm table-striped">
                            <thead class="table-dark">
                                <tr>
                                    <th><i class="fas fa-user me-1"></i>Username</th>
                                    <th><i class="fas fa-globe me-1"></i>IP Address</th>
                                    <th><i class="fas fa-clock me-1"></i>Uptime</th>
                                    <th><i class="fas fa-download me-1"></i>Bytes In</th>
                                    <th><i class="fas fa-upload me-1"></i>Bytes Out</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${clients.map(client => `
                                    <tr>
                                        <td>
                                            <span class="badge bg-primary">
                                                <i class="fas fa-user me-1"></i>${client.name || client.username || 'N/A'}
                                            </span>
                                        </td>
                                        <td>
                                            <code class="text-success">${client.address || client.ip || 'N/A'}</code>
                                        </td>
                                        <td>
                                            <small class="text-info">${client.uptime || 'N/A'}</small>
                                        </td>
                                        <td>
                                            <small class="text-warning">${formatBytes(client['bytes-in'] || client.bytes_in || 0)}</small>
                                        </td>
                                        <td>
                                            <small class="text-danger">${formatBytes(client['bytes-out'] || client.bytes_out || 0)}</small>
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                `;
                
                Swal.fire({
                    title: `Online Clients - ${serverName}`,
                    html: `
                        <div class="text-start">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="badge bg-success fs-6">
                                    <i class="fas fa-wifi me-1"></i>${clients.length} Online Clients
                                </span>
                                <small class="text-muted">Last Updated: ${new Date().toLocaleTimeString()}</small>
                            </div>
                            ${clientsTable}
                        </div>
                    `,
                    icon: 'success',
                    confirmButtonText: 'Close',
                    width: '800px',
                    showCloseButton: true
                });
            }
        } else {
            Swal.fire({
                title: 'Error!',
                text: data.message || 'Failed to fetch online clients details',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            title: 'Error!',
            text: 'Failed to fetch online clients details. Please try again.',
            icon: 'error',
            confirmButtonText: 'OK'
        });
    });
}

// Helper function to format bytes
function formatBytes(bytes, decimals = 2) {
    if (bytes === 0) return '0 Bytes';
    
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}



function deleteServer(serverId) {
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            // Create a form and submit
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/mikrotik/${serverId}`;
            
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            
            const methodField = document.createElement('input');
            methodField.type = 'hidden';
            methodField.name = '_method';
            methodField.value = 'DELETE';
            
            form.appendChild(csrfToken);
            form.appendChild(methodField);
            document.body.appendChild(form);
            form.submit();
        }
    });
}

function initializeTooltips() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
}
</script>
@endsection