<div x-data="{ isUploading: false,
    previewUrl: @entangle('imagePath').defer || ''}"
     x-on:livewire-upload-start="isUploading = true"
     x-on:livewire-upload-finish="isUploading = false"
     x-on:livewire-upload-error="isUploading = false">
    
    <div class="form-group">
        <label>{{ $label }}</label>
        
        <!-- Zona de dropzone modificada -->
        <div wire:ignore
            x-on:drop.prevent="
                const files = event.dataTransfer.files;
                if (files.length) {
                    @this.upload('image', files[0]);
                    updatePreview(files[0]);
                }
                $wire.toggleHover(false);
                event.stopPropagation(); // Evita propagación del evento
            "
            x-on:dragover.prevent="$wire.toggleHover(true)"
            x-on:dragleave.prevent="$wire.toggleHover(false)"
            class="dropzone {{ $hover ? 'dropzone-hover' : '' }} mb-3 p-4 border-2 border-dashed rounded text-center cursor-pointer relative bg-cover bg-center"
                style="{{ $imagePath ? 'background-image: url(' . asset('storage/' . $imagePath) . ');' : '' }}"
                :style="previewUrl ? 'background-image: url(' + previewUrl + ')' : ''">
            
            <!-- Overlay para mejor contraste -->
            <div class="absolute inset-0 bg-black/10 z-10" 
                 x-show="previewUrl || {{ $imagePath ? 'true' : 'false' }}"></div>

            <!-- Contenido modificado -->
            <div wire:loading wire:target="image" class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Cargando...</span>
                </div>
                <p>Subiendo imagen...</p>
            </div>
            
            <div wire:loading.remove wire:target="image">
                @if(!$imagePath && !$image)
                    <i class="fas fa-cloud-upload-alt fa-3x mb-2 text-muted"></i>
                    <p class="mb-1">Arrastra y suelta tu imagen aquí</p>
                    <p class="text-muted small">o haz clic para seleccionar</p>
                    <!-- Input file modificado -->
                    <input type="file" 
                           wire:model="image" 
                           class="d-none" 
                           id="fileInput"
                           x-on:change="$wire.uploadImage(); event.stopPropagation();">
                    <button type="button" 
                            class="btn btn-sm btn-outline-primary mt-2" 
                            onclick="document.getElementById('fileInput').click()">
                        Seleccionar archivo
                    </button>
                @endif
                
                <!-- Resto del contenido se mantiene igual -->
            </div>
        </div>
        
        @error('image') 
            <div class="alert alert-danger mt-2">{{ $message }}</div>
        @enderror
    </div>
</div>