@extends('layouts.app')

@section('content')
<x-page-header title="System Security & Audit" subtitle="Comprehensive tracking of user actions, login attempts, and data modifications" />

<x-filter-bar>
    <form class="flex-grow grid grid-cols-1 md:grid-cols-3 gap-4" method="GET">
        <input type="text" name="action" value="{{ request('action') }}" placeholder="Action (e.g. login, update)..." class="input-modern w-full">
        <select name="type" class="input-modern">
            <option value="">All Types</option>
            <option value="login" @selected(request('type') == 'login')>Login</option>
            <option value="create" @selected(request('type') == 'create')>Create</option>
            <option value="update" @selected(request('type') == 'update')>Update</option>
            <option value="delete" @selected(request('type') == 'delete')>Delete</option>
        </select>
        <button type="submit" class="btn-modern bg-[var(--accent-green)] text-black">Apply Filter</button>
    </form>
</x-filter-bar>

<x-table-wrapper title="Audit Trail" icon="bi-shield-shaded">
    <table class="w-full text-left table-modern">
        <thead>
            <tr>
                <th>Timestamp</th>
                <th>Actor</th>
                <th>Action</th>
                <th>Entity</th>
                <th>IP Address</th>
                <th class="text-right">Meta</th>
            </tr>
        </thead>
        <tbody>
            @foreach($logs as $log)
            <tr class="group">
                <td class="text-xs text-[var(--text-secondary)]">{{ $log->created_at->format('M d, H:i:s') }}</td>
                <td>
                    <div class="flex items-center gap-2">
                        <div class="w-6 h-6 rounded-full bg-[var(--input-bg)] flex items-center justify-center text-[10px] font-bold">
                            {{ substr($log->user->name ?? 'S', 0, 1) }}
                        </div>
                        <span class="text-xs font-medium">{{ $log->user->name ?? 'System' }}</span>
                    </div>
                </td>
                <td>
                    <x-badge color="{{ match($log->type) { 'delete' => 'danger', 'create' => 'success', 'update' => 'info', default => 'secondary' } }}" text="{{ $log->type }}" />
                    <span class="text-[10px] ml-1 opacity-60">{{ $log->action }}</span>
                </td>
                <td class="text-xs font-mono opacity-70">{{ basename(str_replace('\\', '/', $log->model_type)) }} #{{ $log->model_id }}</td>
                <td class="text-xs font-mono text-blue-400">{{ $log->ip_address }}</td>
                <td class="text-right">
                    <button class="text-[var(--text-secondary)] hover:text-white"><i class="bi bi-info-circle"></i></button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</x-table-wrapper>

<div class="mt-8">
    {{ $logs->links() }}
</div>
@endsection