{% extends 'myapp/base.html' %}
{% load static %}
{% block content %}
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container">

            <div class="row my-5">
                <div class="col-sm-6 text-center" class="btn-group" id="btn-group" style="display: flex; gap: 3rem;">
                    <a href="{{request.META.HTTP_REFERER|escape}}" style="display: none;" id="back"
                        class="btn">Back</a>
                    <button id="send" style="display: none;" class="btn btn-primary">Send</button>
                    <h3 class="text-bold" style="display: none;" id="sending">Document sending to recipients...</h3>
                </div>

            </div><!-- /.row -->

        </div><!-- /.container-fluid -->
    </div>
    <section class="content">
        <div class="container">


            <section class="row">
                <section class="col-sm-12 col-md-12 col-lg-3">
                    <div id="image-container">
                        <h6>Signature Here</h6>
                        <img class="draggable-image" data-id="signature" src="{% static 'images/sign here2.png' %}"
                            draggable="true" width="200" height="100" alt="Draggable Image">

                        <h6 class="mt-5">Stamp Here</h6>
                        <img class="draggable-image" data-id="stamp" src="{% static 'images/stamp.jpg' %}"
                            draggable="true" width="200" height="100" alt="Draggable Image">

                    </div>
                    <div id="context-menu" class="context-menu">
                        <ul>
                            <li class="my-4" data-image="signature">Signature</li>
                            <li data-image="stamp">Stamp</li>
                        </ul>
                    </div>

                </section>
                <section class="col-lg-8 col-md-12 col-sm-12">
                    <div class="pdf_container" id="pdfcontainer">
                        <form action="" method="post">
                            {% csrf_token %}
                            
                        </form>
                        <img id="docpdf" src="{{document.document.url}}" alt="">
                    </div>
                </section>

            </section>

    </section>
    <footer class="text-center">
        <div class="copy-right">

            <p>Copyrights © 2024 digisigndoc.com</p>

        </div>
    </footer>


</div>
</section>

