<!DOCTYPE html>
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">

<th:block th:insert="~{fragments/common :: head(title=#{multiTool.title})}"></th:block>


<body>
    <div id="page-container">
        <div id="content-wrap">
            <div th:insert="~{fragments/navbar.html :: navbar}"></div>
            <br> <br>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-6" style="text-align: center">
                        <h2 th:text="#{multiTool.header}"></h2>
                        
                        <div id="global-buttons-container">
                            
                            <button class="btn btn-primary" onclick="addPdfs()">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                                    <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
                                    <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
                                </svg>
                            </button>
                            
                            <button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
                                    <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
                                </svg>
                            </button>
                            
                            <button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                                    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                                </svg>
                            </button>

                            <button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
                                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                                </svg>
                            </button>

                        </div>

                        <div id="pages-container"></div>

                    </div>
                </div>
            </div>
        </div>
        <div th:insert="~{fragments/footer.html :: footer}"></div>
    </div>

    <script>
        var fileName = null;
        const pagesContainer = document.getElementById("pages-container");

        // add the bottom "insert pdf" button that appears on the right when hovered over
        const bottomInsertFileButtonContainer = document.createElement('div');
        bottomInsertFileButtonContainer.classList.add("insert-file-button-container", "align-bottom");
        bottomInsertFileButtonContainer.style.transform = "translate(0, 50%)";
        
            const bottomInsertFileButton = document.createElement('button');
            bottomInsertFileButton.classList.add("btn", "btn-primary", "insert-file-button");
            bottomInsertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                                    <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
                                    <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
                                </svg>`;
            bottomInsertFileButton.onclick = e => addPdfs();
            bottomInsertFileButtonContainer.appendChild(bottomInsertFileButton);

        pagesContainer.appendChild(bottomInsertFileButtonContainer);

        function addPdfs(nextSiblingElement) {
            var input = document.createElement('input');
            input.type = 'file';
            input.multiple = true;
            input.setAttribute("accept", "application/pdf");

            input.onchange = async(e) => {
                const files = e.target.files;
                fileName = files[0].name;
                for (var i=0; i < files.length; i++) {
                    addPdfFile(files[i], nextSiblingElement);
                }

                document.querySelectorAll(".enable-on-file").forEach(element => {
                    element.disabled = false;
                });
            }

            input.click();
        }

        async function addPdfFile(file, nextSiblingElement) {
            const { renderer, pdfDocument } = await loadFile(file);

            const moveUpButtonCallback = e => {
                var imgContainer = e.target;
                while (!imgContainer.classList.contains("page-container")) {
                    imgContainer = imgContainer.parentNode;
                }
                console.log("imgContainer", imgContainer);
                const sibling = imgContainer.previousSibling;
                console.log("sibling", sibling);
                if (sibling) {
                    pagesContainer.removeChild(imgContainer);
                    pagesContainer.insertBefore(imgContainer, sibling);
                    imgContainer.scrollIntoView({
                        behavior: "instant",
                        block: "center",
                    })
                }
            };
            const moveDownButtonCallback = e => {
                var imgContainer = e.target;
                while (!imgContainer.classList.contains("page-container")) {
                    imgContainer = imgContainer.parentNode;
                }
                console.log("imgContainer", imgContainer);
                const sibling = imgContainer.nextSibling;
                console.log("sibling", sibling);
                if (sibling) {
                    pagesContainer.removeChild(imgContainer);
                    if (sibling.nextSibling) {
                        pagesContainer.insertBefore(imgContainer, sibling.nextSibling);
                        console.log("insert sibling.nextSibling", sibling.nextSibling);
                    } else {
                        pagesContainer.appendChild(imgContainer)
                        console.log("append");
                    }
                    imgContainer.scrollIntoView({
                        behavior: "instant",
                        block: "center",
                    })
                }
            };
            const rotateCCWButtonCallback = e => {
                var imgContainer = e.target;
                while (!imgContainer.classList.contains("page-container")) {
                    imgContainer = imgContainer.parentNode;
                }
                const img = imgContainer.querySelector("img");
                
                rotateElement(img, -90)
            };
            const rotateCWButtonCallback = e => {
                var imgContainer = e.target;
                while (!imgContainer.classList.contains("page-container")) {
                    imgContainer = imgContainer.parentNode;
                }
                const img = imgContainer.querySelector("img");
                
                rotateElement(img, 90)
            };
            const deletePageButtonCallback = e => {
                var imgContainer = e.target;
                while (!imgContainer.classList.contains("page-container")) {
                    imgContainer = imgContainer.parentNode;
                }
                pagesContainer.removeChild(imgContainer);
            };
            const insertFileButtonCallback = e => {
                var imgContainer = e.target;
                while (!imgContainer.classList.contains("page-container")) {
                    imgContainer = imgContainer.parentNode;
                }
                addPdfs(imgContainer)
            };

            for (var i=0; i < renderer.pageCount; i++) {
                const div = document.createElement('div');
                div.classList.add("page-container");

                    var img = document.createElement('img');
                    img.src = await renderer.renderPage(i);
                    img.pageIdx = i;
                    img.rend = renderer;
                    img.doc = pdfDocument;
                    div.appendChild(img);

                    const buttonContainer = document.createElement('div');
                    buttonContainer.classList.add("button-container");
                        
                        const moveUp = document.createElement('button');
                        moveUp.classList.add("move-up-button","btn", "btn-secondary");
                        moveUp.innerHTML = '<i class="bi bi-arrow-up-short"></i>';
                        moveUp.onclick = moveUpButtonCallback;
                        buttonContainer.appendChild(moveUp);

                        const moveDown = document.createElement('button');
                        moveDown.classList.add("move-down-button","btn", "btn-secondary");
                        moveDown.innerHTML = '<i class="bi bi-arrow-down-short"></i>';
                        moveDown.onclick = moveDownButtonCallback;
                        buttonContainer.appendChild(moveDown);
                        
                        const rotateCCW = document.createElement('button');
                        rotateCCW.classList.add("btn", "btn-secondary");
                        rotateCCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
                                            <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
                                        </svg>`;
                        rotateCCW.onclick = rotateCCWButtonCallback;
                        buttonContainer.appendChild(rotateCCW);

                        const rotateCW = document.createElement('button');
                        rotateCW.classList.add("btn", "btn-secondary");
                        rotateCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                                        </svg>`;
                        rotateCW.onclick = rotateCWButtonCallback;
                        buttonContainer.appendChild(rotateCW);

                        const deletePage = document.createElement('button');
                        deletePage.classList.add("btn", "btn-secondary");
                        deletePage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
                                            <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
                                        </svg>`;
                        deletePage.onclick = deletePageButtonCallback;
                        buttonContainer.appendChild(deletePage);

                    div.appendChild(buttonContainer);

                    const insertFileButtonContainer = document.createElement('div');
                    insertFileButtonContainer.classList.add("insert-file-button-container", "align-top");
                    
                        const insertFileButton = document.createElement('button');
                        insertFileButton.classList.add("btn", "btn-primary", "insert-file-button");
                        insertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
                                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
                                            </svg>`;
                        insertFileButton.onclick = insertFileButtonCallback;
                        insertFileButtonContainer.appendChild(insertFileButton);

                    div.appendChild(insertFileButtonContainer);

                if (nextSiblingElement) {
                    pagesContainer.insertBefore(div, nextSiblingElement);
                } else {
                    pagesContainer.appendChild(div);
                }
            }
        }

        function rotateElement(element, deg) {
            var lastTransform = element.style.rotate;
            if (!lastTransform) {
                lastTransform = "0";
            }
            const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
            const newAngle = lastAngle + deg;

            element.style.rotate = newAngle + "deg";
        }

        function rotateAll(deg) {
            for (var i=0; i<pagesContainer.childNodes.length; i++) {
                const img = pagesContainer.childNodes[i].querySelector("img");
                if (!img) continue;
                rotateElement(img, deg)
            }
        }

        async function exportPdf() {
            const pdfDoc = await PDFLib.PDFDocument.create();
            for (var i=0; i<pagesContainer.childNodes.length; i++) {
                const img = pagesContainer.childNodes[i].querySelector("img");
                if (!img) continue;
                const pages = await pdfDoc.copyPages(img.doc, [img.pageIdx])
                const page = pages[0];

                const rotation = img.style.rotate;
                if (rotation) {
                    const rotationAngle = parseInt(rotation.replace(/[^\d-]/g, ''));
                    console.log(img.style.rotate, img.style.rotate.replace(/[^\d-]/g, ''))
                    page.setRotation(PDFLib.degrees(page.getRotation().angle + rotationAngle))
                }
                
                pdfDoc.addPage(page);
            }
            const pdfBytes = await pdfDoc.save();
            const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
            const url = URL.createObjectURL(pdfBlob);
            const downloadOption = localStorage.getItem('downloadOption');

            if (downloadOption === 'sameWindow') {
                // Open the file in the same window
                window.location.href = url;
            } else if (downloadOption === 'newWindow') {
                // Open the file in a new window
                window.open(url, '_blank');
            } else {
                // Download the file
                const downloadLink = document.createElement('a');
                downloadLink.href = url;
                downloadLink.download = fileName ? fileName : 'managed.pdf';
                downloadLink.click();
            }
        }

        async function loadFile(file) {
            var objectUrl = URL.createObjectURL(file);
            var pdfDocument = await toPdfLib(objectUrl);
            var renderer = await toRenderer(objectUrl);
            return { renderer, pdfDocument };
        }
        async function toPdfLib(objectUrl) {
            const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
            const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes);
            return pdfDoc;
        }
        async function toRenderer(objectUrl) {
            const pdf = await pdfjsLib.getDocument(objectUrl).promise;
            return {
                document: pdf,
                pageCount: pdf.numPages,
                renderPage: async function(pageIdx) {
                    const page = await this.document.getPage(pageIdx+1);

                    const canvas = document.createElement("canvas");

                    // set the canvas size to the size of the page
                    if (page.rotate == 90 || page.rotate == 270) {
                        canvas.width = page.view[3];
                        canvas.height = page.view[2];
                    } else {
                        canvas.width = page.view[2];
                        canvas.height = page.view[3];
                    }

                    // render the page onto the canvas
                    var renderContext = {
                        canvasContext: canvas.getContext("2d"),
                        viewport: page.getViewport({ scale: 1 })
                    };

                    await page.render(renderContext).promise;
                    return canvas.toDataURL();
                }
            };
        }
    </script>

    <style>
        #global-buttons-container {
            display: flex;
            gap: 10px;
            align-items: start;

            background: rgba(13, 110, 253, 0.1);
            border: 1px solid rgba(0, 0, 0, .25);
            backdrop-filter: blur(2px);

            position: sticky;
            top: 10px;
            z-index: 10;
            padding: 10px;
            margin-top: 30px;
            border-radius: 8px;
        }
        #global-buttons-container > * {
            padding: 0.6rem 0.75rem;
        }
        #global-buttons-container svg {
            width: 20px;
            height: 20px;
        }
        #export-button {
            margin-left: auto;
        }

        #pages-container {
            width: 100%;
            display: flex;
            gap: 0px;
            flex-direction: column;
            align-items: center;
            margin: 30px 0;
        }

        .page-container {
            width: 500px;
            aspect-ratio: 1;
            text-align: center;
            position: relative;
            user-select: none;
        }

        .page-container img {
            max-width: calc(100% - 15px);
            max-height: calc(100% - 15px);
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            box-shadow: 0 0 10px rgba(0,0,0);
            transition: rotate 0.3s;
        }

        .page-container .button-container {
            position: absolute;
            top: 50%;
            translate: 0 -50%;
            right: 6px;
        }
        .page-container .button-container > * {
            padding: 0.25rem 0.5rem;
            margin: 3px;
            display: block;
        }
        .page-container svg {
            width: 16px;
            height: 16px;
        }
        .page-container:nth-child(2) .move-up-button {
            visibility: hidden;
        }
        .page-container:last-child .move-down-button {
            visibility: hidden;
        }

        /* "insert pdf" buttons that appear on the right when hover */
        .insert-file-button-container {
            translate: 0 -50%;
            width: 100%;
            height: 60px;

            z-index: 1;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .insert-file-button-container:hover {
            opacity: 1;
            transition: opacity 0.05s;
        }
        .insert-file-button {
            position: absolute;
            top: 50%;
            right: 50%;
            translate: 50% -50%;
            aspect-ratio: 1;
            border-radius: 100px;
        }

        #add-pdf-button {
            margin: 0 auto;
        }
    </style>
</body>

</html>