{{-- resources/views/components/admin/image-upload.blade.php --}}
{{-- File input with live preview. image-preview.js handles preview swap. --}}
{{-- Props: name (input name), current (existing image path or null), label --}}

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

<div class="image-upload">
    <label class="form-label image-upload__label" for="imageInput_{{ $name }}">
        {{ $label }}
    </label>

    {{-- Preview box — data-target links JS to this img --}}
    <div class="image-upload__preview-wrap">
        <img
            id="imagePreview_{{ $name }}"
            src="{{ $current ? asset('storage/' . $current) : asset('images/placeholder.svg') }}"
            alt="Image preview"
            class="image-upload__preview"
            data-preview-target="imagePreview_{{ $name }}"
        >
    </div>

    {{-- File input — data-preview attribute used by image-preview.js --}}
    <input
        type="file"
        id="imageInput_{{ $name }}"
        name="{{ $name }}"
        accept="image/*"
        class="image-upload__input js-image-input"
        data-preview="imagePreview_{{ $name }}"
    >

    @if($current)
        <p class="image-upload__hint">Current image shown above. Choose a new file to replace it.</p>
    @endif

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