@extends('layouts.app')
@section('title', 'سجل الأنشطة')
@section('page_title', 'سجل الأنشطة والمراجعة')

@section('content')
<div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm p-5 mb-6">
    <form method="GET" class="flex flex-wrap gap-4 items-end">
        <div>
            <label class="block text-xs text-slate-500 mb-1.5">المستخدم</label>
            <select name="user_id" class="px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none">
                <option value="">الكل</option>
                @foreach($users as $user)
                <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs text-slate-500 mb-1.5">من تاريخ</label>
            <input type="date" name="date_from" value="{{ request('date_from') }}" class="px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none">
        </div>
        <div>
            <label class="block text-xs text-slate-500 mb-1.5">إلى تاريخ</label>
            <input type="date" name="date_to" value="{{ request('date_to') }}" class="px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none">
        </div>
        <div>
            <label class="block text-xs text-slate-500 mb-1.5">الإجراء</label>
            <input type="text" name="action" value="{{ request('action') }}" placeholder="بحث..." class="px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none">
        </div>
        <button type="submit" class="px-5 py-2 bg-primary-600 text-white rounded-xl text-sm font-medium hover:bg-primary-700 transition-colors">تصفية</button>
    </form>
</div>

<div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">
                    <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">الإجراء</th>
                    <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">المستخدم</th>
                    <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">التوقيت</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                @forelse($logs as $log)
                <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors">
                    <td class="px-5 py-3">
                        <div class="flex items-start gap-3">
                            <div class="h-8 w-8 bg-primary-100 dark:bg-primary-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                                <i class="fa-solid fa-shield-halved text-primary-500 text-sm"></i>
                            </div>
                            <div>
                                <p class="font-medium text-sm text-slate-800 dark:text-white">{{ $log->action }}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-5 py-3">
                        <p class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ $log->user?->name ?? 'النظام' }}</p>
                        <p class="text-xs text-slate-400">{{ $log->user?->email ?? '' }}</p>
                    </td>
                    <td class="px-5 py-3 text-sm text-slate-500">
                        {{ $log->created_at->format('d/m/Y H:i') }}
                        <p class="text-xs text-slate-400">{{ $log->created_at->diffForHumans() }}</p>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="py-16 text-center text-slate-400">لا يوجد سجلات</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="px-5 py-4 border-t border-slate-100 dark:border-slate-700">
        {{ $logs->links() }}
    </div>
</div>
@endsection