@extends('layouts.app')

@section('title', 'Detalle de Equipo de Red')

@section('content')
<div class="container-fluid">
	<div class="row mb-4">
		<div class="col-12 d-flex justify-content-between align-items-center">
			<div class="d-flex align-items-center gap-2">
				<i class="{{ $equipoRed->tipo_icono }} text-primary"></i>
				<h2 class="h3 mb-0">{{ $equipoRed->nombre }}</h2>
				<span class="badge bg-{{ $equipoRed->estado_color }}">{{ \App\Models\EquipoRed::ESTADOS[$equipoRed->estado] ?? $equipoRed->estado }}</span>
			</div>
			<div class="d-flex gap-2">
				<a href="{{ route('equipos-red.edit', $equipoRed) }}" class="btn btn-warning">
					<i class="fas fa-edit"></i> Editar
				</a>
				<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalEliminar">
					<i class="fas fa-trash"></i> Eliminar
				</button>
				<a href="{{ route('equipos-red.index') }}" class="btn btn-secondary">
					<i class="fas fa-arrow-left"></i> Volver
				</a>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-lg-8">
			<div class="card mb-4">
				<div class="card-header"><strong>Información del Equipo</strong></div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<table class="table table-borderless mb-0">
								<tr>
									<th>Tipo</th>
									<td>{{ \App\Models\EquipoRed::TIPOS[$equipoRed->tipo] ?? $equipoRed->tipo }}</td>
								</tr>
								<tr>
									<th>Marca</th>
									<td>{{ $equipoRed->marca ?: '—' }}</td>
								</tr>
								<tr>
									<th>Modelo</th>
									<td>{{ $equipoRed->modelo ?: '—' }}</td>
								</tr>
								<tr>
									<th>Dirección IP</th>
									<td>
										@if($equipoRed->direccion_ip)
											<span class="badge bg-secondary">{{ $equipoRed->direccion_ip }}</span>
										@else
											<span class="text-muted">Sin IP</span>
										@endif
									</td>
								</tr>
								<tr>
									<th>MAC</th>
									<td>{{ $equipoRed->direccion_mac ?: '—' }}</td>
								</tr>
							</table>
						</div>
						<div class="col-md-6">
							<table class="table table-borderless mb-0">
								<tr>
									<th>Zona</th>
									<td>{{ $equipoRed->zona->nombre ?? 'Sin zona' }}</td>
								</tr>
								<tr>
									<th>Cliente asignado</th>
									<td>
										@if($equipoRed->cliente)
											{{ $equipoRed->cliente->nombre }} {{ $equipoRed->cliente->apellido }}
										@else
											<span class="text-muted">Sin asignar</span>
										@endif
									</td>
								</tr>
								<tr>
									<th>Usuario</th>
									<td>{{ $equipoRed->usuario ?: '—' }}</td>
								</tr>
								<tr>
									<th>Password</th>
									<td>{{ $equipoRed->password ? '••••••••' : '—' }}</td>
								</tr>
								<tr>
									<th>Instalado</th>
									<td>{{ optional($equipoRed->fecha_instalacion)->format('d/m/Y') ?: '—' }}</td>
								</tr>
							</table>
						</div>
					</div>

					<div class="mt-3">
						<h6 class="mb-1">Ubicación</h6>
						<p class="text-muted mb-2">{{ $equipoRed->ubicacion ?: '—' }}</p>
						<h6 class="mb-1">Comentarios</h6>
						<p class="text-muted mb-0">{{ $equipoRed->comentarios ?: '—' }}</p>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-4">
			<div class="card mb-4">
				<div class="card-header"><strong>Estado y Acciones</strong></div>
				<div class="card-body">
					<div class="d-flex align-items-center mb-3">
						<i class="fas fa-wifi me-2 {{ $ping_status ? 'text-success' : 'text-danger' }}"></i>
						<span>
							Conectividad:
							<strong class="{{ $ping_status ? 'text-success' : 'text-danger' }}">
								{{ $ping_status ? 'En línea' : 'Sin respuesta' }}
							</strong>
						</span>
					</div>
					<div class="d-grid gap-2">
						<button class="btn btn-outline-primary" onclick="verificarConectividad({{ $equipoRed->id }})">
							<i class="fas fa-signal"></i> Verificar conectividad
						</button>
						@if($equipoRed->direccion_ip)
						<button class="btn btn-primary" onclick="accesoRemoto({{ $equipoRed->id }})">
							<i class="fas fa-external-link-alt"></i> Acceso remoto
						</button>
						@endif
					</div>
					<hr>
					<div class="text-center">
						<div class="mb-1 text-muted">Clientes conectados</div>
						<div class="display-6">{{ $equipoRed->clientes_conectados }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Modal eliminar -->
<div class="modal fade" id="modalEliminar" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Confirmar eliminación</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<p>¿Seguro que deseas eliminar el equipo <strong>{{ $equipoRed->nombre }}</strong>? Esta acción no se puede deshacer.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
				<form method="POST" action="{{ route('equipos-red.destroy', $equipoRed) }}">
						@csrf
						@method('DELETE')
						<button type="submit" class="btn btn-danger">Eliminar definitivamente</button>
				</form>
			</div>
		</div>
	</div>
	</div>

<script>
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(r => r.json())
	.then(d => alert(d.mensaje || (d.conectado ? 'Equipo conectado' : 'Equipo no responde')))
	.catch(() => alert('Error al verificar conectividad'))
}

function accesoRemoto(id) {
	fetch(`/equipos-red/${id}/acceso-remoto`, {
		method: 'POST',
		headers: {
			'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
			'Accept': 'application/json'
		}
	})
	.then(r => r.json())
	.then(d => {
		if (d.success && d.url) {
			window.open(d.url, '_blank');
		} else {
			alert(d.mensaje || 'No fue posible abrir el acceso remoto');
		}
	})
	.catch(() => alert('Error al solicitar acceso remoto'))
}
</script>
@endsection