@props([
    'label' => 'Image',
    'id' => 'image_' . uniqid(),
    'name' => 'image',
    'image' => null, // default image or old uploaded one
    'hint' => 'Recommended image size is 320x320',
    'required' => false,
    'class' => '',
])



<div class="hero-contents-wrapper w-100 mb-32 {{ $class }}">
    <div class="single-img-wrapper">
        <h6 class="title">{{ $label }}</h6>

        <label class="w-100" for="{{ $id }}">
            <img class="hero-img preview-img" src="{{ showPhoto($image) }}" alt="preview">
        </label>

        <input
            type="file"
            name="{{ $name }}"
            id="{{ $id }}"
            class="d-none img-input"
            accept="image/*"
            {{ $required ? 'required' : '' }}
            {{ $attributes }}
        >

        <label class="choose-img-label" for="{{ $id }}">Choose Image</label>

        @if($hint)
            <span class="hint-msg">{{ $hint }}</span>
        @endif

        @error($name)
            <span class="error-msg">{{ $message }}</span>
        @enderror
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const input = document.getElementById('{{ $id }}');
        const preview = input?.closest('.single-img-wrapper')?.querySelector('.preview-img');

        input?.addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (file && preview) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    });
</script>
@endpush