@extends('layouts.app')

@section('title', 'Hotspot Active Users')

@section('content')
<div class="container-fluid">
    <div class="corporate-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-wifi text-success me-2"></i>
                    Hotspot Active Users
                </h1>
                <p class="text-muted small mb-0">User yang sedang terhubung ke hotspot Mikrotik</p>
            </div>
            <div class="col-md-4 text-end">
                <button type="button" class="btn btn-primary btn-sm" onclick="refreshActiveUsers()">
                    <i class="fas fa-sync-alt me-1"></i>
                    Refresh
                </button>
            </div>
        </div>
    </div>

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

    <!-- Router Selection -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-router me-2"></i>
                Pilih Router Mikrotik
            </h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('hotspot.active-users') }}" id="routerForm">
                <div class="row align-items-end">
                    <div class="col-md-8">
                        <label for="mikrotik_id" class="form-label">Router</label>
                        <select class="form-select" id="mikrotik_id" name="mikrotik_id" onchange="this.form.submit()">
                            <option value="">-- Pilih Router --</option>
                            @foreach($mikrotiks as $mikrotik)
                                <option value="{{ $mikrotik->id }}" 
                                        {{ $selectedMikrotik && $selectedMikrotik->id == $mikrotik->id ? 'selected' : '' }}>
                                    {{ $mikrotik->name }} ({{ $mikrotik->host }})
                                    @if($mikrotik->status === 'online')
                                        <span class="text-success">● Online</span>
                                    @else
                                        <span class="text-secondary">● {{ ucfirst($mikrotik->status) }}</span>
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        @if($selectedMikrotik)
                            <div class="alert alert-info mb-0 py-2">
                                <i class="fas fa-info-circle me-1"></i>
                                <strong>{{ $selectedMikrotik->name }}</strong><br>
                                <small>{{ $selectedMikrotik->host }}:{{ $selectedMikrotik->api_port }}</small>
                            </div>
                        @endif
                    </div>
                </div>
            </form>
        </div>
    </div>

    @if($selectedMikrotik)
        <!-- Statistics -->
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-card bg-success">
                    <div class="stat-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ count($activeUsers) }}</div>
                        <div class="stat-label">Active Users</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-card bg-primary">
                    <div class="stat-icon">
                        <i class="fas fa-wifi"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ collect($activeUsers)->filter(function($u) { return $u['radius'] === 'true'; })->count() }}</div>
                        <div class="stat-label">RADIUS Auth</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-card bg-info">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">
                            @php
                                $uptimeSeconds = collect($activeUsers)->pluck('uptime_seconds')->filter(function($uptime) {
                                    return is_numeric($uptime) && $uptime > 0;
                                });
                                $avgUptime = $uptimeSeconds->count() > 0 ? $uptimeSeconds->avg() : 0;
                            @endphp
                            {{ $avgUptime > 0 ? gmdate('H:i:s', $avgUptime) : '00:00:00' }}
                        </div>
                        <div class="stat-label">Avg Uptime</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stat-card bg-warning">
                    <div class="stat-icon">
                        <i class="fas fa-refresh"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">{{ now()->format('H:i') }}</div>
                        <div class="stat-label">Last Update</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Users Table -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-table me-2"></i>
                    Daftar User Aktif
                    <span class="badge bg-success ms-2">{{ count($activeUsers) }} users</span>
                </h5>
            </div>
            <div class="card-body">
                @if(count($activeUsers) > 0)
                    <div class="table-responsive">
                        <table class="table table-hover" id="activeUsersTable">
                            <thead class="table-dark">
                                <tr>
                                    <th>User</th>
                                    <th>IP Address</th>
                                    <th>MAC Address</th>
                                    <th>Login Time</th>
                                    <th>Uptime</th>
                                    <th>Bytes In/Out</th>
                                    <th>Server</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($activeUsers as $user)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="user-avatar">
                                                    <i class="fas fa-user-circle fa-2x text-primary"></i>
                                                </div>
                                                <div class="ms-3">
                                                    <div class="fw-bold">{{ $user['user'] }}</div>
                                                    @if($user['comment'])
                                                        <small class="text-muted">{{ $user['comment'] }}</small>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <code>{{ $user['address'] }}</code>
                                        </td>
                                        <td>
                                            <code class="small">{{ $user['mac_address'] }}</code>
                                        </td>
                                        <td>
                                            <span class="small">{{ $user['login_time'] }}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-info">{{ $user['uptime'] }}</span>
                                        </td>
                                        <td>
                                            <div class="small">
                                                <div class="text-success">
                                                    <i class="fas fa-download"></i> 
                                                    @php
                                                        $bytesIn = is_numeric($user['bytes_in']) ? $user['bytes_in'] : 0;
                                                        $mbIn = $bytesIn / 1024 / 1024;
                                                    @endphp
                                                    {{ number_format($mbIn, 2) }} MB
                                                </div>
                                                <div class="text-danger">
                                                    <i class="fas fa-upload"></i> 
                                                    @php
                                                        $bytesOut = is_numeric($user['bytes_out']) ? $user['bytes_out'] : 0;
                                                        $mbOut = $bytesOut / 1024 / 1024;
                                                    @endphp
                                                    {{ number_format($mbOut, 2) }} MB
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="small">{{ $user['server'] }}</span>
                                        </td>
                                        <td>
                                            @if($user['radius'] === 'true')
                                                <span class="badge bg-primary">RADIUS</span>
                                            @else
                                                <span class="badge bg-secondary">Local</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <button type="button" class="btn btn-outline-info" 
                                                        onclick="showUserDetails('{{ json_encode($user) }}')"
                                                        title="View Details">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger" 
                                                        onclick="disconnectUser('{{ $user['id'] }}', '{{ $user['user'] }}')"
                                                        title="Disconnect">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-wifi fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Tidak Ada User Aktif</h5>
                        <p class="text-muted">Belum ada user yang terhubung ke hotspot saat ini</p>
                    </div>
                @endif
            </div>
        </div>
    @else
        <!-- No Router Selected -->
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="fas fa-router fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">Pilih Router Mikrotik</h5>
                <p class="text-muted">Silakan pilih router Mikrotik untuk melihat user hotspot aktif</p>
            </div>
        </div>
    @endif
