@extends('layouts.app')

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

@section('content')
<div class="card border-0 shadow-sm p-4">
    <div class="d-flex align-items-center justify-content-between mb-4 border-bottom pb-2">
        <h5 class="fw-bold mb-0 text-dark">Immutable Activity Log</h5>
        <span class="text-secondary small">Security Audit logs cannot be modified or deleted.</span>
    </div>

    <div class="table-responsive mb-3">
        <table class="table table-hover align-middle mb-0 table-sm">
            <thead>
                <tr>
                    <th>Timestamp</th>
                    <th>User</th>
                    <th>Action</th>
                    <th>Entity Type</th>
                    <th>Entity ID</th>
                    <th>IP Address</th>
                    <th class="text-end no-print">Data Diff</th>
                </tr>
            </thead>
            <tbody>
                @forelse($logs as $log)
                    <tr>
                        <td>{{ $log->created_at->format('M d, Y H:i:s') }}</td>
                        <td>
                            <span class="fw-semibold text-dark">{{ $log->user_name }}</span>
                            @if($log->user_id)
                                <small class="text-secondary d-block">ID: {{ $log->user_id }}</small>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-{{ in_array($log->action, ['login', 'logout']) ? 'info' : (str_contains($log->action, 'created') ? 'success' : (str_contains($log->action, 'voided') || str_contains($log->action, 'rejected') ? 'danger' : 'warning')) }}">
                                {{ str_replace('_', ' ', $log->action) }}
                            </span>
                        </td>
                        <td>{{ $log->entity_type }}</td>
                        <td><code>{{ $log->entity_id ?? '-' }}</code></td>
                        <td><code class="small">{{ $log->ip_address }}</code></td>
                        <td class="text-end no-print">
                            @if($log->old_values || $log->new_values)
                                <button class="btn btn-sm btn-outline-primary" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#diffModal"
                                        data-old="{{ json_encode($log->old_values) }}"
                                        data-new="{{ json_encode($log->new_values) }}"
                                        data-action="{{ $log->action }}">
                                    <i class="bi bi-file-diff"></i> View Diff
                                </button>
                            @else
                                <span class="text-muted small">No details</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">No audit activities logged.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <div>
        {{ $logs->links() }}
    </div>
</div>

<!-- Difference Viewer Modal -->
<div class="modal fade" id="diffModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">State Changes Diff Viewer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <h6 class="fw-bold text-danger border-bottom pb-2"><i class="bi bi-dash-circle"></i> Old State Values</h6>
                        <pre class="bg-light p-3 rounded text-dark overflow-x-auto small" style="max-height: 350px;" id="oldStatePre">N/A</pre>
                    </div>
                    <div class="col-md-6">
                        <h6 class="fw-bold text-success border-bottom pb-2"><i class="bi bi-plus-circle"></i> New State Values</h6>
                        <pre class="bg-light p-3 rounded text-dark overflow-x-auto small" style="max-height: 350px;" id="newStatePre">N/A</pre>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    const diffModal = document.getElementById('diffModal');
    diffModal.addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;
        const oldData = btn.getAttribute('data-old');
        const newData = btn.getAttribute('data-new');

        const oldPre = document.getElementById('oldStatePre');
        const newPre = document.getElementById('newStatePre');

        try {
            const oldObj = JSON.parse(oldData);
            oldPre.innerText = oldObj ? JSON.stringify(oldObj, null, 4) : 'N/A';
        } catch(err) {
            oldPre.innerText = oldData || 'N/A';
        }

        try {
            const newObj = JSON.parse(newData);
            newPre.innerText = newObj ? JSON.stringify(newObj, null, 4) : 'N/A';
        } catch(err) {
            newPre.innerText = newData || 'N/A';
        }
    });
</script>
@endsection