@extends('layouts.app')

@section('title', 'Online Clients - ISP ERP System')

@section('page-title', 'Online Clients Management')

@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-wifi me-2"></i>
                                Online Clients Management
                            </h3>
                            <p class="mb-0 opacity-75">
                                @if(auth()->user()->role === 'mac_reseller')
                                    Monitor your assigned MikroTik servers and their online clients
                                @else
                                    Monitor all active clients connected to MikroTik servers
                                @endif
                            </p>
                        </div>
                        <div class="d-flex gap-2">
                            <button class="btn btn-success btn-custom" onclick="refreshOnlineClients()">
                                <i class="fas fa-sync-alt me-2"></i>Refresh
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ISP Filter Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body">
                    <form method="GET" action="{{ route('online-clients.index') }}" class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label for="isp_id" class="form-label">Filter by ISP</label>
                            <select name="isp_id" id="isp_id" class="form-control" onchange="this.form.submit()">
                                @php
                                    $currentUser = auth()->user();
                                    $isSuperUser = \App\Helpers\PermissionHelper::isSuperUser($currentUser->id);
                                @endphp
                                @if($isSuperUser)
                                    <option value="">All ISPs</option>
                                @endif
                                @foreach($isps as $isp)
                                    <option value="{{ $isp->id }}" {{ (isset($selectedIsp) && $selectedIsp == $isp->id) ? 'selected' : '' }}>
                                        {{ $isp->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="server_id" class="form-label">Filter by Router</label>
                            <select name="server_id" id="server_id" class="form-control" onchange="this.form.submit()">
                                <option value="">All Routers</option>
                                @if(isset($allMikrotikServers) && $allMikrotikServers->count() > 0)
                                    @foreach($allMikrotikServers as $server)
                                        <option value="{{ $server->id }}" {{ (isset($selectedServer) && $selectedServer == $server->id) ? 'selected' : '' }}>
                                            {{ $server->name }} ({{ $server->host }})
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary btn-custom w-100">
                                <i class="fas fa-filter me-2"></i>Filter
                            </button>
                        </div>
                        @if((isset($selectedIsp) && $selectedIsp) || (isset($selectedServer) && $selectedServer))
                        <div class="col-md-2">
                            <a href="{{ route('online-clients.index') }}" class="btn btn-secondary btn-custom w-100">
                                <i class="fas fa-times me-2"></i>Clear
                            </a>
                        </div>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Metrics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="metric-card">
                <div class="metric-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-value">{{ $metrics['totalOnlineClients'] }}</div>
                    <div class="metric-label">Online Clients</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card">
                <div class="metric-icon">
                    <i class="fas fa-server"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-value">{{ $metrics['activeServers'] }}</div>
                    <div class="metric-label">Active Servers</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card">
                <div class="metric-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-value">{{ $metrics['totalBandwidth'] }}</div>
                    <div class="metric-label">Total Bandwidth</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card">
                <div class="metric-icon">
                    <i class="fas fa-network-wired"></i>
                </div>
                <div class="metric-content">
                    <div class="metric-value">{{ $metrics['totalServers'] }}</div>
                    <div class="metric-label">Total Servers</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Online Clients Table -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-list me-2"></i>
                        All Online Clients
                    </h5>
                </div>
                <div class="custom-card-body">
                    @if($onlineClients->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-modern">
                                <thead>
                                    <tr>
                                        <th>Username</th>
                                        @if(auth()->user()->role === 'mac_reseller' || auth()->user()->role === 'admin')
                                            <th>Client Name</th>
                                            <th>Contact</th>
                                            <th>Package</th>
                                        @endif
                                        <th>Server</th>
                                        <th>IP Address</th>
                                        <th>Uptime</th>
                                        <th>Service</th>
                                        <th>Bytes In/Out</th>
                                        <th>Packets In/Out</th>
                                        <th>Caller ID</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($onlineClients as $client)
                                        <tr>
                                            <td>
                                                <span class="badge bg-success">{{ $client['username'] }}</span>
                                            </td>
                                            @if(auth()->user()->role === 'mac_reseller' || auth()->user()->role === 'admin')
                                                <td>
                                                    <div>
                                                        <strong>{{ $client['client_name'] ?? 'N/A' }}</strong>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <small class="text-muted">
                                                            <i class="fas fa-phone me-1"></i>{{ $client['client_phone'] ?? 'N/A' }}
                                                        </small>
                                                        <br>
                                                        <small class="text-muted">
                                                            <i class="fas fa-envelope me-1"></i>{{ $client['client_email'] ?? 'N/A' }}
                                                        </small>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div>
                                                        <span class="badge bg-primary">{{ $client['package_name'] ?? 'N/A' }}</span>
                                                        <br>
                                                        <small class="text-muted">৳{{ $client['package_price'] ?? '0' }}</small>
                                                    </div>
                                                </td>
                                            @endif
                                            <td>
                                                <div>
                                                    <strong>{{ $client['server_name'] }}</strong>
                                                    <br><small class="text-muted">{{ $client['server_ip'] }}</small>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge bg-info">{{ $client['address'] }}</span>
                                            </td>
                                            <td>
                                                <span class="text-success">
                                                    <i class="fas fa-clock me-1"></i>{{ $client['uptime'] }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge bg-primary">{{ strtoupper($client['service']) }}</span>
                                            </td>
                                            <td>
                                                <div class="small">
                                                    <div><i class="fas fa-download text-success me-1"></i>{{ \App\Helpers\FormatHelper::formatBytes(isset($client['bytes_in']) ? (is_numeric($client['bytes_in']) ? $client['bytes_in'] : (int)$client['bytes_in']) : 0) }}</div>
                                                    <div><i class="fas fa-upload text-danger me-1"></i>{{ \App\Helpers\FormatHelper::formatBytes(isset($client['bytes_out']) ? (is_numeric($client['bytes_out']) ? $client['bytes_out'] : (int)$client['bytes_out']) : 0) }}</div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="small">
                                                    <div><i class="fas fa-arrow-down text-success me-1"></i>{{ number_format(isset($client['packets_in']) ? (is_numeric($client['packets_in']) ? (int)$client['packets_in'] : 0) : 0) }}</div>
                                                    <div><i class="fas fa-arrow-up text-danger me-1"></i>{{ number_format(isset($client['packets_out']) ? (is_numeric($client['packets_out']) ? (int)$client['packets_out'] : 0) : 0) }}</div>
                                                </div>
                                            </td>
                                            <td>
                                                <code>{{ $client['caller_id'] }}</code>
                                            </td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <button class="btn btn-sm btn-danger" 
                                                            onclick="disconnectClient('{{ $client['server_ip'] }}', '{{ $client['session_id'] }}', '{{ $client['username'] }}')"
                                                            title="Disconnect Client">
                                                        <i class="fas fa-unlink"></i>
                                                    </button>
                                                    <button class="btn btn-sm btn-info" 
                                                            onclick="viewClientDetails('{{ $client['username'] }}')"
                                                            title="View Details">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-wifi-slash fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No Online Clients Found</h5>
                            <p class="text-muted">No clients are currently connected to any MikroTik servers.</p>
                            <button class="btn btn-primary" onclick="refreshOnlineClients()">
                                <i class="fas fa-sync-alt me-2"></i>Refresh Data
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Reduce all font sizes on the page */
.container-fluid {
    font-size: 0.9rem;
}

h3 {
    font-size: 1.3rem !important;
}

h5 {
    font-size: 1.1rem !important;
}

p {
    font-size: 0.85rem !important;
}

.form-label {
    font-size: 0.85rem !important;
}

.form-control, .form-select {
    font-size: 0.85rem !important;
}

.btn {
    font-size: 0.85rem !important;
}

.metric-card {
    background: #2F4255;
    border-radius: 8px;
    padding: 15px;
    color: white;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(47, 66, 85, 0.3);
    transition: transform 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(47, 66, 85, 0.4);
}

.metric-icon {
    font-size: 1.4rem;
    margin-right: 12px;
    opacity: 0.9;
}

.metric-content {
    flex: 1;
}

.metric-value {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 3px;
}

.metric-label {
    font-size: 0.7rem;
    opacity: 0.9;
}

.table-modern {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.table-modern thead th {
    background: #2F4255;
    color: white;
    border: none;
    padding: 12px 10px;
    font-weight: 600;
    font-size: 0.85rem;
}

.table-modern tbody td {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-size: 0.85rem;
}

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

.btn-custom {
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.custom-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background-color: #fff;
}

.custom-card-header {
    background: #2F4255;
    padding: 20px;
    color: white;
}

.custom-card-body {
    padding: 20px;
}

.badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
}

code {
    background-color: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

small {
    font-size: 0.75rem !important;
}

.custom-card-header {
    font-size: 0.9rem;
}

.custom-card-body {
    font-size: 0.9rem;
}
</style>

<script>
function refreshOnlineClients() {
    const refreshBtn = document.querySelector('button[onclick="refreshOnlineClients()"]');
    const originalText = refreshBtn.innerHTML;
    
    refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Refreshing...';
    refreshBtn.disabled = true;
    
    // Get selected ISP and server from dropdowns
    const selectedIsp = document.getElementById('isp_id') ? document.getElementById('isp_id').value : '';
    const selectedServer = document.getElementById('server_id') ? document.getElementById('server_id').value : '';
    
    fetch('{{ route("online-clients.refresh") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            isp_id: selectedIsp,
            server_id: selectedServer
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Online clients refreshed successfully', 'success');
            // Reload the page with filters preserved
            setTimeout(() => {
                const urlParams = new URLSearchParams(window.location.search);
                const selectedIsp = document.getElementById('isp_id') ? document.getElementById('isp_id').value : '';
                const selectedServer = document.getElementById('server_id') ? document.getElementById('server_id').value : '';
                
                if (selectedIsp) {
                    urlParams.set('isp_id', selectedIsp);
                } else {
                    urlParams.delete('isp_id');
                }
                
                if (selectedServer) {
                    urlParams.set('server_id', selectedServer);
                } else {
                    urlParams.delete('server_id');
                }
                
                const newUrl = '{{ route("online-clients.index") }}' + (urlParams.toString() ? '?' + urlParams.toString() : '');
                location.href = newUrl;
            }, 1000);
        } else {
            showToast('Failed to refresh online clients', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('An error occurred while refreshing', 'error');
    })
    .finally(() => {
        refreshBtn.innerHTML = originalText;
        refreshBtn.disabled = false;
    });
}

function disconnectClient(serverIp, sessionId, username) {
    if (confirm(`Are you sure you want to disconnect client "${username}"?`)) {
        fetch('{{ route("online-clients.disconnect") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                server_ip: serverIp,
                session_id: sessionId,
                username: username
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                // Refresh the page with filters preserved after successful disconnect
                setTimeout(() => {
                    const urlParams = new URLSearchParams(window.location.search);
                    const selectedIsp = document.getElementById('isp_id') ? document.getElementById('isp_id').value : '';
                    const selectedServer = document.getElementById('server_id') ? document.getElementById('server_id').value : '';
                    
                    if (selectedIsp) {
                        urlParams.set('isp_id', selectedIsp);
                    } else {
                        urlParams.delete('isp_id');
                    }
                    
                    if (selectedServer) {
                        urlParams.set('server_id', selectedServer);
                    } else {
                        urlParams.delete('server_id');
                    }
                    
                    const newUrl = '{{ route("online-clients.index") }}' + (urlParams.toString() ? '?' + urlParams.toString() : '');
                    location.href = newUrl;
                }, 1000);
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('An error occurred while disconnecting client', 'error');
        });
    }
}

function viewClientDetails(username) {
    if (!username) {
        showToast('Username is required', 'error');
        return;
    }
    
    // Show loading state
    const loadingToast = document.createElement('div');
    loadingToast.className = 'alert alert-info position-fixed';
    loadingToast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    loadingToast.innerHTML = `
        <div class="d-flex align-items-center">
            <i class="fas fa-spinner fa-spin me-2"></i>
            Finding client details...
        </div>
    `;
    document.body.appendChild(loadingToast);
    
    // Search for client by username in database
    fetch(`{{ url('online-clients/get-client-by-username') }}/${encodeURIComponent(username)}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        loadingToast.remove();
        return response.json();
    })
    .then(data => {
        if (data.success && data.client_info_id) {
            // Redirect to active-clients show page
            window.location.href = `{{ url('active-clients') }}/${data.client_info_id}`;
        } else {
            showToast(data.message || `Client details not found for username: ${username}`, 'error');
        }
    })
    .catch(error => {
        loadingToast.remove();
        console.error('Error:', error);
        showToast('Failed to find client details. Please try again.', 'error');
    });
}

function showToast(message, type = 'info') {
    // Simple toast notification
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'error' ? 'danger' : type} position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    toast.innerHTML = `
        <div class="d-flex align-items-center">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} me-2"></i>
            ${message}
        </div>
    `;
    
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// Auto-refresh every 30 seconds
setInterval(() => {
    refreshOnlineClients();
}, 30000);
</script>
@endsection