static/js/script.js

// PDF Comparison Tool JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const uploadForm = document.getElementById('uploadForm');
    const loadingSection = document.getElementById('loadingSection');
    const resultsSection = document.getElementById('resultsSection');
    const errorSection = document.getElementById('errorSection');
    const errorMessage = document.getElementById('errorMessage');

    // Handle form submission
    uploadForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(uploadForm);
        const pdf1 = document.getElementById('pdf1').files[0];
        const pdf2 = document.getElementById('pdf2').files[0];

        // Validate files
        if (!pdf1 || !pdf2) {
            showError('Please select both PDF files.');
            return;
        }

        if (!pdf1.name.toLowerCase().endsWith('.pdf') || !pdf2.name.toLowerCase().endsWith('.pdf')) {
            showError('Please select valid PDF files.');
            return;
        }

        // Show loading
        showLoading();
        hideError();

        // Submit form via AJAX
        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            hideLoading();
            
            if (data.success) {
                displayResults(data.results);
            } else {
                showError(data.error || 'An error occurred during comparison.');
            }
        })
        .catch(error => {
            hideLoading();
            showError('Network error: ' + error.message);
        });
    });

    function showLoading() {
        loadingSection.style.display = 'block';
        resultsSection.style.display = 'none';
        errorSection.style.display = 'none';
    }

    function hideLoading() {
        loadingSection.style.display = 'none';
    }

    function showError(message) {
        errorMessage.textContent = message;
        errorSection.style.display = 'block';
        resultsSection.style.display = 'none';
    }

    function hideError() {
        errorSection.style.display = 'none';
    }

    function displayResults(results) {
        resultsSection.style.display = 'block';
        
        // Display visual comparison
        displayVisualComparison(results);
        
        // Display spelling issues
        displaySpellingIssues(results);
        
        // Display barcodes and QR codes
        displayBarcodes(results);
    }

    function displayVisualComparison(results) {
        const visualContent = document.getElementById('visualComparisonContent');
        let html = '<div class="row">';
        
        if (results.text_comparison && results.text_comparison.length > 0) {
            results.text_comparison.forEach((page, index) => {
                html += `
                    <div class="col-12 mb-4">
                        <h6 class="text-primary mb-3">Page ${page.page}</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <h6>PDF 1</h6>
                                ${page.annotated_images && page.annotated_images.pdf1 ? 
                                    `<img src="/static/${page.annotated_images.pdf1}" class="comparison-image" alt="PDF 1 Page ${page.page}">` :
                                    '<p class="text-muted">No differences detected</p>'
                                }
                            </div>
                            <div class="col-md-6">
                                <h6>PDF 2</h6>
                                ${page.annotated_images && page.annotated_images.pdf2 ? 
                                    `<img src="/static/${page.annotated_images.pdf2}" class="comparison-image" alt="PDF 2 Page ${page.page}">` :
                                    '<p class="text-muted">No differences detected</p>'
                                }
                            </div>
                        </div>
                        ${page.color_differences && page.color_differences.length > 0 ? 
                            `<div class="mt-3">
                                <span class="badge badge-danger">${page.color_differences.length} color difference(s) detected</span>
                            </div>` : 
                            '<div class="mt-3"><span class="badge badge-success">No color differences</span></div>'
                        }
                    </div>
                `;
            });
        } else {
            html += '<div class="col-12"><p class="text-muted">No visual comparison data available.</p></div>';
        }
        
        html += '</div>';
        visualContent.innerHTML = html;
    }

    function displaySpellingIssues(results) {
        const spellingContent = document.getElementById('spellingIssuesContent');
        let html = '';
        
        if (results.spelling_issues && results.spelling_issues.length > 0) {
            html += `
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Word</th>
                                <th>Original</th>
                                <th>English Suggestions</th>
                                <th>French Suggestions</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            results.spelling_issues.forEach(issue => {
                const englishSuggestions = issue.suggestions.english.join(', ') || 'None';
                const frenchSuggestions = issue.suggestions.french.join(', ') || 'None';
                
                html += `
                    <tr>
                        <td><strong>${issue.word}</strong></td>
                        <td><code>${issue.original_word}</code></td>
                        <td>${englishSuggestions}</td>
                        <td>${frenchSuggestions}</td>
                    </tr>
                `;
            });
            
            html += `
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <span class="badge badge-warning">${results.spelling_issues.length} spelling issue(s) found</span>
                </div>
            `;
        } else {
            html = '<div class="alert alert-success"><i class="fas fa-check me-2"></i>No spelling issues detected.</div>';
        }
        
        spellingContent.innerHTML = html;
    }

    function displayBarcodes(results) {
        const barcodesContent = document.getElementById('barcodesContent');
        let html = '';
        
        if (results.barcodes_qr_codes && results.barcodes_qr_codes.length > 0) {
            html += `
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Data</th>
                                <th>Position</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            results.barcodes_qr_codes.forEach(barcode => {
                const position = `(${barcode.rect.left}, ${barcode.rect.top}) - (${barcode.rect.left + barcode.rect.width}, ${barcode.rect.top + barcode.rect.height})`;
                
                html += `
                    <tr>
                        <td><span class="badge badge-info">${barcode.type}</span></td>
                        <td><code>${barcode.data}</code></td>
                        <td>${position}</td>
                    </tr>
                `;
            });
            
            html += `
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    <span class="badge badge-info">${results.barcodes_qr_codes.length} barcode/QR code(s) detected</span>
                </div>
            `;
        } else {
            html = '<div class="alert alert-info"><i class="fas fa-info-circle me-2"></i>No barcodes or QR codes detected.</div>';
        }
        
        barcodesContent.innerHTML = html;
    }

    // Add file input change handlers for better UX
    document.getElementById('pdf1').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const label = e.target.nextElementSibling;
            if (label && label.classList.contains('form-text')) {
                label.textContent = `Selected: ${file.name}`;
            }
        }
    });

    document.getElementById('pdf2').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const label = e.target.nextElementSibling;
            if (label && label.classList.contains('form-text')) {
                label.textContent = `Selected: ${file.name}`;
            }
        }
    });
});