@props(['name', 'label', 'accept' => '*', 'required' => false])

<div class="form-group">
    <label class="form-label {{ $required ? 'required' : '' }}">{{ $label }}</label>
    
    <div class="file-upload" onclick="document.getElementById('{{ $name }}').click()">
        <div class="file-upload-content">
            <i class="fas fa-cloud-upload-alt file-upload-icon"></i>
            <div class="file-upload-text">
                Clique ou arraste um arquivo aqui
                <br>
                <small>{{ $accept === '*' ? 'Todos os formatos aceitos' : 'Formatos aceitos: ' . $accept }}</small>
            </div>
        </div>
        
        <input
            type="file"
            id="{{ $name }}"
            name="{{ $name }}"
            class="hidden"
            accept="{{ $accept }}"
            onchange="previewFile(event)"
            {{ $required ? 'required' : '' }}
        >
    </div>
</div>

@push('scripts')
<script>
function previewFile(event) {
    const input = event.target;
    const container = input.closest('.file-upload');
    const file = input.files[0];
    
    if (file) {
        const fileSize = (file.size / 1024).toFixed(2);
        const fileIcon = getFileIcon(file.type);
        
        container.innerHTML = `
            <div class="file-upload-content">
                <div class="file-info">
                    <i class="${fileIcon} file-icon"></i>
                    <div class="file-details">
                        <div class="file-name">${file.name}</div>
                        <div class="file-size">${fileSize} KB</div>
                    </div>
                    <button type="button" class="file-remove" onclick="removeFile(event, '${input.name}')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <input
                type="file"
                id="${input.name}"
                name="${input.name}"
                class="hidden"
                accept="${input.accept}"
                onchange="previewFile(event)"
                ${input.required ? 'required' : ''}
            >
        `;
    }
}

function removeFile(event, inputName) {
    event.stopPropagation();
    const container = event.target.closest('.file-upload');
    const accept = document.getElementById(inputName).accept;
    
    container.innerHTML = `
        <div class="file-upload-content">
            <i class="fas fa-cloud-upload-alt file-upload-icon"></i>
            <div class="file-upload-text">
                Clique ou arraste um arquivo aqui
                <br>
                <small>${accept === '*' ? 'Todos os formatos aceitos' : 'Formatos aceitos: ' + accept}</small>
            </div>
        </div>
        <input
            type="file"
            id="${inputName}"
            name="${inputName}"
            class="hidden"
            accept="${accept}"
            onchange="previewFile(event)"
        >
    `;
}

function getFileIcon(mimeType) {
    const icons = {
        'image': 'fas fa-file-image',
        'video': 'fas fa-file-video',
        'audio': 'fas fa-file-audio',
        'text': 'fas fa-file-alt',
        'application/pdf': 'fas fa-file-pdf',
        'application/msword': 'fas fa-file-word',
        'application/vnd.ms-excel': 'fas fa-file-excel',
        'application/vnd.ms-powerpoint': 'fas fa-file-powerpoint',
        'application/zip': 'fas fa-file-archive'
    };
    
    for (const type in icons) {
        if (mimeType.startsWith(type)) {
            return icons[type];
        }
    }
    
    return 'fas fa-file';
}
</script>
@endpush