<script>
    let btn_group = document.getElementById('btn-group');
    // let navbar = document.getElementById('navbar')
    // let ctx = null;
    // console.log(navbar);

    // window.addEventListener('scroll', function () {
    //     if (window.pageYOffset > 200) {
    //         console.log('hello...');
    //         navbar.classList.add('sticky');
    //         btn_group.classList.add('Sticky');
    //     } else {
    //         navbar.classList.remove('sticky');
    //         btn_group.classList.remove('Sticky');
    //     }
    // })
    document.addEventListener('DOMContentLoaded', (event) => {
        const images = [];
        const count = 0;
        console.log('call');
        const pdf_url = document.getElementById('docpdf').src;
        const imageContainer = document.getElementById('image-container');
        let currentDraggedImage = null;
        let selectedImage = null;
        let draggable = false;
        let isRendering = false;  // Flag to track rendering state
        const renderedPages = [];
        const contextMenu = document.getElementById('context-menu');
        let send = document.getElementById('send')
        let back = document.getElementById('back')

        let rightClickPos = { x: 0, y: 0 };

        // Add event listeners to each image in the image container
        imageContainer.querySelectorAll('.draggable-image').forEach(img => {
            img.addEventListener('dragstart', (event) => {
                currentDraggedImage = event.target;
            });
        });
        window.addEventListener('click', function () {
            contextMenu.style.display = 'none';
        })
        console.log(pdf_url);
        let pdfdoc = null;
        let pdfcontainer = document.getElementById('pdfcontainer');
        pdfjsLib.getDocument(pdf_url).promise.then(function (pdfDoc_) {
            pdfdoc = pdfDoc_;
            console.log(pdfdoc.numPages);
            for (let num = 1; num <= pdfdoc.numPages; num++) {
                renderpage(num);
            }
        });

        function renderpage(num) {
            pdfdoc.getPage(num).then((page) => {
                const viewport = page.getViewport({ scale: getScale() });
                const canvas = document.createElement('canvas');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                console.log(canvas.width);
                canvas.className = 'pdf_canvas';
                const ctx = canvas.getContext('2d');

                pdfcontainer.appendChild(canvas);
                function getScale() {
                    if (window.innerWidth <= 576) {
                        // Mobile and tablet (scale = 0.5)

                        return 1
                    } else {
                        // Desktop (scale = 1)
                        return 1.5;
                    }
                }
                const renderCtx = {
                    canvasContext: ctx,
                    viewport: viewport
                };


                let renderPromise = page.render(renderCtx).promise;

                renderPromise.then(() => {
                    renderedPages[num - 1] = ctx.getImageData(0, 0, canvas.width, canvas.height);

                    // Prevent default behavior (Prevent file from being opened)
                    canvas.addEventListener('dragover', (event) => {
                        event.preventDefault();
                    });

                    // Add click event listener after the page is rendered
                    canvas.addEventListener('drop', function (event) {
                        send.style.display = "block";
                        back.style.display = "block";
                        const rect = canvas.getBoundingClientRect();
                        const x = event.clientX - rect.left;
                        const y = event.clientY - rect.top;
                        console.log(x, y)
                        const img = new Image();
                        img.src = currentDraggedImage.src;
                        img.onload = function () {
                            ctx.drawImage(img, x - 100, y - 20, 200, 50);
                            images.push({ type: currentDraggedImage.dataset.id, img: img, x: x - 100, y: y - 20, width: 200, height: 50, added: false, page: num });
                            console.log(images);

                        };
                    });

                    // Add mousedown, mousemove, and mouseup event listeners for dragging
                    canvas.addEventListener('mousedown', (event) => {
                        const rect = canvas.getBoundingClientRect();
                        const x = event.clientX - rect.left;
                        const y = event.clientY - rect.top;
                        console.log(x, y);
                        for (let i = images.length - 1; i >= 0; i--) {
                            const image = images[i];
                            if (x >= image.x && x <= image.x + image.width &&
                                y >= image.y && y <= image.y + image.height) {
                                console.log('image click');
                                draggable = true;
                                selectedImage = image;
                                images.splice(i, 1);  // Remove the selected image from the array

                                break;
                            }
                            console.log('image didnt click');
                        }
                    });

                    canvas.addEventListener('mousemove', (event) => {
                        if (draggable && selectedImage && !isRendering) {
                            isRendering = true;  // Set rendering flag to true
                            const rect = canvas.getBoundingClientRect();
                            const x = event.clientX - rect.left;
                            const y = event.clientY - rect.top;
                            // Clear only the area where the image was previously
                            ctx.putImageData(renderedPages[num - 1], 0, 0);

                            // Draw all images
                            for (const image of images) {
                                if (image.page === num) {
                                    ctx.drawImage(image.img, image.x, image.y, image.width, image.height);
                                }

                            }

                            // Draw the selected image at its new position
                            selectedImage.x = x - 100;
                            selectedImage.y = y - 20;
                            ctx.drawImage(selectedImage.img, selectedImage.x, selectedImage.y, selectedImage.width, selectedImage.height);

                            isRendering = false;  // Reset rendering flag
                        }
                    });


                    canvas.addEventListener('mouseup', (event) => {
                        if (draggable && selectedImage) {
                            images.push(selectedImage);  // Add the selected image back to the array

                            draggable = false;
                            selectedImage = null;
                        }
                    });
                    canvas.addEventListener('contextmenu', (event) => {
                        console.log(event);
                        console.log('right click');
                        event.preventDefault();
                        const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
                        const scrollY = window.pageYOffset || document.documentElement.scrollTop;

                        rightClickPos = {
                            x: event.clientX,
                            y: event.clientY,
                            page: num,

                        };
                        console.log(rightClickPos);
                        contextMenu.style.top = `${rightClickPos.y + scrollY}px`;
                        contextMenu.style.left = `${rightClickPos.x + scrollX}px`;
                        contextMenu.style.display = 'block';

                    });

                });
            });
        }




        contextMenu.querySelectorAll('li').forEach(item => {
            item.addEventListener('click', (event) => {
                console.log(event);
                const imageType = event.target.dataset.image;
                const img = new Image();
                img.src = imageContainer.querySelector(`.draggable-image[data-id=${imageType}]`).src;
                img.onload = function () {
                    console.log(img);

                    const canvas = document.elementFromPoint(rightClickPos.x, rightClickPos.y);
                    const ctx = canvas.getContext('2d');
                    const rect = canvas.getBoundingClientRect();
                    const x = rightClickPos.x - rect.left;
                    const y = rightClickPos.y - rect.top;
                    ctx.drawImage(img, x - 100, y - 20, 200, 50);
                    images.push({ type: imageType, img: img, x: x - 100, y: y - 20, width: 200, height: 50, added: false, page: rightClickPos.page });
                    console.log(images);
                    send.style.display = "block";
                    back.style.display = "block";
                };
                contextMenu.style.display = 'none';
            });
        });






        sending = document.getElementById('sending')
        send.addEventListener('click', async function (e) {
            sending.style.display = 'block';
            
            send.style.display = 'none';
            back.style.display = 'none';
            const canvases = document.getElementsByClassName('pdf_canvas');
            const pdfDoc = await PDFLib.PDFDocument.create();

            for (let i = 0; i < canvases.length; i++) {
                const canvas = canvases[i];
                const pngDataUrl = canvas.toDataURL('image/png');
                const pngImage = await pdfDoc.embedPng(pngDataUrl);
                const page = pdfDoc.addPage([canvas.width, canvas.height]);
                page.drawImage(pngImage, {
                    x: 0,
                    y: 0,
                    width: canvas.width,
                    height: canvas.height,
                });
            }

            const pdfBytes = await pdfDoc.save();
            saveupdatedPDF(pdfBytes);
        });

        function saveupdatedPDF(pdfBytes) {
            console.log('call');
            const formData = new FormData();

            const blob = new Blob([pdfBytes], { type: 'application/pdf' });
            
            formData.append('pdf', blob);
            formData.append('doc_id', '{{document.id}}');
            
            // Serialize images array
            const serializedImages = JSON.stringify(images);
            formData.append('images', serializedImages);
            console.log(formData);
            csrf_token = document.querySelector('input[name="csrfmiddlewaretoken"]');
            fetch('', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': csrf_token.value
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {

                        window.location.href = 'https://dev.arushhr.com/agreements-sent';
                    } else {

                        sending.textContent = data.message;
                        
                    }
                });
        }

    });



</script>

</div>
{% endblock %}