<div>
    {{-- Page Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('سجل النشاطات') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('متابعة جميع التغييرات والإجراءات في النظام') }}</p>
        </div>
        @if($search || $actionFilter || $dateFrom || $dateTo || $userFilter || $entityFilter || $referenceSearch)
            <button wire:click="resetFilters" class="inline-flex items-center justify-center gap-1.5 px-3 py-2.5 w-full sm:w-auto text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
                {{ __('مسح الفلاتر') }}
            </button>
        @endif
    </div>

    {{-- Filters --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4">
        {{-- Row 1: Reference search + general search --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
            {{-- Reference Number Search --}}
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('بحث برقم مرجعي') }}</label>
                <div class="relative">
                    <input type="text"
                           wire:model.live.debounce.300ms="referenceSearch"
                           placeholder="{{ __('رقم الفاتورة (INV-...) أو رقم الدفع (PAY-...)') }}"
                           class="w-full ps-10 pe-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm font-mono"
                           dir="ltr">
                    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                        <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
                        </svg>
                    </div>
                </div>
            </div>

            {{-- General Search --}}
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('بحث عام') }}</label>
                <div class="relative">
                    <input type="text"
                           wire:model.live.debounce.300ms="search"
                           placeholder="{{ __('اسم المستخدم أو IP...') }}"
                           class="w-full ps-10 pe-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        {{-- Row 2: Filters --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
            {{-- Entity Filter --}}
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('نوع الكيان') }}</label>
                <select wire:model.live="entityFilter"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    <option value="">{{ __('كل الكيانات') }}</option>
                    <option value="invoice">{{ __('فاتورة') }}</option>
                    <option value="payment">{{ __('دفعة') }}</option>
                    <option value="transaction">{{ __('معاملة مالية') }}</option>
                    <option value="enrollment">{{ __('تسجيل') }}</option>
                    <option value="participant">{{ __('مشارك') }}</option>
                    <option value="session">{{ __('حصة تدريبية') }}</option>
                    <option value="group">{{ __('مجموعة') }}</option>
                    <option value="program">{{ __('برنامج') }}</option>
                    <option value="attendance">{{ __('حضور') }}</option>
                    <option value="user">{{ __('مستخدم') }}</option>
                </select>
            </div>

            {{-- Action Filter --}}
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('نوع الإجراء') }}</label>
                <select wire:model.live="actionFilter"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    <option value="">{{ __('كل الإجراءات') }}</option>
                    <option value="created">{{ __('إنشاء') }}</option>
                    <option value="updated">{{ __('تعديل') }}</option>
                    <option value="deleted">{{ __('حذف') }}</option>
                    <option value="restored">{{ __('استعادة') }}</option>
                </select>
            </div>

            {{-- User Filter --}}
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('المستخدم') }}</label>
                <select wire:model.live="userFilter"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    <option value="">{{ __('كل المستخدمين') }}</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name_ar ?: $user->name }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Date Range --}}
            <div class="sm:col-span-2">
                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('الفترة') }}</label>
                <div class="flex items-center gap-1.5">
                    <input type="date" wire:model.live="dateFrom"
                           class="w-full px-2 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs" dir="ltr">
                    <span class="text-gray-400 text-xs shrink-0">{{ __('إلى') }}</span>
                    <input type="date" wire:model.live="dateTo"
                           class="w-full px-2 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs" dir="ltr">
                </div>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div wire:loading.class="opacity-50 pointer-events-none">
            {{-- Mobile cards --}}
            <div class="md:hidden divide-y divide-gray-100">
                @forelse($logs as $log)
                <div class="p-4 space-y-2">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center shrink-0">
                                @if($log->user?->avatar_path)
                                    <img src="{{ Storage::disk('public')->url($log->user->avatar_path) }}" alt="{{ $log->user->name_ar }}" class="w-7 h-7 rounded-full object-cover">
                                @else
                                    <span class="text-[10px] font-bold text-gray-500">{{ mb_substr($log->user?->name_ar ?? $log->user?->name ?? '?', 0, 1) }}</span>
                                @endif
                            </div>
                            <span class="text-sm text-gray-800 truncate max-w-[120px]">{{ $log->user?->name_ar ?? $log->user?->name ?? __('نظام') }}</span>
                        </div>
                        @php
                            $actionConfig = [
                                'created' => ['color' => 'bg-green-100 text-green-700', 'label' => 'إنشاء'],
                                'updated' => ['color' => 'bg-yellow-100 text-yellow-700', 'label' => 'تعديل'],
                                'deleted' => ['color' => 'bg-red-100 text-red-700', 'label' => 'حذف'],
                                'restored' => ['color' => 'bg-purple-100 text-purple-700', 'label' => 'استعادة'],
                            ];
                            $config = $actionConfig[$log->action] ?? ['color' => 'bg-gray-100 text-gray-700', 'label' => $log->action];
                        @endphp
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $config['color'] }}">{{ __($config['label']) }}</span>
                    </div>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>{{ \App\Livewire\Admin\ActivityLog::translateEntityType($log->auditable_type) }} <span dir="ltr">#{{ $log->auditable_id }}</span></span>
                        <span>{{ $log->created_at->diffForHumans() }}</span>
                    </div>
                    <button wire:click="toggleExpand({{ $log->id }})"
                            class="w-full text-center py-2 text-xs font-medium rounded-md transition-colors
                                   {{ $expandedRow === $log->id ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700' }}">
                        {{ $expandedRow === $log->id ? __('إخفاء التفاصيل') : __('عرض التفاصيل') }}
                    </button>
                    @if($expandedRow === $log->id)
                    <div class="mt-2 bg-slate-50 rounded-lg p-3 text-xs">
                        @if($log->action === 'updated' && $log->old_values && $log->new_values)
                            @foreach(array_slice(array_keys($log->new_values), 0, 5) as $key)
                            <div class="flex justify-between py-1 border-b border-gray-100 last:border-0">
                                <span class="text-gray-600">{{ $key }}</span>
                                <span class="text-green-600 truncate max-w-[120px]">{{ is_array($log->new_values[$key]) ? json_encode($log->new_values[$key], JSON_UNESCAPED_UNICODE) : Str::limit((string)$log->new_values[$key], 20) }}</span>
                            </div>
                            @endforeach
                        @elseif($log->action === 'created' && $log->new_values)
                            <span class="text-green-600">{{ implode(', ', array_slice(array_keys($log->new_values), 0, 5)) }}</span>
                        @elseif($log->action === 'deleted')
                            <span class="text-red-500">{{ __('تم حذف') }} {{ count($log->old_values ?? []) }} {{ __('حقل') }}</span>
                        @endif
                        @if($log->ip_address)
                        <div class="mt-2 pt-2 border-t border-gray-200 text-gray-400" dir="ltr">IP: {{ $log->ip_address }}</div>
                        @endif
                    </div>
                    @endif
                </div>
                @empty
                <div class="p-8 text-center">
                    <p class="text-gray-500 text-sm">{{ __('لا توجد سجلات نشاط') }}</p>
                </div>
                @endforelse
            </div>

            {{-- Desktop table --}}
            <div class="hidden md:block overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('المستخدم') }}</th>
                        <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الإجراء') }}</th>
                        <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('الكيان') }}</th>
                        <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('ملخص التغييرات') }}</th>
                        <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('عنوان IP') }}</th>
                        <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('الوقت') }}</th>
                        <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('تفاصيل') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($logs as $log)
                    <tr class="hover:bg-gray-50 transition-colors">
                        {{-- User --}}
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center shrink-0">
                                    @if($log->user?->avatar_path)
                                        <img src="{{ Storage::disk('public')->url($log->user->avatar_path) }}"
                                             alt="{{ $log->user->name_ar }}"
                                             class="w-8 h-8 rounded-full object-cover">
                                    @else
                                        <span class="text-xs font-bold text-gray-500">
                                            {{ mb_substr($log->user?->name_ar ?? $log->user?->name ?? '?', 0, 1) }}
                                        </span>
                                    @endif
                                </div>
                                <span class="text-sm text-gray-800 truncate max-w-[120px]">
                                    {{ $log->user?->name_ar ?? $log->user?->name ?? __('نظام') }}
                                </span>
                            </div>
                        </td>

                        {{-- Action Badge --}}
                        <td class="px-4 py-3 text-center">
                            @php
                                $actionConfig = [
                                    'created' => ['color' => 'bg-green-100 text-green-700', 'label' => 'إنشاء', 'icon' => 'M12 4v16m8-8H4'],
                                    'updated' => ['color' => 'bg-yellow-100 text-yellow-700', 'label' => 'تعديل', 'icon' => 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'],
                                    'deleted' => ['color' => 'bg-red-100 text-red-700', 'label' => 'حذف', 'icon' => 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'],
                                    'restored' => ['color' => 'bg-purple-100 text-purple-700', 'label' => 'استعادة', 'icon' => 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'],
                                ];
                                $config = $actionConfig[$log->action] ?? ['color' => 'bg-gray-100 text-gray-700', 'label' => $log->action, 'icon' => ''];
                            @endphp
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium {{ $config['color'] }}">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $config['icon'] }}"/>
                                </svg>
                                {{ __($config['label']) }}
                            </span>
                        </td>

                        {{-- Entity --}}
                        <td class="px-4 py-3">
                            <div>
                                <span class="text-sm font-medium text-gray-700">
                                    {{ \App\Livewire\Admin\ActivityLog::translateEntityType($log->auditable_type) }}
                                </span>
                                <span class="text-xs text-gray-400 ms-1" dir="ltr">#{{ $log->auditable_id }}</span>
                            </div>
                            @if($log->is_financial)
                                <span class="inline-flex items-center mt-0.5 px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-50 text-amber-600 border border-amber-200">
                                    {{ __('مالي') }}
                                </span>
                            @endif
                        </td>

                        {{-- Changes Summary --}}
                        <td class="px-4 py-3 text-sm text-gray-600 max-w-[200px]">
                            @if($log->action === 'updated' && $log->old_values && $log->new_values)
                                @php
                                    $changedKeys = array_keys($log->new_values);
                                    $displayKeys = array_slice($changedKeys, 0, 3);
                                    $remaining = count($changedKeys) - 3;
                                @endphp
                                <div class="space-y-0.5">
                                    @foreach($displayKeys as $key)
                                        <div class="text-xs truncate">
                                            <span class="text-gray-500">{{ $key }}:</span>
                                            <span class="text-red-500 line-through">{{ is_array($log->old_values[$key] ?? null) ? json_encode($log->old_values[$key], JSON_UNESCAPED_UNICODE) : Str::limit((string)($log->old_values[$key] ?? '—'), 15) }}</span>
                                            <span class="text-gray-400 mx-0.5">&larr;</span>
                                            <span class="text-green-600">{{ is_array($log->new_values[$key]) ? json_encode($log->new_values[$key], JSON_UNESCAPED_UNICODE) : Str::limit((string)$log->new_values[$key], 15) }}</span>
                                        </div>
                                    @endforeach
                                    @if($remaining > 0)
                                        <span class="text-[10px] text-gray-400">+{{ $remaining }} {{ __('حقول أخرى') }}</span>
                                    @endif
                                </div>
                            @elseif($log->action === 'created' && $log->new_values)
                                @php $keys = array_slice(array_keys($log->new_values), 0, 3); @endphp
                                <span class="text-xs text-green-600">
                                    {{ implode(', ', $keys) }}{{ count($log->new_values) > 3 ? ' +' . (count($log->new_values) - 3) : '' }}
                                </span>
                            @elseif($log->action === 'deleted' && $log->old_values)
                                <span class="text-xs text-red-500">{{ __('تم حذف') }} {{ count($log->old_values) }} {{ __('حقل') }}</span>
                            @elseif($log->action === 'restored')
                                <span class="text-xs text-purple-500">{{ __('تمت الاستعادة') }}</span>
                            @else
                                <span class="text-xs text-gray-400">&mdash;</span>
                            @endif
                        </td>

                        {{-- IP Address --}}
                        <td class="px-4 py-3">
                            <span class="text-xs font-mono text-gray-500" dir="ltr">{{ $log->ip_address ?? '—' }}</span>
                        </td>

                        {{-- Timestamp --}}
                        <td class="px-4 py-3">
                            <div class="text-xs text-gray-500" title="{{ $log->created_at->format('Y-m-d H:i:s') }}">
                                {{ $log->created_at->diffForHumans() }}
                            </div>
                            <div class="text-[10px] text-gray-400 mt-0.5" dir="ltr">
                                {{ $log->created_at->format('Y-m-d H:i') }}
                            </div>
                        </td>

                        {{-- Expand Toggle --}}
                        <td class="px-4 py-3 text-center">
                            <button wire:click="toggleExpand({{ $log->id }})"
                                    class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md transition-colors
                                           {{ $expandedRow === $log->id ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700' }}">
                                <svg class="w-3.5 h-3.5 transition-transform {{ $expandedRow === $log->id ? '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"/>
                                </svg>
                                {{ $expandedRow === $log->id ? __('إخفاء') : __('عرض') }}
                            </button>
                        </td>
                    </tr>

                    {{-- Expanded Details Row --}}
                    @if($expandedRow === $log->id)
                    <tr class="bg-slate-50">
                        <td colspan="7" class="px-4 py-4">
                            <div x-data="{ activeTab: 'changes' }">
                                {{-- Tabs --}}
                                <div class="flex gap-2 mb-3 border-b border-gray-200 pb-2">
                                    <button @click="activeTab = 'changes'"
                                            :class="activeTab === 'changes' ? 'bg-blue-100 text-blue-700 border-blue-300' : 'bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100'"
                                            class="px-3 py-1.5 rounded-md text-xs font-medium border transition-colors">
                                        {{ __('التغييرات') }}
                                    </button>
                                    <button @click="activeTab = 'meta'"
                                            :class="activeTab === 'meta' ? 'bg-blue-100 text-blue-700 border-blue-300' : 'bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100'"
                                            class="px-3 py-1.5 rounded-md text-xs font-medium border transition-colors">
                                        {{ __('بيانات وصفية') }}
                                    </button>
                                    <button @click="activeTab = 'raw'"
                                            :class="activeTab === 'raw' ? 'bg-blue-100 text-blue-700 border-blue-300' : 'bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100'"
                                            class="px-3 py-1.5 rounded-md text-xs font-medium border transition-colors">
                                        {{ __('JSON الخام') }}
                                    </button>
                                </div>

                                {{-- Changes Tab --}}
                                <div x-show="activeTab === 'changes'" x-cloak>
                                    @if($log->action === 'updated' && $log->old_values && $log->new_values)
                                    <div class="overflow-x-auto">
                                        <table class="w-full text-xs border border-gray-200 rounded-lg overflow-hidden">
                                            <thead class="bg-gray-100">
                                                <tr>
                                                    <th class="px-3 py-2 text-start text-gray-600 font-medium">{{ __('الحقل') }}</th>
                                                    <th class="px-3 py-2 text-start text-gray-600 font-medium">{{ __('القيمة القديمة') }}</th>
                                                    <th class="px-3 py-2 text-start text-gray-600 font-medium">{{ __('القيمة الجديدة') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody class="divide-y divide-gray-100">
                                                @foreach($log->new_values as $field => $newVal)
                                                <tr>
                                                    <td class="px-3 py-2 font-medium text-gray-700">{{ $field }}</td>
                                                    <td class="px-3 py-2 text-red-600 bg-red-50/50">
                                                        {{ is_array($log->old_values[$field] ?? null) ? json_encode($log->old_values[$field], JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) : (string)($log->old_values[$field] ?? '—') }}
                                                    </td>
                                                    <td class="px-3 py-2 text-green-600 bg-green-50/50">
                                                        {{ is_array($newVal) ? json_encode($newVal, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) : (string)$newVal }}
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    @elseif($log->action === 'created' && $log->new_values)
                                    <div class="overflow-x-auto">
                                        <table class="w-full text-xs border border-gray-200 rounded-lg overflow-hidden">
                                            <thead class="bg-gray-100">
                                                <tr>
                                                    <th class="px-3 py-2 text-start text-gray-600 font-medium">{{ __('الحقل') }}</th>
                                                    <th class="px-3 py-2 text-start text-gray-600 font-medium">{{ __('القيمة') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody class="divide-y divide-gray-100">
                                                @foreach($log->new_values as $field => $val)
                                                <tr>
                                                    <td class="px-3 py-2 font-medium text-gray-700">{{ $field }}</td>
                                                    <td class="px-3 py-2 text-green-600 bg-green-50/50">
                                                        {{ is_array($val) ? json_encode($val, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) : (string)$val }}
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    @elseif($log->action === 'deleted' && $log->old_values)
                                    <div class="overflow-x-auto">
                                        <table class="w-full text-xs border border-gray-200 rounded-lg overflow-hidden">
                                            <thead class="bg-gray-100">
                                                <tr>
                                                    <th class="px-3 py-2 text-start text-gray-600 font-medium">{{ __('الحقل') }}</th>
                                                    <th class="px-3 py-2 text-start text-gray-600 font-medium">{{ __('القيمة المحذوفة') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody class="divide-y divide-gray-100">
                                                @foreach($log->old_values as $field => $val)
                                                <tr>
                                                    <td class="px-3 py-2 font-medium text-gray-700">{{ $field }}</td>
                                                    <td class="px-3 py-2 text-red-600 bg-red-50/50">
                                                        {{ is_array($val) ? json_encode($val, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) : (string)$val }}
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    @else
                                    <p class="text-xs text-gray-400 py-4 text-center">{{ __('لا توجد بيانات تغييرات') }}</p>
                                    @endif
                                </div>

                                {{-- Meta Tab --}}
                                <div x-show="activeTab === 'meta'" x-cloak>
                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs">
                                        <div class="bg-white rounded-lg p-3 border border-gray-200">
                                            <span class="text-gray-500 block mb-1">{{ __('عنوان IP') }}</span>
                                            <p class="font-mono text-gray-700 font-medium" dir="ltr">{{ $log->ip_address ?? '—' }}</p>
                                        </div>
                                        <div class="bg-white rounded-lg p-3 border border-gray-200">
                                            <span class="text-gray-500 block mb-1">{{ __('الرابط') }}</span>
                                            <p class="font-mono text-gray-700 truncate" dir="ltr" title="{{ $log->url }}">{{ $log->url ?? '—' }}</p>
                                        </div>
                                        <div class="bg-white rounded-lg p-3 border border-gray-200">
                                            <span class="text-gray-500 block mb-1">{{ __('النوع الكامل') }}</span>
                                            <p class="font-mono text-gray-700 truncate" dir="ltr" title="{{ $log->auditable_type }}">{{ $log->auditable_type }}</p>
                                        </div>
                                        <div class="bg-white rounded-lg p-3 border border-gray-200">
                                            <span class="text-gray-500 block mb-1">{{ __('تصنيف') }}</span>
                                            <p class="text-gray-700 font-medium">
                                                @if($log->is_financial)
                                                    <span class="text-amber-600">{{ __('مالي') }}</span>
                                                @else
                                                    <span class="text-gray-500">{{ __('عام') }}</span>
                                                @endif
                                            </p>
                                        </div>
                                        @if($log->user_agent)
                                        <div class="md:col-span-4 bg-white rounded-lg p-3 border border-gray-200">
                                            <span class="text-gray-500 block mb-1">{{ __('المتصفح') }}</span>
                                            <p class="font-mono text-gray-700 text-[11px] truncate" dir="ltr" title="{{ $log->user_agent }}">{{ $log->user_agent }}</p>
                                        </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- Raw JSON Tab --}}
                                <div x-show="activeTab === 'raw'" x-cloak>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        @if($log->old_values)
                                        <div>
                                            <h4 class="text-xs font-medium text-gray-600 mb-1.5">{{ __('القيم القديمة') }}</h4>
                                            <pre class="bg-gray-900 text-green-400 rounded-lg p-3 text-[11px] overflow-x-auto max-h-60 overflow-y-auto" dir="ltr">{{ json_encode($log->old_values, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) }}</pre>
                                        </div>
                                        @endif
                                        @if($log->new_values)
                                        <div>
                                            <h4 class="text-xs font-medium text-gray-600 mb-1.5">{{ __('القيم الجديدة') }}</h4>
                                            <pre class="bg-gray-900 text-green-400 rounded-lg p-3 text-[11px] overflow-x-auto max-h-60 overflow-y-auto" dir="ltr">{{ json_encode($log->new_values, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) }}</pre>
                                        </div>
                                        @endif
                                        @if(!$log->old_values && !$log->new_values)
                                        <p class="text-xs text-gray-400 py-4 text-center md:col-span-2">{{ __('لا توجد بيانات') }}</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endif
                    @empty
                    {{-- Empty State --}}
                    <tr>
                        <td colspan="7" class="px-4 py-16 text-center">
                            <div class="flex flex-col items-center">
                                <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
                                    </svg>
                                </div>
                                <p class="text-gray-500 text-sm font-medium">{{ __('لا توجد سجلات نشاط') }}</p>
                                <p class="text-gray-400 text-xs mt-1">{{ __('لم يتم العثور على أي نشاط يطابق معايير البحث') }}</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
            </div>
        </div>

        {{-- Pagination --}}
        @if($logs->hasPages())
        <div class="px-4 py-3 border-t border-gray-200 bg-gray-50">
            {{ $logs->links() }}
        </div>
        @endif
    </div>
</div>
