@props(['name', 'label', 'value' => null, 'required' => false])

<div class="form-group">
    <label class="form-label {{ $required ? 'required' : '' }}">{{ $label }}</label>
    
    <div class="image-upload" onclick="document.getElementById('{{ $name }}').click()">
        @if($value)
            <img src="{{ asset('storage/' . $value) }}" alt="Preview" class="image-preview">
            <button type="button" class="image-remove" onclick="removeImage(event, '{{ $name }}')">
                <i class="fas fa-times"></i>
            </button>
        @else
            <div class="image-upload-content">
                <i class="fas fa-cloud-upload-alt image-upload-icon"></i>
                <div class="image-upload-text">
                    Clique ou arraste uma imagem aqui
                    <br>
                    <small>PNG, JPG ou GIF até 2MB</small>
                </div>
            </div>
        @endif
        
        <input
            type="file"
            id="{{ $name }}"
            name="{{ $name }}"
            class="hidden"
            accept="image/*"
            onchange="previewImage(event)"
            {{ $required ? 'required' : '' }}
        >
    </div>
</div>

@push('scripts')
<script>
function previewImage(event) {
    const input = event.target;
    const container = input.closest('.image-upload');
    
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            container.innerHTML = `
                <img src="${e.target.result}" alt="Preview" class="image-preview">
                <button type="button" class="image-remove" onclick="removeImage(event, '${input.name}')">
                    <i class="fas fa-times"></i>
                </button>
                <input
                    type="file"
                    id="${input.name}"
                    name="${input.name}"
                    class="hidden"
                    accept="image/*"
                    onchange="previewImage(event)"
                    ${input.required ? 'required' : ''}
                >
            `;
        }
        
        reader.readAsDataURL(input.files[0]);
    }
}

function removeImage(event, inputName) {
    event.stopPropagation();
    const container = event.target.closest('.image-upload');
    
    container.innerHTML = `
        <div class="image-upload-content">
            <i class="fas fa-cloud-upload-alt image-upload-icon"></i>
            <div class="image-upload-text">
                Clique ou arraste uma imagem aqui
                <br>
                <small>PNG, JPG ou GIF até 2MB</small>
            </div>
        </div>
        <input
            type="file"
            id="${inputName}"
            name="${inputName}"
            class="hidden"
            accept="image/*"
            onchange="previewImage(event)"
        >
    `;
}
</script>
@endpush