@extends('admin.layouts.app')
@section('title','سجلات النشاط')
@section('content')
<div class="max-w-7xl mx-auto" dir="rtl">
    <h1 class="text-2xl font-bold mb-6 text-gradient">سجلات النشاط</h1>

    <!-- ✅ نموذج البحث والتصفية -->
    <form method="GET" action="{{ route('admin.audits.index') }}" class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow mb-6 grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">نوع الحدث</label>
            <input type="text" name="event" value="{{ $filters['event'] ?? '' }}" class="input" placeholder="نوع الحدث">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">المستخدم</label>
            <input type="text" name="user_id" value="{{ $filters['user_id'] ?? '' }}" class="input" placeholder="معرف المستخدم">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">بحث</label>
            <input type="text" name="search" value="{{ $filters['search'] ?? '' }}" class="input" placeholder="البحث في السجلات">
        </div>
        <div class="flex items-end">
            <button type="submit" class="btn-primary w-full">بحث</button>
        </div>
    </form>

    <!-- ✅ جدول السجلات -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-x-auto">
        <table class="min-w-full text-sm text-gray-800 dark:text-gray-200">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-4 py-2 text-right">المستخدم</th>
                    <th class="px-4 py-2 text-center">الحدث</th>
                    <th class="px-4 py-2 text-center">الوصف</th>
                    <th class="px-4 py-2 text-center">IP</th>
                    <th class="px-4 py-2 text-center">التاريخ</th>
                </tr>
            </thead>
            <tbody>
                @forelse($logs as $log)
                    <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-4 py-2">{{ $log->user->name ?? 'زائر' }}</td>
                        <td class="px-4 py-2 text-center">{{ $log->event }}</td>
                        <td class="px-4 py-2">{{ $log->description }}</td>
                        <td class="px-4 py-2 text-center">{{ $log->ip_address }}</td>
                        <td class="px-4 py-2 text-center">{{ $log->created_at->format('Y-m-d H:i') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                            <div class="flex flex-col items-center">
                                <svg class="w-12 h-12 text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 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 2"></path>
                                </svg>
                                <span>لا توجد سجلات حالياً</span>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- ✅ روابط التصفح -->
    @if($logs->count() > 0)
    <div class="mt-4 text-center">
        <p class="text-sm text-gray-500 dark:text-gray-400">عرض {{ $logs->count() }} سجل</p>
    </div>
    @endif
</div>
@endsection