@extends('layouts.app')

@section('title', __('messages.audit_logs'))

@section('breadcrumb')
    <a href="{{ route('settings.index') }}" class="text-decoration-none text-secondary">{{ __('messages.settings') }}</a>
    / <span class="text-secondary">{{ __('messages.audit_logs') }}</span>
@endsection

@section('content')
<div class="audit-log-page">
<div class="page-header">
    <h1 class="page-title"><i class="bi bi-shield-check me-2 text-primary"></i>{{ __('messages.audit_logs') }}</h1>
    <p class="page-subtitle">{{ __('messages.manage_audit_logs') }}</p>
</div>

<div class="card mt-3">
    <div class="card-body">
        <h6 class="mb-3">{{ __('messages.recent_activity_summary') }}</h6>
        <div class="row">
            <div class="col-md-3">
                <small class="text-muted">{{ __('messages.total_logs') }}</small>
                <h4>{{ $totalLogs }}</h4>
            </div>
            <div class="col-md-3">
                <small class="text-muted">{{ __('messages.today') }}</small>
                <h4>{{ $todayLogs }}</h4>
            </div>
            <div class="col-md-3">
                <small class="text-muted">{{ __('messages.this_month') }}</small>
                <h4>{{ $monthLogs }}</h4>
            </div>
            <div class="col-md-3">
                <small class="text-muted">{{ __('messages.changes_made') }}</small>
                <h4>{{ $changedRecords }}</h4>
            </div>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-header audit-log-toolbar">
        <form method="GET" class="row g-2 align-items-end audit-log-filters">
            <div class="col-md-3">
                <input type="text" name="search" class="form-control" placeholder="{{ __('messages.search_placeholder') }}" value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <select name="event" class="form-select">
                    <option value="">{{ __('messages.all_events') }}</option>
                    @foreach($events as $event)
                    <option value="{{ $event }}" {{ request('event') === $event ? 'selected' : '' }}>
                        {{ ucfirst(str_replace('_', ' ', $event)) }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select name="user_id" class="form-select">
                    <option value="">{{ __('messages.all_users') }}</option>
                    @foreach($users as $user)
                    <option value="{{ $user->id }}" {{ (string) request('user_id') === (string) $user->id ? 'selected' : '' }}>
                        {{ $user->name }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 col-lg-auto audit-log-filter-actions">
                <button type="submit" class="btn btn-primary"><i class="bi bi-search me-1"></i>{{ __('messages.filter') }}</button>
                <a href="{{ route('settings.audit-logs') }}" class="btn btn-outline-secondary ms-1">{{ __('messages.clear') }}</a>
            </div>
        </form>
    </div>

    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>{{ __('messages.date_time') }}</th>
                    <th>{{ __('messages.user') }}</th>
                    <th>{{ __('messages.event') }}</th>
                    <th>{{ __('messages.model_type') }}</th>
                    <th>{{ __('messages.model_id') }}</th>
                    <th class="text-center">{{ __('messages.changes') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($auditLogs as $log)
                @php($eventBadgeClass = match ($log->event) {
                    'created' => 'audit-event-created',
                    'deleted' => 'audit-event-deleted',
                    'login' => 'audit-event-login',
                    'logout' => 'audit-event-logout',
                    'updated' => 'audit-event-updated',
                    default => 'audit-event-neutral',
                })
                <tr>
                    <td>
                        <small>{{ $log->created_at->format('M d, Y H:i:s') }}</small>
                    </td>
                    <td>
                        {{ $log->user?->name ?? __('messages.system') }}
                    </td>
                    <td>
                        <span class="badge audit-event-badge {{ $eventBadgeClass }}">
                            {{ ucfirst(str_replace('_', ' ', $log->event ?? 'view')) }}
                        </span>
                    </td>
                    <td>
                        <code class="text-muted">{{ class_basename($log->auditable_type ?? '') }}</code>
                        @if($log->url)
                        <div><small class="text-muted">{{ parse_url($log->url, PHP_URL_PATH) }}</small></div>
                        @endif
                    </td>
                    <td>
                        {{ $log->auditable_id ?? '—' }}
                    </td>
                    <td class="text-center">
                        @if($log->old_values || $log->new_values)
                            @php($logPayload = [
                                'date' => $log->created_at->format('M d, Y H:i:s'),
                                'user' => $log->user?->name ?? __('messages.system'),
                                'event' => ucfirst(str_replace('_', ' ', $log->event ?? 'view')),
                                'model_type' => class_basename($log->auditable_type ?? ''),
                                'model_id' => $log->auditable_id ?? '—',
                                'path' => $log->url ? parse_url($log->url, PHP_URL_PATH) : '—',
                                'old_values' => $log->old_values,
                                'new_values' => $log->new_values,
                            ])
                            <button
                                type="button"
                                class="btn btn-sm btn-outline-info audit-log-trigger"
                                data-bs-toggle="offcanvas"
                                data-bs-target="#auditLogPanel"
                                data-log='@json($logPayload)'>
                                {{ __('messages.view_report') }}
                            </button>
                        @else
                            —
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" class="text-center py-4 text-muted">{{ __('messages.no_audit_logs') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($auditLogs->hasPages())
    <div class="card-body border-top d-flex justify-content-center py-3" style="border-color:var(--border-color)!important">
        {{ $auditLogs->links('pagination::bootstrap-4') }}
    </div>
    @endif
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="auditLogPanel" aria-labelledby="auditLogPanelLabel">
    <div class="offcanvas-header">
        <div>
            <h5 class="offcanvas-title" id="auditLogPanelLabel">{{ __('messages.activity_report') }}</h5>
            <small class="text-muted">{{ __('messages.review_record_details') }}</small>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="mb-3">
            <small class="text-muted d-block">{{ __('messages.date_time') }}</small>
            <div class="fw-semibold" id="auditLogPanelDate">—</div>
        </div>
        <div class="mb-3">
            <small class="text-muted d-block">{{ __('messages.user') }}</small>
            <div class="fw-semibold" id="auditLogPanelUser">—</div>
        </div>
        <div class="mb-3">
            <small class="text-muted d-block">{{ __('messages.event') }}</small>
            <div class="fw-semibold" id="auditLogPanelEvent">—</div>
        </div>
        <div class="row g-3 mb-3">
            <div class="col-6">
                <small class="text-muted d-block">{{ __('messages.model_type') }}</small>
                <div class="fw-semibold" id="auditLogPanelType">—</div>
            </div>
            <div class="col-6">
                <small class="text-muted d-block">{{ __('messages.model_id') }}</small>
                <div class="fw-semibold" id="auditLogPanelId">—</div>
            </div>
        </div>
        <div class="mb-3">
            <small class="text-muted d-block">Path</small>
            <div class="fw-semibold" id="auditLogPanelPath">—</div>
        </div>
        <div class="mb-3">
            <small class="text-muted d-block">{{ __('messages.old_values') }}</small>
            <pre class="p-3 rounded border small mb-0" id="auditLogPanelOldValues" style="white-space:pre-wrap;word-break:break-word;background:var(--bg-card2);border-color:var(--border-color);color:var(--text-primary);">—</pre>
        </div>
        <div>
            <small class="text-muted d-block">{{ __('messages.new_values') }}</small>
            <pre class="p-3 rounded border small mb-0" id="auditLogPanelNewValues" style="white-space:pre-wrap;word-break:break-word;background:var(--bg-card2);border-color:var(--border-color);color:var(--text-primary);">—</pre>
        </div>
    </div>
</div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.audit-log-trigger').forEach((button) => {
    button.addEventListener('click', () => {
        const log = JSON.parse(button.dataset.log || '{}');
        const pretty = (value) => value ? JSON.stringify(value, null, 2) : '—';

        document.getElementById('auditLogPanelDate').textContent = log.date || '—';
        document.getElementById('auditLogPanelUser').textContent = log.user || '—';
        document.getElementById('auditLogPanelEvent').textContent = log.event || '—';
        document.getElementById('auditLogPanelType').textContent = log.model_type || '—';
        document.getElementById('auditLogPanelId').textContent = log.model_id || '—';
        document.getElementById('auditLogPanelPath').textContent = log.path || '—';
        document.getElementById('auditLogPanelOldValues').textContent = pretty(log.old_values);
        document.getElementById('auditLogPanelNewValues').textContent = pretty(log.new_values);
    });
});
</script>
@endpush