</div>

<!-- User Details Modal -->
<div class="modal fade" id="userDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-user-circle me-2"></i>
                    Detail User Hotspot
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="userDetailsContent">
                <!-- Content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Confirmation Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="confirmContent">
                <!-- Content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmButton">Ya, Putus Koneksi</button>
            </div>
        </div>
    </div>
</div>

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

<style>
.corporate-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.stat-card {
    color: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 15px;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    opacity: 0.9;
}

.card {
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.user-avatar {
    text-align: center;
}

.table th {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    vertical-align: middle;
    font-size: 14px;
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}
</style>

<script>
function refreshActiveUsers() {
    const mikrotikId = document.getElementById('mikrotik_id').value;
    
    if (!mikrotikId) {
        showAlert('warning', 'Pilih router terlebih dahulu');
        return;
    }
    
    showLoading('Memuat ulang user aktif...');
    
    // Refresh halaman untuk mengambil data terbaru
    window.location.reload();
}

function showUserDetails(userData) {
    const user = JSON.parse(userData);
    
    const content = `
        <div class="row">
            <div class="col-md-6">
                <h6><i class="fas fa-user me-2"></i>Informasi User</h6>
                <table class="table table-sm">
                    <tr>
                        <td><strong>Username:</strong></td>
                        <td>${user.user}</td>
                    </tr>
                    <tr>
                        <td><strong>IP Address:</strong></td>
                        <td><code>${user.address}</code></td>
                    </tr>
                    <tr>
                        <td><strong>MAC Address:</strong></td>
                        <td><code>${user.mac_address}</code></td>
                    </tr>
                    <tr>
                        <td><strong>Server:</strong></td>
                        <td>${user.server}</td>
                    </tr>
                    <tr>
                        <td><strong>Host:</strong></td>
                        <td>${user.host}</td>
                    </tr>
                    <tr>
                        <td><strong>RADIUS:</strong></td>
                        <td><span class="badge ${user.radius === 'true' ? 'bg-primary' : 'bg-secondary'}">${user.radius === 'true' ? 'Ya' : 'Tidak'}</span></td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6><i class="fas fa-clock me-2"></i>Waktu & Session</h6>
                <table class="table table-sm">
                    <tr>
                        <td><strong>Login Time:</strong></td>
                        <td>${user.login_time}</td>
                    </tr>
                    <tr>
                        <td><strong>Uptime:</strong></td>
                        <td><span class="badge bg-info">${user.uptime}</span></td>
                    </tr>
                    <tr>
                        <td><strong>Idle Time:</strong></td>
                        <td>${user.idle_time}</td>
                    </tr>
                    <tr>
                        <td><strong>Session Timeout:</strong></td>
                        <td>${user.session_timeout}</td>
                    </tr>
                    <tr>
                        <td><strong>Idle Timeout:</strong></td>
                        <td>${user.idle_timeout}</td>
                    </tr>
                    <tr>
                        <td><strong>Keepalive Timeout:</strong></td>
                        <td>${user.keepalive_timeout}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-12">
                <h6><i class="fas fa-chart-bar me-2"></i>Traffic Statistics</h6>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <h6 class="text-success"><i class="fas fa-download"></i> Download</h6>
                                <h4>${(parseFloat(user.bytes_in) / 1024 / 1024 || 0).toFixed(2)} MB</h4>
                                <small class="text-muted">${user.packets_in || 0} packets</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <h6 class="text-danger"><i class="fas fa-upload"></i> Upload</h6>
                                <h4>${(parseFloat(user.bytes_out) / 1024 / 1024 || 0).toFixed(2)} MB</h4>
                                <small class="text-muted">${user.packets_out || 0} packets</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.getElementById('userDetailsContent').innerHTML = content;
    const modal = new bootstrap.Modal(document.getElementById('userDetailsModal'));
    modal.show();
}

function disconnectUser(userId, username) {
    const mikrotikId = document.getElementById('mikrotik_id').value;
    
    document.getElementById('confirmContent').innerHTML = `
        <p>Apakah Anda yakin ingin memutus koneksi user <strong>${username}</strong>?</p>
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle me-2"></i>
            User akan langsung terputus dari hotspot dan harus login ulang.
        </div>
    `;
    
    const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
    modal.show();
    
    document.getElementById('confirmButton').onclick = function() {
        modal.hide();
        showLoading('Memutus koneksi user...');
        
        fetch(`/mikrotiks/${mikrotikId}/disconnect-hotspot-user`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                user_id: userId
            })
        })
        .then(response => response.json())
        .then(data => {
            hideLoading();
            if (data.success) {
                showAlert('success', data.message);
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            hideLoading();
            showAlert('danger', 'Terjadi kesalahan saat memutus koneksi');
        });
    };
}

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

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

function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'danger' ? 'exclamation-circle' : 'info-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    const container = document.querySelector('.container-fluid');
    const corporateHeader = container.querySelector('.corporate-header');
    corporateHeader.insertAdjacentHTML('afterend', alertHtml);
    
    // Auto hide after 5 seconds
    setTimeout(() => {
        const alert = container.querySelector('.alert');
        if (alert) {
            alert.remove();
        }
    }, 5000);
}
</script>
@endsection