<x-livewire-pdf::layouts.pdf-editor>
    <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
        <div class="pdf-editor-container">
            <div class="pdf-editor-toolbar">
                <livewire:toolbar :documentId="$document->hash" />
            </div>
            
            <div class="pdf-editor-content">
                <div class="pdf-editor-sidebar">
                    <livewire:field-properties :documentId="$document->hash" />
                </div>
                
                <div class="pdf-editor-main">
                    <livewire:pdf-viewer :documentId="$document->hash" />
                    <livewire:form-editor :documentId="$document->hash" />
                </div>
            </div>
            
            <div class="pdf-editor-preview">
                <livewire:preview-mode :documentId="$document->hash" />
            </div>
        </div>
    </div>
    
    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize the PDF editor
            window.addEventListener('pdf-editor-initialized', function() {
                console.log('PDF Editor initialized');
            });
            
            // Handle field selection
            window.addEventListener('field-selected', function(event) {
                console.log('Field selected:', event.detail.fieldId);
            });
            
            // Handle field addition
            window.addEventListener('field-added', function(event) {
                console.log('Field added:', event.detail.field);
            });
            
            // Handle field update
            window.addEventListener('field-updated', function(event) {
                console.log('Field updated:', event.detail.field);
            });
            
            // Handle field deletion
            window.addEventListener('field-deleted', function(event) {
                console.log('Field deleted:', event.detail.fieldId);
            });
            
            // Handle PDF saving
            window.addEventListener('pdf-saved', function(event) {
                console.log('PDF saved:', event.detail.path);
                console.log('Download URL:', event.detail.url);
            });
            
            // Handle errors
            window.addEventListener('error', function(event) {
                console.error('Error:', event.detail.message);
                alert('Error: ' + event.detail.message);
            });
        });
    </script>
    @endpush
</x-livewire-pdf::layouts.pdf-editor> 