<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('اعتماد المستندات') }}</h1>
    </div>

    {{-- Filters --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <input type="text" wire:model.live.debounce.300ms="search" placeholder="{{ __('بحث بالاسم أو الملف...') }}"
                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
            <select wire:model.live="status" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                <option value="">{{ __('كل الحالات') }}</option>
                @foreach($statuses as $s)
                    <option value="{{ $s->value }}">{{ $s->label() }}</option>
                @endforeach
            </select>
            <select wire:model.live="documentType" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                <option value="">{{ __('كل الأنواع') }}</option>
                @foreach($documentTypes as $dt)
                    <option value="{{ $dt->value }}">{{ $dt->label() }}</option>
                @endforeach
            </select>
        </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">
            <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-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">{{ __('رافع المستند') }}</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-end font-medium text-gray-600">{{ __('إجراء') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($documents as $doc)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-gray-800" dir="ltr">{{ Str::limit($doc->original_filename, 30) }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ $doc->document_type->label() }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ $doc->documentable?->name_ar ?? '-' }}</td>
                            <td class="px-4 py-3 text-gray-600">{{ $doc->uploader?->name_ar ?? '-' }}</td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                                    {{ match($doc->status->badgeColor()) { 'yellow' => 'bg-yellow-100 text-yellow-700', 'green' => 'bg-green-100 text-green-700', 'red' => 'bg-red-100 text-red-700', default => 'bg-gray-100 text-gray-700' } }}">
                                    {{ $doc->status->label() }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-gray-500 text-xs" dir="ltr">{{ $doc->created_at->format('Y-m-d') }}</td>
                            <td class="px-4 py-3 text-end">
                                <a href="{{ route('documents.review', $doc) }}" wire:navigate
                                   class="text-blue-600 hover:text-blue-800 text-xs font-medium">{{ __('مراجعة') }}</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-12 text-center text-gray-400">{{ __('لا توجد مستندات') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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