
<div>

    <div>
        <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: {
                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    console.log('📤 Uploading file:', file.name);
            
                    @this.upload('files', file, 
                        (uploadedFilename) => {
                            console.log('✅ File uploaded successfully:', uploadedFilename);
                            
                            // ✅ Dispatch event with full file details
                            @this.dispatch('upload-success', { 
                                fileName: file.name, 
                                uploadedFilename: uploadedFilename, 
                                fileSize: file.size, 
                                fileType: file.type, 
                                relativePath : file.webkitRelativePath || file.name
                            });      
                            load(uploadedFilename); // Let FilePond know upload is complete
                        }, 
                        (uploadError) => {
                            console.error('❌ File upload failed:', file.name, uploadError);
                            //@this.dispatch('upload-error', { filename: file.name, error: uploadError.message || 'Unknown error' });
                            error('Upload failed'); // Notify FilePond of the failure
                        },
                        progress // Track upload progress
                    );
                },
                revert: (filename, load) => {
                    console.log('🗑 Removing file:', filename);
                    @this.removeUpload('files', filename, load);
                },
            },
            allowImagePreview: @js($allowImagePreview),
            imagePreviewMaxHeight: @js($imagePreviewMaxHeight),
            allowFileTypeValidation: @js($allowFileTypeValidation),
            labelFileTypeNotAllowed: 'Invalid file type',
            fileValidateTypeLabelExpectedTypes: 'Expects {lastType}',
            acceptedFileTypes: [
            'application/zip','application/x-zip-compressed','application/x-rar-compressed','application/rar',
            'video/mpeg', 'video/mp4', 'video/ogg','video/webm', 'video/ogg', 'video/avi','video/quicktime',
            'text/csv',
            'application/msword',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            'application/epub+zip',
            'application/json',
            'application/vnd.oasis.opendocument.presentation',
            'application/vnd.oasis.opendocument.spreadsheet',
            'application/vnd.oasis.opendocument.text',
            'application/pdf',
            'application/vnd.ms-powerpoint',
            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
            'application/rtf',
            'image/svg+xml',
            'application/vnd.ms-excel',
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'application/xml',
            'image/png', 'image/jpeg', 'image/gif','image/tiff',
            'text/plain', 'text/csv', 'application/pdf', 'application/doc', 'application/docx',
            'application/pptx', 'application/ppt', 'application/rtf', 'application/xlsx', 'application/xls'],
            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>