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

<head>
    <th:block th:insert="~{fragments/common :: head(title=#{addImage.title})}"></th:block>
    <script src="js/thirdParty/interact.min.js"></script>

</head>
<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">
                        <h2 th:text="#{addImage.header}"></h2>

                        <!-- pdf selector -->
                        <div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multiple=false, accept='application/pdf')}"></div>
                        <script>
                        	let originalFileName = '';
                            document.querySelector('input[name=pdf-upload]').addEventListener('change', async (event) => {
                                const file = event.target.files[0];
                                if (file) {
                                	originalFileName = file.name.replace(/\.[^/.]+$/, "");
                                    const pdfData = await file.arrayBuffer();
                                    pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
                                    const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
                                    await DraggableUtils.renderPage(pdfDoc, 0);

                                    document.querySelectorAll(".show-on-file-selected").forEach(el => {
                                        el.style.cssText = '';
                                    })
                                }
                            });
                            document.addEventListener("DOMContentLoaded", () => {
                                document.querySelectorAll(".show-on-file-selected").forEach(el => {
                                    el.style.cssText = "display:none !important";
                                })
                            });
                        </script>

                        <div class="tab-group show-on-file-selected">
                            <div class="tab-container" th:title="#{addImage.upload}">
                                <div th:replace="~{fragments/common :: fileSelector(name='image-upload', multiple=true, accept='image/*', inputText=#{imgPrompt})}"></div>
                                <script>
                                    const imageUpload = document.querySelector('input[name=image-upload]');
                                    imageUpload.addEventListener('change', e => {
                                        if(!e.target.files) {
                                            return;
                                        }
                                        for (const imageFile of e.target.files) {
                                            var reader = new FileReader();
                                            reader.readAsDataURL(imageFile);
                                            reader.onloadend = function (e) {
                                                DraggableUtils.createDraggableCanvasFromUrl(e.target.result);
                                            };
                                        }
                                    });
                                </script>
                            </div> 
                        </div>

                        <!-- draggables box -->
                        <div id="box-drag-container" class="show-on-file-selected">
                            <canvas id="pdf-canvas"></canvas>
                            <script src="js/draggable-utils.js"></script>
                            <div class="draggable-buttons-box ignore-rtl">
                                <button class="btn btn-outline-secondary" onclick="DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted())">
                                    <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>
                                </button>
                                <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('lang-direction')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()" style="margin-left:auto">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                                    </svg>
                                </button>
                                <button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('lang-direction')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                                    </svg>
                                </button>
                            </div>
                            <style>
                                #box-drag-container {
                                    position: relative;
                                    margin: 20px 0;
                                }
                                #pdf-canvas {
                                    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
                                    width: 100%;
                                }
                                .draggable-buttons-box {
                                    position: absolute;
                                    top: 0;
                                    padding: 10px;
                                    width: 100%;
                                    display: flex;
                                    gap: 5px;
                                }
                                .draggable-buttons-box > button {
                                    z-index: 10;
                                    background-color: rgba(13, 110, 253, 0.1);
                                }
                                .draggable-canvas {
                                    border: 1px solid red;
                                    position: absolute;
                                    touch-action: none;
                                    user-select: none;
                                    top: 0px;
                                    left: 0;
                                }
                            </style>
                        </div>

                        <!-- download button -->
                        <div class="margin-auto-parent">
                            <button id="download-pdf" class="btn btn-primary mb-2 show-on-file-selected margin-center">Download PDF</button>
                        </div>
                        <script>
                            document.getElementById("download-pdf").addEventListener('click', async() => {
                                const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
                                const modifiedPdfBytes = await modifiedPdf.save();
                                const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
                                const link = document.createElement('a');
                                link.href = URL.createObjectURL(blob);
                                link.download = originalFileName + '_addedImage.pdf';
                                link.click();
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>
        <div th:insert="~{fragments/footer.html :: footer}"></div>
    </div>
</body>
</html>