@extends('layouts.admin')

@section('pageTitle', 'آخرین فعالیت‌ها')

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="flex justify-between items-center mb-6">
        <h3 class="text-gray-700 dark:text-white text-3xl font-medium">آخرین فعالیت‌ها</h3>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
        <div class="p-4 overflow-x-auto">
            <table class="w-full display datatable">
                <thead>
                    <tr>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">مدیر</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">نوع فعالیت</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">توضیح</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">زمان</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($activities as $activity)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
                            <p class="text-gray-900 dark:text-gray-100 whitespace-nowrap">{{ $activity->admin->full_name ?? 'سیستم' }}</p>
                        </td>
                        <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
                            @if($activity->action === 'create')
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                    <i class="fas fa-plus-circle ml-2"></i>درج
                                </span>
                            @elseif($activity->action === 'update')
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                    <i class="fas fa-edit ml-2"></i>ویرایش
                                </span>
                            @elseif($activity->action === 'delete')
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                    <i class="fas fa-trash-alt ml-2"></i>حذف
                                </span>
                            @else
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                                    <i class="fas fa-eye ml-2"></i>مشاهده
                                </span>
                            @endif
                        </td>
                        <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-gray-300">
                            {{ $activity->description ?? $activity->table_name ?? '—' }}
                        </td>
                        <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-600 dark:text-gray-400">
                            <div title="{{ $activity->created_at->format('Y-m-d H:i:s') }}">{{ $activity->created_at->diffForHumans() }}</div>
                            <span class="text-xs text-gray-500 dark:text-gray-500">{{ $activity->created_at->format('Y/m/d H:i') }}</span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-5 py-8 text-center bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
                            فعالیتی ثبت نشده است.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        if ($.fn.DataTable.isDataTable('.datatable')) {
            $('.datatable').DataTable().destroy();
        }
        $('.datatable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/fa.json'
            },
            order: [[3, 'desc']],
            pageLength: 25,
            columnDefs: [
                { orderable: false, targets: [] }
            ]
        });
    });
</script>
@endsection