@extends('layouts.app-sidebar')

@section('content')
<div class="min-h-screen db-bg-secondary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-10">

        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h1 class="text-2xl lg:text-3xl font-bold db-text-primary">Audit Logs</h1>
                    <p class="text-sm db-text-muted mt-1">System activity and changes</p>
                </div>
            </div>

        </div>

        <!-- Audit Logs Table -->
        <div class="db-card db-border rounded-xl overflow-hidden">
            <div class="px-6 py-4 border-b border-[#2a2a2a]">
                <h3 class="text-xl font-bold db-text-primary">Activity Log</h3>
                <p class="text-sm db-text-muted mt-1">Recent system changes and user actions</p>
            </div>

            <!-- Mobile Card View -->
            <div class="md:hidden p-4 space-y-3">
                @forelse($audits as $audit)
                <div class="bg-[#1a1a1a] rounded-xl p-4">
                    <div class="flex items-start justify-between gap-3 mb-2">
                        <div class="min-w-0">
                            <p class="text-sm db-text-primary">{{ $audit->user->name ?? 'System' }}</p>
                            <p class="text-xs db-text-muted">{{ $audit->created_at->format('M d, H:i:s') }}</p>
                        </div>
                        @if($audit->action === 'created')
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-500/15 text-green-400 flex-shrink-0">Created</span>
                        @elseif($audit->action === 'updated')
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-500/15 text-blue-400 flex-shrink-0">Updated</span>
                        @elseif($audit->action === 'deleted')
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-red-500/15 text-red-400 flex-shrink-0">Deleted</span>
                        @else
                        <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-500/15 text-gray-400 flex-shrink-0">{{ ucfirst($audit->action) }}</span>
                        @endif
                    </div>
                    <div class="flex items-center gap-2 mb-2">
                        <span class="px-2 py-0.5 bg-[#0a0a0a] rounded text-cyan-400 font-mono text-xs">{{ class_basename($audit->auditable_type) }}</span>
                        <span class="db-text-muted text-xs">#{{ $audit->auditable_id }}</span>
                    </div>
                    @if($audit->changes)
                    <details class="cursor-pointer">
                        <summary class="text-cyan-400 hover:text-cyan-300 transition-colors text-xs">View Changes</summary>
                        <pre class="text-xs mt-2 p-3 bg-[#0a0a0a] rounded-lg border border-[#2a2a2a] db-text-secondary overflow-x-auto max-w-full">{{ json_encode($audit->changes, JSON_PRETTY_PRINT) }}</pre>
                    </details>
                    @endif
                </div>
                @empty
                <div class="px-6 py-12 text-center db-text-muted">
                    <svg class="w-12 h-12 mx-auto text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <p>No audit logs found</p>
                </div>
                @endforelse
            </div>

            <!-- Desktop Table View -->
            <div class="hidden md:block overflow-x-auto">
                <table class="min-w-full divide-y divide-[#2a2a2a]">
                    <thead class="bg-[#1a1a1a]">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-semibold db-text-muted uppercase">Time</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold db-text-muted uppercase">User</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold db-text-muted uppercase">Action</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold db-text-muted uppercase">Model</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold db-text-muted uppercase">Details</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#2a2a2a]">
                        @forelse($audits as $audit)
                        <tr class="hover:bg-[#1e1e1e] transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm db-text-muted">
                                {{ $audit->created_at->format('M d, H:i:s') }}
                            </td>
                            <td class="px-6 py-4">
                                <p class="text-sm db-text-primary">{{ $audit->user->name ?? 'System' }}</p>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($audit->action === 'created')
                                <span class="px-2.5 py-1 text-xs font-medium rounded-full bg-green-500/15 text-green-400 border border-green-500/25">
                                    Created
                                </span>
                                @elseif($audit->action === 'updated')
                                <span class="px-2.5 py-1 text-xs font-medium rounded-full bg-blue-500/15 text-blue-400 border border-blue-500/25">
                                    Updated
                                </span>
                                @elseif($audit->action === 'deleted')
                                <span class="px-2.5 py-1 text-xs font-medium rounded-full bg-red-500/15 text-red-400 border border-red-500/25">
                                    Deleted
                                </span>
                                @else
                                <span class="px-2.5 py-1 text-xs font-medium rounded-full bg-gray-500/15 text-gray-400 border border-gray-500/25">
                                    {{ ucfirst($audit->action) }}
                                </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm db-text-secondary">
                                <span class="px-2 py-1 bg-[#1a1a1a] rounded text-cyan-400 font-mono text-xs">
                                    {{ class_basename($audit->auditable_type) }}
                                </span>
                                <span class="db-text-muted ml-1">#{{ $audit->auditable_id }}</span>
                            </td>
                            <td class="px-6 py-4 text-sm db-text-muted">
                                @if($audit->changes)
                                    <details class="cursor-pointer">
                                        <summary class="text-cyan-400 hover:text-cyan-300 transition-colors">View Changes</summary>
                                        <pre class="text-xs mt-2 p-3 bg-[#1a1a1a] rounded-lg border border-[#2a2a2a] db-text-secondary overflow-x-auto">{{ json_encode($audit->changes, JSON_PRETTY_PRINT) }}</pre>
                                    </details>
                                @else
                                    <span class="db-text-muted">-</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center db-text-muted">
                                <div class="flex flex-col items-center">
                                    <svg class="w-12 h-12 text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                    </svg>
                                    <p>No audit logs found</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($audits->hasPages())
        <div class="mt-6">
            {{ $audits->links() }}
        </div>
        @endif

    </div>
</div>
@endsection