<!-- Include PDF-lib library inline -->
<script>
/**
 * pdf-lib v1.17.1
 * 
 * Copyright (c) 2019-2022 Andrew Dillon
 * 
 * Licensed under the MIT License
 * http://opensource.org/licenses/mit-license.php
 */
(function (global, factory) {
  // This is a simplified version for demonstration
  // In a real implementation, the full PDF-lib library would be included
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = global || self, factory(global.PDFLib = {}));
}(this, (function (exports) { 'use strict';
  
  // Simplified PDF-lib mock implementation
  exports.PDFDocument = {
    create: function() {
      return Promise.resolve({
        getForm: function() {
          return {
            createTextField: function(name, options) {
              console.log('Created text field:', name, options);
              return {};
            },
            createCheckBox: function(name, options) {
              console.log('Created checkbox:', name, options);
              return {};
            },
            createDropdown: function(name, options) {
              console.log('Created dropdown:', name, options);
              return {};
            },
            createSignature: function(name, options) {
              console.log('Created signature field:', name, options);
              return {};
            }
          };
        },
        save: function() {
          return Promise.resolve(new Uint8Array([1, 2, 3, 4]));
        }
      });
    },
    load: function(pdfBytes) {
      return Promise.resolve({
        getForm: function() {
          return {
            getFields: function() {
              return [];
            },
            createTextField: function(name, options) {
              console.log('Created text field:', name, options);
              return {};
            }
          };
        },
        save: function() {
          return Promise.resolve(new Uint8Array([1, 2, 3, 4]));
        }
      });
    }
  };

  exports.rgb = function(r, g, b) {
    return { r: r, g: g, b: b };
  };

  exports.degrees = function(deg) {
    return deg;
  };

})));
</script>

<div
    x-data="{
        fields: @entangle('fields').defer,
        drawingMode: @entangle('drawingMode').defer,
        selectedFieldType: @entangle('selectedFieldType').defer,
        selectedFieldId: @entangle('selectedFieldId').defer,
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0,
        drawing: false,
        
        init() {
            this.$el.addEventListener('mousedown', this.startDrawing.bind(this));
            this.$el.addEventListener('mousemove', this.draw.bind(this));
            this.$el.addEventListener('mouseup', this.endDrawing.bind(this));
            
            window.addEventListener('field-type-selected', (event) => {
                this.selectedFieldType = event.detail.type;
                this.drawingMode = true;
            });
            
            window.addEventListener('field-selected', (event) => {
                this.selectedFieldId = event.detail.fieldId;
                this.drawingMode = false;
            });
            
            window.addEventListener('field-added', (event) => {
                this.fields.push(event.detail.field);
                this.selectedFieldId = event.detail.field.field_id;
                this.drawingMode = false;
            });
            
            window.addEventListener('field-updated', (event) => {
                const index = this.fields.findIndex(field => field.field_id === event.detail.field.field_id);
                
                if (index !== -1) {
                    this.fields[index] = event.detail.field;
                }
            });
            
            window.addEventListener('field-deleted', (event) => {
                const index = this.fields.findIndex(field => field.field_id === event.detail.fieldId);
                
                if (index !== -1) {
                    this.fields.splice(index, 1);
                }
                
                this.selectedFieldId = null;
            });
        },
        
        startDrawing(event) {
            if (!this.drawingMode || !this.selectedFieldType) {
                return;
            }
            
            const rect = this.$el.getBoundingClientRect();
            this.startX = event.clientX - rect.left;
            this.startY = event.clientY - rect.top;
            this.drawing = true;
        },
        
        draw(event) {
            if (!this.drawing) {
                return;
            }
            
            const rect = this.$el.getBoundingClientRect();
            this.endX = event.clientX - rect.left;
            this.endY = event.clientY - rect.top;
            
            this.updatePreview();
        },
        
        endDrawing(event) {
            if (!this.drawing) {
                return;
            }
            
            this.drawing = false;
            
            const rect = this.$el.getBoundingClientRect();
            this.endX = event.clientX - rect.left;
            this.endY = event.clientY - rect.top;
            
            const x = Math.min(this.startX, this.endX);
            const y = Math.min(this.startY, this.endY);
            const width = Math.abs(this.endX - this.startX);
            const height = Math.abs(this.endY - this.startY);
            
            if (width < 20 || height < 20) {
                return;
            }
            
            this.$wire.handleFieldAdded({
                x: x,
                y: y,
                width: width,
                height: height
            });
            
            this.clearPreview();
        },
        
        updatePreview() {
            const preview = this.$refs.fieldPreview;
            
            if (!preview) {
                return;
            }
            
            const x = Math.min(this.startX, this.endX);
            const y = Math.min(this.startY, this.endY);
            const width = Math.abs(this.endX - this.startX);
            const height = Math.abs(this.endY - this.startY);
            
            preview.style.left = x + 'px';
            preview.style.top = y + 'px';
            preview.style.width = width + 'px';
            preview.style.height = height + 'px';
            preview.style.display = 'block';
        },
        
        clearPreview() {
            const preview = this.$refs.fieldPreview;
            
            if (!preview) {
                return;
            }
            
            preview.style.display = 'none';
        },
        
        selectField(fieldId) {
            this.$wire.selectField(fieldId);
        },
        
        getFieldClass(field) {
            let classes = 'form-field form-field-' + field.type;
            
            if (field.field_id === this.selectedFieldId) {
                classes += ' form-field-selected';
            }
            
            return classes;
        }
    }"
    class="form-editor"
    wire:key="form-editor-{{ $documentId }}"
>
    <div class="form-editor-container">
        <div class="form-editor-fields">
            <template x-for="field in fields" :key="field.field_id">
                <div
                    :class="getFieldClass(field)"
                    :style="`left: ${field.x}px; top: ${field.y}px; width: ${field.width}px; height: ${field.height}px;`"
                    @click="selectField(field.field_id)"
                >
                    <div class="form-field-label" x-text="field.name"></div>
                </div>
            </template>
            
            <div x-ref="fieldPreview" class="form-field-preview" style="display: none;"></div>
        </div>
    </div>
</div> 