@props([
    'image' => 'https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/avatars/blank.svg', // Default placeholder
    'name' => 'profile',
    'wire_model' => null,
    'readonly' => false,
])



<div x-data="{
    previewUrl: '{{ $image ?: 'https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/avatars/blank.svg' }}',
    actualUrl: '{{ $image ?: 'https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/avatars/blank.svg' }}',
    tempUrl: null, // Temporary storage for new uploads
    loaded: false,
    hasImage: Boolean('{{ $image }}'),

    updatePreview(event) {
        const file = event.target.files[0];
        if (file) {
            this.tempUrl = URL.createObjectURL(file);
            this.previewUrl = this.tempUrl;
            this.loaded = true;
            this.hasImage = true;
        }
    },

    resetPreview() {
        if (this.tempUrl) {
            this.previewUrl = this.actualUrl || 'https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/avatars/blank.svg'; 
            this.tempUrl = null;
        } else {
            this.previewUrl = this.actualUrl || 'https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/avatars/blank.svg'; 
        }
        $refs.fileInput.value = '';
    },

    removeImage() {
        this.previewUrl = 'https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/avatars/blank.svg'; // Default placeholder
        this.actualUrl = 'https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/avatars/blank.svg';
        this.tempUrl = null;
        this.hasImage = false;
        $refs.fileInput.value = '';
    },

    loadImage() {
        this.previewUrl = this.actualUrl || 'https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/avatars/blank.svg';
        this.loaded = true;
        this.hasImage = this.previewUrl !== 'https://preview.keenthemes.com/metronic8/demo1/assets/media/svg/avatars/blank.svg';
    }
}" x-init="loadImage" class="d-flex align-items-start align-items-sm-center gap-4">

    <!-- Skeleton Loader (Until Image Loads) -->
    <div x-show="!loaded" class="skeleton w-100px h-100px rounded"></div>

    <!-- Lazy Loaded Image (Replaces Placeholder) -->
    <img x-bind:src="previewUrl"
         class="w-100px h-100px rounded d-none"
         x-show="loaded"
         x-bind:class="{ 'd-none': !loaded }"
         alt="User Avatar"
         loading="lazy">

    <div class="button-wrapper {{ $readonly ? 'd-none' : '' }}">
        <!-- Upload Button -->
        <label for="upload-{{ $name }}" class="btn btn-primary me-2 mb-3" tabindex="0">
            <span class="d-none d-sm-block">Upload new photo</span>
            <i class="ti ti-upload d-block d-sm-none"></i>
            <input type="file" id="upload-{{ $name }}" name="{{ $name }}" class="account-file-input" hidden accept="image/png, image/jpeg"
                @if($wire_model) wire:model="{{ $wire_model }}" @endif
                x-ref="fileInput"
                @change="updatePreview"
            />
        </label>

        <!-- Reset Button (Only Show If Image Exists) -->
        <button type="button" class="btn btn-label-secondary mb-3" @click="resetPreview" x-show="tempUrl">
            <i class="ti ti-refresh-dot d-block d-sm-none"></i>
            <span class="d-none d-sm-block">Reset</span>
        </button>

        <!-- Remove Button (Only Show If an Image Exists) -->
        <button type="button" class="btn btn-danger mb-3" @click="removeImage" x-show="hasImage">
            <i class="ti ti-trash d-block d-sm-none"></i>
            <span class="d-none d-sm-block">Remove</span>
        </button>

        <div class="text-muted">Allowed JPG, GIF, or PNG. Max size of 800K</div>

        @error($name)
        <div class="alert alert-danger alert-dismissible my-2">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            {{ $message }}
        </div>
        @enderror
    </div>
</div>

<!-- CSS for Skeleton Loader -->
<style>
    .skeleton {
        background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }

    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
</style>