@extends('layouts.app')

@section('title', 'Historial de Activaciones Offline')

@section('content')
<div class="page-header">
    <h1 class="page-title">Historial de Validaciones Locales</h1>
</div>

<div class="card">
    <div style="background: rgba(88, 166, 255, 0.1); border-left: 4px solid var(--primary); padding: 15px; border-radius: 4px; margin-bottom: 25px; font-size: 0.9rem;">
        <i class="fa-solid fa-info-circle"></i> Este registro muestra las veces que los clientes o sus sistemas han intentado conectarse o verificar licencias en línea (en caso configuren web-callbacks futuros).
    </div>

    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Licencia</th>
                <th>IP / MAC</th>
                <th>Estado</th>
                <th>Fecha Reporte</th>
            </tr>
        </thead>
        <tbody>
            @forelse($activaciones as $activacion)
            <tr>
                <td>#{{ $activacion->id }}</td>
                <td>
                    <strong>{{ optional($activacion->licencia->empresa)->razon_social ?? 'Desconocida' }}</strong><br>
                    <small style="color: var(--text-muted);">{{ substr(optional($activacion->licencia)->clave_licencia, 0, 15) }}...</small>
                </td>
                <td>
                    <i class="fa-solid fa-network-wired"></i> {{ $activacion->ip_address ?? 'Offline' }}<br>
                    <i class="fa-solid fa-laptop"></i> {{ $activacion->mac_address ?? 'N/A' }}
                </td>
                <td>
                    @if($activacion->estado == 'EXITO')
                        <span class="badge badge-success">EXITO</span>
                    @elseif($activacion->estado == 'ERROR')
                        <span class="badge badge-warning">ERROR</span>
                    @else
                        <span class="badge badge-danger">BLOQUEADO</span>
                    @endif
                </td>
                <td>{{ $activacion->created_at->format('d/m/Y H:i A') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 30px;">
                    <i class="fa-solid fa-history" style="font-size: 2rem; margin-bottom: 10px;"></i>
                    <p>No hay registros de validaciones grabadas aún.</p>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<style>
    .table { width: 100%; border-collapse: collapse; }
    .table th, .table td { padding: 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
    .table th { font-weight: 600; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; background: rgba(0,0,0,0.1); }
    .table tr:hover { background: rgba(255,255,255,0.02); }
    .table tr:last-child td { border-bottom: none; }
    .badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
    .badge-success { background: rgba(35, 134, 54, 0.2); color: #3fb950; }
    .badge-warning { background: rgba(210, 153, 34, 0.2); color: var(--warning); }
    .badge-danger { background: rgba(248, 81, 73, 0.2); color: var(--danger); }
</style>
@endsection