@props([
    'name',
    'label' => null,
    'hint' => null,
    'required' => false,
    'existing' => null,
    'preview' => true,
])

@php
    $id = $attributes->get('id', $name);
    $error = $errors->first($name);
    $existingUrl = $existing ? asset_path($existing) : null;
    $isImage = $existingUrl && preg_match('/\.(jpe?g|png|gif|webp|svg)$/i', $existing);
@endphp

<div {{ $attributes->only('class') }} @if ($preview) x-data="imageField({{ $isImage ? "'".$existingUrl."'" : 'null' }})" @endif>
    @if ($label)
        <label for="{{ $id }}" class="form-label">
            {{ $label }}@if ($required)<span class="text-error" aria-hidden="true">*</span>@endif
        </label>
    @endif

    @if ($preview)
        <div x-show="preview" x-cloak class="mb-3 flex items-center gap-3">
            <img :src="preview" alt="" class="size-20 rounded-lg border border-border object-cover">
            <button type="button" @click="clear()" class="btn-outline btn-sm">Remove</button>
        </div>

        {{-- Tells the controller to clear the stored path even when no new file is chosen. --}}
        <input type="hidden" name="remove_{{ $name }}" :value="removed ? 1 : 0">
    @elseif ($existingUrl)
        <p class="mb-2 text-xs text-text-muted">
            Current file:
            <a href="{{ $existingUrl }}" target="_blank" rel="noopener" class="text-text-brand underline">view</a>
        </p>
    @endif

    <input id="{{ $id }}" type="file" name="{{ $name }}" @required($required)
           @if ($preview) x-ref="input" @change="choose($event)" @endif
           {{ $attributes->except('class')->merge([
               'class' => 'block w-full text-sm text-text-secondary file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-4 file:py-2 file:text-sm file:font-medium file:text-primary hover:file:bg-primary-100',
           ]) }}>

    @if ($hint && ! $error)
        <p class="form-hint">{{ $hint }}</p>
    @endif

    @if ($error)
        <p class="form-error">{{ $error }}</p>
    @endif
</div>