{% 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">

            <div class="row my-2">
                <div class="col-sm-12 col-lg-12" 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><!-- /.container-fluid -->
    </div>
    <section class="content">
        <div class="container">


            <section class="row mt-2">

                <section class="col-lg-12 col-md-12 col-sm-12 text-center">
                    <div class="pdf-container" id="pdf-container">

                        <img id="doc-pdf" data-id="{{document.id}}" 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>
                <div class="modal fade" id="popup_modal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalCenterTitle" aria-hidden="false">
                    <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" class="text-primary">Signature</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="500px" height="377px"></canvas>
                                    <canvas id="signature-pad-small" class="pad1" width="310px" height="165px"></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="stampUpload" class="text-center hidden">


                                    
                                    <label for="fileInput" 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="fileInput" name="file" class="file"
                                            accept=".pdf, .docx, .doc" maxlength="3.1mb">
                                    </label>
                                    <div class="file-info-container">
                                        <p id="file-info" class="mt-1">No file selected</p>
                                        <button type="button" class="hidden" id="cancel_btn"><i
                                                class="fa-solid fa-xmark pb-4"></i></button>
                                    </div>
                                </div>
                                <button class="btn btn-primary text-center mt-2 hidden" id="save-stamp">Add
                                    Stamp</button>
                                <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"
                                        oninput="generateSignatures()"/>

                                    <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 id="sign_images" class="hidden">
                                    <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>

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

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

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

        </div>
    </footer>


</div>
</section>

<script>

</script>

</div>
{% endblock %}

{% block script %}
<script>
    window.contextData = JSON.parse('{{ signatures_json|safe|escapejs }}');
    window.stampData = JSON.parse('{{ stamp_json|safe|escapejs }}');
</script>
<script type="text/javascript" src="{% static 'js/index.js' %}"></script>

{% endblock %}