@extends('layouts.app')

@section('title', 'Audit Trail')

@section('content')
<div class="coa-card">
    <div class="coa-card-header">
        <h3>📜 Audit Trail - {{ ucfirst(str_replace('_', ' ', $auditableType)) }} #{{ $auditableId }}</h3>
    </div>
    <div class="coa-card-body">
        @if($auditLogs->isEmpty())
            <div class="empty-state">
                <p>No audit records found.</p>
            </div>
        @else
            <div class="timeline">
                @foreach($auditLogs as $log)
                    <div class="timeline-item">
                        <div class="timeline-time">
                            {{ $log->created_at->format('M d, Y H:i:s') }}
                            <span class="badge badge-sm">{{ $log->human_event }}</span>
                        </div>
                        <div class="timeline-title">
    {!! $log->getEventIconAttribute() !!} 
    <strong>{{ $log->user?->name ?? 'System' }}</strong>
    @if($log->user && isset($log->user->familyMember))
        ({{ ucfirst($log->user->familyMember->role) }})
    @endif
</div>
                        <div class="timeline-body">
                            @if($log->changed_attributes && count($log->changed_attributes) > 0)
                                <div class="changes-list">
                                    <strong>Changes made:</strong>
                                    @foreach($log->changed_attributes as $field => $change)
                                        <div class="change-item">
                                            <span class="field">{{ ucfirst(str_replace('_', ' ', $field)) }}</span>:
                                            <span class="old-value">{{ $change['from'] ?? 'NULL' }}</span>
                                            → 
                                            <span class="new-value">{{ $change['to'] ?? 'NULL' }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            @elseif($log->event === 'created')
                                <div class="changes-list">
                                    <strong>Transaction Created</strong>
                                    <div class="change-item">Initial record created in system</div>
                                </div>
                            @elseif($log->event === 'deleted')
                                <div class="changes-list">
                                    <strong>Transaction Deleted</strong>
                                    <div class="change-item">Record removed from system</div>
                                </div>
                            @endif
                            <div class="meta-info">
                                <small>IP: {{ $log->ip_address }}</small>
                                <small>Session: {{ substr($log->session_id ?? '', 0, 8) }}...</small>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            {{ $auditLogs->links() }}
        @endif
    </div>
</div>

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.timeline-item {
    position: relative;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    border: 2px solid var(--bg-card);
}
.timeline-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.timeline-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.timeline-body {
    font-size: 12px;
    color: var(--text-secondary);
}
.changes-list {
    background: var(--bg-input);
    padding: 10px;
    border-radius: 8px;
    margin: 8px 0;
}
.change-item {
    padding: 4px 0;
    font-family: monospace;
}
.field {
    font-weight: 600;
    color: var(--brand);
}
.old-value {
    color: var(--danger);
    text-decoration: line-through;
}
.new-value {
    color: var(--brand);
}
.meta-info {
    margin-top: 8px;
    font-size: 10px;
    display: flex;
    gap: 12px;
}
.badge-sm {
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 9px;
    margin-left: 8px;
}
</style>
@endsection