@extends('layouts.app')

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

@section('page-title', 'Active Clients')

@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-user-check me-2"></i>
                                Active Clients
                            </h3>
                            <p class="mb-0 opacity-75">View and manage active ISP clients</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('clients.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-list me-2"></i>All Clients
                            </a>
                            <a href="{{ route('clients.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Add New Customer
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-3">
                        <div class="bg-success bg-opacity-10 rounded-circle p-3 me-3">
                            <i class="fas fa-user-check text-success fa-2x"></i>
                        </div>
                        <div>
                            <h2 class="mb-0 text-success">{{ $stats['active'] }}</h2>
                            <p class="mb-0 text-muted">Active Clients</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-3">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3 me-3">
                            <i class="fas fa-users text-primary fa-2x"></i>
                        </div>
                        <div>
                            <h2 class="mb-0 text-primary">{{ $stats['total'] }}</h2>
                            <p class="mb-0 text-muted">Total Clients</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-3">
                        <div class="bg-warning bg-opacity-10 rounded-circle p-3 me-3">
                            <i class="fas fa-exclamation-triangle text-warning fa-2x"></i>
                        </div>
                        <div>
                            <h2 class="mb-0 text-warning">{{ $stats['suspended'] }}</h2>
                            <p class="mb-0 text-muted">Suspended</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="custom-card h-100">
                <div class="custom-card-body text-center">
                    <div class="d-flex align-items-center justify-content-center mb-3">
                        <div class="bg-info bg-opacity-10 rounded-circle p-3 me-3">
                            <i class="fas fa-server text-info fa-2x"></i>
                        </div>
                        <div>
                            <h2 class="mb-0 text-info">{{ $stats['assigned_servers'] }}</h2>
                            <p class="mb-0 text-muted">Assigned Servers</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-text bg-transparent border-end-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" class="form-control border-start-0" id="searchInput" placeholder="Search active clients...">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" id="serverFilter">
                                <option value="">All Servers</option>
                                <option value="server1">Server 1</option>
                                <option value="server2">Server 2</option>
                                <option value="server3">Server 3</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" id="packageFilter">
                                <option value="">All Packages</option>
                                <option value="basic">Basic</option>
                                <option value="premium">Premium</option>
                                <option value="enterprise">Enterprise</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" id="onlineFilter">
                                <option value="">All Status</option>
                                <option value="online">Online</option>
                                <option value="offline">Offline</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-outline-secondary w-100" onclick="clearFilters()">
                                <i class="fas fa-times me-1"></i>Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Active Clients List -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-user-check me-2"></i>
                        Active Clients ({{ $clients->total() }})
                    </h4>
                </div>
                <div class="custom-card-body">
                    @if($clients->count() > 0)
                        <div class="table-responsive">
                            <table class="table custom-table">
                                <thead>
                                    <tr>
                                        <th>Serial</th>
                                        <th>ID</th>
                                        <th>ISP Name</th>
                                        <th>Client Info</th>
                                        <th>User ID</th>
                                        <th>Password</th>
                                        <th>Online Status</th>
                                        <th>Last Log Out</th>
                                        <th>MAC Address</th>
                                        <th>Mikrotik Server</th>
                                        <th>Package</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($clients as $index => $client)
                                        <tr>
                                            <td>
                                                <span class="badge bg-primary">{{ $clients->firstItem() + $index }}</span>
                                            </td>
                                            <td>
                                                <span class="badge bg-secondary">{{ $client->id }}</span>
                                            </td>
                                            <td>
                                                @if($client->branch)
                                                    <span class="badge bg-info custom-badge">
                                                        <i class="fas fa-code-branch me-1"></i>{{ $client->branch->name }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">No Branch</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="client-avatar me-2">
                                                        {{ strtoupper(substr($client->name, 0, 1)) }}
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <strong>{{ $client->name }}</strong>
                                                        <small class="text-muted">{{ $client->email }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <code class="text-primary">{{ $client->username ?? 'N/A' }}</code>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <code class="text-muted">••••••••</code>
                                                    <button class="btn btn-sm btn-outline-secondary ms-2" onclick="showPassword({{ $client->id }})" data-bs-toggle="tooltip" title="Show Password">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </td>
                                            <td>
                                                @if($client->is_online)
                                                    <span class="badge bg-success custom-badge">
                                                        <i class="fas fa-wifi me-1"></i>Online
                                                    </span>
                                                    @if($client->session_count > 0)
                                                        <small class="text-muted d-block">{{ $client->session_count }} session(s)</small>
                                                    @endif
                                                @else
                                                    <span class="badge bg-secondary custom-badge">
                                                        <i class="fas fa-wifi-slash me-1"></i>Offline
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ $client->last_logout ? $client->last_logout->format('M d, Y H:i') : 'Never' }}
                                                </small>
                                            </td>
                                            <td>
                                                <code class="text-info">{{ $client->mac_address ?? 'N/A' }}</code>
                                            </td>
                                            <td>
                                                @if($client->mikrotikServer)
                                                    <span class="badge bg-primary custom-badge">
                                                        <i class="fas fa-server me-1"></i>{{ $client->mikrotikServer->name }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">No Server</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($client->package)
                                                    <span class="badge bg-warning custom-badge">
                                                        <i class="fas fa-box me-1"></i>{{ $client->package->name }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">No Package</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="d-flex gap-1">
                                                    <a href="{{ route('clients.show', $client) }}" 
                                                       class="btn btn-info btn-sm" 
                                                       data-bs-toggle="tooltip" title="View">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('clients.edit', $client) }}" 
                                                       class="btn btn-warning btn-sm" 
                                                       data-bs-toggle="tooltip" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    @if($client->is_online)
                                                        <button type="button" 
                                                                class="btn btn-danger btn-sm" 
                                                                onclick="disconnectClient({{ $client->id }})"
                                                                data-bs-toggle="tooltip" title="Disconnect">
                                                            <i class="fas fa-power-off"></i>
                                                        </button>
                                                    @else
                                                        <button type="button" 
                                                                class="btn btn-success btn-sm" 
                                                                onclick="connectClient({{ $client->id }})"
                                                                data-bs-toggle="tooltip" title="Connect">
                                                            <i class="fas fa-power-off"></i>
                                                        </button>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        @if($clients->hasPages())
                        <div class="d-flex justify-content-center mt-4">
                            {{ $clients->appends(request()->query())->links('pagination.custom') }}
                        </div>
                        @endif
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-user-check fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No Active Clients Found</h5>
                            <p class="text-muted">There are currently no active clients in the system.</p>
                            <a href="{{ route('clients.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Add First Client
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    initializeTooltips();
    initializeFilters();
});

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

