$pageTitle = "PDF Field Editor - PDFDomain";
$pageDescription = "Create, edit, and manage form fields in PDF documents. Advanced field validation and interactive element creation.";
$canonicalUrl = "https://pdfdomain.com/tools/pdf-field-editor.php";
$currentTool = "pdf-field-editor";
$pageSpecificHeaders = <<<EOT
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
EOT;
include('template-header.php');
?>

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="tool-container">
                    <h2 class="text-center mb-4" style="color: #00d8ff;">PDF Field Editor</h2>
                    <p class="text-center text-muted mb-4">Visually fill and edit PDF forms in your browser <b>without uploading</b></p>
                    <div id="alertArea"></div>

                    <form id="uploadForm" class="mb-4" enctype="multipart/form-data" onsubmit="return false;">
                        <input type="file" id="pdf-input" accept=".pdf" class="d-none" aria-label="Select PDF file">
                        <div class="upload-area" id="dropZone" aria-label="Drag and drop PDF file here or click to select">
                            <div class="text-center">
                                <i class="fas fa-pen-square fa-3x mb-3 text-primary"></i>
                                <h5>Drag & Drop your PDF here</h5>
                                <p class="text-muted">or</p>
                                <button type="button" class="btn btn-primary" onclick="document.getElementById('pdf-input').click()">
                                    <i class="fas fa-upload me-2"></i>Choose PDF File
                                </button>
                                <p class="text-muted mt-2">Maximum file size: 10MB</p>
                            </div>
                        </div>
                    </form>

                    <div id="initial-upload-container" style="display: none;">
                        <!-- This will be shown when no file is selected -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="pdf-main-ui" style="display:none;">
        <div class="container-fluid p-4">
            <div class="row">
                <div class="col">
                    <div class="pdf-container">
                        <canvas id="pdf-viewer"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="toolbar" style="display: none;">
        <button id="btn-show-fields">
            <i class="fas fa-eye"></i>
            <span>Show Fields</span>
        </button>
        <button id="btn-hide-fields">
            <i class="fas fa-eye-slash"></i>
            <span>Hide Fields</span>
        </button>
        <button id="btn-save-pdf">
            <i class="fas fa-save"></i>
            <span>Save PDF</span>
        </button>
    </div>

    <div class="field-editor">
        <button class="btn-close-editor">&times;</button>
        <h3 class="mb-4">Edit Field</h3>
        <div class="mb-3">
            <label>Field Name</label>
            <input type="text" id="field-name" readonly>
        </div>
        <div class="mb-3">
            <label>Field Type</label>
            <input type="text" id="field-type" readonly>
        </div>
        <div class="mb-3">
            <label>Value</label>
            <input type="text" id="field-value">
        </div>
        <button class="btn btn-primary w-100" id="btn-save-field">
            <i class="fas fa-save me-2"></i>Save Changes
        </button>
    </div>

    <div class="loading-overlay" style="display: none;">
        <div class="loading-spinner"></div>
    </div>

    <div class="page-nav" style="display:none;">
        <button class="btn-prev"><i class="fas fa-chevron-left"></i></button>
        <span class="page-num">Page 1 of 1</span>
        <button class="btn-next"><i class="fas fa-chevron-right"></i></button>
    </div>

    
    <script>
        // Initialize PDF.js
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

        let currentPdf = null;
        let currentPage = 1;
        let formFields = [];
        let selectedField = null;
        let showFields = true;

        // Drag and drop functionality
        const dropZone = document.getElementById('dropZone');
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, preventDefaults, false);
        });
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        ['dragenter', 'dragover'].forEach(eventName => {
            dropZone.addEventListener(eventName, highlight, false);
        });
        ['dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, unhighlight, false);
        });
        function highlight(e) {
            dropZone.classList.add('drag-over');
        }
        function unhighlight(e) {
            dropZone.classList.remove('drag-over');
        }
        dropZone.addEventListener('drop', handleDrop, false);
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        }
        dropZone.addEventListener('click', (e) => {
            if (e.target.tagName === 'BUTTON') {
                return;
            }
            e.preventDefault();
            e.stopPropagation();
            document.getElementById('pdf-input').click();
        });

        // Load PDF file
        document.getElementById('pdf-input').addEventListener('change', async function(e) {
            const file = e.target.files[0];
            if (!file) return;
            handleFile(file);
        });

        function showAlert(message, type = 'danger') {
            const alertArea = document.getElementById('alertArea');
            alertArea.innerHTML = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
        }

        async function handleFile(file) {
            if (!file.type.includes('pdf')) {
                showAlert('Please select a PDF file.', 'danger');
                return;
            }
            if (file.size > 10 * 1024 * 1024) {
                showAlert('File size must be less than 10MB.', 'danger');
                return;
            }

            showLoading();
            try {
                const arrayBuffer = await file.arrayBuffer();
                // Clone the buffer for each library to avoid detachment
                const bufferForPdfjs = arrayBuffer.slice(0);
                const bufferForPdfLib = arrayBuffer.slice(0);

                window._pdfjsDoc = await pdfjsLib.getDocument({data: bufferForPdfjs}).promise;
                currentPdf = await PDFLib.PDFDocument.load(bufferForPdfLib);
                window._pdfjsTotalPages = window._pdfjsDoc.numPages;
                currentPage = 1;

                // Get form fields
                const form = currentPdf.getForm();
                formFields = form.getFields();

                // Hide upload form, show main UI
                document.getElementById('uploadForm').style.display = 'none';
                document.getElementById('pdf-main-ui').style.display = 'block';

                // Render first page
                await renderPage(currentPage);

                // Show toolbar
                document.querySelector('.toolbar').style.display = 'flex';

                // Show field overlays
                showFieldOverlays();

                // Show page navigation
                document.querySelector('.page-nav').style.display = 'flex';
                updatePageNav();
            } catch (error) {
                console.error('Error loading PDF:', error);
                alert('Error loading PDF. Please try again.');
            }
            hideLoading();
        });

        // Page navigation
        function updatePageNav() {
            const pageNav = document.querySelector('.page-nav');
            if (!window._pdfjsDoc) return;
            pageNav.querySelector('.page-num').textContent = `Page ${currentPage} of ${window._pdfjsTotalPages}`;
            pageNav.querySelector('.btn-prev').disabled = currentPage === 1;
            pageNav.querySelector('.btn-next').disabled = currentPage === window._pdfjsTotalPages;
        }
        document.querySelector('.btn-prev').addEventListener('click', async () => {
            if (currentPage > 1) {
                currentPage--;
                await renderPage(currentPage);
                updatePageNav();
            }
        });
        document.querySelector('.btn-next').addEventListener('click', async () => {
            if (currentPage < window._pdfjsTotalPages) {
                currentPage++;
                await renderPage(currentPage);
                updatePageNav();
            }
        });

        // Render PDF page
        async function renderPage(pageNumber) {
            const canvas = document.getElementById('pdf-viewer');
            const context = canvas.getContext('2d');
            
            try {
                // Get the PDF document
                const pdfDoc = await pdfjsLib.getDocument(await currentPdf.save()).promise;
                const page = await pdfDoc.getPage(pageNumber);
                
                // Calculate scale to fit the container
                const container = document.querySelector('.pdf-container');
                const containerWidth = container.clientWidth;
                const viewport = page.getViewport({ scale: 1.0 });
                const scale = containerWidth / viewport.width;
                
                // Set canvas dimensions
                const scaledViewport = page.getViewport({ scale: scale });
                canvas.width = scaledViewport.width;
                canvas.height = scaledViewport.height;
                
                // Render the page
                await page.render({
                    canvasContext: context,
                    viewport: scaledViewport
                }).promise;

                // After rendering, show field overlays
                showFieldOverlays();
            } catch (error) {
                console.error('Error rendering page:', error);
                alert('Error rendering PDF page. Please try again.');
            }
        }

        // Show field overlays
        async function showFieldOverlays() {
            if (!showFields) return;
            
            const container = document.querySelector('.pdf-container');
            const canvas = document.getElementById('pdf-viewer');
            const rect = canvas.getBoundingClientRect();
            
            // Clear existing overlays
            hideFieldOverlays();
            
            // Get form fields from pdf-lib
            const form = currentPdf.getForm();
            const fields = form.getFields();
            
            for (const field of fields) {
                try {
                    const fieldType = field.constructor.name;
                    const fieldName = field.getName();
                    const fieldValue = field.getValue();
                    
                    // Get field rectangle from pdf-lib
                    const fieldRect = field.acroField.getRectangle();
                    
                    // Create overlay
                    const overlay = document.createElement('div');
                    overlay.className = 'field-overlay';
                    overlay.dataset.fieldName = fieldName;
                    overlay.dataset.fieldType = fieldType;
                    overlay.dataset.fieldValue = fieldValue;
                    
                    // Calculate position and size based on PDF coordinates
                    const scale = canvas.width / rect.width;
                    const left = (fieldRect.x / scale) + '%';
                    const top = (fieldRect.y / scale) + '%';
                    const width = ((fieldRect.width) / scale) + 'px';
                    const height = ((fieldRect.height) / scale) + 'px';
                    
                    overlay.style.left = left;
                    overlay.style.top = top;
                    overlay.style.width = width;
                    overlay.style.height = height;
                    
                    // Add click handler
                    overlay.addEventListener('click', () => {
                        selectedField = field;
                        showFieldEditor(fieldName, fieldType, fieldValue);
                    });
                    
                    container.appendChild(overlay);
                } catch (error) {
                    console.error('Error creating overlay for field:', field?.getName?.() || '[unknown]', error);
                }
            }
        }

        // Hide field overlays
        function hideFieldOverlays() {
            document.querySelectorAll('.field-overlay').forEach(overlay => overlay.remove());
        }

        // Show field editor
        function showFieldEditor(name, type, value) {
            const editor = document.querySelector('.field-editor');
            document.getElementById('field-name').value = name;
            document.getElementById('field-type').value = type;
            document.getElementById('field-value').value = value;
            editor.classList.add('active');
        }

        // Hide field editor
        document.querySelector('.btn-close-editor').addEventListener('click', () => {
            document.querySelector('.field-editor').classList.remove('active');
        });

        // Save field changes
        document.getElementById('btn-save-field').addEventListener('click', async () => {
            if (!selectedField) return;
            
            const newValue = document.getElementById('field-value').value;
            selectedField.setValue(newValue);
            
            // Re-render page to show changes
            await renderPage(currentPage);
            
            // Hide editor
            document.querySelector('.field-editor').classList.remove('active');
        });

        // Show/hide fields
        document.getElementById('btn-show-fields').addEventListener('click', () => {
            showFields = true;
            showFieldOverlays();
        });

        document.getElementById('btn-hide-fields').addEventListener('click', () => {
            showFields = false;
            hideFieldOverlays();
        });

        // Save PDF
        document.getElementById('btn-save-pdf').addEventListener('click', async () => {
            if (!currentPdf) return;
            
            showLoading();
            try {
                const modifiedPdfBytes = await currentPdf.save();
                const blob = new Blob([modifiedPdfBytes], {type: 'application/pdf'});
                const url = URL.createObjectURL(blob);
                
                const link = document.createElement('a');
                link.href = url;
                link.download = 'modified.pdf';
                link.click();
                
                URL.revokeObjectURL(url);
            } catch (error) {
                console.error('Error saving PDF:', error);
                alert('Error saving PDF. Please try again.');
            }
            hideLoading();
        });

        // Loading overlay
        function showLoading() {
            document.querySelector('.loading-overlay').style.display = 'flex';
        }

        function hideLoading() {
            document.querySelector('.loading-overlay').style.display = 'none';
        }
    </script>
    </div><!-- End of main-content -->
    
    <footer class="footer" id="contact" role="contentinfo">
        <div class="container">
            <div class="footer-main">
                <div class="footer-top">
                    <div class="footer-brand">
                        <a href="../index.php" class="footer-logo">
                            <div class="footer-logo-icon">
                                <i class="fas fa-file-pdf"></i>
                            </div>
                            <div class="footer-logo-text">PDF<span>Domain</span></div>
                        </a>
                        <p class="footer-brand-description">
                            The world's most trusted PDF platform. Transform, analyze, and optimize your documents with cutting-edge AI technology. Trusted by millions of professionals worldwide.
                        </p>
                        <div class="footer-social">
                            <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                    <div class="footer-section">
                        <h4 class="footer-section-title">Core Tools</h4>
                        <ul class="footer-links">
                            <li><a href="pdf-merger.php" class="footer-link">PDF Merger</a></li>
                            <li><a href="pdf-splitter.php" class="footer-link">PDF Splitter</a></li>
                            <li><a href="pdf-metadata.php" class="footer-link">PDF Metadata</a></li>
                            <li><a href="pdf-form-filler.php" class="footer-link">Form Filler</a></li>
                            <li><a href="pdf-rotate.php" class="footer-link">PDF Rotate</a></li>
                        </ul>
                    </div>
                    <div class="footer-section">
                        <h4 class="footer-section-title">AI-Powered</h4>
                        <ul class="footer-links">
                            <li><a href="ai-pdf-summarizer.php" class="footer-link">AI Summarizer</a></li>
                            <li><a href="ai-pdf-qa.php" class="footer-link">AI Q&A</a></li>
                            <li><a href="ai-pdf-to-image.php" class="footer-link">AI to Image</a></li>
                            <li><a href="generate-image.php" class="footer-link">Smart Image Creation</a></li>
                        </ul>
                    </div>
                    <div class="footer-section">
                        <h4 class="footer-section-title">Conversion</h4>
                        <ul class="footer-links">
                            <li><a href="pdf-to-word.php" class="footer-link">PDF to Word</a></li>
                            <li><a href="pdf-to-excel.php" class="footer-link">PDF to Excel</a></li>
                            <li><a href="pdf-to-image.php" class="footer-link">PDF to Image</a></li>
                            <li><a href="word-to-pdf.php" class="footer-link">Word to PDF</a></li>
                            <li><a href="excel-to-pdf.php" class="footer-link">Excel to PDF</a></li>
                        </ul>
                    </div>
                    <div class="footer-section">
                        <h4 class="footer-section-title">Support</h4>
                        <ul class="footer-links">
                            <li><a href="#" class="footer-link">Help Center</a></li>
                            <li><a href="#" class="footer-link">API Documentation</a></li>
                            <li><a href="#" class="footer-link">Tutorials</a></li>
                            <li><a href="#" class="footer-link">Contact Us</a></li>
                        </ul>
                    </div>
                </div>
                <div class="footer-newsletter">
                    <div class="newsletter-content">
                        <h3 class="newsletter-title">Stay Updated</h3>
                        <p class="newsletter-description">Get the latest features, tips, and industry insights delivered to your inbox.</p>
                        <form class="newsletter-form">
                            <input type="email" class="newsletter-input" placeholder="Enter your email address" required>
                            <button type="submit" class="newsletter-btn">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-bottom-content">
                    <div class="footer-copyright">
                        © 2025 PDFDomain. All rights reserved.
                    </div>
                    <ul class="footer-legal">
                        <li><a href="#" class="footer-link">Privacy Policy</a></li>
                        <li><a href="#" class="footer-link">Terms of Service</a></li>
                        <li><a href="#" class="footer-link">Cookie Policy</a></li>
                        <li><a href="#" class="footer-link">Security</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <button class="back-to-top" onclick="scrollToTop()" aria-label="Back to top">
            <i class="fas fa-arrow-up"></i>
        </button>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../assets/js/footer-check.js"></script>
    </body>
</html>