@props([
    'name' => 'proof_files[]',
    'id' => 'proof_files',
    'accept' => 'image/*,.pdf',
    'maxFiles' => 10,
    'label' => 'Photo evidence',
    'hint' => 'Max 5MB per file · JPG, PNG, WEBP, PDF · up to 10 files',
])

<div
    {{ $attributes->merge(['class' => 'min-w-0']) }}
    x-data="{
        files: [],
        maxFiles: {{ (int) $maxFiles }},
        addFiles(fileList) {
            const incoming = Array.from(fileList || []);
            const room = this.maxFiles - this.files.length;
            if (room <= 0) {
                return;
            }
            this.files = this.files.concat(incoming.slice(0, room));
            this.syncInput();
        },
        removeAt(index) {
            this.files = this.files.filter((_, i) => i !== index);
            this.syncInput();
        },
        syncInput() {
            const input = this.$refs.fileInput;
            if (!input || typeof DataTransfer === 'undefined') {
                return;
            }
            const dt = new DataTransfer();
            this.files.forEach((file) => dt.items.add(file));
            input.files = dt.files;
        },
        formatSize(bytes) {
            if (!bytes) {
                return '';
            }
            if (bytes < 1024) {
                return bytes + ' B';
            }
            if (bytes < 1024 * 1024) {
                return (bytes / 1024).toFixed(1) + ' KB';
            }
            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
        },
    }"
>
    <span class="block text-[11px] font-medium leading-none text-gray-600">{{ $label }}</span>

    <div
        class="mt-1 flex min-h-[4.5rem] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-3 text-center transition-colors hover:border-gray-400 hover:bg-gray-100/80"
        role="button"
        tabindex="0"
        @click="$refs.fileInput.click()"
        @keydown.enter.prevent="$refs.fileInput.click()"
        @keydown.space.prevent="$refs.fileInput.click()"
        @dragover.prevent="$el.classList.add('border-[var(--dealer-accent-color)]', 'bg-white')"
        @dragleave.prevent="$el.classList.remove('border-[var(--dealer-accent-color)]', 'bg-white')"
        @drop.prevent="$el.classList.remove('border-[var(--dealer-accent-color)]', 'bg-white'); addFiles($event.dataTransfer.files)"
    >
        <svg class="mb-1 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
        </svg>
        <p class="text-xs font-medium text-gray-700">
            <span class="text-[var(--dealer-accent-color)]">Choose files</span>
            <span class="text-gray-500"> or drag and drop</span>
        </p>
        <p class="mt-0.5 text-[10px] leading-tight text-gray-500">{{ $hint }}</p>
    </div>

    <input
        x-ref="fileInput"
        type="file"
        id="{{ $id }}"
        name="{{ $name }}"
        accept="{{ $accept }}"
        multiple
        class="sr-only"
        @change="addFiles($event.target.files)"
    />

    <ul x-show="files.length > 0" x-cloak class="mt-2 space-y-1">
        <template x-for="(file, index) in files" :key="index + '-' + file.name + '-' + file.size">
            <li class="flex items-center justify-between gap-2 rounded-md border border-gray-200 bg-white px-2 py-1.5 text-[11px]">
                <span class="min-w-0 truncate text-gray-800" x-text="file.name"></span>
                <span class="shrink-0 tabular-nums text-gray-500" x-text="formatSize(file.size)"></span>
                <button
                    type="button"
                    class="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium text-red-700 hover:bg-red-50"
                    @click.stop="removeAt(index)"
                >
                    Remove
                </button>
            </li>
        </template>
    </ul>
</div>