<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames(([
    'label' => null,
    'model' => null
]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter(([
    'label' => null,
    'model' => null
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($label): ?>
    <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-200">
        <?php echo e($label); ?>

    </label>
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
<div x-data="{
    isDragging: false,
    fileName: null,
    filePreview: null,
    progress: 0, // ✅ new state for percentage
    uploading: false, // ✅ track if uploading
    handleFile(file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            this.filePreview = e.target.result;
        };
        reader.readAsDataURL(file);
        this.fileName = file.name;
    },
    clearFile() {
        this.fileName = null;
        this.filePreview = null;
        this.progress = 0; // ✅ reset progress
        this.uploading = false; // ✅ reset uploading state
        $refs.fileInput.value = null;
        if (window.Livewire.find('<?php echo e($_instance->getId()); ?>')) {
            window.Livewire.find('<?php echo e($_instance->getId()); ?>').set('<?php echo e($model); ?>', null);
        }
        $dispatch('file-selected', { fileName: null, file: null });
    }
}" x-on:file-upload-reset.window="clearFile()" x-on:click="$refs.fileInput.click()"
    x-on:dragover.prevent="isDragging = true" x-on:dragleave.prevent="isDragging = false"
    x-on:drop.prevent="
    isDragging = false;
    const file = $event.dataTransfer.files[0];
    if (file) {
        handleFile(file);
        $refs.fileInput.files = $event.dataTransfer.files;
        window.Livewire.find('<?php echo e($_instance->getId()); ?>').clearError('<?php echo e($model); ?>')
        $dispatch('file-selected', { fileName: file.name, file: file });
    }
"
    x-on:livewire-upload-start.window="uploading = true"
    x-on:livewire-upload-progress.window="progress = $event.detail.progress"
    x-on:livewire-upload-finish.window="uploading = false; progress = 100"
    x-on:livewire-upload-error.window="uploading = false; progress = 0"
    class="relative flex flex-col items-center justify-center w-full p-6 transition border-2 border-dashed rounded-lg cursor-pointer bg-white dark:bg-gray-800
       border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400
       focus:outline-none focus:ring-2 focus:ring-blue-400
       shadow-sm
       duration-200 ease-in-out
       "
    :class="{ 'border-blue-500 bg-blue-50 dark:bg-blue-900 shadow-md': isDragging }" x-ref="dropzone">

    <template x-if="!filePreview">
        <div class="flex flex-col items-center select-none">
            <?php if (isset($component)) { $__componentOriginal7d789ddc38a8902d5e671bb27f7b85ab = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal7d789ddc38a8902d5e671bb27f7b85ab = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'e60dd9d2c3a62d619c9acb38f20d5aa5::icon.arrow-up-on-square','data' => ['class' => 'w-6 h-6 text-blue-900 dark:text-white']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('flux::icon.arrow-up-on-square'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['class' => 'w-6 h-6 text-blue-900 dark:text-white']); ?>
<?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::processComponentKey($component); ?>

<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal7d789ddc38a8902d5e671bb27f7b85ab)): ?>
<?php $attributes = $__attributesOriginal7d789ddc38a8902d5e671bb27f7b85ab; ?>
<?php unset($__attributesOriginal7d789ddc38a8902d5e671bb27f7b85ab); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal7d789ddc38a8902d5e671bb27f7b85ab)): ?>
<?php $component = $__componentOriginal7d789ddc38a8902d5e671bb27f7b85ab; ?>
<?php unset($__componentOriginal7d789ddc38a8902d5e671bb27f7b85ab); ?>
<?php endif; ?>
            <p class="mb-1 text-lg font-semibold text-gray-700 dark:text-gray-300">Drag & drop your Image Here</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">or click to browse</p>
        </div>
    </template>

    <template x-if="filePreview">
        <div class="relative w-full max-w-sm p-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg flex items-center space-x-4 animate-fadeIn"
            @click.stop>
            <!-- Image preview -->
            <div class="shrink-0 w-20 h-20 overflow-hidden rounded-md border border-gray-200 dark:border-gray-600">
                <img :src="filePreview" alt="Preview" class="object-cover w-full h-full" draggable="false" />
            </div>

            <!-- File info -->
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" x-text="fileName"
                    title="" x-bind:title="fileName"></p>
                <p class="text-xs text-gray-500 dark:text-gray-400 select-none">Selected file</p>

                <!-- ✅ Upload progress bar -->
                <div x-show="uploading" class="w-full mt-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-2 bg-blue-500 transition-all" :style="'width: ' + progress + '%;'"></div>
                </div>
                <p x-show="uploading" class="text-xs text-gray-500 mt-1" x-text="progress + '%'"></p>
            </div>

            <!-- Remove button -->
            <button type="button" @click.stop="clearFile()"
                class="inline-flex items-center justify-center w-8 h-8 text-gray-400 rounded-full hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition"
                aria-label="Remove selected file" title="Remove file">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </template>

    <input type="file" x-ref="fileInput" class="hidden" wire:model="<?php echo e($model); ?>"
        accept="<?php echo e($acceptedFileTypes); ?>"
        x-on:change="
            const file = $refs.fileInput.files[0];
            if (file) {
                handleFile(file);
                window.Livewire.find('<?php echo e($_instance->getId()); ?>').clearError('<?php echo e($model); ?>')
                $dispatch('file-selected', { fileName: file.name, file: file });
            }
        " />

    
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = [$model];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
        <?php if (isset($component)) { $__componentOriginal5730b1630871592dc0d77210545c88c1 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal5730b1630871592dc0d77210545c88c1 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'e60dd9d2c3a62d619c9acb38f20d5aa5::error','data' => ['name' => ''.e($model).'']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('flux::error'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['name' => ''.e($model).'']); ?>
<?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::processComponentKey($component); ?>

<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal5730b1630871592dc0d77210545c88c1)): ?>
<?php $attributes = $__attributesOriginal5730b1630871592dc0d77210545c88c1; ?>
<?php unset($__attributesOriginal5730b1630871592dc0d77210545c88c1); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal5730b1630871592dc0d77210545c88c1)): ?>
<?php $component = $__componentOriginal5730b1630871592dc0d77210545c88c1; ?>
<?php unset($__componentOriginal5730b1630871592dc0d77210545c88c1); ?>
<?php endif; ?>
    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
</div>

<!-- Add this style to your CSS or Tailwind config if you want fade-in animation -->
<style>
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .animate-fadeIn {
        animation: fadeIn 0.3s ease-out forwards;
    }
</style>
<?php /**PATH /Users/macuser/Herd/Novabank/resources/views/components/ui/custom-file-upload.blade.php ENDPATH**/ ?>