@props([
    'inputId' => 'imageInput',
    'previewId' => 'previewImage',
    'cancelId' => 'cancelBtn',
    'name' => 'image',
    'placeholder' => asset('image-placeholder.png'),
    'width' => '100%',
    'height' => '100%',
    'placeholderSize' => '80px' // Placeholder size
])

<div class="image-upload-box text-center position-relative" style="max-width: 400px; margin:auto;">
    <button type="button" id="{{ $cancelId }}" class="btn btn-danger btn-sm position-absolute top-0 end-0 " style="display:none;right:0">✕</button>

    <img id="{{ $previewId }}" src="{{ $placeholder }}" alt="Placeholder" data-placeholder-size="{{ $placeholderSize }}"
        style="width: {{ $placeholderSize }}; height: {{ $placeholderSize }}; object-fit: cover; border: 2px dashed #ccc; border-radius:6px; display:block; margin:auto; transition: all 0.3s;"
    >

    <input type="file" name="{{ $name }}" id="{{ $inputId }}" accept="image/*" class="d-none">

    <div class="mt-2">
        <a href="javascript:void(0);" class="btn btn-link" onclick="document.getElementById('{{ $inputId }}').click();">
            Choose Image
        </a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    function initImagePreview(inputId, previewId, cancelId, placeholder) {
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);
        const cancel = document.getElementById(cancelId);

        if (!input || !preview || !cancel) return;

        const placeholderSize = preview.dataset.placeholderSize; // Placeholder size
        const fullWidth = '100%';  // Full size on preview
        const fullHeight = '100%';

        input.addEventListener('change', () => {
            if (input.files[0]) {
                const reader = new FileReader();
                reader.onload = e => {
                    preview.src = e.target.result;
                    preview.style.width = fullWidth;
                    preview.style.height = fullHeight;
                    cancel.style.display = 'block';
                };
                reader.readAsDataURL(input.files[0]);
            }
        });

        cancel.addEventListener('click', () => {
            preview.src = placeholder;
            preview.style.width = placeholderSize;
            preview.style.height = placeholderSize;
            input.value = '';
            cancel.style.display = 'none';
        });
    }

    // Initialize
    initImagePreview('{{ $inputId }}', '{{ $previewId }}', '{{ $cancelId }}', "{{ asset('image-placeholder.png') }}");
});
</script>