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

            <div class="row mt-4">
                <div class="col-sm-12 col-lg-12 col-md-12 text-center" id="btn_group">
                    <div>
                        <h3 id="saving" style="display: none;">Your sign is saving in database, Please
                            wait...</h3>

                    </div>
                    <div id="ready" style="display: none;">
                        <h2>Ready to Finish?</h2>
                        <p class="">If You have completed the required fields. Review your work then FINISH</p>

                        <button id="finish" class="btn btn-primary" style="display: none;">Finish</button>

                    </div>

                </div>

            </div><!-- /.row -->
            <div class="row">
                <div class="col-sm-12 col-lg-12 col-md-12">
                    <div class="download_btn_group float-end">
                        <a href="{% url 'download_prepare_document' document.id %}" id="view_btn"
                            class="btn btn-primary">View Document</a>
                    </div>

                </div>
            </div>

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


            <section class="row mt-2">
                <section class="col-md-12 col-sm-12 col-lg-8">


                    <div id="btncontainer">

                        <button type="button" id="sign_next" class="btn btn-primary">signature next</button>
                        <button type="button" id="stamp_next" class="btn btn-primary">stamp next</button>

                    </div>
                    <div class="text-center">
                        <h3 id="sign_completed" class="mb-2"></h3>
                    </div>

                    <div id="pdfcontainer">

                        <img id="doc_pdf" src="{{document.document.url}}" alt="">
                    </div>


                    <div class="d-flex justify-content-center">
                        <button id="Finish" class="btn btn-primary my-4" style="display: none;">Finish</button>
                    </div>
                </section>

                <section class="col-md-12 col-sm-12 col-lg-4 mt-4">

                    <div id="chatbox">
                        <h2>AI Chatbot</h2>
                        <div id="chatbox-messages">
                            <!-- Chat messages will appear here -->
                        </div>
                        <label for="chat-input">Ask a Question</label>
                        <input type="text" id="chat-input" class="form-control" placeholder="Your Question...">
                        <button id="chat-submit" class="btn btn-primary mt-3 mb-4">Send</button>
                    </div>
                </section>

                <div class="modal fade" id="popup_modal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered custom_popup" role="document">
                        <div class="modal-content">

                            <div class="modal-body popup-content" id="popup-content">


                                <div class="btn_group mb-3">
                                    <button id="signbtn">Upload sign</button>
                                    <button id="signaturebtn">Draw Sign</button>
                                    <button id="stampbtn">Stamp</button>
                                    <button id="create_sign_btn">Create sign</button>
                                </div>
                                <form action="" method="post">
                                    <div id="sign_upload_container" class="hidden">
                                        <label for="sign_Input" class="drop-container" id="drop-container">
                                            <span class="form-icon">
                                                <img src="{% static 'images/cloud-Icon.png' %}" alt="">
                                            </span>
                                            <span class="drop-title">Drag and Drop</span>
                                            <span class="or">or</span>
                                            <div>Browse</div>
                                            <input type="file" hidden id="sign_Input" name="file" class="file"
                                                accept=".png, .jpg, .jpeg" maxlength="3.1mb">
                                        </label>
                                        <div class="file-info-container">
                                            <p id="file-info" class="mt-1">No file selected</p>

                                        </div>
                                    </div>
                                    <div id="btn_group3" class="hidden mt-3">
                                        <button type="reset" class="btn" id="clear_sign">Cancel</button>
                                        <button type="button" class="btn btn-primary" id="upload_sign"> Upload</button>
                                    </div>

                                </form>
                                <form action="" method="post" enctype="multipart/form-data" id="signature-pad-container"
                                    class="hidden">
                                    {% csrf_token %}


                                    <canvas id="signature_pad" width="560px" height="377px"></canvas>
                                    <canvas id="signature-pad-small" class="pad1" width="310px" height="230px"></canvas>

                                    <div class="btn_group2 mt-2">
                                        <button type="button" class="btn btn-primary" id="save_signature"><i
                                                class="fa-solid fa-rotate-right"></i>Save Signature</button>
                                        <button type="button" class="btn" id="clear_signature"><i
                                                class="fa-regular fa-circle-xmark"></i>Clear</button>

                                    </div>
                                </form>

                                <div id="stamp_upload" class="text-center hidden">
                                    <label for="file_Input" class="drop-container" id="drop-container2">
                                        <span class="form-icon" id="form-icon">
                                            <img src="{% static 'images/cloud-Icon.png' %}" alt="">
                                        </span>
                                        <span class="drop-title">Drag and Drop</span>
                                        <span class="or">or</span>
                                        <div>Browse</div>
                                        <input type="file" hidden id="file_Input" name="file" class="file"
                                            accept=".png, .jpg, .jpeg" maxlength="3.1mb">
                                    </label>
                                    <div class="file-info-container2">
                                        <p id="file_info" class="mt-1">No file selected</p>

                                    </div>
                                </div>
                                <div id="btn_group4" class="hidden mt-3">
                                    <button type="reset" class="btn" id="clear_stamp">Cancel</button>
                                    <button class="btn btn-primary text-center" id="save_stamp"> Add Stamp</button>
                                </div>

                                <div id="sign_images" class="">
                                    <h5>You can select existing signature</h5>
                                    <ul>
                                        {% for i in signatures %}
                                        {% if i.signature %}
                                        <li><img src="{{ i.signature.url }}" class="select_image mt-2" width="200"
                                                height="100" data-id="signature" alt=""></li>
                                        {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>

                                <div id="stamp_images" class="hidden">
                                    <h5>You can select existing stamps</h5>
                                    <ul>
                                        {% for i in stamps %}
                                        {% if i.stamp %}
                                        <li><img src="{{ i.stamp.url }}" class="select_image mt-2" width="200"
                                                height="100" data-id="signature" alt=""></li>
                                        {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="create_sign_container hidden">
                                    <h3>Enter Your Name for Signature Styles:</h3>
                                    <label for="nameInput" class="mt-2">Full Name:</label>
                                    <input type="text" id="nameInput" class="form-control"
                                        placeholder="Type your name" />

                                    <div id="signatures">
                                        <p class="signature" id="signature1"></p>
                                        <p class="signature" id="signature2"></p>
                                        <p class="signature" id="signature3"></p>
                                        <p class="signature" id="signature4"></p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </section>

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

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

        </div>
    </footer>

</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

<script>
    document.getElementById('sign_Input').addEventListener('change', function () {
        const fileInfoDisplay = document.getElementById('file-info');
        if (this.files.length > 0) {
            fileInfoDisplay.textContent = `Selected file: ${this.files[0].name}`;
        } else {
            fileInfoDisplay.textContent = 'No file selected';
        }
    });

    document.getElementById('file_Input').addEventListener('change', function () {
        const fileInfoDisplay = document.getElementById('file_info');
        if (this.files.length > 0) {
            fileInfoDisplay.textContent = `Selected file: ${this.files[0].name}`;
        } else {
            fileInfoDisplay.textContent = 'No file selected';
        }
    });

    document.addEventListener('DOMContentLoaded', (event) => {
        let btn_group = document.getElementById('content-header');


        // window.addEventListener('scroll', function () {
        //     if (window.pageYOffset > 200) {
        //         console.log('hello...');

        //         btn_group.classList.add('Sticky');
        //     } else {

        //         btn_group.classList.remove('Sticky');
        //     }
        // })
        const Popup = document.getElementById('popUp');
        const close_btn = document.querySelector('.Close');
        const signaturebtn = document.getElementById('signaturebtn');
        const stampbtn = document.getElementById('stampbtn');
        const create_sign_btn = document.getElementById('create_sign_btn');
        const signature_pad_container = document.getElementById('signature-pad-container');
        const stamp_upload = document.getElementById('stamp_upload');
        const create_sign_container = document.getElementsByClassName('create_sign_container')[0];
        const save_stamp = document.getElementById('save_stamp');
        const btn_group4 = document.getElementById('btn_group4');
        const clear_stamp = document.getElementById('clear_stamp');
        const doc_url = document.getElementById('doc_pdf').src;
        const finish_btn = document.getElementById('finish');
        // console.log(finish_btn);
        const finish_btn2 = document.getElementById('Finish');
        let currentSignIndex = 0;
        let currentStampIndex = 0;  // To keep track of the current position in the array
        const sign_next = document.getElementById('sign_next');
        const stamp_next = document.getElementById('stamp_next');
        const sign_completed = document.getElementById('sign_completed');
        let signatureAdded = false;

        const signatureCanvas = document.getElementById('signature_pad');
        const signature_pad = new SignaturePad(signatureCanvas, {
            minWidth: 1.0,
            maxWidth: 2.0,
            penColor: "rgb(0, 0, 0)"
        });
        const canvas2 = document.getElementById("signature-pad-small");
        const signaturepad2 = new SignaturePad(canvas2, {
            minWidth: 0.5,
            maxWidth: 1.5,
            penColor: "black"
        });
        const saving = document.getElementById('saving')
        const ready = document.getElementById('ready')
        const ctx = null;
        const signbtn = document.getElementById('signbtn');
        const sign_upload_container = document.getElementById('sign_upload_container');
        const upload_sign = document.getElementById('upload_sign');
        const btn_group3 = document.getElementById('btn_group3');
        const clear_sign = document.getElementById('clear_sign');
        // console.log(btn_group3);
        const positions = '{{json_data|escapejs}}'
        // console.log(positions);
        const jsonObject = JSON.parse(positions);
        const signatures = '{{signatures_json|escapejs}}'
        const sign_json = JSON.parse(signatures)
        console.log(sign_json);
        console.log(jsonObject);
        const stamps = '{{stamp_json|escapejs}}'
        const stamp_json = JSON.parse(stamps)
        let pdf_doc = null;
        let pdfcontainer = document.getElementById('pdfcontainer');
        let stampImage = null;
        let signImage = null;
        const sign_images = document.getElementById('sign_images');
        const stamp_images = document.getElementById('stamp_images');
        var myModal = new bootstrap.Modal(document.getElementById('popup_modal'));
        let signatureDataURL = null;
        const nameInput = document.getElementById('nameInput');

        const fileInput = document.getElementById('sign_Input');
        const fileInfoDisplay = document.getElementById('file-info');
        const fileInfoDisplay2 = document.getElementById('file_info');
        const images = [];
        let currentDraggedImage = null;
        let selectedImage = null;
        let selectedImage2 = null;
        let draggable = false;
        let isRendering = false;  // Flag to track rendering state
        const renderedPages = [];
        let dragging = false;
        let canvasClick = false;
        fileInput.addEventListener('change', imageUpload)

        function imageUpload() {
            if (fileInput.files.length > 0) {
                document.getElementById('drop-container').classList.add('hidden');
                fileInfoDisplay.textContent = `${fileInput.files[0].name}`;
                fileInfoDisplay.style.fontSize = '25px';
                fileInfoDisplay.style.fontWeight = '600';
                fileInfoDisplay.style.color = '#000000';
                document.getElementById('sign_upload_container').classList.add('upload_display');

                fileInfoDisplay.classList.add('hide_label');

            } else {
                fileInfoDisplay.textContent = 'No file selected';
                fileInfoDisplay.style.fontSize = '12px';
                fileInfoDisplay.style.fontWeight = '500';
                fileInfoDisplay.style.color = '#737B8B';
            }
        }

        const dropContainer = document.getElementById('sign_upload_container');
        dropContainer.addEventListener('dragover', function (e) {
            e.preventDefault();
            e.stopPropagation();
            // console.log('dragover');
        })
        dropContainer.addEventListener('drop', function (e) {
            e.preventDefault();
            e.stopPropagation();
            fileInput.files = e.dataTransfer.files;
            // console.log('drop');
            imageUpload();
        })

        clear_sign.addEventListener('click', () => {
            fileInput.value = '';
            fileInfoDisplay.textContent = 'No file selected';
            fileInfoDisplay.style.fontSize = '12px';
            fileInfoDisplay.style.fontWeight = '500';
            fileInfoDisplay.style.color = '#737B8B';
            document.getElementById('drop-container').classList.remove('hidden');


        })
        const file_Input = document.getElementById('file_Input');
        // console.log()
        file_Input.addEventListener('change', fileUpload)
        function fileUpload() {
            // console.log(file_Input.files);
            if (file_Input.files.length > 0) {
                document.getElementById('drop-container2').classList.add('hidden');
                fileInfoDisplay2.textContent = `${file_Input.files[0].name}`;
                stamp_upload.classList.add('upload_display');
                fileInfoDisplay2.style.fontSize = '25px';
                fileInfoDisplay2.style.fontWeight = '600';
                fileInfoDisplay2.style.color = '#000000';
                fileInfoDisplay.classList.add('hide_label');

            } else {
                fileInfoDisplay2.textContent = 'No file selected';
                fileInfoDisplay2.style.fontSize = '12px';
                fileInfoDisplay2.style.fontWeight = '500';
                fileInfoDisplay2.style.color = '#737B8B';
            }
        }

        const dropContainer2 = document.getElementById('drop-container2');
        stamp_upload.addEventListener('dragover', function (e) {
            e.preventDefault();
            e.stopPropagation();
            // console.log('dragover');
        })
        stamp_upload.addEventListener('drop', function (e) {
            e.preventDefault();
            e.stopPropagation();
            file_Input.files = e.dataTransfer.files;
            // console.log(file_Input.files);
            fileUpload();
        })

        clear_stamp.addEventListener('click', () => {
            file_Input.value = '';
            fileInfoDisplay2.textContent = 'No file selected';
            document.getElementById('drop-container2').classList.remove('hidden');
            fileInfoDisplay2.style.fontSize = '12px';
            fileInfoDisplay2.style.fontWeight = '500';
            fileInfoDisplay2.style.color = '#737B8B';

        })

        signbtn.addEventListener('click', function () {
            // Popup.style.display = 'block';
            myModal.show();

            signaturebtn.classList.remove('text-primary');
            signaturebtn.classList.remove('bd_bottom');
            stampbtn.classList.remove('text-primary');
            stampbtn.classList.remove('bd_bottom');
            stampbtn.classList.add('hidden');
            create_sign_btn.classList.remove('text-primary');
            create_sign_btn.classList.remove('bd_bottom');
            signbtn.classList.add('text-primary');
            signbtn.classList.toggle('bd_bottom');
            stamp_upload.classList.add('hidden');
            signature_pad_container.classList.add('hidden');
            create_sign_container.classList.add('hidden');
            sign_images.classList.add('hidden');
            stamp_images.classList.add('hidden');
            sign_upload_container.classList.remove('hidden');
            btn_group4.classList.add('hidden');
            sign_upload_container.classList.add('upload_display');
            btn_group3.classList.remove('hidden');

        })

        signaturebtn.addEventListener('click', function () {
            // Popup.style.display = 'block';
            myModal.show();
            stampbtn.classList.remove('text-primary');
            stampbtn.classList.remove('bd_bottom');
            signbtn.classList.remove('text-primary');
            signbtn.classList.remove('bd_bottom');
            create_sign_btn.classList.remove('text-primary');
            create_sign_btn.classList.remove('bd_bottom');
            signaturebtn.classList.add('text-primary');
            signaturebtn.classList.toggle('bd_bottom');
            sign_upload_container.classList.add('hidden');
            stamp_upload.classList.add('hidden');
            sign_images.classList.add('hidden');
            stamp_images.classList.add('hidden');
            btn_group4.classList.add('hidden');
            btn_group3.classList.add('hidden');
            create_sign_container.classList.add('hidden');
            signature_pad_container.classList.remove('hidden');

        })

        create_sign_btn.addEventListener('click', function () {
            // Popup.style.display = 'block';
            myModal.show();
            stampbtn.classList.remove('text-primary');
            stampbtn.classList.remove('bd_bottom');
            signbtn.classList.remove('text-primary');
            signbtn.classList.remove('bd_bottom');
            signaturebtn.classList.remove('text-primary');
            signaturebtn.classList.remove('bd_bottom');
            sign_upload_container.classList.add('hidden');
            stamp_upload.classList.add('hidden');
            sign_images.classList.add('hidden');
            stamp_images.classList.add('hidden');
            btn_group4.classList.add('hidden');
            btn_group3.classList.add('hidden');
            signature_pad_container.classList.add('hidden');
            create_sign_btn.classList.add('text-primary');
            create_sign_btn.classList.toggle('bd_bottom');
            create_sign_container.classList.remove('hidden')
        })


        stampbtn.addEventListener('click', function () {
            // Popup.style.display = 'block';
            myModal.show();
            signaturebtn.classList.add('hidden');
            signbtn.classList.add('hidden');
            stampbtn.classList.add('text-primary');
            create_sign_btn.classList.add('hidden');
            create_sign_btn.classList.remove('bd_bottom');
            stampbtn.classList.toggle('bd_bottom');
            signature_pad_container.classList.add('hidden');
            sign_upload_container.classList.add('hidden');
            sign_images.classList.add('hidden');
            stamp_images.classList.add('hidden');
            btn_group3.classList.add('hidden');
            create_sign_container.classList.add('hidden');
            stamp_upload.classList.remove('hidden');
            stamp_upload.classList.add('upload_display');
            btn_group4.classList.remove('hidden');
        })



        clear_stamp.addEventListener('click', function () {

            document.getElementById('file_Input').value = '';  // clear file input
            document.getElementById('file_info').textContent = 'No file selected';  // reset file info text
        });

        pdfjsLib.getDocument(doc_url).promise.then(function (pdfDoc_) {
            pdf_doc = pdfDoc_;
            for (let num = 1; num <= pdf_doc.numPages; num++) {
                renderPage(num);
            }
        });

        function renderPage(num) {
            pdf_doc.getPage(num).then((page) => {
                const viewport = page.getViewport({ scale: getScale() });
                const canvas = document.createElement('canvas');


                // Adjust canvas dimensions for high DPI (improves quality)
                canvas.width = viewport.width
                canvas.height = viewport.height


                // Apply higher scale to context for high DPI rendering


                canvas.className = 'pdfcanvas';
                const ctx = canvas.getContext('2d');

                pdfcontainer.appendChild(canvas);

                function getScale() {
                    if (window.innerWidth <= 768) {
                        // Mobile and tablet (scale = 0.5)

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


                page.render(renderCtx).promise.then(() => {
                    renderedPages[num - 1] = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    function openSignPosition() {
                        if (currentSignIndex >= jsonObject.length) {
                            // Index is out of bounds, so hide the Popup and show the Finish button
                            finish_btn.style.display = 'block';
                            finish_btn2.style.display = 'block';
                            ready.style.display = 'block';
                            sign_next.style.display = 'none';
                            myModal.hide();
                            // Popup.style.display = 'none';
                            sign_completed.textContent = "All signature done !!"
                            return;
                        }

                        const position = jsonObject[currentSignIndex];

                        if (position.added && position.type === 'signature') {
                            currentSignIndex++;
                            openSignPosition(); // Recursively call to move to the next position
                        } else if (position.type === 'signature') {
                            // Popup.style.display = 'block';
                            myModal.show();
                            signbtn.classList.remove('hidden');
                            signbtn.classList.remove('text-primary');
                            signbtn.classList.remove('bd_bottom');
                            create_sign_btn.classList.remove('text-primary');
                            create_sign_btn.classList.remove('bd_bottom');
                            create_sign_btn.classList.remove('hidden');
                            create_sign_container.classList.add('hidden');
                            sign_upload_container.classList.add('hidden');
                            stampbtn.classList.add('hidden');
                            stamp_upload.classList.add('hidden');
                            stamp_images.classList.add('hidden');
                            btn_group4.classList.add('hidden');
                            btn_group3.classList.add('hidden');
                            signaturebtn.classList.remove('hidden');
                            stampbtn.classList.remove('bd_bottom');
                            if (sign_json.length > 0) {
                                signature_pad_container.classList.add('hidden');
                                sign_images.classList.remove('hidden');
                                signaturebtn.classList.remove('text-primary');
                                signaturebtn.classList.remove('bd_bottom');
                            } else {
                                signature_pad_container.classList.remove('hidden');
                                sign_images.classList.add('hidden');
                                signaturebtn.classList.toggle('bd_bottom');
                                signaturebtn.classList.add('text-primary');
                            }
                        } else {
                            currentSignIndex++;
                            openSignPosition(); // Recursively call to move to the next position
                        }
                    }
                    sign_next.addEventListener('click', function () {
                        canvasClick = false;
                        // console.log("sign click");

                        if (currentSignIndex < jsonObject.length) {

                            openSignPosition();

                        } else {
                            finish_btn.style.display = 'block';
                            finish_btn2.style.display = 'block';
                            ready.style.display = 'block';
                            sign_next.style.display = 'none';
                            myModal.hide();
                            // Popup.style.display = 'none';
                            sign_completed.textContent = "All signature done !!"
                        }
                    });
                    function openStampPosition() {
                        if (currentStampIndex >= jsonObject.length) {
                            // Index is out of bounds, so hide the Popup and show the Finish button
                            finish_btn.style.display = 'block';
                            finish_btn2.style.display = 'block';
                            ready.style.display = 'block';
                            stamp_next.style.display = 'none';
                            myModal.hide();
                            // Popup.style.display = 'none';
                            sign_completed.textContent = "All stamp are done !!"
                            return;
                        }
                        const position = jsonObject[currentStampIndex];
                        if (position.added && position.type === 'stamp') {
                            currentStampIndex++;
                            if (currentStampIndex < jsonObject.length) {
                                openStampPosition();
                            } else {
                                finish_btn.style.display = 'block';
                                finish_btn2.style.display = 'block';
                                ready.style.display = 'block';
                                stamp_next.style.display = 'none';
                                myModal.hide();
                                // Popup.style.display = 'none';
                                sign_completed.textContent = "All stamp are done !!"
                            }
                        } else {


                            if (position.type === 'stamp') {
                                // Popup.style.display = 'block';
                                myModal.show();
                                signaturebtn.classList.add('hidden');
                                signbtn.classList.add('hidden');
                                create_sign_btn.classList.add('hidden');
                                signature_pad_container.classList.add('hidden');
                                sign_upload_container.classList.add('hidden');
                                create_sign_container.classList.add('hidden');
                                sign_images.classList.add('hidden');
                                btn_group3.classList.add('hidden');
                                stamp_upload.classList.add('upload_display');
                                stampbtn.classList.add('text-primary');
                                stampbtn.classList.add('bd_bottom');
                                stampbtn.classList.remove('hidden');
                                if (stamp_json.length > 0) {
                                    stamp_upload.classList.add('hidden');
                                    btn_group4.classList.add('hidden');
                                    stamp_images.classList.remove('hidden');
                                } else {
                                    stamp_upload.classList.remove('hidden');
                                    btn_group4.classList.remove('hidden');
                                    stamp_images.classList.add('hidden');
                                }




                            } else {
                                // console.log(currentStampIndex);
                                currentStampIndex++;
                                // console.log(currentStampIndex);
                                openStampPosition();
                            }
                        }
                    }

                    nameInput.addEventListener('change', () => {
                        const name = document.getElementById('nameInput').value;

                        // Update all signature styles with the entered name
                        document.getElementById('signature1').textContent = name;
                        document.getElementById('signature2').textContent = name;
                        document.getElementById('signature3').textContent = name;
                        document.getElementById('signature4').textContent = name;
                    })
                    create_sign_container.querySelectorAll('p').forEach(item => {
                        item.addEventListener('click', (event) => {
                            // console.log(event);
                            text = event.target.innerHTML;
                            const position = jsonObject[currentSignIndex];
                            if (num === position.page && position.type === 'signature' && position.added === false) {
                                const computedStyle = window.getComputedStyle(event.target);
                                // ctx.globalCompositeOperation = 'destination-out';  // Clears with transparency
                                ctx.fillStyle = "white";
                                ctx.fillRect(position.x, position.y, position.width, position.height);  // Clear the rect
                                // ctx.restore();  // Restore the previous state
                                const fontFamily = computedStyle.fontFamily;  // e.g., "Pacifico"
                                const fontStyle = computedStyle.fontStyle;  // e.g., "italic"
                                const fontWeight = computedStyle.fontWeight;  //
                                const font = `${fontStyle} ${fontWeight} 25px ${fontFamily}`;
                                ctx.font = font;
                                ctx.fillStyle = "black";
                                // Save the current canvas state



                                // Draw the signature text
                                ctx.fillText(text, position.x, position.y + position.height / 2);
                                ctx.save();
                                // Hide the modal (if using Bootstrap modal)
                                myModal.hide();
                            }
                        });
                    });

                    stamp_next.addEventListener('click', function () {
                        canvasClick = false;
                        if (currentStampIndex < jsonObject.length) {
                            openStampPosition();

                        } else {
                            finish_btn.style.display = 'block';
                            finish_btn2.style.display = 'block';
                            ready.style.display = 'block';
                            stamp_next.style.display = 'none';
                            // Popup.style.display = 'none';
                            myModal.hide();
                            sign_completed.textContent = "All stamp are done !!"
                        }
                    });
                    document.getElementById('save_stamp').addEventListener('click', function (e) {
                        e.preventDefault();
                        console.log('next stamp save');
                        const input_file = document.getElementById('file_Input');
                        const img = new Image();
                        const file = input_file.files[0];
                        const position = jsonObject[currentStampIndex];

                        console.log(position);
                        if (file) {

                            img.src = URL.createObjectURL(file);

                            if (num === position.page && position.type === 'stamp' && !position.added) {

                                uploadStamp();
                                if (!canvasClick) {
                                    img.onload = async function () {

                                        ctx.fillStyle = "white";
                                        ctx.fillRect(position.x, position.y, position.width, position.height);
                                        ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                        position.added = true; // Update position status
                                        // Popup.style.display = 'none';
                                        images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                        myModal.hide();
                                        if (currentStampIndex < jsonObject.length - 1) {

                                        }
                                    };
                                }

                            };
                        }
                    });
                    document.getElementById('save_signature').addEventListener('click', function (e) {
                        e.preventDefault();
                        if (!signature_pad.isEmpty()) {
                            signatureDataURL = signature_pad.toDataURL();

                        } else {
                            signatureDataURL = signaturepad2.toDataURL();

                        }

                        const img = new Image();
                        img.src = signatureDataURL;

                        const position = jsonObject[currentSignIndex];
                        console.log(position);
                        if (num === position.page && position.type === 'signature' && !position.added) {
                            console.log(position)
                            saveSignature(signatureDataURL);
                            if (!canvasClick) {
                                img.onload = async function () {

                                    ctx.fillStyle = "white";
                                    ctx.fillRect(position.x, position.y, position.width, position.height);
                                    ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                    position.added = true; // Update position status
                                    // console.log(jsonObject);
                                    // Popup.style.display = 'none';
                                    images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                    myModal.hide();
                                    signature_pad_container.classList.add('hidden');

                                };
                            }

                        };
                    });


                    upload_sign.addEventListener('click', function (e) {
                        // console.log('upload1 sign');
                        e.preventDefault();
                        const input_file = document.getElementById('sign_Input');
                        const img = new Image();
                        const file = input_file.files[0];
                        const position = jsonObject[currentSignIndex];

                        if (file) {
                            if (num === position.page && position.type === 'signature' && !position.added) {
                                uploadSignature()
                                img.src = URL.createObjectURL(file);
                                // console.log(signImage);

                                if (!canvasClick) {
                                    img.onload = async function () {

                                        ctx.fillStyle = "white";
                                        ctx.fillRect(position.x, position.y, position.width, position.height);
                                        ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                        position.added = true; // Update position status
                                        images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                        sign_upload_container.classList.add('hidden');
                                        // Popup.style.display = 'none';
                                        myModal.hide();

                                    };
                                }

                            };
                        }
                    });
                    sign_images.addEventListener('click', (event) => {
                        const img_src = event.target.src;

                        if (img_src) {
                            const img = new Image();
                            img.src = img_src;
                            // console.log(img);

                            const position = jsonObject[currentSignIndex];
                            if (position.page === num && position.type === 'signature' && !position.added) {
                                if (!canvasClick) {
                                    img.onload = function () {
                                        console.log(img);
                                        ctx.fillStyle = "white";
                                        ctx.fillRect(position.x, position.y, position.width, position.height);
                                        ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                        position.added = true; // Update position status
                                        // console.log(jsonObject);
                                        // Popup.style.display = 'none';
                                        images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                        myModal.hide();
                                    };
                                }

                            }
                        }
                    });
                    // Attach a single event listener to the parent element
                    stamp_images.addEventListener('click', (event) => {
                        const img_src = event.target.src;

                        if (img_src) {
                            const img = new Image();
                            img.src = img_src;
                            console.log(img);

                            const position = jsonObject[currentStampIndex];
                            if (position.page === num && position.type === 'stamp' && !position.added) {
                                if (!canvasClick) {
                                    img.onload = function () {
                                        // console.log(img);
                                        ctx.fillStyle = "white";
                                        ctx.fillRect(position.x, position.y, position.width, position.height);
                                        ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                        position.added = true; // Update position status
                                        // console.log(jsonObject);
                                        // Popup.style.display = 'none';
                                        images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                        myModal.hide();
                                    };
                                }

                            }
                        }
                    });


                    canvas.addEventListener('click', function (event) {
                        canvasClick = true;
                        if (dragging) {
                            dragging = false;
                            return;
                        }
                        const rect = canvas.getBoundingClientRect();
                        const x = event.clientX - rect.left;
                        const y = event.clientY - rect.top;
                        // console.log(x - 100, y - 20);
                        // Find the closest position in the positions array
                        const position = jsonObject.find(pos => {
                            return (x - 100) >= (pos.x - 50) && (x - 100) <= (pos.x + 50) &&
                                (y - 20) >= (pos.y - 50) && (y - 20) <= (pos.y + 50) && !pos.added;
                        });
                        // console.log(position);
                        if (position) {
                            // Popup.style.display = 'block';
                            myModal.show();
                            if (position.type === 'signature') {

                                signaturebtn.classList.remove('hidden');
                                signbtn.classList.remove('hidden');
                                signbtn.classList.remove('text-primary');
                                signbtn.classList.remove('bd_bottom');
                                create_sign_btn.classList.remove('hidden');
                                create_sign_btn.classList.remove('text-primary');
                                create_sign_btn.classList.remove('bd_bottom');
                                stampbtn.classList.add('hidden');
                                create_sign_container.classList.add('hidden');
                                sign_upload_container.classList.add('hidden');
                                stamp_upload.classList.add('hidden');
                                stamp_images.classList.add('hidden');
                                btn_group4.classList.add('hidden');
                                btn_group3.classList.add('hidden');
                                if (sign_json.length > 0) {
                                    signature_pad_container.classList.add('hidden');
                                    sign_images.classList.remove('hidden');
                                    signaturebtn.classList.remove('text-primary');
                                    signaturebtn.classList.remove('bd_bottom');
                                } else {
                                    signature_pad_container.classList.remove('hidden');
                                    sign_images.classList.add('hidden');
                                    signaturebtn.classList.add('text-primary');
                                    signaturebtn.classList.add('bd_bottom');
                                }

                            }
                            else if (position.type === 'stamp') {
                                signature_pad_container.classList.add('hidden');
                                create_sign_container.classList.add('hidden');
                                sign_upload_container.classList.add('hidden');
                                sign_images.classList.add('hidden');
                                signaturebtn.classList.add('hidden');
                                signbtn.classList.add('hidden');
                                create_sign_btn.classList.add('hidden');
                                stampbtn.classList.remove('hidden');
                                stampbtn.classList.add('bd_bottom');
                                stampbtn.classList.add('text-primary');
                                btn_group3.classList.add('hidden');
                                if (stamp_json.length > 0) {
                                    btn_group4.classList.add('hidden');
                                    stamp_upload.classList.add('hidden');
                                    stamp_images.classList.remove('hidden');
                                } else {
                                    btn_group4.classList.remove('hidden');
                                    stamp_upload.classList.remove('hidden');
                                    stamp_upload.classList.add('upload_display');
                                    stamp_images.classList.add('hidden');
                                }

                            }

                            nameInput.addEventListener('change', () => {
                                const name = document.getElementById('nameInput').value;

                                // Update all signature styles with the entered name
                                document.getElementById('signature1').textContent = name;
                                document.getElementById('signature2').textContent = name;
                                document.getElementById('signature3').textContent = name;
                                document.getElementById('signature4').textContent = name;
                            })
                            create_sign_container.querySelectorAll('p').forEach(item => {
                                item.addEventListener('click', (event) => {
                                    // console.log(event);
                                    if (position.page === num && position.type === 'signature' && !position.added) {
                                        text = event.target.innerHTML;
                                        ctx.fillStyle = "white";
                                        ctx.fillRect(position.x, position.y, position.width, position.height);
                                        const computedStyle = window.getComputedStyle(event.target);

                                        const fontFamily = computedStyle.fontFamily;  // e.g., "Pacifico"
                                        const fontStyle = computedStyle.fontStyle;  // e.g., "italic"
                                        const fontWeight = computedStyle.fontWeight;  //
                                        const font = `${fontStyle} ${fontWeight} 25px ${fontFamily}`;
                                        ctx.font = font;
                                        ctx.fillStyle = "black";

                                        ctx.fillText(text, position.x, position.y + position.height / 2);
                                        myModal.hide();
                                    };
                                });
                            });

                            sign_images.querySelectorAll('li').forEach(item => {
                                // console.log(item);
                                item.addEventListener('click', (event) => {
                                    // console.log(event);
                                    const img_src = event.target.src;
                                    // console.log(imageType);
                                    const img = new Image();
                                    img.src = img_src;
                                    // console.log(img);
                                    if (position.page === num && position.type === 'signature' && !position.added) {

                                        img.onload = function () {
                                            // console.log(img);
                                            ctx.fillStyle = "white";
                                            ctx.fillRect(position.x, position.y, position.width, position.height);
                                            ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                            position.added = true; // Update position status
                                            // console.log(jsonObject);
                                            // Popup.style.display = 'none';
                                            images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                            myModal.hide();
                                            finish_btn.style.display = 'block';
                                            finish_btn2.style.display = 'block';
                                            ready.style.display = 'block';
                                        };
                                    };
                                });
                            });

                            stamp_images.querySelectorAll('li').forEach(item => {
                                // console.log("call");
                                item.addEventListener('click', (event) => {
                                    // console.log('click');
                                    const img_src = event.target.src;
                                    // console.log(imageType);
                                    const img = new Image();
                                    img.src = img_src;
                                    // console.log(img);

                                    if (position.page === num && position.type === 'stamp' && !position.added) {
                                        img.onload = function () {
                                            // console.log(img);
                                            ctx.fillStyle = "white";
                                            ctx.fillRect(position.x, position.y, position.width, position.height);
                                            ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                            position.added = true; // Update position status
                                            // console.log(jsonObject);
                                            // Popup.style.display = 'none';
                                            images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                            myModal.hide();
                                            finish_btn.style.display = 'block';
                                            finish_btn2.style.display = 'block';
                                            ready.style.display = 'block';
                                        };
                                    }


                                });
                            });
                            upload_sign.onclick = async (e) => {
                                // console.log('upload2 sign');
                                e.preventDefault();
                                const input_file = document.getElementById('sign_Input');
                                const img = new Image();
                                const file = input_file.files[0];

                                if (file) {
                                    if (num === position.page && position.type === 'signature' && !position.added) {
                                        uploadSignature();
                                        img.src = URL.createObjectURL(file);


                                        img.onload = async function () {

                                            ctx.fillStyle = "white";
                                            ctx.fillRect(position.x, position.y, position.width, position.height);
                                            ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                            position.added = true; // Update position status

                                            sign_upload_container.classList.add('hidden');
                                            images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                            myModal.hide();
                                            finish_btn.style.display = 'block';
                                            finish_btn2.style.display = 'block';
                                            ready.style.display = 'block';
                                        };
                                    };
                                }
                            };
                            document.getElementById('save_signature').onclick = async (e) => {
                                e.preventDefault();
                                if (!signature_pad.isEmpty()) {
                                    signatureDataURL = signature_pad.toDataURL();

                                } else {
                                    signatureDataURL = signaturepad2.toDataURL();

                                }
                                const img = new Image();
                                img.src = signatureDataURL;
                                if (num === position.page && position.type === 'signature' && !position.added) {

                                    saveSignature();
                                    img.onload = async function () {
                                        ctx.fillStyle = "white";
                                        ctx.fillRect(position.x, position.y, position.width, position.height);
                                        ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                        position.added = true; // Update position status
                                        // console.log(jsonObject);
                                        images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                        myModal.hide();
                                    }
                                };
                            };

                            document.getElementById('save_stamp').onclick = async (e) => {
                                console.log('canvas click stamp');
                                e.preventDefault();
                                const input_file = document.getElementById('file_Input');
                                const img = new Image();
                                const file = input_file.files[0];
                                if (file) {
                                    img.src = URL.createObjectURL(file);
                                    if (num === position.page && position.type === 'stamp' && !position.added) {
                                        uploadStamp();

                                        img.onload = async function () {
                                            ctx.fillStyle = "white";
                                            ctx.fillRect(position.x, position.y, position.width, position.height);
                                            ctx.drawImage(img, position.x, position.y, position.width, position.height);
                                            position.added = true; // Update position status
                                            images.push({ img: img, x: position.x, y: position.y, width: 200, height: 50, page: num });
                                            myModal.hide();

                                            finish_btn.style.display = 'block';
                                            finish_btn2.style.display = 'block';
                                            ready.style.display = 'block';
                                        }
                                    };
                                }
                            };
                        }

                    });

                    // 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;
                                selectedImage2 = { ...image }; // Shallow copy for the current use case
                                images.splice(i, 1);  // Remove the selected image from the array

                                break;
                            }
                            // console.log('image didnt click');
                        }
                        dragging = false;
                    });

                    canvas.addEventListener('mousemove', (event) => {
                        if (draggable && selectedImage && !isRendering) {
                            isRendering = true;  // Set rendering flag to true
                            dragging = 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);

                            // console.log(selectedImage2);
                            ctx.fillStyle = "white";
                            ctx.fillRect(selectedImage2.x, selectedImage2.y, selectedImage2.width, selectedImage2.height);
                            // Draw all images
                            for (const image of images) {
                                if (image.page === num) {
                                    // console.log(image);
                                    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);
                            // console.log(selectedImage);
                            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;
                        }
                    });
                    

                    finish_btn.onclick = async (e) => {
                        // console.log("click");

                        const canvases = document.getElementsByClassName('pdfcanvas');
                        const pdf_doc = await PDFLib.PDFDocument.create();
                        let allAdded = true;
                        // Check each position and add "Required" text if not filled
                        jsonObject.forEach(pos => {
                            if (!pos.added) {
                                const ctx = canvas.getContext('2d');
                                ctx.font = "20px Arial";
                                ctx.fillStyle = "red";
                                ctx.fillText(`${pos.type} required`, pos.x, pos.y + 20);
                                allAdded = false;
                            }
                        });

                        if (!allAdded) {
                            alert("Please fill in all required signatures and stamps.");
                            return; // Stop execution if not all positions are filled
                        }
                        sign_completed.textContent = "";
                        saving.style.display = 'block';
                        for (let i = 0; i < canvases.length; i++) {
                            const canvas = canvases[i];
                            const pngDataUrl = canvas.toDataURL('image/png');
                            const pngImage = await pdf_doc.embedPng(pngDataUrl);
                            const page = pdf_doc.addPage([canvas.width, canvas.height]);
                            page.drawImage(pngImage, {
                                x: 0,
                                y: 0,
                                width: canvas.width,
                                height: canvas.height,
                            });


                        }

                        const pdfBytes = await pdf_doc.save();
                        saveUpdatedPDF(pdfBytes);
                        finish_btn.style.display = 'none';
                        ready.style.display = 'none';
                    };

                    finish_btn2.onclick = async (e) => {
                        // console.log("click");

                        const canvases = document.getElementsByClassName('pdfcanvas');
                        const pdf_doc = await PDFLib.PDFDocument.create();
                        let allAdded = true;
                        // Check each position and add "Required" text if not filled
                        jsonObject.forEach(pos => {
                            if (!pos.added) {
                                const ctx = canvas.getContext('2d');
                                ctx.font = "20px Arial";
                                ctx.fillStyle = "red";
                                ctx.fillText(`${pos.type} required`, pos.x, pos.y + 20);
                                allAdded = false;
                            }
                        });

                        if (!allAdded) {
                            alert("Please fill in all required signatures and stamps.");
                            return; // Stop execution if not all positions are filled
                        }
                        sign_completed.textContent = "";
                        saving.style.display = 'block';
                        for (let i = 0; i < canvases.length; i++) {
                            const canvas = canvases[i];
                            const pngDataUrl = canvas.toDataURL('image/png');
                            const pngImage = await pdf_doc.embedPng(pngDataUrl);
                            const page = pdf_doc.addPage([canvas.width, canvas.height]);
                            page.drawImage(pngImage, {
                                x: 0,
                                y: 0,
                                width: canvas.width,
                                height: canvas.height,
                            });


                        }

                        const pdfBytes = await pdf_doc.save();
                        saveUpdatedPDF(pdfBytes);
                        finish_btn.style.display = 'none';
                        finish_btn2.style.display = 'none';
                        ready.style.display = 'none';
                    };
                });
            });
        }

        document.getElementById('clear_signature').addEventListener('click', function (e) {
            e.preventDefault();
            signature_pad.clear();
        });

        csrf_token = document.querySelector('input[name="csrfmiddlewaretoken"]');
        function saveSignature(dataURL) {
            console.log('call')
            fetch('/add-signature/draw', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrf_token.value
                },
                body: JSON.stringify({ image: dataURL })
            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log("sign added");
                    } else {
                        alert("Failed to save signature.");
                    }
                });
        }
        function uploadSignature() {
            // console.log('call')
            const fileInput = document.getElementById('sign_Input');
            console.log(fileInput.files[0]);
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            // console.log(formData);
            fetch('/add-signature/upload', {
                method: 'POST',
                headers: {

                    'X-CSRFToken': csrf_token.value,
                    'X-Is-Ajax': 'true',
                },
                body: formData

            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log("sign added");
                    } else {
                        alert("Failed to save signature.");
                    }
                });
        }

        function uploadStamp() {
            // console.log('call')
            const fileInput = document.getElementById('file_Input');
            console.log(fileInput.files[0]);
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            console.log(formData);
            fetch('/upload-stamp', {
                method: 'POST',
                body: formData,
                headers: {

                    'X-CSRFToken': csrf_token.value
                },

            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log("sign added");
                    } else {
                        alert("Failed to save signature.");
                    }
                });
        }
        function saveUpdatedPDF(pdfBytes) {
            const formData = new FormData();
            const blob = new Blob([pdfBytes], { type: 'application/pdf' });

            formData.append('pdf', blob);

            fetch('', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': csrf_token.value
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        saving.style.display = 'none';
                        window.location.href = `https://dev.arushhr.com/signature-done/${data.id}`;

                    } else {
                        alert(data.message);
                    }
                });
        }







        window.addEventListener('click', (event) => {
            if (event.target == Popup) {
                // Popup.style.display = 'none';
                myModal.hide();
                signature_pad_container.classList.add('hidden');
                stamp_upload.classList.add('hidden');
            }
        });
        document.getElementById('chat-submit').addEventListener('click', function () {
            const question = document.getElementById('chat-input').value;
            console.log(question);
            if (question.trim() === '') return;

            // Append the user's question to the chatbox
            const chatboxMessages = document.getElementById('chatbox-messages');
            chatboxMessages.innerHTML += `<p><strong>You:</strong> ${question}</p>`;
            document.getElementById('chat-input').value = '';
            csrf_token = document.querySelector('input[name="csrfmiddlewaretoken"]');
            const doc_id = '{{document.id}}'
            console.log(doc_id);
            const formdata = new FormData();
            formdata.append('question', question);
            formdata.append('doc_id', doc_id);
            console.log(formdata);
            // Send the question to the server
            fetch('/chatbot', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: formdata,
                headers: {
                    'X-CSRFToken': csrf_token.value
                }
            })
                .then(response => response.json())
                .then(data => {
                    const answer = data.answer;
                    // Append the AI's answer to the chatbox
                    chatboxMessages.innerHTML += `<p><strong>AI:</strong> ${answer}</p>`;
                    chatboxMessages.scrollTop = chatboxMessages.scrollHeight;
                })
                .catch(error => {
                    console.error('Error:', error);
                    chatboxMessages.innerHTML += `<p><strong>AI:</strong> Sorry, something went wrong.</p>`;
                    chatboxMessages.scrollTop = chatboxMessages.scrollHeight;
                });
        });

    });

</script>


</div>
{% endblock %}