<x-app-layout>
    <x-slot name="title">My Documents</x-slot>

    <div class="max-w-7xl mx-auto py-6">
        <div class="mb-6 flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">My Documents</h1>
                <p class="mt-1 text-sm text-gray-500">View your CNIC, Agreements, and other important files.</p>
            </div>
            <a href="{{ url('/portal/dashboard') }}" class="text-sm font-medium text-gray-600 hover:text-gray-900">&larr; Back to Dashboard</a>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @forelse($documents as $doc)
                    <div class="border border-gray-200 rounded-lg p-5 flex flex-col justify-between hover:shadow-md transition-shadow bg-gray-50">
                        <div class="flex items-start space-x-3 mb-4">
                            <div class="flex-shrink-0 h-10 w-10 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-900 line-clamp-2" title="{{ $doc->title }}">{{ $doc->title }}</h3>
                                <p class="text-xs text-gray-500 mt-1">{{ $doc->document_type }}</p>
                            </div>
                        </div>
                        <div class="flex items-center justify-between mt-2 pt-4 border-t border-gray-200">
                            <span class="text-xs text-gray-500">{{ $doc->created_at->format('M d, Y') }}</span>
                            <a href="{{ Storage::url($doc->file_path) }}" target="_blank" class="inline-flex items-center text-xs font-medium text-primary-600 hover:text-primary-700 bg-primary-50 px-3 py-1.5 rounded-md transition-colors">
                                <svg class="h-3.5 w-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                View File
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full py-12 text-center text-gray-500 bg-gray-50 rounded-lg border border-dashed border-gray-300">
                        <svg class="mx-auto h-12 w-12 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                        <p class="text-sm font-medium text-gray-900">No documents found.</p>
                        <p class="text-xs mt-1">If you recently signed an agreement, it will appear here shortly.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</x-app-layout>
