
<div>

    <pre>xd {{ print_r($acceptedFileTypes, true) }}</pre>
    <div class= "d-none">
        <h3>File Upload Status</h3>
    
        <!-- Total Files -->
        <p>Total Files Added: {{ $totalFiles }}</p>
        <p>Total Size of Added Files: {{ $totalSize }} bytes ({{ $formattedTotalSize }})</p>
    
        <!-- Invalid Files -->
        <h4>Invalid Files ({{ $invalidFileCount }}):</h4>
        @if(count($invalidFiles) > 0)
            <ul>
                @foreach($invalidFiles as $file)
                    <li>{{ $file['path'] }} - {{ $file['name'] }} - {{ $file['size'] }} bytes</li>
                @endforeach
            </ul>
        @else
            <p>No invalid files.</p>
        @endif
    
        <!-- Pending Files -->
        <h4>Pending Files ({{ count($filesAdded) }}):</h4>
        @if(count($filesAdded) > 0)
            <ul>
                @foreach($filesAdded as $file)
                    <li>{{ $file['originalpath'] }} - {{ $file['name'] }} - {{ $file['size'] }} bytes</li>
                @endforeach
            </ul>
        @else
            <p>No pending files.</p>
        @endif
    
        <!-- Successfully Uploaded Files -->
        <h4>Successfully Uploaded Files ({{ $successfulUploads }}):</h4>
        @if(count($uploadedFiles) > 0)
            <ul>
                @foreach($uploadedFiles as $file)
                    <li>{{ $file['originalpath'] }} - {{ $file['path'] }} - {{ $file['name'] }} - {{ $file['size'] }} bytes</li>
                @endforeach
            </ul>
            <p>Total Size of Uploaded Files: {{ $successfulUploadSize }} bytes ({{ $formattedSuccessfulUploadSize }})</p>
        @else
            <p>No files have been uploaded yet.</p>
        @endif
    
        <!-- Upload Errors -->
        <h4>Upload Errors:</h4>
        @if(count($uploadErrors) > 0)
            <ul>
                @foreach($uploadErrors as $filename => $error)
                    <li>{{ $filename }}: {{ $error }}</li>
                @endforeach
            </ul>
        @else
            <p>No upload errors.</p>
        @endif
    </div>

    <div
    wire:ignore
    x-data
    x-init="() => {
        const post = FilePond.create($refs.input);

        post.setOptions({
            allowMultiple: @js($multiple),
            server: {
                url: '../',
                process: {
                    url: './api/v1/file-entries',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    withCredentials: false,
                    ondata: (formData) => {
                        const file = formData.get('file'); // Ensure the file is retrieved
                        console.dir(file);
                        // Check if the file object exists and has a valid relativePath
                        let relativePath = file ? (file.webkitRelativePath && file.webkitRelativePath !== '' ? file.webkitRelativePath : file.name) : '';
            
                        formData.append('workspaceId', '0');
                        formData.append('parentId', '');
                        formData.append('relativePath', relativePath); // Ensure it’s never undefined
                        formData.append('disk', 'uploads');
            
                        return formData;
                    }
                },
            },
                   
            name: 'file',
            allowImagePreview: @js($allowImagePreview),
            imagePreviewMaxHeight: @js($imagePreviewMaxHeight),
            allowFileTypeValidation: @js($allowFileTypeValidation),
            labelFileTypeNotAllowed: 'Invalid file type',
            fileValidateTypeLabelExpectedTypes: 'Expects {lastType}',
            acceptedFileTypes: {!! str_replace('"', "'", json_encode($acceptedFileTypes, JSON_UNESCAPED_SLASHES)) !!}, // ✅ Remove \/

            allowFileSizeValidation: @js($allowFileSizeValidation),
            maxFileSize: @js($maxFileSize),
            onaddfile: (error, fileItem) => {

                const file = fileItem.file;

                console.log('%c📂 File Added:', 'color: green; font-weight: bold;');
                console.log('✅ Name:', file.name);
                console.log('📏 Size:', (file.size / 1024).toFixed(2) + ' KB');
                console.log('🖹 Type:', file.type);
                console.log('📌 Relative Path:', file.webkitRelativePath || file.name);
                console.log('🛠 Metadata:', fileItem.getMetadata());

        
                // Debug all selected files
                const files = post.getFiles();
                const totalFiles = files.length;
                const totalSize = files.reduce((sum, item) => sum + item.file.size, 0);
            
                console.log('%c📊 Upload Summary:', 'color: blue; font-weight: bold;');
                console.log('📌 Total Files:', totalFiles);
                console.log('📦 Total Size:', (totalSize / 1024).toFixed(2) + ' KB');
            
                // Show structured debugging in JSON format
                console.log('%c📝 Debug JSON:', 'color: purple; font-weight: bold;');
                console.log(JSON.stringify({
                    file_name: file.name,
                    file_size: file.size,
                    file_type: file.type,
                    relative_path: file.webkitRelativePath || file.name,
                    total_files: totalFiles,
                    total_size: totalSize
                }, null, 4));
                
                if (error) {
                    console.error('Error adding file:', error);
                    // Dispatch event for invalid file
                        @this.dispatch('file-invalid', { 
                            fileName: file.name, 
                            fileSize: file.size, 
                            fileType: file.type, 
                            relativePath : file.webkitRelativePath || file.name
                        });
                } else {
                    console.log('File added:', fileItem.file.name);
                    // Dispatch event for valid file with full details
                        @this.dispatch('file-added', { 
                            fileName: file.name, 
                            fileSize: file.size, 
                            fileType: file.type, 
                            relativePath : file.webkitRelativePath || file.name
                        });     
                }
            }
        });
    }"
>
    <input 
        type="file" 
        x-ref="input"
        @if($directory)
            webkitdirectory directory
        @endif
    />
</div>

</div>