{{--
  Reusable document upload/list panel.
  Variables expected:
    $documents        — collection of Document models (already loaded)
    $documentableType — string e.g. "Contract"
    $documentableId   — integer
--}}
<div class="card p-5" x-data="{ uploading: false }">
    <h3 class="text-sm font-semibold text-white mb-4 flex items-center gap-2">
        <i class="fas fa-paperclip text-accent-blue"></i> Documents
        <span class="ml-auto text-xs text-gray-400">{{ $documents->count() }} file(s)</span>
    </h3>

    {{-- Upload form --}}
    <form method="POST" action="{{ route('documents.store') }}" enctype="multipart/form-data"
          class="mb-4 space-y-2" @submit="uploading = true">
        @csrf
        <input type="hidden" name="documentable_type" value="{{ $documentableType }}">
        <input type="hidden" name="documentable_id"   value="{{ $documentableId }}">

        <div class="flex gap-2">
            <div class="flex-1">
                <input type="text" name="name" placeholder="Label (optional)"
                       class="form-input text-sm w-full py-1.5">
            </div>
        </div>
        <div class="flex gap-2 items-center">
            <input type="file" name="file" required
                   class="text-xs text-gray-300 flex-1
                          file:mr-2 file:py-1 file:px-3 file:rounded file:border-0
                          file:text-xs file:bg-surface-3 file:text-gray-200
                          hover:file:bg-surface-4 cursor-pointer">
            <button type="submit" :disabled="uploading"
                    class="btn btn-primary text-xs py-1.5 px-3 whitespace-nowrap">
                <span x-show="!uploading"><i class="fas fa-upload mr-1"></i>Upload</span>
                <span x-show="uploading">Uploading…</span>
            </button>
        </div>
    </form>

    {{-- File list --}}
    @if($documents->isEmpty())
        <p class="text-xs text-gray-500 text-center py-3">No documents attached yet.</p>
    @else
        <ul class="space-y-2">
            @foreach($documents as $doc)
            <li class="flex items-center gap-2 p-2 rounded bg-surface-3 hover:bg-surface-4 transition-colors group">
                <i class="fas fa-file text-accent-blue text-sm flex-shrink-0"></i>
                <div class="flex-1 min-w-0">
                    <p class="text-xs font-medium text-white truncate">{{ $doc->name }}</p>
                    <p class="text-xs text-gray-500">
                        {{ $doc->formatted_size }} &middot;
                        {{ $doc->created_at->format('d M Y H:i') }}
                        @if($doc->uploader) &middot; {{ $doc->uploader->name }} @endif
                    </p>
                </div>
                <a href="{{ route('documents.download', $doc) }}"
                   class="text-xs text-accent-blue hover:underline flex-shrink-0">
                    <i class="fas fa-download"></i>
                </a>
                @php $role = auth()->user()->role?->name ?? ''; @endphp
                @if(in_array($role, ['office_admin','project_manager','sales_consultant']))
                <form method="POST" action="{{ route('documents.destroy', $doc) }}"
                      onsubmit="return confirm('Delete this document?')">
                    @csrf @method('DELETE')
                    <button type="submit"
                            class="text-red-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-times text-xs"></i>
                    </button>
                </form>
                @endif
            </li>
            @endforeach
        </ul>
    @endif
</div>