@props([
    'name',
    'label' => null,
    'accept' => '*',
    'required' => false,
    'hint' => null,
    'multiple' => false,
])

<div>
    @if($label)
        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
            {{ $label }}
            @if($required)
                <span class="text-error-500">*</span>
            @endif
        </label>
    @endif

    <div
        x-data="{
            isDragging: false,
            fileName: '',
            handleDrop(e) {
                this.isDragging = false;
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    this.$refs.fileInput.files = files;
                    this.fileName = files[0].name;
                }
            },
            handleChange(e) {
                if (e.target.files.length > 0) {
                    this.fileName = e.target.files[0].name;
                }
            }
        }"
        @drop.prevent="handleDrop($event)"
        @dragover.prevent="isDragging = true"
        @dragleave.prevent="isDragging = false"
        class="relative"
    >
        <input
            x-ref="fileInput"
            type="file"
            name="{{ $name }}"
            id="{{ $name }}"
            accept="{{ $accept }}"
            @if($required) required @endif
            @if($multiple) multiple @endif
            @change="handleChange($event)"
            class="absolute inset-0 z-10 w-full h-full opacity-0 cursor-pointer"
        />

        <div
            :class="isDragging ? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10' : '{{ $errors->has($name) ? 'border-error-500' : 'border-gray-300 dark:border-gray-700' }}'"
            class="flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg transition-colors cursor-pointer hover:border-brand-400 dark:hover:border-brand-500"
        >
            <div class="flex items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-800">
                <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                </svg>
            </div>

            <template x-if="!fileName">
                <div class="text-center">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">
                        <span class="text-brand-500">Klik untuk upload</span> atau drag & drop
                    </p>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ $hint ?? 'File akan diupload' }}</p>
                </div>
            </template>

            <template x-if="fileName">
                <div class="text-center">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="fileName"></p>
                    <p class="mt-1 text-xs text-brand-500">Klik untuk ganti file</p>
                </div>
            </template>
        </div>
    </div>

    @error($name)
        <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
    @enderror
</div>