@extends('layouts.app')

@section('content')
<div class="page-title">
    <div>
        <h1>Detalle de auditoría</h1>
        <div class="muted">{{ $audit->resumen }}</div>
    </div>
    <div>
        <a href="{{ route('auditoria.index') }}" class="btn-secondary">Volver</a>
    </div>
</div>

<div class="kpis" style="grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px;">
    <div class="kpi"><h3>Fecha</h3><div class="value" style="font-size:18px;">{{ optional($audit->created_at)->format('Y-m-d H:i:s') }}</div></div>
    <div class="kpi"><h3>Usuario</h3><div class="value" style="font-size:18px;">{{ optional($audit->user)->name ?? 'Sistema' }}</div></div>
    <div class="kpi"><h3>Módulo</h3><div class="value" style="font-size:18px;">{{ $audit->modulo }}</div></div>
    <div class="kpi"><h3>Acción</h3><div class="value" style="font-size:18px;">{{ $audit->accion }}</div></div>
</div>

<div class="panel" style="margin-bottom:16px;">
    <table class="table">
        <tbody>
            <tr><th style="width:220px;">Entidad</th><td>{{ $audit->entidad }} #{{ $audit->entidad_id }}</td></tr>
            <tr><th>IP</th><td>{{ $audit->ip ?: '—' }}</td></tr>
            <tr><th>User Agent</th><td style="word-break:break-word;">{{ $audit->user_agent ?: '—' }}</td></tr>
        </tbody>
    </table>
</div>

<div class="grid-2" style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;">
    <div class="panel">
        <h3 style="margin-top:0;">Valor anterior</h3>
        @if(!empty($anterior))
            <pre style="white-space:pre-wrap;word-break:break-word;background:#f8fafc;border:1px solid #dbe3ec;border-radius:12px;padding:16px;">{{ json_encode($anterior, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) }}</pre>
        @else
            <div class="muted">Sin valor anterior registrado.</div>
        @endif
    </div>
    <div class="panel">
        <h3 style="margin-top:0;">Valor nuevo</h3>
        @if(!empty($nuevo))
            <pre style="white-space:pre-wrap;word-break:break-word;background:#f8fafc;border:1px solid #dbe3ec;border-radius:12px;padding:16px;">{{ json_encode($nuevo, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) }}</pre>
        @else
            <div class="muted">Sin valor nuevo registrado.</div>
        @endif
    </div>
</div>
@endsection