<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Analyzer Pro</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

        :root {
            --primary: #2D3250;
            --secondary: #424769;
            --accent: #7077A1;
            --text: #F6B17A;
            --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--gradient);
            color: #fff;
            min-height: 100vh;
            overflow: hidden;
        }

        .app-container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 2rem;
        }

        .swiper-container {
            width: 100%;
            height: 90vh;
            padding: 2rem;
        }

        .swiper-slide {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .swiper-slide:hover {
            transform: translateY(-5px);
        }

        .drop-area {
            width: 100%;
            height: 70vh;
            border: 2px dashed var(--text);
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .drop-area:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: #fff;
        }

        .drop-area i {
            font-size: 4rem;
            margin-bottom: 1rem;
            color: var(--text);
        }

        .canvas-container {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    position: static; /* Certifique-se de evitar position: relative */
    overflow: visible; /* Evite overflow: hidden */
}

        canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            max-height: 100%;
        }

        #overlay-control {
    position: relative; /* Dentro do fluxo do container */
    width: 90%; /* Barra ocupa 90% da largura do container */
    margin: 10px 0; /* Espaço em relação ao canvas */
    -webkit-appearance: none;
    height: 6px;
    background: var(--accent);
    border-radius: 3px;
    outline: none;
    z-index: 1000; /* Mantém acima */
}


.canvas-container.fullscreen #overlay-control {
  z-index: 999999 !important; /* Em fullscreen */
}

