@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-extrabold text-gray-900">Activity Logs</h1>
        <p class="mt-2 text-gray-500">Track user activities and system changes.</p>
    </div>

    <div class="bg-white rounded shadow p-4">
        <div class="overflow-x-auto">
            <table class="min-w-full border whitespace-nowrap">
                <thead>
                    <tr class="bg-gray-100 border-b">
                        <th class="px-6 py-4 text-left font-medium text-gray-700">Time</th>
                        <th class="px-6 py-4 text-left font-medium text-gray-700">User</th>
                        <th class="px-6 py-4 text-left font-medium text-gray-700">Description</th>
                        <th class="px-6 py-4 text-left font-medium text-gray-700">Subject</th>
                        <th class="px-6 py-4 text-left font-medium text-gray-700">Changes</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($activities as $activity)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4 text-gray-600">
                            {{ $activity->created_at->format('Y-m-d H:i:s') }}
                        </td>
                        <td class="px-6 py-4">
                            @if($activity->causer)
                                <span class="font-medium text-gray-900">{{ $activity->causer->name }}</span>
                            @else
                                <span class="text-gray-400 italic">System</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-gray-800">
                            {{ ucfirst($activity->description) }}
                        </td>
                        <td class="px-6 py-4 text-gray-600">
                            @if($activity->subject_type)
                                {{ class_basename($activity->subject_type) }} #{{ $activity->subject_id }}
                            @else
                                -
                            @endif
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">
                            @if($activity->properties && $activity->properties->has('attributes'))
                                <div class="grid grid-cols-2 gap-2 text-xs">
                                    <div class="font-bold text-gray-700">Old</div>
                                    <div class="font-bold text-gray-700">New</div>
                                    
                                    @foreach($activity->properties['attributes'] as $key => $newValue)
                                        @php
                                            $oldValue = $activity->properties['old'][$key] ?? '-';
                                        @endphp
                                        <div class="text-red-500 bg-red-50 p-1 rounded">
                                            <span class="font-mono">{{ $key }}:</span> {{ is_array($oldValue) ? json_encode($oldValue) : $oldValue }}
                                        </div>
                                        <div class="text-green-600 bg-green-50 p-1 rounded">
                                            <span class="font-mono">{{ $key }}:</span> {{ is_array($newValue) ? json_encode($newValue) : $newValue }}
                                        </div>
                                    @endforeach
                                </div>
                            @elseif($activity->event == 'login' || $activity->event == 'logout')
                                -
                            @else
                                <span class="text-gray-400">Values not logged</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-6 py-8 text-center text-gray-500">
                            No activities recorded yet.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">
            {{ $activities->links() }}
        </div>
    </div>
</div>
@endsection