{{-- @props(['label', 'name', 'image' => null])

<div class="form-group">
    <label for="{{ $name }}">{{ $label }}</label>
    <input type="file" name="{{ $name }}" id="{{ $name }}"
           class="form-control @error($name) is-invalid @enderror" accept="image/*">

    @if ($image)
        <div class="mt-2">
            <img src="{{ asset('storage/' . $image) }}"
                 alt="Preview"
                 style="max-height: 150px; border: 1px solid #ccc; padding: 5px;">
        </div>
    @endif

    @error($name)
        <span class="invalid-feedback d-block">{{ $message }}</span>
    @enderror
</div> --}}

@props(['label', 'name', 'image' => null])

<div class="form-group">
    <label for="{{ $name }}">{{ $label }} @if($required)<span class="text-danger">*</span>@endif</label>
    <input type="file" name="{{ $name }}" id="{{ $name }}"
           class="form-control @error($name) is-invalid @enderror"
           accept="image/*"
           onchange="previewImage(event, '{{ $name }}')">

    <div class="mt-2">
        <img id="preview-{{ $name }}"
             src="{{ $image ? asset('storage/' . $image) : '' }}"
             alt="Preview"
             style="max-height: 150px; border: 1px solid #ccc; padding: 5px; {{ $image ? '' : 'display: none;' }}">
    </div>

    @error($name)
        <span class="invalid-feedback d-block">{{ $message }}</span>
    @enderror
</div>

@push('imagejs')
<script>
    function previewImage(event, name) {
        const input = event.target;
        const preview = document.getElementById('preview-' + name);
        const file = input.files[0];

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
    }
</script>
@endpush