@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'سجل النشاطات' : 'Activity Logs' }}
    </h2>
</div>

<div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden shadow-2xl">
                <div class="p-0 overflow-x-auto">
                    <table class="w-full {{ app()->getLocale() == 'ar' ? 'text-right' : 'text-left' }}">
                        <thead class="bg-black/50 text-gray-500 text-xs uppercase tracking-wider">
                            <tr>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'المستخدم' : 'User' }}</th>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'الموديول' : 'Module' }}</th>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'العملية' : 'Action' }}</th>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'رقم السجل' : 'Record ID' }}</th>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'التاريخ' : 'Date' }}</th>
                                <th class="px-6 py-4 font-medium">IP</th>
                                <th class="px-6 py-4 font-medium">{{ app()->getLocale() == 'ar' ? 'البيانات' : 'Data' }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-800">
                            @foreach($logs as $log)
                            <tr class="hover:bg-white/5 transition-colors text-gray-300">
                                <td class="px-6 py-4 text-sm font-medium text-white">{{ $log->user->name ?? (app()->getLocale() == 'ar' ? 'النظام' : 'System') }}</td>
                                <td class="px-6 py-4">
                                    <span class="text-[10px] px-2 py-0.5 rounded-full bg-gray-800 text-gray-400 border border-gray-700">
                                        {{ $log->module }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    @if($log->action === 'created')
                                        <span class="text-[10px] px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 border border-green-500/20">
                                            {{ app()->getLocale() == 'ar' ? 'إضافة' : 'Created' }}
                                        </span>
                                    @elseif($log->action === 'updated')
                                        <span class="text-[10px] px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400 border border-blue-500/20">
                                            {{ app()->getLocale() == 'ar' ? 'تعديل' : 'Updated' }}
                                        </span>
                                    @else
                                        <span class="text-[10px] px-2 py-0.5 rounded-full bg-red-500/20 text-red-400 border border-red-500/20">
                                            {{ app()->getLocale() == 'ar' ? 'حذف' : 'Deleted' }}
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-xs font-mono text-gray-500">#{{ $log->record_id }}</td>
                                <td class="px-6 py-4 text-xs text-gray-500">
                                    <div class="flex flex-col">
                                        <span>{{ $log->created_at->format('Y-m-d') }}</span>
                                        <span class="text-[10px] text-gray-600">{{ $log->created_at->format('H:i:s') }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-xs font-mono text-gray-600">{{ $log->ip_address }}</td>
                                <td class="px-6 py-4">
                                    @if($log->new_data)
                                        <details class="group">
                                            <summary class="flex items-center gap-1 text-[10px] text-[#d4af37] cursor-pointer hover:underline list-none">
                                                <svg class="w-3 h-3 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                                                {{ app()->getLocale() == 'ar' ? 'عرض البيانات' : 'View Data' }}
                                            </summary>
                                            <div class="mt-2 p-3 bg-black rounded-lg border border-gray-800 text-[10px] font-mono overflow-auto max-w-xs max-h-40">
                                                <pre class="text-gray-400">{{ json_encode($log->new_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                                            </div>
                                        </details>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @if($logs->hasPages())
                <div class="p-6 border-t border-gray-800">
                    {{ $logs->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>

@endsection