{% extends 'myapp/profile_base.html' %}

{% block content %}

<div class="content-wrapper">
    <!-- Content Header (Page header) -->

    <section class="content">
        <div class="container">
            <div class="add_signature_container px-3 pt-2 mr-2">
                <section class="row py-2">
                    <section class="col col-sm-8 offset-sm-2">
    
                        {% if messages %}
                        {% for message in messages %}
                        <div {% if message.tags %} class="{{ message.tags}}" {% endif %}>
                            {{ message }}
                            <button type="button" class="Close" id="close" data-bs-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        {% endfor %}
                        {% endif %}
    
                    </section>
                </section>
                <h3 class="agreements_heading2">{{title}}</h3>
                <section class="row">
                    <div class="buttons mb-2 py-2">
                        <a href="{% url 'add_signature' %}" class="d-inline-block draw_btn">DRAW</a>
                        <a href="{% url 'upload_signature' %}" class="d-inline-block mx-5">UPLOAD</a>
                    </div>
                </section>

                <form method="post">
                    {% csrf_token %}
                    <canvas id="signature-pad" class="pad2 mt-2" width="940px" height="364px"></canvas>
                    <canvas id="signature-pad-small" class="pad1" width="310px" height="165px"></canvas>
                    <!-- <canvas id="signature-pad-medium" class="pad3" width="550%" height="364px"></canvas> -->
                    <input type="hidden" name="signature" id="signature-input">
                    <div class="form-row mt-2">
                        <div class="form-column-full text-center py-3">
                            <button type="button" id="clear"><i
                                    class="fa-regular fa-circle-xmark p-2"></i>Cancel</button>
                            <button type="button" id="save" class="btn btn-primary mx-2"><i
                                    class="fa-solid fa-rotate-right px-2"></i>Submit</button>
                        </div>
                    </div>
                </form>


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

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

        </div>
    </footer>


</div>
</section>
</div>
{% endblock %}
{% block script %}
<script>
    console.log('call')
    document.addEventListener('DOMContentLoaded', function () {
        const canvas1 = document.getElementById("signature-pad");
        const signaturepad = new SignaturePad(canvas1,{
        minWidth: 1.0,
        maxWidth: 2.0,
        penColor: "black"
    });
        const clearButton = document.getElementById("clear");
        const saveButton = document.getElementById("save");
        const canvas2 = document.getElementById("signature-pad-small");
        const signaturepad2 = new SignaturePad(canvas2,{
        minWidth: 0.5,
        maxWidth: 1.5,
        penColor: "black"
    });



        var csrfTokenInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
        var csrfToken = csrfTokenInput.value;

        clearButton.addEventListener("click", () => {
            console.log('click');
            const ctx = canvas1.getContext('2d');
            if (!signaturepad.isEmpty()) {
                signaturepad.clear();
            }else if(!signaturepad2.isEmpty()){
                signaturepad2.clear();
            }
        });


        saveButton.addEventListener("click", () => {
            console.log('call')
            if (!signaturepad.isEmpty()) {
                const dataURL = signaturepad.toDataURL();

                saveSignature(dataURL)
            }else if(!signaturepad2.isEmpty()){
                const dataURL = signaturepad2.toDataURL();
                saveSignature(dataURL)
            }else {
                alert("Please Provide a signature first")
            }
            // signatureInput.value = dataURL;
        });

        function saveSignature(dataURL) {
            console.log('call')
            fetch('/add-signature/draw', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({ image: dataURL })
            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.href = 'https://dev.arushhr.com/signatures';
                    } else {
                        alert("Failed to save signature.");
                    }
                });
        }
    })


</script>
{% endblock %}