@props([
    'name',
    'label' => null,
    'accept' => null,
    'multiple' => false,
    'required' => false,
    'disabled' => false,
    'help' => null,
    'preview' => false
])

@php
    $classes = 'form-control';
    if ($errors->has($name)) {
        $classes .= ' is-invalid';
    }
@endphp

<div class="mb-3">
    @if($label)
        <label for="{{ $name }}" class="form-label">
            {{ $label }}
            @if($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif

    <input 
        type="file"
        name="{{ $multiple ? $name . '[]' : $name }}"
        id="{{ $name }}"
        class="{{ $classes }}"
        @if($accept) accept="{{ $accept }}" @endif
        @if($multiple) multiple @endif
        @if($required) required @endif
        @if($disabled) disabled @endif
        @if($preview) onchange="previewFile(this)" @endif
        {{ $attributes }}
    >

    @if($preview)
        <div id="{{ $name }}_preview" class="mt-2" style="display: none;">
            <img class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
        </div>
    @endif

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

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

@if($preview)
    @push('scripts')
    <script>
        function previewFile(input) {
            const preview = document.getElementById(input.id + '_preview');
            const img = preview.querySelector('img');
            
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    img.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(input.files[0]);
            } else {
                preview.style.display = 'none';
            }
        }
    </script>
    @endpush
@endif