@use('Illuminate\Support\Str')
@props([
    'id' => 'file-upload-' . uniqid(),
    'name',
    'label' => 'Upload File',
    'accept' => '*',
    'acceptText' => 'SVG, PNG, JPG or GIF (MAX. 800x400px)',
])

<div class="w-full" x-data="{
    files: [],
    isDragging: false,
    progress: 0,
    isUploading: false,
    handleDrop(e) {
        this.isDragging = false;
        let droppedFiles = e.dataTransfer.files;
        if (droppedFiles.length > 0) {
            this.handleFiles(droppedFiles);
        }
    },
    handleFiles(fileList) {
        if ({{ $attributes->has('multiple') ? 'true' : 'false' }}) {
            this.files = [...this.files, ...fileList];
        } else {
            this.files = [...fileList];
        }
        this.simulateUpload();
    },
    removeFile(index) {
        this.files.splice(index, 1);
        this.progress = 0;
        this.isUploading = false;
        document.getElementById('{{ $id }}').value = '';
    },
    simulateUpload() {
        this.isUploading = true;
        this.progress = 0;
        let interval = setInterval(() => {
            this.progress += 10;
            if (this.progress >= 100) {
                clearInterval(interval);
                this.isUploading = false;
            }
        }, 100);
    }
}">
    <label class="block text-xs font-semibold text-slate-700 mb-1">
        {{ $label }} @if ($attributes->has('required'))
            <span class="text-red-500">*</span>
        @endif
    </label>

    <div class="relative">
        <label for="{{ $id }}" @dragover.prevent="isDragging = true" @dragleave.prevent="isDragging = false"
            @drop.prevent="handleDrop($event)"
            :class="{ 'border-green-500 bg-green-50': isDragging, 'border-slate-300 bg-slate-50': !isDragging }"
            class="flex flex-col items-center justify-center w-full relative min-h-[8rem] h-auto border-2 border-dashed rounded-lg cursor-pointer hover:bg-slate-100 transition-colors group">

            <div class="flex flex-col items-center justify-center pt-5 pb-6" x-show="files.length === 0">
                <svg class="w-8 h-8 mb-3 text-slate-400 group-hover:text-green-500 transition-colors" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
                </svg>
                <p class="mb-2 text-sm text-slate-500"><span class="font-semibold">Click to upload</span> or drag and
                    drop</p>
                <p class="text-xs text-slate-500">{{ $acceptText ?? 'SVG, PNG, JPG or GIF (MAX. 800x400px)' }}</p>
            </div>

            <!-- File List UI -->
            <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 min-w-sm px-4 py-4" x-show="files.length > 0" x-cloak>
                <template x-for="(file, index) in files" :key="index">
                    <div
                        class="flex items-center justify-between p-2 bg-white rounded-md border border-slate-200 shadow-sm mb-2">
                        <div class="flex items-center gap-3 overflow-hidden">
                            <div class="bg-slate-100 p-2 rounded">
                                <svg class="w-4 h-4 text-slate-500" 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>
                            </div>
                            <div class="flex flex-col min-w-0">
                                <span class="text-sm font-medium text-slate-700 truncate" x-text="file.name"></span>
                                <span class="text-xs text-slate-400"
                                    x-text="(file.size / 1024).toFixed(2) + ' KB'"></span>
                            </div>
                        </div>
                        <button type="button" @click.prevent="removeFile(index)"
                            class="text-slate-400 hover:text-red-500">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                </template>

              
            </div>
  <!-- Progress Bar -->
                <div x-show="isUploading" class="w-full bg-slate-200 rounded-full h-1.5 mb-2">
                    <div class="bg-green-600 h-1.5 rounded-full transition-all duration-300"
                        :style="'width: ' + progress + '%'"></div>
                </div>
                <p x-show="!isUploading && progress >= 100" class="text-xs text-green-600 font-medium text-center">Ready
                    for upload</p>
            <input id="{{ $id }}" name="{{ $name }}" type="file" class="hidden"
                accept="{{ $accept ?? '*' }}" @if ($attributes->has('multiple')) multiple @endif
                @change="handleFiles($event.target.files)" />
        </label>
    </div>

    @error(Str::replace('[]', '', $name))
        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
    @enderror
</div>