function initializeFilters() {
    const searchInput = document.getElementById('searchInput');
    const serverFilter = document.getElementById('serverFilter');
    const packageFilter = document.getElementById('packageFilter');
    const onlineFilter = document.getElementById('onlineFilter');
    
    function filterTable() {
        const searchText = searchInput.value.toLowerCase();
        const serverValue = serverFilter.value.toLowerCase();
        const packageValue = packageFilter.value.toLowerCase();
        const onlineValue = onlineFilter.value.toLowerCase();
        
        const rows = document.querySelectorAll('tbody tr');
        
        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            const serverMatch = !serverValue || text.includes(serverValue);
            const packageMatch = !packageValue || text.includes(packageValue);
            const onlineMatch = !onlineValue || text.includes(onlineValue);
            const searchMatch = !searchText || text.includes(searchText);
            
            if (serverMatch && packageMatch && onlineMatch && searchMatch) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }
    
    searchInput.addEventListener('input', filterTable);
    serverFilter.addEventListener('change', filterTable);
    packageFilter.addEventListener('change', filterTable);
    onlineFilter.addEventListener('change', filterTable);
}

function clearFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('serverFilter').value = '';
    document.getElementById('packageFilter').value = '';
    document.getElementById('onlineFilter').value = '';
    
    const rows = document.querySelectorAll('tbody tr');
    rows.forEach(row => {
        row.style.display = '';
    });
}

// Function to show/hide password
function showPassword(clientId) {
    const row = document.querySelector(`button[onclick="showPassword(${clientId})"]`).closest('tr');
    const passwordCell = row.querySelector('td:nth-child(6)'); // Password column
    const passwordCode = passwordCell.querySelector('code');
    const button = passwordCell.querySelector('button');
    const icon = button.querySelector('i');
    
    if (passwordCode.textContent === '••••••••') {
        // Show password - fetch from server
        fetch(`/clients/${clientId}/password`, {
            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) {
                passwordCode.textContent = data.password;
                passwordCode.className = 'text-success';
                icon.className = 'fas fa-eye-slash';
                button.setAttribute('data-bs-original-title', 'Hide Password');
                button.title = 'Hide Password';
                
                // Auto-hide after 10 seconds
                setTimeout(() => {
                    hidePassword(clientId);
                }, 10000);
            } else {
                Swal.fire({
                    title: 'Error',
                    text: data.message || 'Failed to retrieve password',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire({
                title: 'Error',
                text: 'Failed to retrieve password',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
    } else {
        // Hide password
        hidePassword(clientId);
    }
}

// Function to hide password
function hidePassword(clientId) {
    const row = document.querySelector(`button[onclick="showPassword(${clientId})"]`).closest('tr');
    const passwordCell = row.querySelector('td:nth-child(6)'); // Password column
    const passwordCode = passwordCell.querySelector('code');
    const button = passwordCell.querySelector('button');
    const icon = button.querySelector('i');
    
    passwordCode.textContent = '••••••••';
    passwordCode.className = 'text-muted';
    icon.className = 'fas fa-eye';
    button.setAttribute('data-bs-original-title', 'Show Password');
    button.title = 'Show Password';
}

function connectClient(clientId) {
    // Implementation for connecting client
    console.log('Connecting client:', clientId);
}

function disconnectClient(clientId) {
    // Implementation for disconnecting client
    console.log('Disconnecting client:', clientId);
}
</script>

<style>
.client-avatar {
    width: 32px;
    height: 32px;
    background: var(--bs-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}
</style>
@endsection