@extends('layouts.app')

@section('title', 'Equipos de Red')

@section('content')
<div class="container-fluid">
    {{-- Toasts globales ahora viven en layouts/app.blade.php --}}
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">🌐 Equipos de Red / Listado Sectorial/Nodo/NAP</h4>
                <div class="page-title-right">
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalAgregar">
                        <i class="fas fa-plus"></i> Agregar Equipo
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas -->
    <div class="row">
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title">Total</h5>
                    <h3 class="text-primary">{{ $estadisticas['total'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title">Activos</h5>
                    <h3 class="text-success">{{ $estadisticas['activos'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title">Inactivos</h5>
                    <h3 class="text-secondary">{{ $estadisticas['inactivos'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title">Mantenimiento</h5>
                    <h3 class="text-warning">{{ $estadisticas['mantenimiento'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title">Averiados</h5>
                    <h3 class="text-danger">{{ $estadisticas['averiados'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-center">
                <div class="card-body">
                    <button class="btn btn-sm btn-outline-info" onclick="verEstadisticas()">
                        <i class="fas fa-chart-bar"></i> Ver Estadísticas
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-3">
                            <input type="text" name="buscar" class="form-control" placeholder="Buscar equipo..." value="{{ request('buscar') }}">
                        </div>
                        <div class="col-md-2">
                            <select name="tipo" class="form-select">
                                <option value="">Todos los tipos</option>
                                @foreach(\App\Models\EquipoRed::TIPOS as $key => $value)
                                    <option value="{{ $key }}" {{ request('tipo') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="estado" class="form-select">
                                <option value="">Todos los estados</option>
                                @foreach(\App\Models\EquipoRed::ESTADOS as $key => $value)
                                    <option value="{{ $key }}" {{ request('estado') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="zona_id" class="form-select">
                                <option value="">Todas las zonas</option>
                                @if(isset($zonas))
                                    @foreach($zonas as $zona)
                                        <option value="{{ $zona->id }}" {{ request('zona_id') == $zona->id ? 'selected' : '' }}>{{ $zona->nombre }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search"></i> Buscar
                            </button>
                            <a href="{{ route('equipos-red.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Limpiar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Equipos -->
    <div class="row mt-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Lista de Equipos</h5>
                    <div class="card-tools">
                        <small class="text-muted">Mostrando registros del {{ $equipos->firstItem() }} al {{ $equipos->lastItem() }} de un total de {{ $equipos->total() }} registros</small>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th width="5%">
                                        <input type="checkbox" id="selectAll" onclick="toggleSelectAll()">
                                    </th>
                                    <th>Nombre</th>
                                    <th>Tipo</th>
                                    <th>IP</th>
                                    <th>Usuario</th>
                                    <th>Password</th>
                                    <th>Zona</th>
                                    <th>Total de Clientes</th>
                                    <th>Observaciones</th>
                                    <th>Estado</th>
                                    <th>Acción</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($equipos as $equipo)
                                    <tr>
                                        <td>
                                            <input type="checkbox" class="equipo-checkbox" value="{{ $equipo->id }}">
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="{{ $equipo->tipo_icono ?? 'fas fa-microchip' }} text-primary me-2"></i>
                                                <strong>{{ $equipo->nombre }}</strong>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-info">{{ \App\Models\EquipoRed::TIPOS[$equipo->tipo] ?? $equipo->tipo }}</span>
                                        </td>
                                        <td>
                                            @if($equipo->direccion_ip)
                                                <span class="badge bg-secondary">{{ $equipo->direccion_ip }}</span>
                                                <button class="btn btn-sm btn-outline-primary ms-1" onclick="verificarConectividad({{ $equipo->id }})">
                                                    <i class="fas fa-wifi"></i>
                                                </button>
                                            @else
                                                <span class="text-muted">No configurado</span>
                                            @endif
                                        </td>
                                        <td>{{ $equipo->usuario ?: 'N/A' }}</td>
                                        <td>
                                            @if($equipo->password)
                                                <span class="password-field" onclick="togglePassword(this)">
                                                    <span class="password-hidden">••••••••</span>
                                                    <span class="password-visible" style="display:none;">{{ $equipo->password }}</span>
                                                </span>
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                        <td>{{ $equipo->zona->nombre ?? 'Sin zona' }}</td>
                                        <td>
                                            <span class="badge bg-success">{{ $equipo->total_clientes ?? 0 }}</span>
                                        </td>
                                        <td>
                                            @if($equipo->observaciones)
                                                <span class="text-truncate" title="{{ $equipo->observaciones }}">
                                                    {{ Str::limit($equipo->observaciones, 30) }}
                                                </span>
                                            @else
                                                <span class="text-muted">Sin observaciones</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ $equipo->estado_color ?? 'secondary' }}">
                                                {{ \App\Models\EquipoRed::ESTADOS[$equipo->estado] ?? $equipo->estado }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <!-- Botón Ver -->
                                                <button class="btn btn-sm btn-info" onclick="verEquipo({{ $equipo->id }})" title="Ver detalles">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                
                                                <!-- Botón Editar -->
                                                <button class="btn btn-sm btn-warning" onclick="editarEquipo({{ $equipo->id }})" title="Editar">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                
                                                <!-- Botón Acceso Remoto -->
                                                @if($equipo->direccion_ip)
                                                    <button class="btn btn-sm btn-primary" onclick="accesoRemoto({{ $equipo->id }})" title="Acceso remoto">
                                                        <i class="fas fa-external-link-alt"></i>
                                                    </button>
                                                @endif
                                                
                                                <!-- Botón Configurar removido por no ser utilizado -->
                                                
                                                <!-- Botón Eliminar -->
                                                <button class="btn btn-sm btn-danger" onclick="eliminarEquipo({{ $equipo->id }})" title="Eliminar">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="11" class="text-center py-4">
                                            <i class="fas fa-network-wired fa-3x text-muted mb-3"></i>
                                            <p class="text-muted">No hay equipos de red registrados</p>
                                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAgregar">
                                                <i class="fas fa-plus"></i> Agregar Primer Equipo
                                            </button>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div>
                            {{ $equipos->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Agregar Equipo -->
<div class="modal fade" id="modalAgregar" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Agregar Equipo de Red</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('equipos-red.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Nombre *</label>
                                <input type="text" name="nombre" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Tipo *</label>
                                <select name="tipo" class="form-select" required>
                                    <option value="">Seleccionar...</option>
                                    @foreach(\App\Models\EquipoRed::TIPOS as $key => $value)
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">IP</label>
                                <input type="text" name="direccion_ip" class="form-control" placeholder="192.168.1.1">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">MAC Address</label>
                                <input type="text" name="direccion_mac" class="form-control" placeholder="00:11:22:33:44:55">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Usuario</label>
                                <input type="text" name="usuario" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Password</label>
                                <input type="password" name="password" class="form-control">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Marca</label>
                                <input type="text" name="marca" class="form-control" placeholder="Mikrotik, Ubiquiti, etc.">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Modelo</label>
                                <input type="text" name="modelo" class="form-control">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Estado *</label>
                                <select name="estado" class="form-select" required>
                                    <option value="">Seleccionar...</option>
                                    @foreach(\App\Models\EquipoRed::ESTADOS as $key => $value)
                                        <option value="{{ $key }}" {{ $key == 'activo' ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Fecha Instalación</label>
                                <input type="date" name="fecha_instalacion" class="form-control" value="{{ date('Y-m-d') }}">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Ubicación *</label>
                        <input type="text" name="ubicacion" class="form-control" required placeholder="Ej: Sector Norte, Poste #45">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Observaciones</label>
                        <textarea name="observaciones" class="form-control" rows="3" placeholder="Notas adicionales sobre el equipo"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleSelectAll() {
    const checkboxes = document.querySelectorAll('.equipo-checkbox');
    const selectAll = document.getElementById('selectAll');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
}

function togglePassword(element) {
    const hidden = element.querySelector('.password-hidden');
    const visible = element.querySelector('.password-visible');
    
    if (hidden.style.display === 'none') {
        hidden.style.display = 'inline';
        visible.style.display = 'none';
    } else {
        hidden.style.display = 'none';
        visible.style.display = 'inline';
    }
}

function verificarConectividad(id) {
    fetch(`/equipos-red/${id}/verificar-conectividad`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        alert(data.conectado ? 'Equipo conectado ✅' : 'Equipo no responde ❌');
    });
}

function verEquipo(id) {
    window.location.href = `/equipos-red/${id}`;
}

function editarEquipo(id) {
    window.location.href = `/equipos-red/${id}/edit`;
}

function eliminarEquipo(id) {
    if (confirm('¿Eliminar este equipo?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/equipos-red/${id}`;
        form.innerHTML = `@csrf @method('DELETE')`;
        document.body.appendChild(form);
        form.submit();
    }
}

function exportarEquipos() {
    window.location.href = '/equipos-red/exportar';
}
</script>
@endsection