.canvas-container.fullscreen {
    padding-bottom: 60px; /* Garante espaço para o controle */
}

        #overlay-control::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: var(--text);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #overlay-control::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        h3 {
            color: var(--text);
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
            text-align: center;
        }

        .loading-animation {
            width: 50px;
            height: 50px;
            border: 3px solid var(--accent);
            border-radius: 50%;
            border-top-color: var(--text);
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .comparison-results {
            background: rgba(255, 255, 255, 0.05);
            padding: 1.5rem;
            border-radius: 10px;
            margin-top: 1rem;
            max-height: 60vh;
            overflow-y: auto;
        }

        .swiper-pagination-bullet {
            background: var(--text);
            opacity: 0.5;
        }

        .swiper-pagination-bullet-active {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .app-container {
                padding: 1rem;
            }
.canvas-container.fullscreen {
  padding-bottom: 60px; /* Ajuste conforme a altura do overlay-control + margem */
}
            .swiper-slide {
                padding: 1rem;
            }

            h3 {
                font-size: 1.2rem;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <h3>Upload do Primeiro PDF</h3>
                    <div class="drop-area" id="drop-area-1">
                        <i class="fas fa-file-pdf"></i>
                        <p>Arraste e solte ou clique para selecionar</p>
                    </div>
                </div>

                <div class="swiper-slide">
                    <h3>Upload do Segundo PDF</h3>
                    <div class="drop-area" id="drop-area-2">
                        <i class="fas fa-file-pdf"></i>
                        <p>Arraste e solte ou clique para selecionar</p>
                    </div>
                </div>

                <div class="swiper-slide">
                    <h3>Análise em Andamento</h3>
                    <div class="comparison-results" id="resultados">
                        <div class="loading-animation"></div>
                        <p>Processando arquivos...</p>
                    </div>
                </div>

                <div class="swiper-slide">
                    <h3>Comparação Visual</h3>
                    <input type="range" id="overlay-control" min="0" max="1" step="0.01" value="0.5">
                    <div class="canvas-container">
                        <canvas id="overlay-canvas1"></canvas>
                        <canvas id="overlay-canvas2"></canvas>
                    </div>
                </div>

                <div class="swiper-slide">
                    <h3>Relatório de Diferenças</h3>
                    <div class="comparison-results" id="text-comparison-results">
                        <div class="loading-animation"></div>
                        <p>Gerando relatório...</p>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>

    <script>
        const pdfFiles = [null, null];
        let pdfReady = [false, false];
        let scale = 1;
	let isFullscreen = false;
        let panning = false;
        let pointX = 0;
        let pointY = 0;
	let offsetX = 0;
	let offsetY = 0;
        let start = { x: 0, y: 0 };

        function handleWheel(event) {
            event.preventDefault();
            const delta = Math.sign(event.deltaY);
            const factor = 0.1;
            if (delta > 0) {
                scale = Math.max(0.1, scale - factor);
            } else {
                scale = Math.min(5, scale + factor);
            }
            applyTransform(event.currentTarget);
        }

        function applyTransform() {
    const overlayCanvas1 = document.getElementById("overlay-canvas1");
    const overlayCanvas2 = document.getElementById("overlay-canvas2");

    // Aplica transformações nas sobreposições
    [overlayCanvas1, overlayCanvas2].forEach(canvas => {
        if (canvas) {
            canvas.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
        }
    });

    // Aplica transformações nos canvases de diferenças
    const diffCanvases = document.querySelectorAll(".pagina canvas");
    diffCanvases.forEach(diffCanvas => {
        if (diffCanvas) {
            diffCanvas.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
        }
    });
}




        function startPan(evt) {
    if (isFullscreen) {
        panning = true;
        start = { x: evt.clientX - offsetX, y: evt.clientY - offsetY };
    }
}



function move(evt) {
    if (isFullscreen && panning) {
        offsetX = evt.clientX - start.x;
        offsetY = evt.clientY - start.y;
        applyTransform();
    }
}



function endPan() {
    if (isFullscreen) {
        panning = false;
    }
}




        const swiper = new Swiper('.swiper-container', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {
                el: '.swiper-pagination',
            },
            on: {
                slideChange: () => {
                    if (swiper.activeIndex === 2 && pdfReady[0] && pdfReady[1]) {
                        compararPDFsDiferencas(pdfFiles[0], pdfFiles[1]);
                    } else if (swiper.activeIndex === 3 && pdfReady[0] && pdfReady[1]) {
                        compararPDFsOverlay(pdfFiles[0], pdfFiles[1]);
                    } else if (swiper.activeIndex === 4 && pdfReady[0] && pdfReady[1]) {
                        compararTextosPDFs(pdfFiles[0], pdfFiles[1]);
                    }
                }
            }
        });

        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

        const dropAreas = [document.getElementById("drop-area-1"), document.getElementById("drop-area-2")];

        dropAreas.forEach((dropArea, index) => {
            dropArea.addEventListener("dragover", (e) => e.preventDefault());
            dropArea.addEventListener("drop", (e) => handleFileDrop(e, index));
        });

        function handleFileDrop(event, index) {
            event.preventDefault();
            const file = event.dataTransfer.files[0];
            if (file && file.type === "application/pdf") {
                pdfFiles[index] = file;
                pdfReady[index] = true;
                event.target.innerText = `${file.name} carregado`;
                document.getElementById("resultados").innerHTML = '';
                document.getElementById("text-comparison-results").innerHTML = 'Aguarde os PDFs serem carregados...';
            } else {
                alert("Por favor, arraste um arquivo PDF.");
            }
        }

        function compararPDFsDiferencas(pdf1File, pdf2File) {
            const resultadosDiv = document.getElementById("resultados");
            resultadosDiv.innerHTML = '';

            const leitor1 = new FileReader();
            const leitor2 = new FileReader();

            leitor1.onload = function(e) {
                const dadosPDF1 = e.target.result;
                leitor2.onload = function(e) {
                    const dadosPDF2 = e.target.result;
                    processarPDFsDiferencas(dadosPDF1, dadosPDF2);
                };
                leitor2.readAsArrayBuffer(pdf2File);
            };
            leitor1.readAsArrayBuffer(pdf1File);
        }

        function compararPDFsOverlay(pdf1File, pdf2File) {
            const leitor1 = new FileReader();
            const leitor2 = new FileReader();

            leitor1.onload = function(e) {
                const dadosPDF1 = e.target.result;
                leitor2.onload = function(e) {
                    const dadosPDF2 = e.target.result;
                    processarPDFsOverlay(dadosPDF1, dadosPDF2);
                };
                leitor2.readAsArrayBuffer(pdf2File);
            };
            leitor1.readAsArrayBuffer(pdf1File);
        }

        function compararTextosPDFs(pdf1File, pdf2File) {
            const textComparisonDiv = document.getElementById("text-comparison-results");
            textComparisonDiv.innerHTML = 'Comparando textos...';

            const leitor1 = new FileReader();
            const leitor2 = new FileReader();

            leitor1.onload = function(e) {
                const dadosPDF1 = e.target.result;
                leitor2.onload = function(e) {
                    const dadosPDF2 = e.target.result;
                    processarTextosPDFs(dadosPDF1, dadosPDF2);
                };
                leitor2.readAsArrayBuffer(pdf2File);
            };
            leitor1.readAsArrayBuffer(pdf1File);
        }

        async function processarTextosPDFs(dadosPDF1, dadosPDF2) {
            const textComparisonDiv = document.getElementById("text-comparison-results");
            const pdf1 = await pdfjsLib.getDocument({ data: dadosPDF1 }).promise;
            const pdf2 = await pdfjsLib.getDocument({ data: dadosPDF2 }).promise;

            const text1 = await extractTextFromPDFDocument(pdf1);
            const text2 = await extractTextFromPDFDocument(pdf2);

            const missingInText1 = findMissingWords(text2, text1);
            const missingInText2 = findMissingWords(text1, text2);

            textComparisonDiv.innerHTML = `
                <strong>Palavras no PDF 2 mas faltando no PDF 1:</strong><br>${missingInText1.join(', ')}<br><br>
                <strong>Palavras no PDF 1 mas faltando no PDF 2:</strong><br>${missingInText2.join(', ')}
            `;
        }

        async function extractTextFromPDFDocument(pdf) {
            let fullText = '';
            for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
                const page = await pdf.getPage(pageNum);
                const textContent = await page.getTextContent();
                const pageText = textContent.items.map(item => item.str).join(' ');
                fullText += pageText + ' ';
            }
            return fullText.trim();
        }

        function findMissingWords(baseText, compareText) {
            const baseWords = new Set(baseText.split(/\s+/));
            const compareWords = new Set(compareText.split(/\s+/));
            const missingWords = [...baseWords].filter(word => !compareWords.has(word));
            return missingWords;
        }

        async function processarPDFsDiferencas(dadosPDF1, dadosPDF2) {
            const carregamento1 = pdfjsLib.getDocument({ data: dadosPDF1 });
            const carregamento2 = pdfjsLib.getDocument({ data: dadosPDF2 });

            const pdf1 = await carregamento1.promise;
            const pdf2 = await carregamento2.promise;

            const numPaginas = Math.min(pdf1.numPages, pdf2.numPages);
            const resultadosDiv = document.getElementById("resultados");

            for (let numPagina = 1; numPagina <= numPaginas; numPagina++) {
                const pagina1 = await pdf1.getPage(numPagina);
                const pagina2 = await pdf2.getPage(numPagina);

                const escala = 2;
                const viewport1 = pagina1.getViewport({ scale: escala });
                const viewport2 = pagina2.getViewport({ scale: escala });

                const largura = Math.min(viewport1.width, viewport2.width);
                const altura = Math.min(viewport1.height, viewport2.height);

                const canvas1 = document.createElement("canvas");
                const canvas2 = document.createElement("canvas");
                const diffCanvas = document.createElement("canvas");

                canvas1.width = largura;
                canvas1.height = altura;
                canvas2.width = largura;
                canvas2.height = altura;
                diffCanvas.width = largura;
                diffCanvas.height = altura;

                const contexto1 = canvas1.getContext("2d");
                const contexto2 = canvas2.getContext("2d");
                const diffContexto = diffCanvas.getContext("2d");

                await pagina1.render({ canvasContext: contexto1, viewport: viewport1 }).promise;
                await pagina2.render({ canvasContext: contexto2, viewport: viewport2 }).promise;

                const imgDados1 = contexto1.getImageData(0, 0, largura, altura);
                const imgDados2 = contexto2.getImageData(0, 0, largura, altura);
                const diffImgDados = diffContexto.createImageData(largura, altura);

                for (let i = 0; i < largura * altura * 4; i += 4) {
    // Converte os pixels da primeira imagem para grayscale
    const gray1 = 0.299 * imgDados1.data[i] + 0.587 * imgDados1.data[i + 1] + 0.114 * imgDados1.data[i + 2];
    // Converte os pixels da segunda imagem para grayscale
    const gray2 = 0.299 * imgDados2.data[i] + 0.587 * imgDados2.data[i + 1] + 0.114 * imgDados2.data[i + 2];

    // Calcula a diferença absoluta entre os valores grayscale
    const diff = Math.abs(gray1 - gray2);

    // Define um limite para identificar diferenças significativas
    if (diff > 50) {
        diffImgDados.data[i] = 255; // Vermelho (para destacar a diferença)
        diffImgDados.data[i + 1] = 0;
        diffImgDados.data[i + 2] = 0;
        diffImgDados.data[i + 3] = 255; // Transparência completa
    } else {
        diffImgDados.data[i + 3] = 0; // Tornar o pixel transparente se não houver diferença
    }
}


                diffContexto.putImageData(diffImgDados, 0, 0);

                const divPagina = document.createElement("div");
                divPagina.className = "pagina";
                const tituloPagina = document.createElement("h3");
                tituloPagina.textContent = `Diferenças na Página ${numPagina}`;
                divPagina.appendChild(tituloPagina);
                divPagina.appendChild(diffCanvas);
                resultadosDiv.appendChild(divPagina);
            }
        }

        async function processarPDFsOverlay(dadosPDF1, dadosPDF2) {
    const carregamento1 = pdfjsLib.getDocument({ data: dadosPDF1 });
    const carregamento2 = pdfjsLib.getDocument({ data: dadosPDF2 });

    const pdf1 = await carregamento1.promise;
    const pdf2 = await carregamento2.promise;

    const pagina1 = await pdf1.getPage(1);
    const pagina2 = await pdf2.getPage(1);

    const escala = 2;
    const viewport1 = pagina1.getViewport({ scale: escala });
    const viewport2 = pagina2.getViewport({ scale: escala });

    const largura = Math.min(viewport1.width, viewport2.width);
    const altura = Math.min(viewport1.height, viewport2.height);

    const overlayCanvas1 = document.getElementById("overlay-canvas1");
    const overlayCanvas2 = document.getElementById("overlay-canvas2");

    overlayCanvas1.width = largura;
    overlayCanvas1.height = altura;
    overlayCanvas2.width = largura;
    overlayCanvas2.height = altura;

    const contexto1 = overlayCanvas1.getContext("2d");
    const contexto2 = overlayCanvas2.getContext("2d");

    await pagina1.render({ canvasContext: contexto1, viewport: viewport1 }).promise;
    await pagina2.render({ canvasContext: contexto2, viewport: viewport2 }).promise;

    const canvasContainer = document.querySelector(".canvas-container");
    canvasContainer.addEventListener("wheel", handleWheel);
    canvasContainer.addEventListener("mousedown", startPan);
    canvasContainer.addEventListener("mousemove", move);
    canvasContainer.addEventListener("mouseup", endPan);
    canvasContainer.addEventListener("mouseleave", endPan);

    const overlayControl = document.getElementById("overlay-control");
    overlayControl.addEventListener("input", (e) => {
        overlayCanvas2.style.opacity = e.target.value;
    });

    overlayCanvas2.style.opacity = overlayControl.value;
}

document.addEventListener("DOMContentLoaded", () => {
    const resultadosContainer = document.getElementById("resultados");
    const canvasContainer = document.querySelector(".canvas-container");
    const overlayControl = document.getElementById("overlay-control");

    function toggleFullscreen(element) {
        if (!document.fullscreenElement) {
            element.requestFullscreen().then(() => {
                isFullscreen = true;
            }).catch(err => {
                alert(`Erro ao tentar ativar o modo de tela cheia: ${err.message}`);
            });
        } else {
            document.exitFullscreen().then(() => {
                isFullscreen = false;
            }).catch(err => {
                alert(`Erro ao tentar sair do modo de tela cheia: ${err.message}`);
            });
        }
    }

    resultadosContainer.addEventListener("dblclick", () => {
        toggleFullscreen(resultadosContainer);
    });

    canvasContainer.addEventListener("dblclick", () => {
        toggleFullscreen(canvasContainer);
    });

    // Adiciona o evento para o controle de opacidade
    overlayControl.addEventListener("input", (e) => {
        const overlayCanvas2 = document.getElementById("overlay-canvas2");
        overlayCanvas2.style.opacity = e.target.value;
    });
});


document.addEventListener("keydown", (event) => {
    const overlayCanvas2 = document.getElementById("overlay-canvas2");
    const overlayControl = document.getElementById("overlay-control");
    const moveStep = 10;

    if ([2, 3, 4].includes(swiper.activeIndex)) {
        switch (event.key) {
            case "4": // Esquerda
                offsetX -= moveStep;
                break;
            case "6": // Direita
                offsetX += moveStep;
                break;
            case "8": // Cima
                offsetY -= moveStep;
                break;
            case "2": // Baixo
                offsetY += moveStep;
                break;
            case "1": // Oculta overlay (mínimo)
                overlayControl.value = 0;
                overlayCanvas2.style.opacity = 0;
                break;
            case "3": // Mostra overlay (máximo)
                overlayControl.value = 1;
                overlayCanvas2.style.opacity = 1;
                break;
        }
        applyTransform();
    }
});





document.getElementById("overlay-control").addEventListener("input", (e) => {
    document.getElementById("overlay-canvas2").style.opacity = e.target.value;
});

document.addEventListener('fullscreenchange', () => {
  const overlayControl = document.getElementById('overlay-control');
  const canvasContainer = document.querySelector(".canvas-container");

  if (document.fullscreenElement) {
    overlayControl.style.position = 'fixed';
    overlayControl.style.bottom = '20px';
    overlayControl.style.left = '50%';
    overlayControl.style.transform = 'translateX(-50%)';
    overlayControl.style.width = '80%';
    overlayControl.style.zIndex = '999999'; // <--- Z-INDEX ALTO

    canvasContainer.classList.add('fullscreen');
  } else {
    overlayControl.style.position = 'absolute';
    overlayControl.style.bottom = '10px';
    overlayControl.style.left = '50%';
    overlayControl.style.transform = 'translateX(-50%)';
    overlayControl.style.width = '90%';
    overlayControl.style.zIndex = '1000'; // Pode manter um valor menor fora do fullscreen

    canvasContainer.classList.remove('fullscreen');
  }
});


    </script>
</body>
</html>

