@props([
    'url' => null,
    'folder' => \App\Models\UsrUsers::PHOTO_UPLOAD_FOLDER,
    'alt' => 'Imagem',
    'width' => 40,
    'height' => 40,
    'class' => 'rounded border shadow-sm',
    'deleteRoute' => null,
    'isImage' => true,
    'acceptImages' => false,
])

@php
    $path = $url ? asset("storage/{$folder}/{$url}") : asset('assets/images/placeholder-image.png');
@endphp

<div class="position-relative d-flex align-items-center">
    @if ($isImage)
        <img src="{{ $path }}" alt="{{ $alt }}" width="{{ $width }}" height="{{ $height }}" class="{{ $class }}">
    @else
        <a href="{{ $path }}" target="_blank" class="btn btn-outline-primary">
            <i class="fa fa-file"></i> {{ $url }}
        </a>
    @endif

    @if ($deleteRoute)
        <button type="button" class="btn btn-xs btn-outline-danger delete-button" data-url="{{ $deleteRoute }}" title="Eliminar">
            <i class="fa fa-trash"></i>
        </button>
    @endif
</div>

@once
    @push('scripts')
    <script>
    document.addEventListener('DOMContentLoaded', function () {

        @if($acceptImages)
            const container = document.querySelector('.file-preview-container') || document.body;
            const fileInputs = container.querySelectorAll('input[type="file"]');
            
            fileInputs.forEach(input => {
                if (!input.hasAttribute('accept')) {
                    input.setAttribute('accept', 'image/*');
                }
            });
        @endif

        document.body.addEventListener('click', function(event) {
            const deleteButton = event.target.closest('.delete-button');
            if (!deleteButton) {
                return;
            }

            event.preventDefault();
            const url = deleteButton.dataset.url;

            if (confirm('Tem certeza que deseja apagar este item?')) {
                fetch(url, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    },
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Erro na resposta do servidor.');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        location.reload(); 
                    } else {
                        alert(data.message || 'Erro ao apagar o item.');
                    }
                })
                .catch(error => {
                    console.error('Erro:', error);
                    alert('Ocorreu um erro inesperado.');
                });
            }
        });
    });
    </script>
    @endpush
@endonce