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

<div class="single-img-wrapper {{ $class }}">
    <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
</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